<script>
    import {letterFrequency} from '@vx/mock-data'
    import {scaleBand, scaleLinear} from '@vx/scale'

    import Bar from '@svx/components/src/shape/Bar.svelte'
    import Group from '@svx/components/src/group/Group.svelte'
    import GradientTealBlue from '@svx/components/src/gradient/GradientTealBlue.svelte'

    export let height = 360;
    export let width;

    const data = letterFrequency.slice(5);

    // accessors
    const x = d => d.letter;
    const y = d => +d.frequency * 100;

    let xMax;
    let yMax;
    let xScale;
    let yScale;
    let barProps;

    // bounds
    $: {
        xMax = width;
        yMax = height - 100;
        xScale = scaleBand({
            rangeRound: [0, xMax],
            domain: data.map(x),
            padding: 0.4,
        });
        yScale = scaleLinear({
            rangeRound: [yMax, 0],
            domain: [0, Math.max(...data.map(y))],
        });
        barProps = d => {
            const letter = x(d);
            const barWidth = xScale.bandwidth();
            const barHeight = yMax - yScale(y(d));
            const barX = xScale(letter);
            const barY = yMax - barHeight;
            return {
                x: barX,
                y: barY,
                height: barHeight,
                width: barWidth,
                fill: 'rgba(23, 233, 217, .5)',
            }
        }
    }
</script>

<svg {width} {height}>
    <GradientTealBlue id="pink"/>
    <rect {width} {height} fill="url(#pink)" rx="4"/>
    <Group top={40}>
        {#each data as d}
            <Bar
                    {...barProps(d)}
                    on:click={() => console.log(d)}
            />
        {/each}
    </Group>
</svg>