Migrate Pie and Polar components

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>