From b829a5aafeb3998c663e2afdf1b51286a8b19fa7 Mon Sep 17 00:00:00 2001
From: Christoph Kluge <christoph.kluge@fau.de>
Date: Wed, 13 Dec 2023 11:58:14 +0100
Subject: [PATCH] Improve binned data histogram legends

---
 web/frontend/src/Analysis.root.svelte   | 5 +++--
 web/frontend/src/Status.root.svelte     | 5 +++--
 web/frontend/src/User.root.svelte       | 5 +++--
 web/frontend/src/plots/Histogram.svelte | 9 +++++++++
 web/frontend/src/utils.js               | 6 ------
 5 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/web/frontend/src/Analysis.root.svelte b/web/frontend/src/Analysis.root.svelte
index aa4ae37..163d511 100644
--- a/web/frontend/src/Analysis.root.svelte
+++ b/web/frontend/src/Analysis.root.svelte
@@ -389,9 +389,10 @@
                 <Histogram
                     data={convert2uplot(item.bins)}
                     width={width} height={250}
+                    usesBins={true}
                     title="Average Distribution of '{item.metric}'"
-                    xlabel={`${item.metric} bin maximum [${(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   : '')}]`}
+                    xlabel={`${item.metric} bin maximum ${(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 + ']'   : '')}`}
                     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="Normalized Hours"
diff --git a/web/frontend/src/Status.root.svelte b/web/frontend/src/Status.root.svelte
index 95fc98c..d00d9c3 100644
--- a/web/frontend/src/Status.root.svelte
+++ b/web/frontend/src/Status.root.svelte
@@ -705,9 +705,10 @@
 
                         <Histogram
                             data={convert2uplot(item.data)}
+                            usesBins={true}
                             width={width} height={250}
-                            title="Distribution of '{item.metric}'"
-                            xlabel={`${item.metric} bin maximum [${item.unit}]`}
+                            title="Distribution of '{item.metric}' averages"
+                            xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
                             xunit={item.unit}
                             ylabel="Number of Jobs"
                             yunit="Jobs"/>
diff --git a/web/frontend/src/User.root.svelte b/web/frontend/src/User.root.svelte
index 5d9c597..ad08bc6 100644
--- a/web/frontend/src/User.root.svelte
+++ b/web/frontend/src/User.root.svelte
@@ -192,9 +192,10 @@
 
                         <Histogram
                             data={convert2uplot(item.data)}
+                            usesBins={true}
                             width={width} height={250}
-                            title="Distribution of '{item.metric}'"
-                            xlabel={`${item.metric} bin maximum [${item.unit}]`}
+                            title="Distribution of '{item.metric}' averages"
+                            xlabel={`${item.metric} bin maximum ${item?.unit ? `[${item.unit}]` : ``}`}
                             xunit={item.unit}
                             ylabel="Number of Jobs"
                             yunit="Jobs"/>
diff --git a/web/frontend/src/plots/Histogram.svelte b/web/frontend/src/plots/Histogram.svelte
index d3e1aaa..499ea4f 100644
--- a/web/frontend/src/plots/Histogram.svelte
+++ b/web/frontend/src/plots/Histogram.svelte
@@ -11,6 +11,7 @@
     import { Card } from 'sveltestrap'
 
     export let data
+    export let usesBins = false
     export let width = 500
     export let height = 300
     export let title = ''
@@ -160,6 +161,14 @@
             series: [
                 {
                     label: xunit !== '' ? xunit : null,
+                    value: (u, ts, sidx, didx) => {
+                        if (usesBins) {
+                            const min = u.data[sidx][didx - 1] ? u.data[sidx][didx - 1] : 0
+                            const max = u.data[sidx][didx]
+                            ts = min + ' - ' + max // narrow spaces
+                        }
+                        return ts
+                    }
                 },
                 Object.assign({
                     label:  yunit !== '' ? yunit : null,
diff --git a/web/frontend/src/utils.js b/web/frontend/src/utils.js
index 794a23a..5346208 100644
--- a/web/frontend/src/utils.js
+++ b/web/frontend/src/utils.js
@@ -318,12 +318,6 @@ export function checkMetricDisabled(m, c, s) { //[m]etric, [c]luster, [s]ubclust
 export function convert2uplot(canvasData) {
     // Prep: Uplot Data Structure
     let uplotData = [[],[]] // [X, Y1, Y2, ...]
-    // MetricHisto Only: Check if 1st bin not-null -> Set 0-Value bin for scaling
-    // Else: Only Single 0-Value bin returned -> No reset required
-    if (canvasData[0]?.bin) {
-        uplotData[0].push(0)
-        uplotData[1].push(0)
-    }
     // Iterate
     canvasData.forEach( cd => {
         if (Object.keys(cd).length == 4) { // MetricHisto Datafromat