diff --git a/scripts/account.js b/scripts/account.js index 1626aac..94abc7f 100644 --- a/scripts/account.js +++ b/scripts/account.js @@ -83,7 +83,7 @@ function createResourceUsageChart (container, resourceName, resourceAvail, resou }] }, breakpoint: 680 - } + }; chart.style = "margin: 10px;"; } diff --git a/scripts/chart.js b/scripts/chart.js index 24a8ba9..cea5144 100644 --- a/scripts/chart.js +++ b/scripts/chart.js @@ -50,13 +50,13 @@ class ResourceChart extends HTMLElement { `; this.responsiveStyle = this.shadowRoot.querySelector("#responsive-style"); - this.canvas = this.shadowRoot.querySelector("canvas"); + this.canvas = this.shadowRoot.querySelector("canvas"); this.caption = this.shadowRoot.querySelector("figcaption"); } set data (data) { - for (let line of data.title) { - this.caption.innerHTML += `${line}` + for (const line of data.title) { + this.caption.innerHTML += `${line}`; } this.canvas.role = "img"; @@ -80,16 +80,16 @@ class ResourceChart extends HTMLElement { interaction: { mode: "nearest" }, - onHover: function(e, activeElements) { - if (window.innerWidth <= data.breakpoint) { - updateTooltipShow(e.chart, false); - } - else { - updateTooltipShow(e.chart, true); - } - }, - }, - } + onHover: function (e, activeElements) { + if (window.innerWidth <= data.breakpoint) { + updateTooltipShow(e.chart, false); + } + else { + updateTooltipShow(e.chart, true); + } + } + } + }; this.chart = createChart(this.canvas, chartData); @@ -107,10 +107,10 @@ class ResourceChart extends HTMLElement { } function createChart (ctx, data) { - return new Chart(ctx, data); + return new window.Chart(ctx, data); } -// this is a really bad way to do this, but chartjs api does not expose many ways to dynamically set hover and tooltip options +// this is a really bad way to do this, but chartjs api does not expose many ways to dynamically set hover and tooltip options function updateTooltipShow (chart, enabled) { chart.options.plugins.tooltip.enabled = enabled; chart.options.interaction.mode = enabled ? "nearest" : null;