ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-12-19 05:36:17 +01:00
Code Issues Packages Releases Activity

add optional legend flip to plots

Browse Source
This commit is contained in:
Christoph Kluge
2025-11-12 17:20:50 +01:00
parent f56783a439
commit 404be5f317
10 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
web/frontend/src/generic/plots/Comparogram.svelte
View File

@@ -271,9 +271,12 @@
function update(u) {
const { left, top } = u.cursor;
const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
legendEl.style.transform =
"translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
if (left < (width/2)) {
legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
} else {
legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
}
}
return {
@@ -289,7 +292,7 @@
if (!uplot) {
opts.width = ren_width;
opts.height = ren_height;
if (plotSync) {
opts.cursor.sync = {
key: plotSync.key,

9
web/frontend/src/generic/plots/Histogram.svelte
View File

@@ -34,6 +34,7 @@
xtime = false,
ylabel = "",
yunit = "",
enableFlip = false,
} = $props();
/* Const Init */
@@ -117,8 +118,12 @@
function update(u) {
const { left, top } = u.cursor;
legendEl.style.transform =
"translate(" + (left + 15) + "px, " + (top + 15) + "px)";
const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
if (enableFlip && (left < (width/2))) {
legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
} else {
legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
}
}
return {

12
web/frontend/src/generic/plots/MetricPlot.svelte
View File

@@ -49,6 +49,7 @@
thresholdState = null,
extendedLegendData = null,
plotSync = null,
enableFlip = false,
onZoom
} = $props();
@@ -396,9 +397,12 @@
function update(u) {
const { left, top } = u.cursor;
const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
legendEl.style.transform =
"translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
if (enableFlip && (left < (width/2))) {
legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
} else {
legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
}
}
if (dataSize <= 12 || useStatsSeries) {
@@ -593,7 +597,7 @@
if ((thresholdState === thresholds?.normal)) { opts.scales = {...zoomState} };
} // else: reset scaling to default
}
uplot = new uPlot(opts, plotData, plotWrapper);
} else {
uplot.setSize({ width: ren_width, height: ren_height });

9
web/frontend/src/generic/plots/Stacked.svelte
View File

@@ -271,9 +271,12 @@
function update(u) {
const { left, top } = u.cursor;
const width = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
legendEl.style.transform =
"translate(" + (left - width - 15) + "px, " + (top + 15) + "px)";
const internalWidth = u?.over?.querySelector(".u-legend")?.offsetWidth ? u.over.querySelector(".u-legend").offsetWidth : 0;
if (left < (width/2)) {
legendEl.style.transform = "translate(" + (left + 15) + "px, " + (top + 15) + "px)";
} else {
legendEl.style.transform = "translate(" + (left - internalWidth - 15) + "px, " + (top + 15) + "px)";
}
}
return {