ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-11-13 02:17:25 +01:00
Code Issues Packages Releases Activity

fix: hover legend display now depends on datasize

Browse Source
This commit is contained in:
Christoph Kluge 2023-08-09 12:43:58 +02:00
parent e32042204b
commit f286872a33
1 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/frontend/src/plots/MetricPlot.svelte
View File

@ -57,6 +57,7 @@
// converts the legend into a simple tooltip // converts the legend into a simple tooltip
function legendAsTooltipPlugin({ className, style = { backgroundColor:"rgba(255, 249, 196, 0.92)", color: "black" } } = {}) { function legendAsTooltipPlugin({ className, style = { backgroundColor:"rgba(255, 249, 196, 0.92)", color: "black" } } = {}) {
let legendEl; let legendEl;
const dataSize = series.length
function init(u, opts) { function init(u, opts) {
legendEl = u.root.querySelector(".u-legend"); legendEl = u.root.querySelector(".u-legend");
@ -76,11 +77,14 @@
...style ...style
}); });
// hide series color markers // conditional hide series color markers:
const idents = legendEl.querySelectorAll(".u-marker"); if (useStatsSeries === true || // Min/Max/Avg Self-Explanatory
dataSize === 1 || // Only one Y-Dataseries
for (let i = 0; i < idents.length; i++) dataSize > 6 ){ // More than 6 Y-Dataseries
idents[i].style.display = "none"; const idents = legendEl.querySelectorAll(".u-marker");
for (let i = 0; i < idents.length; i++)
idents[i].style.display = "none";
}
const overEl = u.over; const overEl = u.over;
overEl.style.overflow = "visible"; overEl.style.overflow = "visible";
@ -93,7 +97,7 @@
overEl.addEventListener("mouseleave", () => {legendEl.style.display = "none";}); overEl.addEventListener("mouseleave", () => {legendEl.style.display = "none";});
// let tooltip exit plot // let tooltip exit plot
// overEl.style.overflow = "visible"; // overEl.style.overflow = "visible";
} }
function update(u) { function update(u) {
@ -102,12 +106,16 @@
legendEl.style.transform = "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)"; legendEl.style.transform = "translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
} }
return { if (dataSize <= 12 || useStatsSeries === true) {
hooks: { return {
init: init, hooks: {
setCursor: update, init: init,
setCursor: update,
}
} }
}; } else { // Setting legend-opts show/live as object with false here will not work ...
return {}
}
} }
function backgroundColor() { function backgroundColor() {
@ -240,6 +248,10 @@
x: { time: false }, x: { time: false },
y: maxY ? { range: [0., maxY * 1.1] } : {} y: maxY ? { range: [0., maxY * 1.1] } : {}
}, },
legend : { // Display legend until max 12 Y-dataseries
show: (series.length <= 12 || useStatsSeries === true) ? true : false,
live: (series.length <= 12 || useStatsSeries === true) ? true : false
},
cursor: { drag: { x: true, y: true } } cursor: { drag: { x: true, y: true } }
} }