Migrate RooflineHM and Scatter components

- With this commit, all SV4 components are migrated to SV5

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

@@ -8,18 +8,56 @@
   - `maxY Number?`: maximum flopRateSimd of all subClusters [Default: null]
   - `width Number?`: Plot width (reactively adaptive) [Default: 500]
   - `height Number?`: Plot height (reactively adaptive) [Default: 300]
- -->
+-->
 
-<script context="module">
+<script>
-    const axesColor = '#aaaaaa'
+  import { onMount } from 'svelte'
-    const tickFontSize = 10
+  import { formatNumber } from '../units.js'
-    const labelFontSize = 12
-    const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
-    const paddingLeft = 40,
-        paddingRight = 10,
-        paddingTop = 10,
-        paddingBottom = 50
 
+  /* Svelte 5 Props */
+  let {
+    subCluster = null,
+    tiles = null,
+    maxY = null,
+    width = 500,
+    height = 300,
+  } = $props();
+
+  /* Check Before */
+  console.assert(tiles, "you must provide tiles!")
+
+  /* Const Init */
+  const axesColor = '#aaaaaa';
+  const tickFontSize = 10;
+  const labelFontSize = 12;
+  const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+  const paddingLeft = 40;
+  const paddingRight = 10;
+  const paddingTop = 10;
+  const paddingBottom = 5;
+
+  /* Var Init */
+  let timeoutId = null;
+
+  /* State Init */
+  let ctx = $state();
+  let canvasElement = $state();
+  let prevWidth = $state(width);
+  let prevHeight = $state(height);
+
+  /* Derived */
+  const data = $derived({
+    tiles: tiles,
+    xLabel: 'Intensity [FLOPS/byte]',
+    yLabel: 'Performance [GFLOPS]'
+  });
+
+  /* Effects */
+  $effect(() =>{
+    sizeChanged(width, height);
+  });
+
+  /* Functions */
   function lineIntersect(x1, y1, x2, y2, x3, y3, x4, y4) {
     let l = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)
     let a = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / l
@@ -184,27 +222,8 @@
     }
     ctx.stroke()
   }
-</script>
-
-<script>
-    import { onMount } from 'svelte'
-    import { formatNumber } from '../units.js'
-
-    export let subCluster  = null
-    export let tiles    = null
-    export let maxY     = null
-    export let width    = 500
-    export let height   = 300
-
-    console.assert(tiles, "you must provide tiles!")
-
-    let ctx, canvasElement, prevWidth = width, prevHeight = height
-    const data = {
-        tiles: tiles,
-        xLabel: 'Intensity [FLOPS/byte]',
-        yLabel: 'Performance [GFLOPS]'
-    }
 
+  /* On Mount */
   onMount(() => {
     ctx = canvasElement.getContext('2d')
     if (prevWidth != width || prevHeight != height) {
@@ -217,7 +236,6 @@
     render(ctx, data, subCluster, width, height, maxY)
   })
 
-    let timeoutId = null
   function sizeChanged() {
     if (!ctx)
       return
@@ -237,8 +255,6 @@
       render(ctx, data, subCluster, width, height, maxY)
     }, 250)
   }
-
-    $: sizeChanged(width, height)
 </script>
 
 <div class="cc-plot">

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

@@ -11,18 +11,44 @@
   - `xLabel String`:
   - `yLabel String`:
  -->
-
+<script>
-<script context="module">
+  import { onMount } from 'svelte';
   import { formatNumber } from '../units.js'
 
-    const axesColor = '#aaaaaa'
+  /* Svelte 5 Props */
-    const fontSize = 12
+  let {
-    const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
+    X,
-    const paddingLeft = 40,
+    Y,
-        paddingRight = 10,
+    S = null,
-        paddingTop = 10,
+    color = '#0066cc',
-        paddingBottom = 50
+    width = 250,
+    height = 300,
+    xLabel,
+    yLabel,
+  } = $props();
 
+  /* Const Init */
+  const axesColor = '#aaaaaa';
+  const fontSize = 12;
+  const fontFamily = 'system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"';
+  const paddingLeft = 40;
+  const paddingRight = 10;
+  const paddingTop = 10;
+  const paddingBottom = 50;
+
+  /* Var Init */
+  let timeoutId = null;
+
+  /* State Init */
+  let ctx = $state();
+  let canvasElement = $state();
+
+  /* Effects */
+  $effect(() => {
+    sizeChanged(width, height);
+  });
+
+  /* Functions */
   function getStepSize(valueRange, pixelRange, minSpace) {
     const proposition = valueRange / (pixelRange / minSpace);
     const getStepSize = n => Math.pow(10, Math.floor(n / 3)) *
@@ -41,6 +67,22 @@
     }
   }
 
+  function sizeChanged() {
+    if (timeoutId != null)
+      clearTimeout(timeoutId);
+
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      if (!canvasElement)
+        return;
+
+      canvasElement.width = width;
+      canvasElement.height = height;
+      ctx = canvasElement.getContext('2d');
+      render(ctx, X, Y, S, color, xLabel, yLabel, width, height);
+    }, 250);
+  }
+
   function render(ctx, X, Y, S, color, xLabel, yLabel, width, height) {
     if (width <= 0)
       return;
@@ -137,49 +179,14 @@
     }
     ctx.stroke();
   }
-</script>
-
-<script>
-    import { onMount } from 'svelte';
-
-    export let X;
-    export let Y;
-    export let S = null;
-    export let color = '#0066cc';
-    export let width = 250;
-    export let height = 300;
-    export let xLabel;
-    export let yLabel;
-
-    let ctx;
-    let canvasElement;
 
+  /* On Mount */
   onMount(() => {
     canvasElement.width = width;
     canvasElement.height = height;
     ctx = canvasElement.getContext('2d');
     render(ctx, X, Y, S, color, xLabel, yLabel, width, height);
   });
-
-    let timeoutId = null;
-    function sizeChanged() {
-        if (timeoutId != null)
-            clearTimeout(timeoutId);
-
-        timeoutId = setTimeout(() => {
-            timeoutId = null;
-            if (!canvasElement)
-                return;
-
-            canvasElement.width = width;
-            canvasElement.height = height;
-            ctx = canvasElement.getContext('2d');
-            render(ctx, X, Y, S, color, xLabel, yLabel, width, height);
-        }, 250);
-    }
-
-    $: sizeChanged(width, height);
-
 </script>
 
 <div class="cc-plot" bind:clientWidth={width}>