tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

remove hover effects for small charts

Browse Source
This commit is contained in:
Arthur Lu 2023-10-11 00:26:25 +00:00
parent c427fd0a72
commit 36ceb0d1fa
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
scripts/account.js
View File

@ -82,7 +82,7 @@ function createResourceUsageChart (container, resourceName, resourceAvail, resou
hoverOffset: 4 hoverOffset: 4
}] }]
}, },
breakpoint: "680px" breakpoint: 680
} }
chart.style = "margin: 10px;"; chart.style = "margin: 10px;";
} }

22
scripts/chart.js
View File

@ -76,14 +76,25 @@ class ResourceChart extends HTMLElement {
tooltip: { tooltip: {
enabled: true enabled: true
} }
},
interaction: {
mode: "nearest"
},
onHover: function(e, activeElements) {
if (window.innerWidth <= data.breakpoint) {
updateTooltipShow(e.chart, false);
} }
else {
updateTooltipShow(e.chart, true);
}
},
}, },
} }
createChart(this.canvas, chartData); this.chart = createChart(this.canvas, chartData);
if (data.breakpoint) { if (data.breakpoint) {
this.responsiveStyle.media = `screen and (width <= ${data.breakpoint})`; this.responsiveStyle.media = `screen and (width <= ${data.breakpoint}px)`;
} }
else { else {
this.responsiveStyle.media = "not all"; this.responsiveStyle.media = "not all";
@ -99,4 +110,11 @@ function createChart (ctx, data) {
return new Chart(ctx, data); return new 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
function updateTooltipShow (chart, enabled) {
chart.options.plugins.tooltip.enabled = enabled;
chart.options.interaction.mode = enabled ? "nearest" : null;
chart.update();
}
customElements.define("resource-chart", ResourceChart); customElements.define("resource-chart", ResourceChart);