Add pie color legend to Top-Tables

web/frontend/src/Analysis.root.svelte

@@ -2,11 +2,11 @@
     import { init, convert2uplot } from './utils.js'
     import { getContext, onMount } from 'svelte'
     import { queryStore, gql, getContextClient  } from '@urql/svelte'
-    import { Row, Col, Spinner, Card, Table } from 'sveltestrap'
+    import { Row, Col, Spinner, Card, Table, Icon } from 'sveltestrap'
     import Filters from './filters/Filters.svelte'
     import PlotSelection from './PlotSelection.svelte'
     import Histogramuplot from './plots/Histogramuplot.svelte'
-    import Pie from './plots/Pie.svelte'
+    import Pie, { colors } from './plots/Pie.svelte'
     import { binsFromFootprint } from './plots/Histogram.svelte'
     import ScatterPlot from './plots/Scatter.svelte'
     import PlotTable from './PlotTable.svelte'
@@ -172,9 +172,10 @@
         </Col>
         <Col>
             <Table>
-                <tr class="mb-2"><th>User Name</th><th>Node Hours</th></tr>
+                <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Node Hours</th></tr>
-                {#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
+                {#each $statsQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
+                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
                         <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster.name}">{name}</a></th>
                         <td>{count}</td>
                     </tr>

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 Pie from './plots/Pie.svelte'
+    import Pie, { colors } 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'
@@ -174,9 +174,10 @@
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>User Name</th><th>Number of Nodes</th></tr>
+                <tr class="mb-2"><th>Legend</th><th>User Name</th><th>Number of Nodes</th></tr>
-                {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }}
+                {#each $mainQuery.data.topUsers.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
+                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
                         <th scope="col"><a href="/monitoring/user/{name}?cluster={cluster}&state=running">{name}</a></th>
                         <td>{count}</td>
                     </tr>
@@ -196,9 +197,10 @@
         </Col>
         <Col class="px-4 py-2">
             <Table>
-                <tr class="mb-2"><th>Project Code</th><th>Number of Nodes</th></tr>
+                <tr class="mb-2"><th>Legend</th><th>Project Code</th><th>Number of Nodes</th></tr>
-                {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }}
+                {#each $mainQuery.data.topProjects.sort((a, b) => b.count - a.count) as { name, count }, i}
                     <tr>
+                        <td><Icon name="circle-fill" style="color: {colors[i]};"/></td>
                         <th scope="col"><a href="/monitoring/jobs/?cluster={cluster}&state=running&project={name}&projectMatch=eq">{name}</a></th>
                         <td>{count}</td>
                     </tr>
@@ -236,3 +238,15 @@
         </Col>
     </Row>
 {/if}
+
+<style>
+    .colorBoxWrapper {
+        display: flex;
+    }
+
+    .colorBox {
+        width: 20px;
+        height: 20px;
+        border: 1px solid rgba(0, 0, 0, .2);
+    }
+</style>

web/frontend/src/plots/Pie.svelte

@@ -1,5 +1,22 @@
+<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 { getContext } from 'svelte'
     import { Pie } from 'svelte-chartjs';
     import {
         Chart as ChartJS,
@@ -24,23 +41,6 @@
     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: [