<!-- BEGIN [% component.name %] -->
	[% # INCLUDE dumper.tt dump = lab_test_data %]
    [% status_option_map = data.lab_section_status_option;
		# INCLUDE dumper.tt dump = status_option_map %]

  <!-- highcharts lab-test status -->
    <div>
    [% FOREACH section IN lab_test_data; # NEXT UNLESS section.key.match('Flow');
        div_id = section.key.replace(' ','-').replace('/','-').lower; # INCLUDE dumper.tt dump = div_id;
        div_width = section.value.size * 10; # approx width, between min & max
		statii = data.get_status_vals(section.value); # INCLUDE dumper.tt dump = statii;

        total = 0;
        FOREACH test IN section.value;
            total = total + data.sum_this(test.value);
        END;
    %]
        <div id="[% div_id %]-status" style="min-width: 30%; max-width: 90%; height: 320px;
            width: [% div_width %]%; margin-left: 30px">
        </div>

        <script type="text/javascript">
            $(function () {
                $('#[% div_id %]-status').highcharts({
                    chart: {
                        type: 'column'
                    },
                    title: {
                        style: {
                            fontSize: '14px',
                        },
                        text: '[% section.key %] [[% total %]]',
                        align: 'left',
                    },
					xAxis: {
						categories: [
							[% FOREACH test IN section.value %]'[% test.key %]'[% ','
								UNLESS loop.last; END +%]
						],
						crosshair: true
					},
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'No. of tests'
                        }
                    },
                    legend: {
                        enabled: true
                    },
                    tooltip: {
						headerFormat: '<b>{point.key}</b>',
                        pointFormat: '<div>'
							+ '<span style="color:{series.color}">{series.name}</span>: '
							+ '{point.y}</div>',
						shared: true,
						useHTML: true,
						positioner: function () {
							return { x: 200, y: 5 };
						},
                    },
					plotOptions: {
						column: {
							pointPadding: 0.2,
							borderWidth: 0
						},
						series: {
							minPointWidth: 15, // doesn't work when many bars 
//							pointPadding: 0,
//							groupPadding: 0,
//							borderWidth: 0,
							point: {
								events: {
									click: function () {
										location.href = this.options.url;
									}
								}
							},

							dataLabels: {
								useHTML: true,
								enabled: false, // using clickable bars now
								// format: '<a href="/">{y}</a>', # need to exclude zeros
								formatter: function () {
									var seriesName = this.series.name;
									var pointName  = this.point.name;
									var pointValue = this.point.y;

									if (pointValue) {
										return '<a href="[% app_url %]/worklist/section/'
										+ '[% section.key %]/' + seriesName + '">'
										+ pointValue + '</a>';
									}
									else {
										return false; /* to suppress empty tooltip */
									}
								},
							}
						}
					},
                    series: [
						[% FOREACH status IN statii %]
							{
								name: '[% status %]',
								data: [
									[% FOREACH test IN section.value;
										# NEXT IF NOT test.value.item(status) // breaks data series %]
									{
										y: [% test.value.item(status) || 0 %],
										url: '[% app_url %]/worklist/test_status?'
											+ 'section_name='
											+ encodeURIComponent('[% section.key %]')
											+ ';lab_test='
											+ encodeURIComponent('[% test.key %]')
											+ ';status=[% status %]'
									}[% ',' UNLESS loop.last; END +%]
								]
							}[% ',' UNLESS loop.last +%]
						[% END %]
					]
                });
            });
		</script>
    [% END %]
    </div>
<!-- END [% component.name %] -->
