Migrate Histogram and Roofline components

web/frontend/src/generic/plots/Histogram.svelte

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

web/frontend/src/generic/plots/Roofline.svelte

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