{% extends "redis_metrics/base.html" %}
{% load url from future %}

{% block extrahead %}
{% if gauges.slugs|length %}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Gague', 'Value'],
      {% for gauge, value in gauges.data.items %}
      ['{{ gauge }}', {{ value|default:0 }}]{% if not forloop.last %},{% endif %}
      {% endfor %}
    ]);

    var options = {
      title: 'Gagues',
      {#vAxis: {title: '',  titleTextStyle: {color: 'red'}},#}
      legend: {position: 'none'}
    };

    var chart_div = document.getElementById('gauges_chart');
    var chart = new google.visualization.BarChart(chart_div);
    chart.draw(data, options);
  }
</script>
{% endif %}
{% endblock %}

{% block content %}
    <h1>Gagues</h1>
    {% if gauges.slugs|length %}
        <div id="gauges_chart"></div>

        <table>
        <caption>Gagues</caption>
        <thead>
            <tr><th>Gague</th><th>Value</th></tr>
        </thead>
        <tbody>
            {% for gauge, value in gauges.data.items %}
                <tr>
                    <td>{{ gauge }}</td>
                    <td class="value">{{ value|default_if_none:"-" }}</td>
                </tr>
            {% endfor %}
        </tbody>
        </table>
    {% else %}
        <p>You don't have any gauges set up yet!</p>
    {% endif %}

    <h1>Metrics</h1>
    {% if metric_slugs|length %}
        <p>Click a metric below to view more data.</p>
        <ul>
        {% for slug in metric_slugs %}
            <li>
                <a href="{% url 'redis_metric_detail' slug %}">{{ slug }}</a>
            </li>
        {% endfor %}
        </ul>
    {% else %}
        <p>You don't have any metrics set up yet!</p>
    {% endif %}

{% endblock %}
