From 9dc2a67d70e24ae0a994521c300efc98a21cd819 Mon Sep 17 00:00:00 2001
From: billz <billzimmerman@gmail.com>
Date: Sun, 2 Feb 2020 13:40:41 +0000
Subject: [PATCH] Update beforeDraw as inline plugin

---
 app/js/linkquality.js | 128 +++++++++++++++++++++---------------------
 1 file changed, 63 insertions(+), 65 deletions(-)

diff --git a/app/js/linkquality.js b/app/js/linkquality.js
index 79d3ad1d..2de34512 100644
--- a/app/js/linkquality.js
+++ b/app/js/linkquality.js
@@ -3,86 +3,84 @@
 // Support for dark terminal theme
 theme = getCookie('theme');
 if (theme == 'terminal.css') {
-	var bgColor1 = '#000';
-	var bgColor2 = '#000';
-	var borderColor = 'rgba(46, 230, 0, 1)';
-	var labelColor = 'rgba(46, 230, 0, 1)';
+  var bgColor1 = '#000';
+  var bgColor2 = '#000';
+  var borderColor = 'rgba(46, 230, 0, 1)';
+  var labelColor = 'rgba(46, 230, 0, 1)';
 } else {
-	var bgColor1 = '#d4edda';
-	var bgColor2 = '#eaecf4';
-	var borderColor = 'rgba(147, 210, 162, 1)';
-	var labelColor = 'rgba(130, 130, 130, 1)';
+  var bgColor1 = '#d4edda';
+  var bgColor2 = '#eaecf4';
+  var borderColor = 'rgba(147, 210, 162, 1)';
+  var labelColor = 'rgba(130, 130, 130, 1)';
 }
 
 let data1 = {
-	datasets: [{
-		data: [linkQ, 100-linkQ],
-		backgroundColor: [bgColor1, bgColor2],
-		borderColor: borderColor,
-	}],
+  datasets: [{
+    data: [linkQ, 100-linkQ],
+    backgroundColor: [bgColor1, bgColor2],
+    borderColor: borderColor,
+  }],
 };
 
 let config = {
-	type: 'doughnut',
-	data: data1,
-	options: {
-		aspectRatio: 2,
-		responsive: true,
-		maintainAspectRatio: false,
-		tooltips: {enabled: false},
-		hover: {mode: null},
-		legend: {
-			display: false,
-		},
-		rotation: (2/3)*Math.PI,//2+(1/3),
-		circumference: (1+(2/3)) * Math.PI, // * Math.PI,
-		cutoutPercentage: 80,
-		animation: {
-			animateScale: false,
-			animateRotate: true
-		},
-		tooltips: {
-			enabled: false
-		}
-	},
-	centerText: {
-		display: true,
-		text: linkQ + "%"
-	}
+  type: 'doughnut',
+  data: data1,
+  options: {
+    aspectRatio: 2,
+    responsive: true,
+    maintainAspectRatio: false,
+    tooltips: {enabled: false},
+    hover: {mode: null},
+    legend: {
+      display: false,
+    },
+    rotation: (2/3)*Math.PI,//2+(1/3),
+    circumference: (1+(2/3)) * Math.PI, // * Math.PI,
+    cutoutPercentage: 80,
+    animation: {
+      animateScale: false,
+      animateRotate: true
+    },
+    tooltips: {
+      enabled: false
+    }
+  },
+  centerText: {
+    display: true,
+    text: linkQ + "%"
+  },
+  plugins: [{
+    beforeDraw: function(chart) {
+      if (chart.config.centerText.display !== null &&
+        typeof chart.config.centerText.display !== 'undefined' &&
+        chart.config.centerText.display) {
+          drawLinkQ(chart);
+      }
+    }
+  }]
 };
 
-//Chart.Chart.pluginService.register({
-//    beforeDraw: function(chart) {
-//        if (chart.config.centerText.display !== null &&
-//            typeof chart.config.centerText.display !== 'undefined' &&
-//	    chart.config.centerText.display) {
-//                drawLinkQ(chart);
-//            }
-//    }
-//});
-
 function drawLinkQ(chart) {
 
-	let width = chart.chart.width;
-	let height = chart.chart.height;
-	let ctx = chart.chart.ctx;
+  let width = chart.chart.width;
+  let height = chart.chart.height;
+  let ctx = chart.chart.ctx;
 
-	ctx.restore();
-	let fontSize = (height / 100).toFixed(2);
-	ctx.font = fontSize + "em sans-serif";
-	ctx.fillStyle = labelColor;
-	ctx.textBaseline = "middle";
+  ctx.restore();
+  let fontSize = (height / 100).toFixed(2);
+  ctx.font = fontSize + "em sans-serif";
+  ctx.fillStyle = labelColor;
+  ctx.textBaseline = "middle";
 
-	let text = chart.config.centerText.text;
-	let textX = Math.round((width - ctx.measureText(text).width) * 0.5);
-	let textY = height / 2;
-	ctx.fillText(text, textX, textY);
-	ctx.save();
+  let text = chart.config.centerText.text;
+  let textX = Math.round((width - ctx.measureText(text).width) * 0.5);
+  let textY = height / 2;
+  ctx.fillText(text, textX, textY);
+  ctx.save();
 }
 
 window.onload = function() {
-	let ctx = document.getElementById("divChartLinkQ").getContext("2d");
-	window.myDoughnut = new Chart(ctx, config);
-	//drawLinkQ(Chart);
+  let ctx = document.getElementById("divChartLinkQ").getContext("2d");
+  var chart = new Chart(ctx, config);
 };