{% 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; text-align:center;">
  <canvas id="gauge-{{ slug }}"></canvas>
  <strong>{{ slug }}</strong>
</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 = {responsive: true, legend: {display:false}};
var data = {
  labels: ["Max", "{{slug}}"],
  datasets: [
    {
      data: [{{diff}}, {{current_value|floatformat}}],
      backgroundColor: ["#ccc", "#f88"],
      hoverBackgroundColor: ["#ccc", "#f00"]
    }
  ]
};
var chart = new Chart(ctx, {
  type: 'doughnut',
  data: data,
  options: options
});
</script>
