{% extends 'layout.html.jinja2' %}
{% set menu_section = 'home' %}
{% block title %}Home{% endblock %}

{% block content %}

<h2>Overview</h2>



<p>
TODO
</p>

<section id="time_series"></section>

{% endblock %}


{% block styles %}
  <style>
    path.line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1px;
    }
  </style>
{% endblock %}


{% block scripts_footer %}
<script type="application/javascript" src="{{ static('js/d3.min.js') }}"></script>
<script type="application/javascript">

var swApp = (function (window, d3, $) {

  var $time_series = $("#time_series");

  // fixme
  var plotTimeSeries = function(data, options) {
    console.log("Init time series with data", data, options);

    var xScale, yScale, xAxis, yAxis;
    var line;
    var svg, plotWrapper, path;
    var width, height;
    var margin = {
      top: 30,
      right: 20,
      bottom: 30,
      left: 60
    };

    // INIT SCALES
    xScale = d3.scaleTime().domain(d3.extent(data, function (d) {
      return d.x;
    }));
    yScale = d3.scaleLinear().domain(d3.extent(data, function (d) {
      return d.y;
    }));

    // INIT AXISES
    xAxis = d3.axisBottom()
        .ticks(7, ",f")
        .tickFormat(d3.timeFormat("%Y-%m-%d"));
    yAxis = d3.axisLeft()
        .ticks(15);

    // INIT LINE
    line = d3.line()
        .x(function (d) { return xScale(d.x) })
        .y(function (d) { return yScale(d.y) });

    // INIT SVG
    svg = d3.select('#time_series').append('svg');

    plotWrapper = svg.append('g');

    path = plotWrapper.append('path')
        .datum(data)
        .classed('line', true);

    plotWrapper.append('g')
        .classed('x axis', true);
    plotWrapper.append('g')
        .classed('y axis', true);

    width = $time_series.width() - margin.left - margin.right;
    height = .618 * width;

    xScale.range([0, width]);
    yScale.range([height, 0]);

    svg.attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom);

    plotWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

    path.attr('d', line);

    xAxis.scale(xScale);
    yAxis.scale(yScale);

    // if (window.innerWidth < 800) { xAxis.ticks(3); }

    svg.select('.x.axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(xAxis);

    svg.select('.y.axis')
        .call(yAxis);


  };

  return {
    plotTimeSeries: plotTimeSeries
  };
})(window, d3, jQuery);


jQuery().ready(function($){
  d3.csv("{{ url_for('get_csv') }}", function(csv){
    var timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
    var data = {'pdyn': [], 'magn': []};
    csv.forEach(function (d) {
      data['pdyn'].push({x: timeFormat(d['time']), y: parseFloat(d['pdyn'])});
      data['magn'].push({x: timeFormat(d['time']), y: parseFloat(d['magn'])});
    });
    swApp.plotTimeSeries(data['pdyn'], {});
    swApp.plotTimeSeries(data['magn'], {});
  });
});
</script>

{% endblock %}