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

Migrate Histogram and Roofline components

Browse Source
This commit is contained in:
Christoph Kluge 2025-07-01 16:33:07 +02:00
parent aa8789f8f8
commit 1ad80efab6
2 changed files with 80 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,23 +19,41 @@
import { formatNumber, formatTime } from "../units.js"; import { formatNumber, formatTime } from "../units.js";
import { Card } from "@sveltestrap/sveltestrap"; import { Card } from "@sveltestrap/sveltestrap";
export let data; /* Svelte 5 Props */
export let usesBins = false; let {
export let width = null; data,
export let height = 250; usesBins = false,
export let title = ""; width = null,
export let xlabel = ""; height = 250,
export let xunit = ""; title = "",
export let xtime = false; xlabel = "",
export let ylabel = ""; xunit = "",
export let yunit = ""; xtime = false,
ylabel = "",
yunit = "",
} = $props();
/* Const Init */
const { bars } = uPlot.paths; const { bars } = uPlot.paths;
const drawStyles = { const drawStyles = {
bars: 1, bars: 1,
points: 2, points: 2,
}; };
/* Var Init */
let timeoutId = null;
/* State Init */
let plotWrapper = $state(null);
let uplot = $state(null);
/* Effect */
$effect(() => {
sizeChanged(width, height);
});
/* Functions */
// Render Helper
function paths(u, seriesIdx, idx0, idx1, extendGap, buildClip) { function paths(u, seriesIdx, idx0, idx1, extendGap, buildClip) {
let s = u.series[seriesIdx]; let s = u.series[seriesIdx];
let style = s.drawStyle; let style = s.drawStyle;
@ -108,9 +126,17 @@
}; };
} }
let plotWrapper = null; // Main Functions
let uplot = null; function sizeChanged() {
let timeoutId = null; if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (uplot) uplot.destroy();
render();
}, 200);
};
function render() { function render() {
let opts = { let opts = {
@ -217,28 +243,16 @@
uplot = new uPlot(opts, data, plotWrapper); uplot = new uPlot(opts, data, plotWrapper);
} }
/* On Mount */
onMount(() => { onMount(() => {
render(); render();
}); });
/* On Destroy */
onDestroy(() => { onDestroy(() => {
if (uplot) uplot.destroy(); if (uplot) uplot.destroy();
if (timeoutId != null) clearTimeout(timeoutId); if (timeoutId != null) clearTimeout(timeoutId);
}); });
function sizeChanged() {
if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (uplot) uplot.destroy();
render();
}, 200);
}
$: sizeChanged(width, height);
</script> </script>
<!-- Define Wrapper and NoData Card within $width --> <!-- Define Wrapper and NoData Card within $width -->

65
web/frontend/src/generic/plots/Roofline.svelte
View File

@ -28,21 +28,34 @@
import { onMount, onDestroy } from "svelte"; import { onMount, onDestroy } from "svelte";
import { Card } from "@sveltestrap/sveltestrap"; import { Card } from "@sveltestrap/sveltestrap";
export let data = null; /* Svelte 5 Props */
export let renderTime = false; let {
export let allowSizeChange = false; data = null,
export let subCluster = null; renderTime = false,
export let width = 600; allowSizeChange = false,
export let height = 380; subCluster = null,
width = 600,
height = 380,
} = $props();
let plotWrapper = null; /* Const Init */
let uplot = null; const lineWidth = clusterCockpitConfig?.plot_general_lineWidth || 2;
let timeoutId = null;
const lineWidth = clusterCockpitConfig.plot_general_lineWidth;
const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false; const cbmode = clusterCockpitConfig?.plot_general_colorblindMode || false;
// Helpers /* Var Init */
let timeoutId = null;
/* State Init */
let plotWrapper = $state(null);
let uplot = $state(null);
/* Effect */
$effect(() => {
if (allowSizeChange) sizeChanged(width, height);
});
/* Functions */
// Helper
function getGradientR(x) { function getGradientR(x) {
if (x < 0.5) return 0; if (x < 0.5) return 0;
if (x > 0.75) return 255; if (x > 0.75) return 255;
@ -75,7 +88,6 @@
y: y1 + a * (y2 - y1), y: y1 + a * (y2 - y1),
}; };
} }
// End Helpers
// Dot Renderers // Dot Renderers
const drawColorPoints = (u, seriesIdx, idx0, idx1) => { const drawColorPoints = (u, seriesIdx, idx0, idx1) => {
@ -175,7 +187,17 @@
return null; return null;
}; };
// Main Function // Main Functions
function sizeChanged() {
if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (uplot) uplot.destroy();
render(data);
}, 200);
}
function render(plotData) { function render(plotData) {
if (plotData) { if (plotData) {
const opts = { const opts = {
@ -341,25 +363,16 @@
} }
} }
// Svelte and Sizechange /* On Mount */
onMount(() => { onMount(() => {
render(data); render(data);
}); });
/* On Destroy */
onDestroy(() => { onDestroy(() => {
if (uplot) uplot.destroy(); if (uplot) uplot.destroy();
if (timeoutId != null) clearTimeout(timeoutId); if (timeoutId != null) clearTimeout(timeoutId);
}); });
function sizeChanged() {
if (timeoutId != null) clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
timeoutId = null;
if (uplot) uplot.destroy();
render(data);
}, 200);
}
$: if (allowSizeChange) sizeChanged(width, height);
</script> </script>
{#if data != null} {#if data != null}