improve resource chart interface

scripts/account.js

@@ -55,7 +55,7 @@ function populateResources (containerID, meta, resources) {
 }
 
 function createResourceUsageChart (container, resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
-	const chart = document.createElement("custom-chart");
+	const chart = document.createElement("resource-chart");
 	container.append(chart);
 	const maxStr = parseNumber(resourceMax, resourceUnitData);
 	const usedStr = parseNumber(resourceUsed, resourceUnitData);
@@ -64,8 +64,8 @@ function createResourceUsageChart (container, resourceName, resourceAvail, resou
 	const G = Math.min((1 - usedRatio) * 510, 255);
 	const usedColor = `rgb(${R}, ${G}, 0)`;
 	chart.data = {
-		chart: {
+		title: [resourceName, `Used ${usedStr} of ${maxStr}`],
-			type: "pie",
+		ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`,
 		data: {
 			labels: [
 				"Used",
@@ -82,24 +82,9 @@ function createResourceUsageChart (container, resourceName, resourceAvail, resou
 				hoverOffset: 4
 			}]
 		},
-			options: {
+		breakpoint: "680px"
-				plugins: {
-					title: {
-						display: true,
-						position: "bottom",
-						text: [resourceName, `Used ${usedStr} of ${maxStr}`],
-						color: "white"
-					},
-					legend: {
-						display: false
 	}
-				}
-			}
-		},
-		ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`
-	};
 	chart.style = "margin: 10px;";
-	chart.responsive = "680px";
 }
 
 function parseNumber (value, unitData) {

scripts/chart.js

@@ -1,4 +1,4 @@
-class CustomChart extends HTMLElement {
+class ResourceChart extends HTMLElement {
 	constructor () {
 		super();
 		this.attachShadow({ mode: "open" });
@@ -44,7 +44,7 @@ class CustomChart extends HTMLElement {
 			</style>
 			<figure>
 				<div>
-					<canvas>
+					<canvas></canvas>
 				</div>
 				<figcaption></figcaption>
 			</figure>
@@ -55,35 +55,43 @@ class CustomChart extends HTMLElement {
 	}
 
 	set data (data) {
-		if (data.chart?.options?.plugins?.title.display) {
+		for (let line of data.title) {
-			data.chart.options.plugins.title.display = false;
-			for (let line of data.chart.options.plugins.title.text) {
 			this.caption.innerHTML += `<span>${line}</span>`
 		}
-		}
+
 		this.canvas.role = "img";
 		this.canvas.ariaLabel = data.ariaLabel;
-		createChart(this.canvas, data.chart);
-		
 
+		const chartData = {
+			type: "pie",
+			data: data.data,
+			options: {
+				plugins: {
+					title: {
+						display: false
+					},
+					legend: {
+						display: false
+					},
+					tooltip: {
+						enabled: true
+					}
+				}
+			},
 		}
 
-	get data () {
+		createChart(this.canvas, chartData);
-		return null;
-	}
 
-	set responsive (breakpoint) {
+		if (data.breakpoint) {
-		this.breakpoint = breakpoint;
+			this.responsiveStyle.media = `screen and (width <= ${data.breakpoint})`;
-		if (breakpoint) {
-			this.responsiveStyle.media = `screen and (width <= ${breakpoint})`;
 		}
 		else {
 			this.responsiveStyle.media = "not all";
 		}
 	}
 
-	get responsive () {
+	get data () {
-		return this.breakpoint;
+		return null;
 	}
 }
 
@@ -91,4 +99,4 @@ function createChart (ctx, data) {
 	return new Chart(ctx, data);
 }
 
-customElements.define("custom-chart", CustomChart);
+customElements.define("resource-chart", ResourceChart);