{% 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-lg-6">
                    <div class="card">
                        <div class="card-body">
                            {% if amount.data != [] %}
                            <div id="amount"></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-lg-6">
                    <div class="card">
                        <div class="card-body">
                            {% if amount_concentration_time != {} %}
                            <div id="amount_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>
    Highcharts.chart('amount', {
        title: {
            text: 'Library Concentration vs Input Amount'
        },
        xAxis: {
            title: { text: 'Amount (ng)' }},
        yAxis: {
        title: { text: 'Concentration (nM)' }},
        legend: {
        enabled: false
    },
        tooltip: {
        formatter: function () {
            var output = ''
            if (this.point.name) {
                output = output + 'Sample ID: <b>' + this.point.name + '</b> <br>'
            }
            output = output + 'Concenration: <b>' + this.y + '</b> <br> Amount: <b>' + this.x + '</b>'
            return output;
        }
    },
        plotOptions: {
        scatter: {
            marker: {
                enabled: true,
                radius: 4,
                lineColor: '#666666',
                lineWidth: 1
            }
        }
    },
        series: [{
            regression: true,
            regressionSettings: {
                type: 'polynomial',
                dashStyle: 'dash'
            },
            type: 'scatter',
            data: {{ amount.data | tojson }}
        }]
    });
</script>



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

    Highcharts.chart('amount_concentration_time', {
        chart: { type: 'spline' },
        title: { text: 'Average Library Concentration over Time' },
        subtitle: { text: '' },
        xAxis: { categories: {{ months | tojson }}},
        yAxis: { title: { text: 'Average 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 %}