{% 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' %}
            Samples with more than one lot number are not included in these plots.
            <div class="row">
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            {% if concentration_defrosts.data != {} %}
                            <div id="concentration_defrosts"></div>
                            {% else %}
                            <div class="alert alert-warning" role="alert">No data for {{year_of_interest}}. Try another year!</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="card">
                        <div class="card-body">
                            {% if concentration_time != {} %}
                            <div id="concentration_time"></div>
                            {% else %}
                            <div class="alert alert-warning" role="alert">No data for {{year_of_interest}}. Try another year!</div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>

<script>
    var series = []
    {% for group in concentration_defrosts.data %}
    series.push({
        name: "{{group}}",
        data: {{ concentration_defrosts.data[group].median | tojson }},
        marker: {
        radius: 3,
        symbol: 'circle',
        lineColor: '#666666',
        lineWidth: 1
    },
        color: Highcharts.getOptions().colors[{{ loop.index }}]
        }, {
            name: 'Interquartile Range',
            data: {{ concentration_defrosts.data[group].quartile | tojson }},
        type: 'areasplinerange',
        lineWidth: 0,
        linkedTo: ':previous',
        color: Highcharts.getOptions().colors[{{ loop.index }}],
        fillOpacity: 0.2,
        zIndex: 0,
        marker: { enabled: false }
        })
    {% endfor %}

    Highcharts.chart('concentration_defrosts', {
        chart: { type: 'spline' },
        title: {
            text: 'Kit Efficiency over Time'
        },
        subtitle: {
            text: 'WGS illumina PCR-free'
        },
        xAxis: {
            categories: {{ concentration_defrosts.labels | tojson }},
            title: { text:  'Number of Defrosts'}},
        yAxis: {
            title: { text: 'Average Library Concentration (nM)' }},
        legend: {
        title: {
            text: 'Lot Number<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: {
        crosshairs: true,
        shared: true
    },
        plotOptions: {
        series: { connectNulls: true },
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
        series: series});

</script>

<script>
    var data = []
    {% if concentration_time.all_samples is defined %}
    var data = {{ concentration_time.all_samples.data | tojson }}
    {% endif %}

    Highcharts.chart('concentration_time', {
        chart: { type: 'spline' },
        title: { text: 'Library Concentration over Time'  },
        subtitle: {
            text: 'WGS illimina PCR-free'
        },
        xAxis: { categories: {{ months | tojson }},
                title: { text: 'Reception Date' }},
        yAxis: { title: { text: 'Average Library Concentration (nM)'  }},
        legend: { enabled: false },
        tooltip: { 
        valueDecimals: 2,
        crosshairs: true, 
        shared: true },
        plotOptions: {
        series: { connectNulls: true },
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
        series: [{
            name: 'Average Concentration',
            data: data,
            marker: { symbol: 'circle' }
        }] 
});

</script>
{% endblock %}