{% load static %}

{% comment %}

This is the template for the ``gauge`` inclusion tag. It expects the
following context:

    * slug
    * current_value -- The current gauge value.
    * max_value  (used to mark the max value on the gauge chart)
    * diff -- The difference betwee the current value and the max_value
    * size -- The size (in pixels) for the chart.

{% endcomment %}

<div class="chart gauge" style="width: {{size}}px; height: {{size}}px;">
  <canvas id="gauge-{{ slug }}"></canvas>
</div>
<script type="text/javascript" src="{% static 'redis_metrics/js/chart.min.js' %}"></script>
<script type="text/javascript">
var ctx = document.getElementById("gauge-{{slug}}").getContext("2d");
//var options = {animation:false, responsive: true};
var options = {responsive: true};
var data = [
  {
    value: {{ diff }},
    color: "#ccc",
    highlight: "#ccc",
    label: "Until Max"
  },
  {
    value: {{ current_value }},
    color: "#f88",
    highlight: "#f00",
    label: "{{ slug }}"
  }
];
var chart = new Chart(ctx).Doughnut(data,options);
</script>
