From 48150ffc8b2bff8de71dbf1bc6f63bbd02554343 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Tue, 1 Jul 2025 17:25:52 +0200
Subject: [PATCH] Migrate Pie and Polar components

---
 web/frontend/src/generic/plots/Pie.svelte     | 130 ++++-----
 web/frontend/src/generic/plots/Polar.svelte   | 249 +++++++++---------
 .../job/jobsummary/JobFootprintPolar.svelte   |   4 +-
 3 files changed, 196 insertions(+), 187 deletions(-)

diff --git a/web/frontend/src/generic/plots/Pie.svelte b/web/frontend/src/generic/plots/Pie.svelte
index 6cf68c7..060a41c 100644
--- a/web/frontend/src/generic/plots/Pie.svelte
+++ b/web/frontend/src/generic/plots/Pie.svelte
@@ -12,80 +12,86 @@
     - `colors ['rgb(x,y,z)', ...]`: Color range used for segments; upstream used for legend
  -->
 
-<script context="module">
-    // http://tsitsul.in/blog/coloropt/ : 12 colors normal
-    export const colors = [
-        'rgb(235,172,35)',
-        'rgb(184,0,88)',
-        'rgb(0,140,249)',
-        'rgb(0,110,0)',
-        'rgb(0,187,173)',
-        'rgb(209,99,230)',
-        'rgb(178,69,2)',
-        'rgb(255,146,135)',
-        'rgb(89,84,214)',
-        'rgb(0,198,248)',
-        'rgb(135,133,0)',
-        'rgb(0,167,108)',
-        'rgb(189,189,189)'
-    ]
+<script module>
+  // http://tsitsul.in/blog/coloropt/ : 12 colors normal
+  export const colors = [
+    'rgb(235,172,35)',
+    'rgb(184,0,88)',
+    'rgb(0,140,249)',
+    'rgb(0,110,0)',
+    'rgb(0,187,173)',
+    'rgb(209,99,230)',
+    'rgb(178,69,2)',
+    'rgb(255,146,135)',
+    'rgb(89,84,214)',
+    'rgb(0,198,248)',
+    'rgb(135,133,0)',
+    'rgb(0,167,108)',
+    'rgb(189,189,189)'
+  ];
 </script>
+
 <script>
-    import Chart from 'chart.js/auto'
-    import { onMount } from 'svelte';
+  /* Ignore Double Script Section Error in IDE */
+  import Chart from 'chart.js/auto';
+  import { onMount } from 'svelte';
 
-    export let canvasId = "pie-default"
-    export let size
-    export let sliceLabel
-    export let quantities
-    export let entities
-    export let displayLegend = false
+  /* Svelte 5 Props */
+  let {
+    canvasId = "pie-default",
+    size,
+    sliceLabel,
+    quantities,
+    entities,
+    displayLegend = false,
+  } = $props();
 
-    const data = {
-        labels: entities,
-        datasets: [
-            {
-                label: sliceLabel,
-                data: quantities,
-                fill: 1,
-                backgroundColor: colors.slice(0, quantities.length)
-            }
-        ]
+  /* Const Init */
+  const data = {
+    labels: entities,
+    datasets: [
+      {
+        label: sliceLabel,
+        data: quantities,
+        fill: 1,
+        backgroundColor: colors.slice(0, quantities.length)
+      }
+    ]
+  };
+
+  const options = { 
+    maintainAspectRatio: false,
+    animation: false,
+    plugins: {
+      legend: {
+        display: displayLegend
+      }
     }
+  };
 
-    const options = { 
-        maintainAspectRatio: false,
-        animation: false,
-        plugins: {
-            legend: {
-                display: displayLegend
-            }
-        }
-    }
-
-    onMount(() => {
-        new Chart(
-            document.getElementById(canvasId),
-            {
-                type: 'pie',
-                data: data,
-                options: options
-            }
-        );
+  /* On Mount */
+  onMount(() => {
+    new Chart(
+      document.getElementById(canvasId),
+      {
+        type: 'pie',
+        data: data,
+        options: options
+      }
+    );
 	});
-
 </script>
 
 <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
 <div class="chart-container" style="--container-width: {size}; --container-height: {size}">
-    <canvas id={canvasId}></canvas>
+  <canvas id={canvasId}></canvas>
 </div>
 
 <style>
-    .chart-container {
-        position: relative;
-        margin: auto;
-        height: var(--container-height);
-        width: var(--container-width);
-    }
+  .chart-container {
+    position: relative;
+    margin: auto;
+    height: var(--container-height);
+    width: var(--container-width);
+  }
 </style>
diff --git a/web/frontend/src/generic/plots/Polar.svelte b/web/frontend/src/generic/plots/Polar.svelte
index 2040a1d..1a0b222 100644
--- a/web/frontend/src/generic/plots/Polar.svelte
+++ b/web/frontend/src/generic/plots/Polar.svelte
@@ -8,136 +8,139 @@
  -->
 
 <script>
-    import { getContext, onMount } from 'svelte'
-    import Chart from 'chart.js/auto'
-    import {
-        Chart as ChartJS,
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        PointElement,
-        RadialLinearScale,
-        LineElement
-    } from 'chart.js';
+  import { onMount } from 'svelte'
+  import Chart from 'chart.js/auto'
+  import {
+    Chart as ChartJS,
+    Title,
+    Tooltip,
+    Legend,
+    Filler,
+    PointElement,
+    RadialLinearScale,
+    LineElement
+  } from 'chart.js';
 
-    ChartJS.register(
-        Title,
-        Tooltip,
-        Legend,
-        Filler,
-        PointElement,
-        RadialLinearScale,
-        LineElement
+  /* Register Chart.js Components */
+  ChartJS.register(
+    Title,
+    Tooltip,
+    Legend,
+    Filler,
+    PointElement,
+    RadialLinearScale,
+    LineElement
+  );
+
+  /* Svelte 5 Props */
+  let {
+    polarMetrics = [],
+    polarData = [],
+    canvasId = "polar-default",
+    height = 350,
+  } = $props();
+
+  /* Const Init */
+  const options = {
+    maintainAspectRatio: true,
+    animation: false,
+    scales: { // fix scale
+      r: {
+        suggestedMin: 0.0,
+        suggestedMax: 1.0
+      }
+    }
+  }
+
+  /* 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))})
+  );
+
+  const data = $derived({
+    labels: labels,
+    datasets: [
+      {
+        label: 'Max',
+        data: loadData('max'), // Node Scope Only
+        fill: 1,
+        backgroundColor: 'rgba(0, 0, 255, 0.25)',
+        borderColor: 'rgb(0, 0, 255)',
+        pointBackgroundColor: 'rgb(0, 0, 255)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgb(0, 0, 255)'
+      },
+      {
+        label: 'Avg',
+        data: loadData('avg'), // Node Scope Only
+        fill: 2,
+        backgroundColor: 'rgba(255, 210, 0, 0.25)',
+        borderColor: 'rgb(255, 210, 0)',
+        pointBackgroundColor: 'rgb(255, 210, 0)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        pointHoverBorderColor: 'rgb(255, 210, 0)'
+      },
+      {
+        label: 'Min',
+        data: loadData('min'), // Node Scope Only
+        fill: true,
+        backgroundColor: 'rgba(255, 0, 0, 0.25)',
+        borderColor: 'rgb(255, 0, 0)',
+        pointBackgroundColor: 'rgb(255, 0, 0)',
+        pointBorderColor: '#fff',
+        pointHoverBackgroundColor: '#fff',
+        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 []
+  }
+
+  // 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.
+  })
+
+  /* On Mount */
+  onMount(() => {
+    new Chart(
+      document.getElementById(canvasId),
+      {
+        type: 'radar',
+        data: data,
+        options: options,
+        height: height
+      }
     );
-
-
-    export let polarMetrics = [];
-    export let polarData = [];
-    export let canvasId = "polar-default";
-    export let height = 350;
-
-    const labels = polarMetrics
-        .filter((m) => (m.peak != null))
-        .map(pm => pm.name)
-        .sort(function (a, b) {return ((a > b) ? 1 : ((b > a) ? -1 : 0))});
-
-    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 []
-    }
-
-    // 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: [
-            {
-                label: 'Max',
-                data: loadData('max'), // Node Scope Only
-                fill: 1,
-                backgroundColor: 'rgba(0, 0, 255, 0.25)',
-                borderColor: 'rgb(0, 0, 255)',
-                pointBackgroundColor: 'rgb(0, 0, 255)',
-                pointBorderColor: '#fff',
-                pointHoverBackgroundColor: '#fff',
-                pointHoverBorderColor: 'rgb(0, 0, 255)'
-            },
-            {
-                label: 'Avg',
-                data: loadData('avg'), // Node Scope Only
-                fill: 2,
-                backgroundColor: 'rgba(255, 210, 0, 0.25)',
-                borderColor: 'rgb(255, 210, 0)',
-                pointBackgroundColor: 'rgb(255, 210, 0)',
-                pointBorderColor: '#fff',
-                pointHoverBackgroundColor: '#fff',
-                pointHoverBorderColor: 'rgb(255, 210, 0)'
-            },
-            {
-                label: 'Min',
-                data: loadData('min'), // Node Scope Only
-                fill: true,
-                backgroundColor: 'rgba(255, 0, 0, 0.25)',
-                borderColor: 'rgb(255, 0, 0)',
-                pointBackgroundColor: 'rgb(255, 0, 0)',
-                pointBorderColor: '#fff',
-                pointHoverBackgroundColor: '#fff',
-                pointHoverBorderColor: 'rgb(255, 0, 0)'
-            }
-        ]
-    }
-
-    // No custom defined options but keep for clarity 
-    const options = {
-        maintainAspectRatio: true,
-        animation: false,
-        scales: { // fix scale
-            r: {
-                suggestedMin: 0.0,
-                suggestedMax: 1.0
-            }
-        }
-    }
-
-    onMount(() => {
-        new Chart(
-            document.getElementById(canvasId),
-            {
-                type: 'radar',
-                data: data,
-                options: options,
-                height: height
-            }
-        );
-    });
-
+  });
 </script>
 
 <!-- <div style="width: 500px;"><canvas id="dimensions"></canvas></div><br/> -->
 <div class="chart-container">
-    <canvas id={canvasId}></canvas>
+  <canvas id={canvasId}></canvas>
 </div>
 
 <style>
-    .chart-container {
-        margin: auto;
-        position: relative;
-    }
+  .chart-container {
+    margin: auto;
+    position: relative;
+  }
 </style>
\ No newline at end of file
diff --git a/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte b/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte
index f606ad5..4fed072 100644
--- a/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte
+++ b/web/frontend/src/job/jobsummary/JobFootprintPolar.svelte
@@ -17,9 +17,9 @@
       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();