Files
Umbrella/frontend/src/Components/Histogram.svelte
2026-03-10 12:09:14 +01:00

27 lines
614 B
Svelte

<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;
align-items: flex-end;
padding: 0 2px;
box-sizing: border-box;
}
</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>