initial prototyping

web/frontend/src/User.root.svelte

@@ -213,9 +213,10 @@
     <Col class="px-1">
       {#key $stats.data.jobsStatistics[0].histDuration}
         <Histogram
-          data={convert2uplot($stats.data.jobsStatistics[0].histDuration)}
+          data={convert2uplot($stats.data.jobsStatistics[0].histDuration, true)}
           title="Duration Distribution"
-          xlabel="Current Runtimes"
+          xlabel="Current Runtimes (Hours)"
+          xtime={true}
           xunit="Hours"
           ylabel="Number of Jobs"
           yunit="Jobs"

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

@@ -25,6 +25,7 @@
   export let height = 250;
   export let title = "";
   export let xlabel = "";
+  export let xtime = false;
   export let xunit = "";
   export let ylabel = "";
   export let yunit = "";
@@ -139,7 +140,7 @@
           label: xlabel,
           labelGap: 10,
           size: 25,
-          incrs: [1, 2, 5, 6, 10, 12, 50, 100, 500, 1000, 5000, 10000],
+          incrs: xtime ? [0.25, 0.5, 1, 2, 4, 8, 15, 30, 60, 90, 120, 180, 240] : [1, 2, 5, 10, 25, 50, 100, 250, 500, 1000, 5000, 10000],
           border: {
             show: true,
             stroke: "#000000",
@@ -149,7 +150,10 @@
             size: 5 / devicePixelRatio,
             stroke: "#000000",
           },
-          values: (_, t) => t.map((v) => formatNumber(v)),
+          values: (_, t) => t.map((v) => {
+            if (!usesBins) console.log("X Scale Val", xlabel, v)
+            return formatNumber(v)
+          }),
         },
         {
           stroke: "#000000",
@@ -166,7 +170,10 @@
             size: 5 / devicePixelRatio,
             stroke: "#000000",
           },
-          values: (_, t) => t.map((v) => formatNumber(v)),
+          values: (_, t) => t.map((v) => {
+            if (!usesBins) console.log("Y Scale Val", ylabel, v)
+            return formatNumber(v)
+          }),
         },
       ],
       series: [

web/frontend/src/generic/utils.js

@@ -405,7 +405,7 @@ function getMetricConfigDeep(metric, cluster, subCluster) {
     }
 }
 
-export function convert2uplot(canvasData) {
+export function convert2uplot(canvasData, minutesToHours = false) {
     // Prep: Uplot Data Structure
     let uplotData = [[],[]] // [X, Y1, Y2, ...]
     // Iterate if exists
@@ -415,9 +415,15 @@ export function convert2uplot(canvasData) {
                 uplotData[0].push(cd?.max ? cd.max : 0)
                 uplotData[1].push(cd.count)
             } else { // Default
-                uplotData[0].push(cd.value)
+                if (minutesToHours) {
+                    let hours = cd.value / 60
+                    console.log("x minutes to y hours", cd.value, hours)
+                    uplotData[0].push(hours)
+                } else {
+                    uplotData[0].push(cd.value)
+                }
                 uplotData[1].push(cd.count)
-            }
+             }
         })
     }
     return uplotData