ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2025-07-27 06:36:07 +02:00
Code Issues Packages Releases Activity

replace plotTable with new bootstrap plotGrid component

Browse Source 
- helps with narrow window sizes
- plotTable kept for now
This commit is contained in:
Christoph Kluge
2024-10-02 17:48:46 +02:00
parent 0ff5c4bedd
commit 7243dbe763
12 changed files with 305 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -549,6 +549,10 @@
onMount(() => {
if (series[0].data.length > 0) {
if (forNode) {
plotWrapper.style.paddingTop = "0.5rem"
plotWrapper.style.paddingBottom = "0.5rem"
}
plotWrapper.style.backgroundColor = backgroundColor();
render();
}
@@ -562,7 +566,7 @@
</script>
{#if series[0].data.length > 0}
<div bind:this={plotWrapper} class="cc-plot"></div>
<div bind:this={plotWrapper} class="cc-plot"/>
{:else}
<Card class="mx-4" body color="warning"
>Cannot render plot: No series data returned for <code>{metric}</code></Card

28
web/frontend/src/generic/plots/Scatter.svelte
View File

@@ -46,8 +46,8 @@
return;
const [minX, minY] = [0., 0.];
let maxX = X.reduce((maxX, x) => Math.max(maxX, x), minX);
let maxY = Y.reduce((maxY, y) => Math.max(maxY, y), minY);
let maxX = X ? X.reduce((maxX, x) => Math.max(maxX, x), minX) : 1.0;
let maxY = Y ? Y.reduce((maxY, y) => Math.max(maxY, y), minY) : 1.0;
const w = width - paddingLeft - paddingRight;
const h = height - paddingTop - paddingBottom;
@@ -68,24 +68,26 @@
// Draw Data
let size = 3
if (S) {
if (S && X && Y) {
let max = S.reduce((max, s, i) => (X[i] == null || Y[i] == null || Number.isNaN(X[i]) || Number.isNaN(Y[i])) ? max : Math.max(max, s), 0)
size = (w / 15) / max
}
ctx.fillStyle = color;
for (let i = 0; i < X.length; i++) {
let x = X[i], y = Y[i];
if (x == null || y == null || Number.isNaN(x) || Number.isNaN(y))
continue;
if (X?.length > 0) {
for (let i = 0; i < X.length; i++) {
let x = X[i], y = Y[i];
if (x == null || y == null || Number.isNaN(x) || Number.isNaN(y))
continue;
const s = S ? S[i] * size : size;
const px = getCanvasX(x);
const py = getCanvasY(y);
const s = S ? S[i] * size : size;
const px = getCanvasX(x);
const py = getCanvasY(y);
ctx.beginPath();
ctx.arc(px, py, s, 0, Math.PI * 2, false);
ctx.fill();
ctx.beginPath();
ctx.arc(px, py, s, 0, Math.PI * 2, false);
ctx.fill();
}
}
// Axes