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,42 +64,27 @@ 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: {
+		data: {
-				labels: [
+			labels: [
-					"Used",
+				"Used",
-					"Available"
+				"Available"
+			],
+			datasets: [{
+				label: resourceName,
+				data: [resourceUsed, resourceAvail],
+				backgroundColor: [
+					usedColor,
+					"rgb(140, 140, 140)"
 				],
-				datasets: [{
+				borderWidth: 0,
-					label: resourceName,
+				hoverOffset: 4
-					data: [resourceUsed, resourceAvail],
+			}]
-					backgroundColor: [
-						usedColor,
-						"rgb(140, 140, 140)"
-					],
-					borderWidth: 0,
-					hoverOffset: 4
-				}]
-			},
-			options: {
-				plugins: {
-					title: {
-						display: true,
-						position: "bottom",
-						text: [resourceName, `Used ${usedStr} of ${maxStr}`],
-						color: "white"
-					},
-					legend: {
-						display: false
-					}
-				}
-			}
 		},
-		ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`
+		breakpoint: "680px"
-	};
+	}
 	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;
+			this.caption.innerHTML += `<span>${line}</span>`
-			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
+					}
+				}
+			},
+		}
 
-	}
+		createChart(this.canvas, chartData);
 
-	get data () {
+		if (data.breakpoint) {
-		return null;
+			this.responsiveStyle.media = `screen and (width <= ${data.breakpoint})`;
-	}
-
-	set responsive (breakpoint) {
-		this.breakpoint = 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);