<!-- BEGIN [% component.name %] -->
[% # INCLUDE dumper.tt dump = lab_test_data %]
<!-- 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_statii(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
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [
[% FOREACH status IN statii %]
{
name: '[% status %]',
data: [
[% FOREACH test IN section.value;
test.value.item(status) || 0;
',' UNLESS loop.last; END +%]
]
}[% ',' UNLESS loop.last +%]
[% END %]
]
});
});
</script>
[% END %]
</div>
<!-- END [% component.name %] -->
