ProxmoxAAS-Dashboard/scripts/chart.js

103 lines
1.9 KiB
JavaScript
Raw Normal View History

2023-10-09 23:30:39 +00:00
class ResourceChart extends HTMLElement {
constructor () {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
* {
box-sizing: border-box;
font-family: monospace;
}
figure {
margin: 0;
}
div {
max-width: 400px;
aspect-ratio: 1 / 1;
}
figcaption {
text-align: center;
margin-top: 10px;
display: flex;
flex-direction: column;
}
</style>
<style id="responsive-style" media="not all">
figure {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
div {
max-height: 1lh;
}
figcaption {
margin: 0;
margin-left: 10px;
display: flex;
flex-direction: row;
gap: 1ch;
font-size: small;
}
</style>
<figure>
<div>
2023-10-09 23:30:39 +00:00
<canvas></canvas>
</div>
<figcaption></figcaption>
</figure>
`;
this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style");
this.canvas = this.shadowRoot.querySelector("canvas");
this.caption = this.shadowRoot.querySelector("figcaption");
}
set data (data) {
2023-10-09 23:30:39 +00:00
for (let line of data.title) {
this.caption.innerHTML += `<span>${line}</span>`
}
2023-10-09 23:30:39 +00:00
this.canvas.role = "img";
this.canvas.ariaLabel = data.ariaLabel;
2023-10-09 23:30:39 +00:00
const chartData = {
type: "pie",
data: data.data,
options: {
plugins: {
title: {
display: false
},
legend: {
display: false
},
tooltip: {
enabled: true
}
}
},
}
createChart(this.canvas, chartData);
2023-10-09 23:30:39 +00:00
if (data.breakpoint) {
this.responsiveStyle.media = `screen and (width <= ${data.breakpoint})`;
}
else {
this.responsiveStyle.media = "not all";
}
}
2023-10-09 23:30:39 +00:00
get data () {
return null;
}
}
function createChart (ctx, data) {
return new Chart(ctx, data);
}
2023-10-09 23:30:39 +00:00
customElements.define("resource-chart", ResourceChart);