{% extends "pretixcontrol/event/base.html" %}
{% load i18n %}
{% load compress %}
{% load staticfiles %}
{% block title %}{% trans "Statistics" %}{% endblock %}
{% block content %}
    <h1>{% trans "Statistics" %}</h1>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% trans "Orders by day" %}</h3>
        </div>
        <div class="panel-body">
            <div id="obd_chart" style="height: 250px;"></div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% trans "Revenue over time" %}</h3>
        </div>
        <div class="panel-body">
            <div id="rev_chart" style="height: 250px;"></div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">{% trans "Orders by product" %}</h3>
        </div>
        <div class="panel-body">
            <div id="obp_chart" style="height: 250px;"></div>
        </div>
    </div>
    <script type="text/javascript">
        new Morris.Area({
            element: 'obd_chart',
            data: {{ obd_data|safe }},
            xkey: 'date',
            ykeys: ['ordered', 'paid'],
            labels: ['{% trans "Placed orders" %}', '{% trans "Paid orders" %}'],
            lineColors: ['#000099', '#009900'],
            smooth: false,
            resize: true,
            fillOpacity: 0.3,
            behaveLikeLine: true
        });
        new Morris.Area({
            element: 'rev_chart',
            data: {{ rev_data|safe }},
            xkey: 'date',
            ykeys: ['revenue'],
            labels: ['{% trans "Total revenue" %}'],
            smooth: false,
            resize: true,
            fillOpacity: 0.3,
            preUnits: '{{ request.event.currency }} '
        });
        new Morris.Bar({
            element: 'obp_chart',
            data: {{ obp_data|safe }},
            xkey: 'item',
            ykeys: ['ordered', 'paid'],
            labels: ['{% trans "Placed orders" %}', '{% trans "Paid orders" %}'],
            barColors: ['#000099', '#009900'],
            resize: true
        });
    </script>
{% endblock %}