From e32042204b3fceee3650b34fc2f28543ce70bdd3 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 9 Aug 2023 12:42:25 +0200
Subject: [PATCH] Change histograms to uplot where x-axis is number

---
 web/frontend/src/Analysis.root.svelte        | 42 +++++++++++---------
 web/frontend/src/Status.root.svelte          | 30 ++++++++------
 web/frontend/src/User.root.svelte            |  4 +-
 web/frontend/src/plots/Histogramuplot.svelte |  8 ++--
 4 files changed, 49 insertions(+), 35 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index 2e6f5b5..1cfadc9 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -1,10 +1,11 @@
 <script>
-    import { init } from './utils.js'
+    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 Filters from './filters/Filters.svelte'
     import PlotSelection from './PlotSelection.svelte'
+    import Histogramuplot from './plots/Histogramuplot.svelte'
     import Histogram, { binsFromFootprint } from './plots/Histogram.svelte'
     import ScatterPlot from './plots/Scatter.svelte'
     import PlotTable from './PlotTable.svelte'
@@ -169,22 +170,26 @@
         </div>
         <div class="col-3">
             {#key $statsQuery.data.stats[0].histDuration}
-                <h4>Duration Distribution</h4>
-                <Histogram
+                <Histogramuplot
+                    data={convert2uplot($statsQuery.data.stats[0].histDuration)}
                     width={colWidth - 25}
-                    data={$statsQuery.data.stats[0].histDuration} 
-                    xlabel="Current Runtimes [h]" 
-                    ylabel="Number of Jobs"/>
+                    title="Duration Distribution"
+                    xlabel="Current Runtimes"
+                    xunit="Hours" 
+                    ylabel="Number of Jobs"
+                    yunit="Jobs"/>
             {/key}
         </div>
         <div class="col-3">
             {#key $statsQuery.data.stats[0].histNumNodes}
-                <h4>Number of Nodes Distribution</h4>
-                <Histogram
+                <Histogramuplot
+                    data={convert2uplot($statsQuery.data.stats[0].histNumNodes)}
                     width={colWidth - 25}
-                    data={$statsQuery.data.stats[0].histNumNodes} 
-                    xlabel="Allocated Nodes [#]"
-                    ylabel="Number of Jobs" />
+                    title="Number of Nodes Distribution"
+                    xlabel="Allocated Nodes"
+                    xunit="Nodes"
+                    ylabel="Number of Jobs"
+                    yunit="Jobs"/>
             {/key}
         </div>
         <div class="col-3">
@@ -233,15 +238,16 @@
                     $footprintsQuery.data.footprints.metrics.find(f => f.metric == metric).data, numBins) }))}
                 itemsPerRow={ccconfig.plot_view_plotsPerRow}>
 
-                <h4>Average Distribution of '{item.metric}'</h4>
-                <Histogram
+                <Histogramuplot
+                    data={convert2uplot(item.bins)}
                     width={width} height={250}
-                    min={item.min} max={item.max}
-                    data={item.bins} 
-                    label={item.label}
-                    xlabel={`${item.metric} Average [${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
+                    title="Average Distribution of '{item.metric}'"
+                    xlabel={`${item.metric} average [${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
                                                        (metricConfig(cluster.name, item.metric)?.unit?.base   ? metricConfig(cluster.name, item.metric)?.unit?.base   : '')}]`}
-                    ylabel="Node Hours [h]" />
+                    xunit={`${(metricConfig(cluster.name, item.metric)?.unit?.prefix ? metricConfig(cluster.name, item.metric)?.unit?.prefix : '') +
+                              (metricConfig(cluster.name, item.metric)?.unit?.base   ? metricConfig(cluster.name, item.metric)?.unit?.base   : '')}`}
+                    ylabel="Node Hours"
+                    yunit="Hours"/>
             </PlotTable>
         </Col>
     </Row>
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 41615a1..c979ac5 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -2,8 +2,9 @@
     import Refresher from './joblist/Refresher.svelte'
     import Roofline, { transformPerNodeData } from './plots/Roofline.svelte'
     import Histogram from './plots/Histogram.svelte'
+    import Histogramuplot from './plots/Histogramuplot.svelte'
     import { Row, Col, Spinner, Card, CardHeader, CardTitle, CardBody, Table, Progress, Icon } from 'sveltestrap'
-    import { init } from './utils.js'
+    import { init, convert2uplot } from './utils.js'
     import { scaleNumbers } from './units.js'
     import { queryStore, gql, getContextClient  } from '@urql/svelte'
 
@@ -202,27 +203,32 @@
             </Table>
         </Col>
     </Row>
-    <Row cols={2} class="mt-3">
+    <hr class="my-2"/>
+    <Row cols={2}>
         <Col class="p-2">
             <div bind:clientWidth={colWidth2}>
-                <h4 class="mb-3 text-center">Duration Distribution</h4>
                 {#key $mainQuery.data.stats}
-                    <Histogram
+                    <Histogramuplot
+                        data={convert2uplot($mainQuery.data.stats[0].histDuration)}
                         width={colWidth2 - 25}
-                        data={$mainQuery.data.stats[0].histDuration}
-                        xlabel="Current Runtimes [h]" 
-                        ylabel="Number of Jobs" />
+                        title="Duration Distribution"
+                        xlabel="Current Runtimes"
+                        xunit="Hours" 
+                        ylabel="Number of Jobs"
+                        yunit="Jobs"/>
                 {/key}
             </div>
         </Col>
         <Col class="p-2">
-            <h4 class="mb-3 text-center">Number of Nodes Distribution</h4>
             {#key $mainQuery.data.stats}
-                <Histogram
+                <Histogramuplot
+                    data={convert2uplot($mainQuery.data.stats[0].histNumNodes)}
                     width={colWidth2 - 25}
-                    data={$mainQuery.data.stats[0].histNumNodes}
-                    xlabel="Allocated Nodes [#]"
-                    ylabel="Number of Jobs" />
+                    title="Number of Nodes Distribution"
+                    xlabel="Allocated Nodes"
+                    xunit="Nodes" 
+                    ylabel="Number of Jobs"
+                    yunit="Jobs"/>
             {/key}
         </Col>
     </Row>
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 55aacc1..7744884 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -134,11 +134,11 @@
             </Table>
         </Col>
         <div class="col-4 text-center" bind:clientWidth={w1}>
-            <b>Duration Distribution</b>
             {#key $stats.data.jobsStatistics[0].histDuration}
                 <Histogramuplot
                     data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
                     width={w2 - 25} height={histogramHeight}
+                    title="Duration Distribution"
                     xlabel="Current Runtimes"
                     xunit="Hours" 
                     ylabel="Number of Jobs"
@@ -146,11 +146,11 @@
             {/key}
         </div>
         <div class="col-4 text-center" bind:clientWidth={w2}>
-            <b>Number of Nodes Distribution</b>
             {#key $stats.data.jobsStatistics[0].histNumNodes}
                 <Histogramuplot
                     data={convert2uplot($stats.data.jobsStatistics[0].histNumNodes)}
                     width={w2 - 25} height={histogramHeight}
+                    title="Number of Nodes Distribution"
                     xlabel="Allocated Nodes"
                     xunit="Nodes"
                     ylabel="Number of Jobs"
diff --git a/web/frontend/src/plots/Histogramuplot.svelte b/web/frontend/src/plots/Histogramuplot.svelte
index 89e5527..d3e1aaa 100644
--- a/web/frontend/src/plots/Histogramuplot.svelte
+++ b/web/frontend/src/plots/Histogramuplot.svelte
@@ -13,6 +13,7 @@
     export let data
     export let width = 500
     export let height = 300
+    export let title = ''
     export let xlabel = ''
     export let xunit = 'X'
     export let ylabel = ''
@@ -29,7 +30,7 @@
         let s = u.series[seriesIdx];
         let style = s.drawStyle;
 
-        let renderer = (
+        let renderer = ( // If bars to wide, change here
             style == drawStyles.bars ? (
                 bars({size: [0.75, 100]})
             ) :
@@ -102,6 +103,7 @@
         let opts = {
             width: width,
             height: height,
+            title: title,
             plugins: [
 				legendAsTooltipPlugin()
 			],
@@ -157,10 +159,10 @@
             ],
             series: [
                 {
-                    label: xunit,
+                    label: xunit !== '' ? xunit : null,
                 },
                 Object.assign({
-                    label: yunit,
+                    label:  yunit !== '' ? yunit : null,
                     width: 1 / devicePixelRatio,
                     drawStyle: drawStyles.points,
                     lineInterpolation: null,