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 98a00488a3
commit 63f3aae9e6
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
}]
},
breakpoint: "680px"
breakpoint: 680
}
chart.style = "margin: 10px;";
}

22
scripts/chart.js
View File

@ -76,14 +76,25 @@ class ResourceChart extends HTMLElement {
tooltip: {
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) {
this.responsiveStyle.media = `screen and (width <= ${data.breakpoint})`;
this.responsiveStyle.media = `screen and (width <= ${data.breakpoint}px)`;
}
else {
this.responsiveStyle.media = "not all";
@ -99,4 +110,11 @@ function createChart (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);