feat: Change histogram to piechart in status view

web/frontend/src/Status.root.svelte

@@ -1,7 +1,7 @@
 <script>
     import Refresher from './joblist/Refresher.svelte'
     import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
-    import Histogram from './plots/Histogram.svelte'
+    import Pie from './plots/Pie.svelte'
     import Histogramuplot from './plots/Histogramuplot.svelte'
     import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
     import { init, convert2uplot } from './utils.js'
@@ -160,13 +160,15 @@
     <Row cols={4}>
         <Col class="p-2">
             <div bind:clientWidth={colWidth1}>
-                <h4 class="mb-3 text-center">Top Users</h4>
+                <h4 class="text-center">Top Users</h4>
                 {#key $mainQuery.data}
-                    <Histogram
+                    <Pie
-                        width={colWidth1 - 25}
+                        size={colWidth1}
-                        data={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
+                        sliceLabel='Jobs'
-                        label={(x) => x < $mainQuery.data.topUsers.length ? $mainQuery.data.topUsers[Math.floor(x)].name : '0'}
+                        quantities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.count)}
-                        xlabel="User Name" ylabel="Number of Jobs" />
+                        entities={$mainQuery.data.topUsers.sort((a, b) => b.count - a.count).map((tu) => tu.name)}
+                        
+                    />
                 {/key}
             </div>
         </Col>
@@ -182,13 +184,14 @@
             </Table>
         </Col>
         <Col class="p-2">
-            <h4 class="mb-3 text-center">Top Projects</h4>
+            <h4 class="text-center">Top Projects</h4>
             {#key $mainQuery.data}
-                <Histogram
+                <Pie
-                    width={colWidth1 - 25}
+                    size={colWidth1}
-                    data={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map(({ count }, idx) => ({ count, value: idx }))}
+                    sliceLabel='Jobs'
-                    label={(x) => x < $mainQuery.data.topProjects.length ? $mainQuery.data.topProjects[Math.floor(x)].name : '0'}
+                    quantities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.count)}
-                    xlabel="Project Code" ylabel="Number of Jobs" />
+                    entities={$mainQuery.data.topProjects.sort((a, b) => b.count - a.count).map((tp) => tp.name)}
+                />
             {/key}
         </Col>
         <Col class="px-4 py-2">

web/frontend/src/User.root.svelte

@@ -137,7 +137,7 @@
             {#key $stats.data.jobsStatistics[0].histDuration}
                 <Histogramuplot
                     data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
-                    width={w2 - 25} height={histogramHeight}
+                    width={w1 - 25} height={histogramHeight}
                     title="Duration Distribution"
                     xlabel="Current Runtimes"
                     xunit="Hours" 

web/frontend/src/plots/Pie.svelte

@@ -0,0 +1,78 @@
+<script>
+    // import { getContext } from 'svelte'
+    import { Pie } from 'svelte-chartjs';
+    import {
+        Chart as ChartJS,
+        Title,
+        Tooltip,
+        Legend,
+        ArcElement,
+        CategoryScale
+    } from 'chart.js';
+
+    ChartJS.register(
+        Title,
+        Tooltip,
+        Legend,
+        ArcElement,
+        CategoryScale
+    );
+
+    export let size
+    export let sliceLabel
+    export let quantities
+    export let entities
+    export let displayLegend = false
+
+    // http://tsitsul.in/blog/coloropt/ : 12 colors normal
+    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)'
+    ]
+
+    const data = {
+        labels: entities,
+        datasets: [
+            {
+                label: sliceLabel,
+                data: quantities,
+                fill: 1,
+                backgroundColor: colors.slice(0, quantities.length),            
+            }
+        ]
+    }
+
+    const options = { 
+        maintainAspectRatio: 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>