{% load redis_metrics_filters %}
{% load static %}

<div class="chart">
  <canvas id="metric-history-{{ slug }}"></canvas>
</div>
<script type="text/javascript" src="{% static 'redis_metrics/js/chart.min.js' %}"></script>
<script type="text/javascript">
var ctx = document.getElementById("metric-history-{{slug}}").getContext("2d");
var options = {animation:false, responsive: true};
var data = {
  labels: [
    {% for k,v in metric_history %}'{{ k|strip_metric_prefix }}',{% endfor %}
  ],
  datasets: [
    {
        label: "{{ slug }}",
        fill: true,
        backgroundColor: "rgba(220,110,110,0.2)",
        borderColor: "rgba(220,220,220,1)",
        pointBackgroundColor: "rgba(220,110,110,1)",
        pointBorderColor: "#fff",
        pointHoverBackgroundColor: "#fff",
        pointHoverBorderColor: "rgba(220,220,220,1)",
        data: [{% for k,v in metric_history %}{{v|default:0}},{% endfor %}]
    },
  ]
};
var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});
</script>

{% if with_data_table %}
<table class="table">
    <caption>
      <code>{{ slug }}</code> {{ granularity }} metrics
      {% if since %} since {{ since }}{% endif %}
    </caption>
    <thead>
        <tr><th>Key</th><th>Value</th></tr>
    </thead>
    <tbody>
        {% for key, value in metric_history %}
            <tr>
                <td>{{ key|strip_metric_prefix }}</td>
                <td class="value">{{ value|default:"-" }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}
