<script>
    import {scaleLinear} from '@vx/scale';
    import {genRandomNormalPoints} from '@vx/mock-data';
    import Group from "@svx/components/src/group/Group.svelte";
    import Circle from "@svx/components/src/shape/Circle.svelte";
    import GradientPinkRed from "@svx/components/src/gradient/GradientPinkRed.svelte";

    export let height = 360;
    export let width = 900;

    const x = d => d[0];
    const y = d => d[1];
    const z = d => d[2];

    const points = genRandomNormalPoints(600).filter((d, i) => {
        return i < 600;
    });

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

    $: {
        xMax = width;
        yMax = height - 100;
        xScale = scaleLinear({
            domain: [1.3, 2.2],
            range: [0, xMax],
            clamp: true
        });
        yScale = scaleLinear({
            domain: [0.75, 1.6],
            range: [yMax, 0],
            clamp: true
        });
    }
</script>

<svg {width} {height}>
    <GradientPinkRed id="teal"/>
    <rect {width} {height} fill="url(#teal)" rx="4"/>
    <Group top={40}>
        {#each points as point, i}
            <Circle
                    r={i % 3 === 0 ? 2 : 2.765}
                    cx={xScale(x(point))}
                    cy={yScale(y(point))}
                    fill="#f6c431"
                    on:click={() => console.log(point)}
            />
        {/each}
    </Group>
</svg>