{% load i18n %}
{% load l10n %}
{% load static %}
<script src='{% static "cloudkitty/js/d3.min.js" %}' type='text/javascript' charset='utf-8'></script>
<script src='{% static "cloudkitty/js/d3pie.min.js" %}' type='text/javascript' charset='utf-8'></script>
<script src='{% static "cloudkitty/js/rickshaw.min.js" %}' type='text/javascript' charset='utf-8'></script>

<div class="col-md-6">
  <h4>{% trans "Cumulative Cost Repartition" %}</h4>
  <div id="repartition_cumulated"></div>
</div>

<script type="text/javascript">
  var cumulated = new d3pie("repartition_cumulated", {
    "size": {
       "canvasHeight": 300,
       "canvasWidth": 500
    },
    "labels": {
      "outer": {
        "pieDistance": 20
      },
      "inner": {
        "hideWhenLessThanPercentage": 3
      },
      "mainLabel": {
        "fontSize": 11
      },
      "percentage": {
        "color": "#ffffff",
        "decimalPlaces": 0
      },
      "value": {
        "color": "#adadad",
        "fontSize": 11
      },
      "lines": {
        "enabled": true
      }
    },
    "effects": {
      "pullOutSegmentOnClick": {
        "effect": "linear",
        "speed": 400,
        "size": 8
      }
    },
    "misc": {
      "gradient": {
        "enabled": true,
        "percentage": 100
      }
    },
    "data": {
      "sortOrder": "value-desc",
      "content": [
{% for service, data in repartition_data.items %}
        {"label": "{{ service }}",
         "value": {{ data.cumulated|unlocalize }}
        },
{% endfor %}
    ]}});
</script>

<div class="col-md-6">
  <h4>{% trans "Cost Per Service Per Hour" %}</h4>
  <div id="cost_progress"></div>
  <div id="cost_progress_legend"></div>
</div>

<script>
var palette = new Rickshaw.Color.Palette();
var graph = new Rickshaw.Graph({
  element: document.querySelector('#cost_progress'),
  width: 500,
  height: 300,
  interpolation: 'linear',
  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: palette.color(),
      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>
