path: root/modules-available/statistics/templates/summary.html

<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>&emsp;
				<a href="?do=Statistics&amp;show=summary&amp;filters={{query}}~,~state=on">{{lang_onlineMachines}}</a>: <b>{{online}}</b>&emsp;
				<a href="?do=Statistics&amp;show=summary&amp;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&amp;show=list&amp;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 showLegend = markMax > 0;
				if (markMax < 8) markMax = 8;

				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: {
						subtitle: {
							display: showLegend,
							text: '{{lang_graphLectureTitle}}',
							position: 'bottom',
						},
						legend: {position: 'left' },
					}
				}});

			}, false);
		</script>
		{{/json}}
	</div>
</div>