{% extends 'layout.html' %}
{% block body %}
{% include 'header.html' %}
<div class="container-fluid">
    <div class="row">
        {% include 'navigation.html' %}
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
            {% include 'header_section.html' %}
            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div id="received"></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            <div id="received_application"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>



<script>
    var series = []
    {% for group in data_prio %}
    series.push({
        name: "{{group}}",
        data: {{ data_prio[group].data | tojson }},
        marker: { symbol: 'circle' }})
    {% endfor %}

    Highcharts.chart('received', {
        chart: { type: 'areaspline' },
        title: { text: 'Received samples per month' },
        subtitle: {text: 'Grouped by priority'},
        xAxis: { categories: {{ months | tojson }}},
        yAxis: { title: { text: 'Nr of samples' } },
        tooltip: {
        valueDecimals: 0,
        shared: true,
        valueSuffix: ' samples'
    },
        plotOptions: { areaspline: { fillOpacity: 0.2 } },
        series: series});

    var series = []
    {% for group in data_cat %}
    series.push({
        name: "{{group}}",
        data: {{ data_cat[group].data | tojson }},
        marker: { symbol: 'circle' }})
    {% endfor %}

    Highcharts.chart('received_application', {
        chart: { type: 'areaspline' },
        title: { text: 'Received samples per month' },
        subtitle: {text: 'Grouped by application tag'},
        xAxis: { categories: {{ months | tojson }}},
        yAxis: { title: { text: 'Nr of samples' }},
        tooltip: {
        valueDecimals: 0,
        shared: true,
        valueSuffix: ' samples'
    },
        plotOptions: { areaspline: { fillOpacity: 0.2 } },
        series: series});

</script>

{% endblock %}