{% 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('home.index')}}" method="POST">
                                    <input type="hidden" name="endpoint" value="{{endpoint}}">
                                        <select id="index_category" name="index_category" class="form-control form-control-sm"
                                            placeholder=".form-control-sm" required onchange="this.form.submit()">
                                            <option value="">Select index category...</option>
                                            {% for category in index_categories %}
                                            <option value="{{ category }}" {{ 'selected' if category == index_category }}>
                                                {{ category}}
                                            </option>
                                            {% endfor %}
                                        </select>
                                    </form>
                                </div>
                        <div class="col-lg-12">
                            <div id="indexes"></div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>


<script>
    Highcharts.chart('indexes', {
    chart: {
        type: 'column',
        dataSorting: {
        enabled: true,
        sortKey: 'y'
    },
        scrollablePlotArea: {
            minWidth: 10,
            scrollPositionX: 1
        }
    },
    title: {
        text: '{{index_category}}'
    },
    subtitle: {
        text: 'Normalized index performance averaged over all runs. (Data from {{nr_indexes}} indexes). <br> Not including data from runs with flowcell performance < {{flowcell_performance_treshold}}'
    },
    xAxis: {
        type: 'category',

        scrollbar: {
            enabled: true
        },
        labels: {
            rotation: -70,
            style: {
                fontSize: '10px',
                fontFamily: 'Verdana, sans-serif'
            }
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Averaged normalized index performance'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        style: {pointerEvents: 'all'},
        useHTML: true,
        pointFormat: 'Index performance: <b>{point.y:.1f}</b><br>Average from <b>{point.nr_runs}</b> runs. <br><a href="{{url_for('index.reagent_label', index_category=index_category.replace(' ','_'), reagent_label='')}}{point.url}">{point.url}</a>'

    },
    series: [{
        name: 'Population',
        data: {{results| tojson }},
        dataSorting: {enabled: true}    
        }]
});
</script>

{% endblock %}