{% load i18n %}
{% load l10n %}
{% load static %}

<div class="container-fluid">
  <div class="col-lg-3 col-md-4">
    <h4>{% trans "Legend" %}</h4>
    <div id="graph_legend"></div>
  </div>
  <div class="col-lg-4 col-md-8" style="max-width:25vw;">
    <h4>{% trans "Cumulative Cost Repartition" %}</h4>
    <div id="repartition_cumulated"></div>
  </div>
  <div class="col-lg-5 col-sm-12">
    <h4>{% trans "Cost Per Service Per Hour" %}</h4>
    <div id="cost_progress" style="max-width:100%;"></div>
    <div id="cost_progress_legend"></div>
  </div>
</div>

<script type="text/javascript">
  var data = [
{% for service, data in repartition_data.items %}
    {"label": "{{ service }}",
     "value": {{ data.cumulated|unlocalize }}
    },
{% endfor %}
  ]

  // Pie Chart
  var innerRadius = 75;
  var outerRadius = 150;
  var height = 300;
  var width = 300;

  var colors = d3.scale.category20c();

  var vis = d3.select("#repartition_cumulated")
      .append("svg:svg")              // create the SVG element inside the DOM
      .data([data])                   // associate our data
      .attr("width", "75%")
      .attr("height", "75%")
      .attr("viewBox", "0 0 300 300")
      .append("svg:g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") // move the center of the pie chart from 0, 0 to radius, radius

  var arc = d3.svg.arc() // Creating <path> elements using arc data
      .outerRadius(outerRadius)
      .innerRadius(innerRadius);

  var pie = d3.layout.pie() // Creating arc data for us given a list of values
      .value(function(d) { return d.value; });

  var arcs = vis.selectAll("g.slice")     // Selecting all <g> elements (there are none yet)
      .data(pie)                          // associate data
      .enter()                            // creating a <g> for each element of data
      .append("svg:g")
      .attr("class", "slice");

  arcs.append("svg:path")
      .attr("fill", function(d, i) { return colors(i); } ) // Setting the color of each slice
      .attr("d", arc);                                     // creating the actual svg

  arcs.append("svg:title")                                     //add a label to each slice
      .attr("text-anchor", "middle")                          //center the text on it's origin
      .text(function(d, i) { return data[i].label; });        //get the label from our original data array


  // Legend
  var legendHeight = 20;
  var legendSpace = 5;
  var viewBoxHeight = data.length * (legendHeight + legendSpace);
  console.log('data length', data.length)

  var legend_vis = d3.select("#graph_legend")
      .append("svg:svg")
      .data([data])
      .attr("viewBox", "0 0 250 " + viewBoxHeight)
      .attr("width", "100%")
      .attr("height", "100%")
      .append("svg:g")
      .attr("transform", "translate(0,0)");

  var legend = legend_vis.selectAll("g")
      .data(data)
      .enter()
      .append('g')
      .attr('class', 'legend')
      .attr('transform', function(d, i) {
        var x = 0;
        var y = i * (legendHeight + legendSpace);
        return 'translate(' + x + ',' + y + ')';
      });

  var legendRectSize = 20;
  var legendSpacing = 5;
  legend.append('rect')
      .attr('width', legendRectSize)
      .attr('height', legendRectSize)
      .style('fill', function(d, i) { return colors(i); })
      .style('stroke', function(d, i) { return colors(i); });

  legend.append('text')
      .attr('x', legendRectSize + legendSpacing)
      .attr('y', legendRectSize - legendSpacing)
      .text(function(d) { return d.label; });
</script>

<script>

  var colors = d3.scale.category20c();
  var graph = new Rickshaw.Graph({
    element: document.querySelector('#cost_progress'),
    interpolation: 'linear',
    unstack: 'true',
    onComplete: function(w) {
      var legend = new Rickshaw.Graph.Legend({
        element: document.querySelector('#cost_progress_legend'),
        graph: w.graph
      });
    },
    series: [
{% for service, data in repartition_data.items %}
      {
        color: colors({{ forloop.counter }} - 1),
        name: "{{ service }}",
        data: [
          {% for timestamp, rating in data.hourly.items %}{x: {{ timestamp }}, y: {{ rating|unlocalize }}},{% endfor %}
        ]
      },
{% endfor %}
    ]
  });
  graph.render();

  var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph
  });

  var yAxis = new Rickshaw.Graph.Axis.Y({
    graph: graph,
  });
  yAxis.render();

  var xAxis = new Rickshaw.Graph.Axis.Time({
    graph: graph
  });
  xAxis.render();
</script>
