<commit_before>{% load i18n %}
{% 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 }}
        },
{% 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 }}},{% endfor %}
      ]
    },
{% endfor %}
  ]<commit_msg>Fix a javascript error on reporting page related to localization.<commit_after>{% 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 %}
  ]
{'fraction_non_alphanumeric': 0.19382612347753045, 'fraction_numerical': 0.01763964720705586, 'mean_word_length': 2.5785123966942147, 'pattern_counts': {'":': 64, '<': 49, '<?xml version=': 0, '>': 49, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5835501', 'n_tokens_mistral': 1725, 'n_tokens_neox': 1601, 'n_words': 333}