[js_chart] Update to Chart.js 3.0.8

7 files changed, 60 insertions, 95 deletions

diff --git a/modules-available/statistics/templates/clientlist.html b/modules-available/statistics/templates/clientlist.html
index ebd9af4b..3df95d92 100644
--- a/modules-available/statistics/templates/clientlist.html
+++ b/modules-available/statistics/templates/clientlist.html
@@ -219,6 +219,12 @@
 						{{lang_remoteExec}}
 					</button>
 					{{/canExec}}
+					{{#canBenchmark}}
+					<button type="submit" name="action" value="benchmark" class="btn btn-primary btn-machine-action">
+						<span class="glyphicon glyphicon-dashboard"></span>
+						{{lang_remoteExec}}
+					</button>
+					{{/canBenchmark}}
 				</div>
 			</div>
 		</div>
diff --git a/modules-available/statistics/templates/cpumodels.html b/modules-available/statistics/templates/cpumodels.html
index 91464031..e133bec6 100644
--- a/modules-available/statistics/templates/cpumodels.html
+++ b/modules-available/statistics/templates/cpumodels.html
@@ -16,7 +16,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="{{id}}" class="{{collapse}}">
+							<tr id="sysmdl-{{idx}}" class="{{collapse}}">
 								<td data-sort-value="{{systemmodel}}" class="text-left text-nowrap filter-col" data-filter-col="systemmodel">
 									<table class="slx-ellipsis"><tr><td>
 									<a class="filter-val" data-filter-val="{{systemmodel}}" href="#">{{systemmodel}}</a>
@@ -40,28 +40,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-md-4">
-					<canvas id="cpumodelchart" style="width:100%;height:380px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('cpumodelchart').getContext('2d')).Pie(data, {
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#' + tooltip.text);
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-md-4 auto-chart" data-chart="{{json}}" data-chart-dest="#sysmdl-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/filterbox.html b/modules-available/statistics/templates/filterbox.html
index 72754b21..aba4b41c 100644
--- a/modules-available/statistics/templates/filterbox.html
+++ b/modules-available/statistics/templates/filterbox.html
@@ -117,6 +117,48 @@ document.addEventListener("DOMContentLoaded", function () {
 		});
 	});
 
+	// All the pie chars
+	function makePieChart($parent) {
+		var data = $parent.data('chart');
+		var chartData = {
+			datasets: [{
+				data: data.map(function(x) { return x.value; }),
+				backgroundColor: data.map(function(x) { return x.color; })
+			}]
+		};
+		var $canv = $('<canvas style="width:100%;height:250px">');
+		$parent.append($canv);
+		(function() {
+			var $dest = $parent.data('chart-dest');
+			var cur = null;
+			new Chart($canv[0].getContext('2d'), {
+				type: 'pie', data: chartData, options: {
+					animation: false,
+					onHover: function (_, list) {
+						if (list.length === 0 || list[0].index !== cur) {
+							if (cur !== null) {
+								$($dest + cur).removeClass('slx-bold');
+								cur = null;
+							}
+						}
+						if (list.length !== 0 && list[0].index !== cur) {
+							console.log(list[0]);
+							cur = list[0].index;
+							$($dest + cur).addClass('slx-bold');
+						}
+					},
+					plugins: {
+						tooltip: {enabled: false},
+						legend: {display: false}
+					}
+				}
+			});
+		})();
+	}
+	$('.auto-chart').each(function() {
+		makePieChart($(this));
+	});
+
 }, false);
 
 function popupFilter(field) {
diff --git a/modules-available/statistics/templates/id44.html b/modules-available/statistics/templates/id44.html
index bc549fa8..7851ba87 100644
--- a/modules-available/statistics/templates/id44.html
+++ b/modules-available/statistics/templates/id44.html
@@ -15,7 +15,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="tmpid{{gb}}" class="{{class}} {{collapse}}">
+							<tr id="id44-{{idx}}" class="{{class}} {{collapse}}">
 								<td data-sort-value="{{gb}}" class="text-left text-nowrap">
 									<a class="filter-val" data-filter-val="{{gb}}" data-filter-op="~" href="#">{{gb}}&thinsp;GiB</a>
 								</td>
@@ -34,28 +34,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-sm-6">
-					<canvas id="temppartchart" style="width:100%;height:250px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('temppartchart').getContext('2d')).Pie(data, { 
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#tmpid' + String(tooltip.text));
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-sm-6 auto-chart" data-chart="{{json}}" data-chart-dest="#id44-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/kvmstate.html b/modules-available/statistics/templates/kvmstate.html
index 4f8994d1..b3c65733 100644
--- a/modules-available/statistics/templates/kvmstate.html
+++ b/modules-available/statistics/templates/kvmstate.html
@@ -15,7 +15,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="kvm{{kvmstate}}">
+							<tr id="kvm-{{idx}}">
 								<td data-sort-value="{{kvmstate}}" class="text-left text-nowrap">
 									<a class="filter-val" data-filter-val="{{kvmstate}}" href="#">{{kvmstate}}</a>
 								</td>
@@ -25,28 +25,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-sm-6">
-					<canvas id="kvmchart" style="width:100%;height:250px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('kvmchart').getContext('2d')).Pie(data, { 
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#kvm' + tooltip.text);
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-sm-6 auto-chart" data-chart="{{json}}" data-chart-dest="#kvm-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/memory.html b/modules-available/statistics/templates/memory.html
index 185c1a34..0ccbca98 100644
--- a/modules-available/statistics/templates/memory.html
+++ b/modules-available/statistics/templates/memory.html
@@ -15,7 +15,7 @@
 						</thead>
 						<tbody>
 							{{#rows}}
-							<tr id="ramid{{gb}}" class="{{class}} {{collapse}}">
+							<tr id="ram-{{idx}}" class="{{class}} {{collapse}}">
 								<td class="text-left text-nowrap" data-sort-value="{{gb}}">
 									<a class="filter-val" data-filter-val="{{gb}}" data-filter-op="~" href="#">{{gb}}&thinsp;GiB</a>
 								</td>
@@ -34,28 +34,7 @@
 						</tbody>
 					</table>
 				</div>
-				<div class="col-sm-6">
-					<canvas id="ramsizechart" style="width:100%;height:250px"></canvas>
-					<script type="text/javascript">
-						document.addEventListener("DOMContentLoaded", function() {
-							var data = {{{json}}};
-							var sel = false;
-							new Chart(document.getElementById('ramsizechart').getContext('2d')).Pie(data, { 
-								animation: false,
-								tooltipTemplate: "<%if (label){%><%=label%><%}%>",
-								customTooltips: function(tooltip) {
-									if (sel !== false) sel.removeClass('slx-bold');
-									if (!tooltip) {
-										sel = false;
-										return;
-									}
-									sel = $('#ramid' + tooltip.text);
-									sel.addClass('slx-bold');
-								}
-							});
-						}, false);
-					</script>
-				</div>
+				<div class="col-sm-6 auto-chart" data-chart="{{json}}" data-chart-dest="#ram-"></div>
 			</div>
 		</div>
 	</div>
diff --git a/modules-available/statistics/templates/summary.html b/modules-available/statistics/templates/summary.html
index 3ede7bc5..a71d50c0 100644
--- a/modules-available/statistics/templates/summary.html
+++ b/modules-available/statistics/templates/summary.html
@@ -28,10 +28,11 @@
 			document.addEventListener("DOMContentLoaded", function() {
 				var data = {{{json}}};
 				var sel = false;
-				new Chart(document.getElementById('usagehist').getContext('2d')).Line(data, { 
+				new Chart(document.getElementById('usagehist').getContext('2d'), {type: 'line', data: data, options: {
 					animation: false,
-					pointHitDetectionRadius: 5
-				});
+					pointHitDetectionRadius: 5,
+					plugins: { legend: {position: 'left' }}
+				}});
 			}, false);
 		</script>
 	</div>