{% extends "squeleton.html" %}


{% block page_content %}

<div class="row">
    <div class="col-md-12">
        {% for y in years %}
        <div class="col-md-6">
            <ul class="pagination">
                <li class="disabled"><a>{{ y }}</a></li>
                {% for m in months %}
                <li {% if m == month and y == year %}class="active"{% endif %}>
                    <a href="{% url 'history' obj y m %}">{{ m }}</a>
                </li>
                {% endfor %}
            </ul>
        </div>
        {% endfor %}
    </div>
</div>


<div class="row">
    <div class="col-md-12">
        <h1 class="page-header"><i class="fa fa-{{ fa_icon }} fa-fw"></i> {{ title }}</h1>
        <div class="panel panel-default">
            <div class="panel-heading">
                {% if mean_pc_ok %}
                <h4>{{ title1 }} - Mean : {{ mean_pc_ok|floatformat }}</h4>
                {% else %}
                <h4>{{ title1 }}</h4>
                {% endif %}
            </div>
            <div class="panel-body history-panel">
                {% if some_results %}
                <div id="chart-pc"></div>
                <div class="legend green">{{ legend1.0 }}</div>
                <div class="legend orange">{{ legend1.1}}</div>
                <div class="legend red">{{ legend1.2 }}</div>
                <div class="legend blue">{{ legend1.3 }}</div>
                {% else %}
                <p>No results</p>
                {% endif %}
            </div>
        </div>
        {% if mean_js_data %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>{{ title2 }}</h4>
            </div>
            <div class="panel-body history-panel">
                <div id="chart-mean"></div>
                <div class="legend blue">{{ legend2.0 }}</div>
                <div class="legend purple">{{ legend2.1}}</div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

{% endblock %}



{% block scripts %}
{% load static %}
<script src="{% static 'js/plugins/morris/raphael.min.js' %}"></script>
<script src="{% static 'js/plugins/morris/morris.min.js' %}"></script>
<script>
$(function() {
    Morris.Area({
        element: 'chart-pc',
        data: [
            {{ pc_js_data|safe }}
        ],
        xkey: 'period',
        ykeys: ['ok', 'warn', 'crit', 'unknown'],
        labels: [ {{ js_labels|safe }}],
        lineColors: ['#059e0c', '#f0a124', '#e32f2f', '#5d85e9'],
        pointSize: 2,
        hideHover: 'auto',
        smooth: true,
        ymax: 100,
        ymin: 0,
        xLabels: 'day',
        resize: true
    });

    {% if mean_js_data %}
    Morris.Line({
        element: 'chart-mean',
        data: [
            {{ mean_js_data|safe }}
        ],
        xkey: 'period',
        ykeys: ['mean', 'median'],
        labels: ['Mean', 'Median'],
        lineColors: ['#628be3', '#e850ad'],
        pointSize: 2,
        hideHover: 'auto',
        xLabels: 'day',
        resize: true
    });
    {% endif %}
});
</script>
{% endblock %}