<!-- BEGIN [% component.name %] -->
    <div id="drilldown" style="min-width: 30%; max-width: 90%; height: 400px; margin: 0 auto"></div>

    [% pointFormatURL = # can't deal with '/' in test name - dispatcher assumes it's an arg delimiter
        "<div><a href=\"${app_url}/resources/incomplete_tests/{series.name}/{point.name}\">" _
        '<span style="color:{point.color}">{point.name}</span>' _
        '</a>: <b>{point.y}</b></div>';
    %]

    <script src="/js/drilldown.js"></script>
    <script type="text/javascript">
        $(function () {
            // set overrides:
            Highcharts.setOptions({
                lang: {
                    drillUpText: '<< back to lab sections',
                },
            });
            // Create the chart
            $('#drilldown').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: false, // 'Lab sections'
                },
                xAxis: {
                    type: 'category',
                    labels: {
                        rotation: -45,
                        style: {
                            fontSize: '11px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: 'No. of tests'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                tooltip: {
                    useHTML: true,
                    formatter: function () {
                        var seriesName = this.series.name;
                        var pointName  = this.point.name;
                        var pointValue = this.point.y;

                        if (seriesName == 'Lab section') {
                            return false; /* to suppress empty tooltip */
                        }
                        else {
                            return '<div style="font-size:12px"><b>'
                            + seriesName + '</b></div><div>'
                            + '<a href="[% app_url %]/resources/incomplete_tests?'
                            + 'section=' + encodeURIComponent(seriesName) + ';'
                            + 'investigation=' + encodeURIComponent(pointName)
                            + '">' + pointName + '</a>: <b>' + pointValue
                            + '</b></div>';
                        }
                    }

                    /* for use without formatter function, but can't disable 'Lab section'
                    enabled: {series.name} == 'Lab section' ? false : true,
                    useHTML: true,
                    headerFormat: '<div style="font-size:12px"><b>{series.name}</b></div>',
                    pointFormat: '[% pointFormatURL %]',
                    footerFormat: '',
                    */
                },

                series: [{
                    name: 'Lab section',
                    colorByPoint: true,
                    data: [
                      [% INCLUDE series_data FOREACH section IN lab_test_data %]
                    ]
                }],

                drilldown: {
                    series: [
                      [% FOREACH section IN lab_test_data;
                        id = section.key.replace(' ','-').lower;
                      +%]
                        {
                            id: '[% id %]',
                            name: '[% section.key %]',
                            data: [
                              [% INCLUDE drilldown_series_data
                                FOREACH test IN section.value +%]
                            ]
                        }[% ',' UNLESS loop.last # for IE8 +%]
                      [% END %]
                    ]
                }
            });
        });
    </script>
<!-- END [% component.name %] -->
