<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
{{#runmode}}
<div class="pull-right">
<a href="?do=runmode">{{lang_runmodeMachines}}</a>: <b>{{runmode}}</b>
</div>
{{/runmode}}
<div>
{{lang_knownMachines}}: <b>{{known}}</b> 
<a href="?do=Statistics&show=summary&filters={{query}}~,~state=on">{{lang_onlineMachines}}</a>: <b>{{online}}</b> 
<a href="?do=Statistics&show=summary&filters={{query}}~,~state=occupied">{{lang_inUseMachines}}</a>: <b>{{used}}</b> (<b>{{usedpercent}}%</b>)
</div>
{{#badhdd}}
<div>
<span class="glyphicon glyphicon-exclamation-sign red"></span>
<a href="?do=Statistics&show=list&filters={{query}}~,~badsectors>=10">
{{lang_withBadSectors}}:
</a>
<b>{{badhdd}}</b>
</div>
{{/badhdd}}
</div>
</div>
<div>
{{#json}}
<canvas id="usagehist" style="width:100%;height:150px"></canvas>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
var markings = {{{markings}}};
var markMax = Math.max(...markings) * 3;
var oldDraw = Chart.prototype._drawDatasets;
Chart.prototype._drawDatasets = function () {
if (this.chartArea) {
var ctx = this.ctx;
var chartArea = this.chartArea;
var meta = this.getDatasetMeta(0);
ctx.save();
var end = Math.min(meta.data.length, markings.length) - 1;
for (var i = 0; i < end; ++i) {
var start = meta.data[i].x;
var stop = meta.data[i+1].x;
ctx.fillStyle = 'rgba(16, 64, 255, ' + (!!markings[i] * .05 + markings[i] / markMax) + ')';
ctx.fillRect(start, chartArea.top, stop - start, chartArea.bottom - chartArea.top);
}
ctx.restore();
}
// Perform regular chart draw
oldDraw.call(this);
};
var data = {{{json}}};
var sel = false;
new Chart(document.getElementById('usagehist').getContext('2d'), {type: 'line', data: data, options: {
responsive: true,
animation: false,
pointRadius: 0,
pointHitRadius: 6,
interaction: { mode: 'index' },
plugins: {
tooltip: { callbacks: { label: function(context) {
if (context.dataset.label === 'Courses')
return null;
return context.dataset.label + ': ' + context.parsed.y;
}
}},
legend: {position: 'left' },
}
}});
}, false);
</script>
{{/json}}
</div>
</div>