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