{% 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="card">
                <div class="card-body">
                    <div class="row">
                        <div class="btn mb-2 mb-md-0">
                            <form action="{{ url_for('micro.st_time' , year=year_of_interest) }}"
                                method="POST">
                                <select id="strain" name="strain" class="form-control form-control-sm"
                                    placeholder=".form-control-sm" required onchange="this.form.submit()">
                                    <option value="">Select strain...</option>
                                    {% for group in strains %}
                                    <option value="{{ group }}" {{ 'selected' if group == strain }}>
                                        {{ group}}
                                    </option>
                                    {% endfor %}
                                </select>
                            </form>
                        </div>
                        <div class="col-lg-12">
                            <div id="st_time"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

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

    Highcharts.chart('st_time', {
        chart: { type: 'areaspline' },
        subtitle: { text: 'Number of samples over time, grouped by Sequence Type' },
        title: { text: {{ strain| tojson}} },
        xAxis: {
        title: { text: 'Date recived' },
        categories: {{ categories| tojson }}},
        yAxis: { title: { text: 'Number of samples' } },
        legend: {
        title: {
            text: 'Sequence Type<br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span>',
            style: { fontStyle: 'italic' }
        },
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
        tooltip: {
        formatter: function () {
            var output = 'Month: <b>' + this.x + '</b> <br>'
            output = output + 'Sequence Type: <b>' + this.series.name + '</b> <br>'
            output = output + 'Number of samples: <b>' + this.y + '</b>'
            return output;
        }
    },
        plotOptions: { areaspline: { fillOpacity: 0.2 } },
        series: series});

</script>

{% endblock %}