{% 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-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="library_size_pre_hyb"></div>  
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-body">
                            <div id="library_size_post_hyb"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>


<script>

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

    Highcharts.chart('library_size_post_hyb', {
        chart: {
            type: 'spline'
        },
        title: {text: 'Post-hybridization QC'},
        xAxis: {
            categories: {{ months| tojson }}},
        yAxis: {
        title: { text: 'Average Library Size' }},
        legend: {
        title: {
            text: 'Source<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: {
        valueDecimals: 0,
        crosshairs: true,
        shared: true
    },
        plotOptions: {
        series: { connectNulls: true },
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
        series: series 
});

</script>

<script>

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

    Highcharts.chart('library_size_pre_hyb', {
        chart: {
            type: 'spline'
        },
        title: {text: 'Pre-hybridization QC'},
        xAxis: {
            categories: {{ months| tojson }}},
        yAxis: {
        title: { text: 'Average Library Size' }},
        legend: {
        title: {
            text: 'Source<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: {
        valueDecimals: 0,
        crosshairs: true,
        shared: true
    },
        plotOptions: {
        series: { connectNulls: true },
        spline: {
            marker: {
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
        series: series 
});

</script>
{% endblock %}