36 lines
726 B
JavaScript
36 lines
726 B
JavaScript
|
class CustomChart extends HTMLElement {
|
||
|
|
constructor (data) {
|
||
|
|
super();
|
||
|
|
this.attachShadow({ mode: "open" });
|
||
|
|
this.shadowRoot.innerHTML = `
|
||
|
|
<style>
|
||
|
|
div {
|
||
|
|
min-width: 200px;
|
||
|
|
max-width: 400px;
|
||
|
|
aspect-ratio: 1 / 1;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div>
|
||
|
|
<canvas>
|
||
|
|
</div>
|
||
|
|
`;
|
||
|
|
this.canvas = this.shadowRoot.querySelector("canvas");
|
||
|
|
}
|
||
|
|
|
||
|
|
set data (data) {
|
||
|
|
this.canvas.role = "img";
|
||
|
|
this.canvas.ariaLabel = data.ariaLabel;
|
||
|
|
createChart(this.canvas, data.chart);
|
||
|
|
}
|
||
|
|
|
||
|
|
get data () {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function createChart (ctx, data) {
|
||
|
|
return new Chart(ctx, data);
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define("custom-chart", CustomChart);
|