<script>
    import { extent, max } from 'd3-array'
    import { genDateValue } from '@vx/mock-data'
    import { scaleTime, scaleLinear } from '@vx/scale'
    import { curveMonotoneX } from '@vx/curve'

    import Group from '@svx/components/src/group/Group.svelte'
    import LinePath from '@svx/components/src/shape/LinePath.svelte'

    export let rx = 4
    export let stroke = '#ffffff'
    export let fill = '#242424'

    export let height = 360
    export let width

    const x = d => d.date
    const y = d => d.value

    function genLines(num) {
        return new Array(num).fill(1).map(() => {
            return genDateValue(25)
        })
    }

    const series = genLines(12)
    const data = series.reduce((rec, d) => {
        return rec.concat(d)
    }, [])


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

    $: {
        xMax = width;
        yMax = height / 8;
        xScale = scaleTime({
            range: [0, xMax],
            domain: extent(data, x),
        });
        yScale = scaleLinear({
            range: [yMax, 0],
            domain: [0, max(data, y)],
        });
    }
</script>

<svg {width} {height}>
    <rect x="0" y="0" {width} {height} {rx} {fill}/>
    {#each series as d, i}
        <Group top={i * yMax / 2}>
            <LinePath
                    {stroke}
                    data={d}
                    curve={curveMonotoneX}
                    strokeWidth="1"
                    x={d => xScale(x(d))}
                    y={d => yScale(y(d))}
            />
        </Group>
    {/each}
</svg>