Restructure frontend svelte file src folder

- Goal: Dependency structure mirrored in file structure

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

@@ -0,0 +1,95 @@
+<!--
+    @component Pie Plot based on uPlot Pie
+
+    Properties:
+    - `size Number`: X and Y size of the plot, for square shape
+    - `sliceLabel String`: Label used in segment legends
+    - `quantities [Number]`: Data values
+    - `entities [String]`: Data identifiers
+    - `displayLegend?`: Display uPlot legend [Default: false]
+
+    Exported:
+    - `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>
+<script>
+    import { Pie } from 'svelte-chartjs';
+    import {
+        Chart as ChartJS,
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        ArcElement,
+        CategoryScale
+    } from 'chart.js';
+
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        Filler,
+        ArcElement,
+        CategoryScale
+    );
+
+    export let size
+    export let sliceLabel
+    export let quantities
+    export let entities
+    export let displayLegend = false
+
+    $: 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
+            }
+        }
+    }
+
+</script>
+
+<div class="chart-container" style="--container-width: {size}; --container-height: {size}">
+    <Pie {data} {options}/>
+</div>
+
+<style>
+    .chart-container {
+        position: relative;
+        margin: auto;
+        height: var(--container-height);
+        width: var(--container-width);
+    }
+</style>