diff --git a/scripts/account.js b/scripts/account.js
index c96904e..051e46b 100644
--- a/scripts/account.js
+++ b/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: {
- type: "pie",
- data: {
- labels: [
- "Used",
- "Available"
+ title: [resourceName, `Used ${usedStr} of ${maxStr}`],
+ ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`,
+ data: {
+ labels: [
+ "Used",
+ "Available"
+ ],
+ datasets: [{
+ label: resourceName,
+ data: [resourceUsed, resourceAvail],
+ backgroundColor: [
+ usedColor,
+ "rgb(140, 140, 140)"
],
- datasets: [{
- label: resourceName,
- 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
- }
- }
- }
+ borderWidth: 0,
+ hoverOffset: 4
+ }]
},
- ariaLabel: `${resourceName} used ${usedStr} of ${maxStr}`
- };
+ breakpoint: "680px"
+ }
chart.style = "margin: 10px;";
- chart.responsive = "680px";
}
function parseNumber (value, unitData) {
diff --git a/scripts/chart.js b/scripts/chart.js
index 2078080..2ac6aa8 100644
--- a/scripts/chart.js
+++ b/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 {
@@ -55,35 +55,43 @@ class CustomChart extends HTMLElement {
}
set data (data) {
- if (data.chart?.options?.plugins?.title.display) {
- data.chart.options.plugins.title.display = false;
- for (let line of data.chart.options.plugins.title.text) {
- this.caption.innerHTML += `${line}`
- }
+ for (let line of data.title) {
+ this.caption.innerHTML += `${line}`
}
+
this.canvas.role = "img";
this.canvas.ariaLabel = data.ariaLabel;
- createChart(this.canvas, data.chart);
-
-
- }
- get data () {
- return null;
- }
+ const chartData = {
+ type: "pie",
+ data: data.data,
+ options: {
+ plugins: {
+ title: {
+ display: false
+ },
+ legend: {
+ display: false
+ },
+ tooltip: {
+ enabled: true
+ }
+ }
+ },
+ }
- set responsive (breakpoint) {
- this.breakpoint = breakpoint;
- if (breakpoint) {
- this.responsiveStyle.media = `screen and (width <= ${breakpoint})`;
+ createChart(this.canvas, chartData);
+
+ if (data.breakpoint) {
+ this.responsiveStyle.media = `screen and (width <= ${data.breakpoint})`;
}
else {
this.responsiveStyle.media = "not all";
}
}
- get responsive () {
- return this.breakpoint;
+ get data () {
+ 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);