improve resource chart interface

This commit is contained in:
Arthur Lu 2023-10-09 23:30:39 +00:00
parent 4c11714958
commit 98a00488a3
2 changed files with 48 additions and 55 deletions

View File

@ -55,7 +55,7 @@ function populateResources (containerID, meta, resources) {
} }
function createResourceUsageChart (container, resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) { function createResourceUsageChart (container, resourceName, resourceAvail, resourceUsed, resourceMax, resourceUnitData) {
const chart = document.createElement("custom-chart"); const chart = document.createElement("resource-chart");
container.append(chart); container.append(chart);
const maxStr = parseNumber(resourceMax, resourceUnitData); const maxStr = parseNumber(resourceMax, resourceUnitData);
const usedStr = parseNumber(resourceUsed, 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 G = Math.min((1 - usedRatio) * 510, 255);
const usedColor = `rgb(${R}, ${G}, 0)`; const usedColor = `rgb(${R}, ${G}, 0)`;
chart.data = { 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.style = "margin: 10px;";
chart.responsive = "680px";
} }
function parseNumber (value, unitData) { function parseNumber (value, unitData) {

View File

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