{% 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('sequencing.runs' , year=year_of_interest) }}" method="POST">
                                <select id="metric" name="metric" class="form-control form-control-sm"
                                    placeholder=".form-control-sm" required onchange="this.form.submit()">
                                    <option value="">Select metric...</option>
                                    {% for group in metrices %}
                                    <option value="{{ group }}" {{ 'selected' if group == metric }}>
                                        {{ group}}
                                    </option>
                                    {% endfor %}
                                </select>
                            </form>
                        </div>
                        <div class="col-lg-12">
                            <div id="run_info"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>



<script>
    var series = []
    {% for group in results['data'][metric] %}
    var data = []
    {% for date, value, run_id in results['data'][metric][group].data %}
    // in this context january is 0, february 1,..., december 11 thereby date.month-1
    data.push({ 'x': Date.UTC({{ date.year }}, {{ date.month - 1 }}, {{ date.day }}), 'y': {{ value }}, 'name': {{ run_id | tojson }}, 'date': "{{ date.day}}/{{ date.month }}" } )
    {% endfor %}
    series.push({
        findNearestPointBy: 'xy',
        name: "{{group}}",
        data: data,
        marker: { symbol: 'circle' }
    })
    {% endfor %}
    Highcharts.chart('run_info', {
        chart: { type: 'spline' },
        title: { text: '{{metric}} over Time' },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                month: '%b',
                year: '%b'
            }
        },
        yAxis: { title: { text: {{ metric | tojson }} },
        min: 0},
        legend: {
        title: {
            text: 'Instrument<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 () {
            return 'Run ID: <b>' + this.point.name + '</b> <br> {{metric}}: <b>' + this.y + '</b> <br>Sequencing finished at: <b>' + this.point.date + '</b>';
        }
    },
        plotOptions: {
        spline: {
            marker: {
                enabled: true,
                radius: 2,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
        series: series 
});
</script>
{% endblock %}