{% extends 'base.html' %}
{% load i18n static %}

{% block additional_link %}
    <link href="{% static 'css/chartist.min.css' %}?cs=0d6caf50a899aab4422a3afcfa80f4d7" rel="stylesheet" type="text/css"/>
    <script src="{% static 'js/chartist.min.js' %}?cs=cf9d912db488847b9ee2c7993eaf5e27"></script>
{% endblock %}

{% block page-header %}{% trans 'Traffic' %}{% endblock %}

{% block main %}
    <script>
    $(document).ready(function () {
        var chart = new Chartist.Line('#maincontent', {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            series: [
                [1, 5, 2, 5, 4, 3],
                [2, 3, 4, 8, 1, 2],
                [5, 4, 3, 2, 1, 0.5]
            ]
        }, {
            low: 0,
            showArea: true,
            showPoint: false,
            fullWidth: true,
            height: 500
        });

        chart.on('draw', function (data) {
            if (data.type === 'line' || data.type === 'area') {
                data.element.animate({
                    d: {
                        begin: 2000 * data.index,
                        dur: 2000,
                        from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
                        to: data.path.clone().stringify(),
                        easing: Chartist.Svg.Easing.easeOutQuint
                    }
                });
            }
        });
    });
    </script>
    <div id="maincontent"></div>
{% endblock %}