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

{% block content %}

<h2>Overview</h2>



<p>
TODO
</p>

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

{% endblock %}


{% block styles %}
  <style>
    .axis path, .axis line {
      fill: none;
      stroke: black;
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }
    path.line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1px;
    }
    path.orbit {
      fill: none;
      stroke: steelblue;
      stroke-width: 2px;
    }
  </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");
  var $orbits = $("#orbits");

  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(10);

    // 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 (width < 600) { xAxis.ticks(3); }

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

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


  };

  var plotOrbits = function(data, options) {
    console.log("Init orbits with data", data, options);

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

    // INIT SCALES
    var extremum = 1.11 * d3.max(data, function (d) {
      return Math.max(Math.abs(d.x), Math.abs(d.y));
    });

    xScale = d3.scaleLinear().domain([-1 * extremum, extremum]);
    yScale = d3.scaleLinear().domain([-1 * extremum, extremum]);

    xAxis = d3.axisBottom().ticks(10);
    yAxis = d3.axisLeft().ticks(10);

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

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

    plotWrapper = svg.append('g');

    // Sun
    sun = plotWrapper.append("svg:circle");
    sun.append('svg:title').text("Sol");

    // Orbit
    path = plotWrapper.append('path')
        .datum(data)
        .classed('orbit', true);

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

    width = $orbits.width() - margin.left - margin.right;
    height = width * 1.0;

    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);

    sun.attr("cx", width / 2).attr("cy", height / 2).attr("r", 17).style("fill", "yellow");

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

    //if (width < 600) { xAxis.ticks(3); }

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

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


  };

  return {
    plotTimeSeries: plotTimeSeries,
    plotOrbits: plotOrbits
  };
})(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'], {});
  });
  d3.csv("{{ url_for('get_astral_coordinates_csv') }}", function(csv){
    var data = [];
    csv.forEach(function (d) {
      data.push({x: parseFloat(d['x_hci']), y: parseFloat(d['y_hci'])});
    });
    swApp.plotOrbits(data, {});
  });

});
</script>

{% endblock %}