overhauled histograms

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/Components/Histogram.svelte

@@ -0,0 +1,28 @@
+<script>
+    import { t } from '../translations.svelte';
+    let { data = {} } = $props();
+
+    let max = $derived(Math.max(...Object.values(data)));
+</script>
+
+<style>
+    .histo {
+       display: flex;
+       align-items: flex-end;
+       gap: 2px;
+   }
+
+   .bar {
+       display: flex;              /* flexbox for text alignment */
+       align-items: flex-end;      /* text sticks to bottom of bar */
+       height: 100%;              /* full height of flex item */
+       padding: 0 2px;          /* space for text */
+       box-sizing: border-box;    /* include padding in height */
+   }
+</style>
+
+<div class="histo">
+    {#each Object.entries(data).sort((a,b) => a[0] - b[0]) as [weight,count]}
+    <div class="bar" style="height: {100*count/max}%" title={t('voted {count} times',{count})}>{weight}</div>
+    {/each}
+</div>