feat: Add uplot histogram, implemented in userview

- For testing
- add conversion function to utils

web/frontend/src/plots/Histogramuplot.svelte

@@ -0,0 +1,168 @@
+<!--
+    @component
+    Properties:
+    - Todo
+ -->
+
+<script>
+    import uPlot from 'uplot'
+    import { formatNumber } from '../units.js'
+    import { onMount, onDestroy } from 'svelte'
+    import { Card } from 'sveltestrap'
+
+    export let data
+    export let width = 500
+    export let height = 300
+    export let xlabel = ''
+    export let xunit = 'X'
+    export let ylabel = ''
+    export let yunit = 'Y'
+
+    const { bars } = uPlot.paths
+
+    const drawStyles = {
+        bars:      1,
+        points:    2,
+    };
+
+    function paths(u, seriesIdx, idx0, idx1, extendGap, buildClip) {
+        let s = u.series[seriesIdx];
+        let style = s.drawStyle;
+
+        let renderer = (
+            style == drawStyles.bars ? (
+                bars({size: [0.75, 100]})
+            ) :
+            () => null
+        )
+
+        return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
+    }
+
+    let plotWrapper = null
+    let legendWrapper = null
+    let uplot = null
+    let timeoutId = null
+    
+    function render() {
+        let opts = {
+            width: width,
+            height: height,
+            cursor: {
+                points: {
+                    size:   (u, seriesIdx)       => u.series[seriesIdx].points.size * 2.5,
+                    width:  (u, seriesIdx, size) => size / 4,
+                    stroke: (u, seriesIdx)       => u.series[seriesIdx].points.stroke(u, seriesIdx) + '90',
+                    fill:   (u, seriesIdx)       => "#fff",
+                }
+            },
+            scales: {
+                x: {
+                    time: false
+                },
+            },
+            axes: [
+                {
+                    stroke: "#000000",
+                    // scale: 'x',
+                    label: xlabel,
+                    labelGap: 10,
+                    size: 25,
+                    incrs: [1, 2, 5, 6, 10, 12, 50, 100, 500, 1000, 5000, 10000],
+                    border: { 
+                        show: true,
+                        stroke: "#000000",
+                    },
+                    ticks: {
+                        width: 1 / devicePixelRatio,
+                        size: 5 / devicePixelRatio,
+                        stroke: "#000000",
+                    },
+                    values: (_, t) => t.map(v => formatNumber(v)),
+                },
+                {
+                    stroke: "#000000",
+                    // scale: 'y',
+                    label: ylabel,
+                    labelGap: 10,
+                    size: 35,
+                    border: { 
+                        show: true,
+                        stroke: "#000000",
+                    },
+                    ticks: {
+                        width: 1 / devicePixelRatio,
+                        size: 5 / devicePixelRatio,
+                        stroke: "#000000",
+                    },
+                    values: (_, t) => t.map(v => formatNumber(v)),
+                },
+            ],
+            legend : {
+                mount: (self, legend) => {
+                    legendWrapper.appendChild(legend)
+                },
+                markers: {
+                    show: false,
+                    stroke: "#000000"
+                }
+            },
+            series: [
+                {
+                    label: xunit,
+                },
+                Object.assign({
+                    label: yunit,
+                    width: 1 / devicePixelRatio,
+                    drawStyle: drawStyles.points,
+                    lineInterpolation: null,
+                    paths,
+                }, {
+                    drawStyle: drawStyles.bars,
+                    lineInterpolation: null,
+                    stroke: "#85abce",
+                    fill: "#85abce", //  + "1A", // Transparent Fill
+                }),
+            ]
+        };
+
+		uplot = new uPlot(opts, data, plotWrapper)
+	}
+
+    onMount(() => {
+        render()
+    })
+
+    onDestroy(() => {
+        if (uplot)
+            uplot.destroy()
+
+        if (timeoutId != null)
+            clearTimeout(timeoutId)
+    })
+
+    function sizeChanged() {
+        if (timeoutId != null)
+            clearTimeout(timeoutId)
+
+        timeoutId = setTimeout(() => {
+            timeoutId = null
+            if (uplot)
+                uplot.destroy()
+
+            render()
+        }, 200)
+    }
+
+    $: sizeChanged(width, height)
+</script>
+
+{#if data.length > 0}
+    <div bind:this={plotWrapper}>
+        <div bind:this={legendWrapper}/>
+    </div>
+{:else}
+    <Card class="mx-4" body color="warning">Cannot render histogram: No data!</Card>
+{/if}
+
+

web/frontend/src/plots/MetricPlot.svelte

@@ -323,8 +323,9 @@
 {#if series[0].data.length > 0}
     <div bind:this={plotWrapper} class="cc-plot"></div>
 {:else}
-    <Card style="margin-left: 2rem;margin-right: 2rem;" body color="warning">Cannot render plot: No series data returned for <code>{metric}</code></Card>
+    <Card class="mx-4" body color="warning">Cannot render plot: No series data returned for <code>{metric}</code></Card>
 {/if}
+
 <style>
     .cc-plot {
         border-radius: 5px;