<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>