Migrate Pie and Polar components

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

@@ -12,7 +12,7 @@
     - `colors ['rgb(x,y,z)', ...]`: Color range used for segments; upstream used for legend
  -->
 
-<script context="module">
+<script module>
   // http://tsitsul.in/blog/coloropt/ : 12 colors normal
   export const colors = [
     'rgb(235,172,35)',
@@ -28,19 +28,25 @@
     'rgb(135,133,0)',
     'rgb(0,167,108)',
     'rgb(189,189,189)'
-    ]
+  ];
 </script>
+
 <script>
-    import Chart from 'chart.js/auto'
+  /* Ignore Double Script Section Error in IDE */
+  import Chart from 'chart.js/auto';
   import { onMount } from 'svelte';
 
-    export let canvasId = "pie-default"
+  /* Svelte 5 Props */
-    export let size
+  let {
-    export let sliceLabel
+    canvasId = "pie-default",
-    export let quantities
+    size,
-    export let entities
+    sliceLabel,
-    export let displayLegend = false
+    quantities,
+    entities,
+    displayLegend = false,
+  } = $props();
 
+  /* Const Init */
   const data = {
     labels: entities,
     datasets: [
@@ -51,7 +57,7 @@
         backgroundColor: colors.slice(0, quantities.length)
       }
     ]
-    }
+  };
 
   const options = { 
     maintainAspectRatio: false,
@@ -61,8 +67,9 @@
         display: displayLegend
       }
     }
-    }
+  };
 
+  /* On Mount */
   onMount(() => {
     new Chart(
       document.getElementById(canvasId),
@@ -73,7 +80,6 @@
       }
     );
 	});
-
 </script>
 
 <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->

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

@@ -8,7 +8,7 @@
  -->
 
 <script>
-    import { getContext, onMount } from 'svelte'
+  import { onMount } from 'svelte'
   import Chart from 'chart.js/auto'
   import {
     Chart as ChartJS,
@@ -21,6 +21,7 @@
     LineElement
   } from 'chart.js';
 
+  /* Register Chart.js Components */
   ChartJS.register(
     Title,
     Tooltip,
@@ -31,41 +32,34 @@
     LineElement
   );
 
+  /* Svelte 5 Props */
+  let {
+    polarMetrics = [],
+    polarData = [],
+    canvasId = "polar-default",
+    height = 350,
+  } = $props();
 
-    export let polarMetrics = [];
+  /* Const Init */
-    export let polarData = [];
+  const options = {
-    export let canvasId = "polar-default";
+    maintainAspectRatio: true,
-    export let height = 350;
+    animation: false,
+    scales: { // fix scale
+      r: {
+        suggestedMin: 0.0,
+        suggestedMax: 1.0
+      }
+    }
+  }
 
-    const labels = polarMetrics
+  /* Derived */
+  const labels = $derived(polarMetrics
     .filter((m) => (m.peak != null))
     .map(pm => pm.name)
-        .sort(function (a, b) {return ((a > b) ? 1 : ((b > a) ? -1 : 0))});
+    .sort(function (a, b) {return ((a > b) ? 1 : ((b > a) ? -1 : 0))})
+  );
 
-    function loadData(type) {
+  const data = $derived({
-        if (labels && (type == 'avg' || type == 'min' ||type == 'max')) {
-            return getValues(type)
-        } else if (!labels) {
-            console.warn("Empty 'polarMetrics' array prop! Cannot render Polar representation.")
-        } else {
-            console.warn('Unknown Type For Polar Data (must be one of [min, max, avg])')
-        }
-        return []
-    }
-
-    // Helper
-
-    const getValues = (type) => labels.map(name => {
-        // Peak is adapted and scaled for job shared state
-        const peak = polarMetrics.find(m => m?.name == name)?.peak
-        const metric = polarData.find(m => m?.name == name)?.data
-        const value = (peak && metric) ? (metric[type] / peak) : 0
-        return value <= 1. ? value : 1.
-    })
-
-    // Chart JS Objects
-
-    const data = {
     labels: labels,
     datasets: [
       {
@@ -102,20 +96,30 @@
         pointHoverBorderColor: 'rgb(255, 0, 0)'
       }
     ]
+  });
+
+  /* Functions */
+  function loadData(type) {
+    if (labels && (type == 'avg' || type == 'min' ||type == 'max')) {
+      return getValues(type)
+    } else if (!labels) {
+      console.warn("Empty 'polarMetrics' array prop! Cannot render Polar representation.")
+    } else {
+      console.warn('Unknown Type For Polar Data (must be one of [min, max, avg])')
+    }
+    return []
   }
 
-    // No custom defined options but keep for clarity 
+  // Helper
-    const options = {
+  const getValues = (type) => labels.map(name => {
-        maintainAspectRatio: true,
+    // Peak is adapted and scaled for job shared state
-        animation: false,
+    const peak = polarMetrics.find(m => m?.name == name)?.peak
-        scales: { // fix scale
+    const metric = polarData.find(m => m?.name == name)?.data
-            r: {
+    const value = (peak && metric) ? (metric[type] / peak) : 0
-                suggestedMin: 0.0,
+    return value <= 1. ? value : 1.
-                suggestedMax: 1.0
+  })
-            }
-        }
-    }
 
+  /* On Mount */
   onMount(() => {
     new Chart(
       document.getElementById(canvasId),
@@ -127,7 +131,6 @@
       }
     );
   });
-
 </script>
 
 <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->

web/frontend/src/job/jobsummary/JobFootprintPolar.svelte

@@ -17,8 +17,8 @@
       CardBody,
       Spinner
     } from "@sveltestrap/sveltestrap";
-    import Polar from "../../generic/plots/Polar.svelte";
     import { findJobFootprintThresholds } from "../../generic/utils.js";
+    import Polar from "../../generic/plots/Polar.svelte";
 
     /* Svelte 5 Props */
     let { job } = $props();