import { Axes, XAxis, YAxis, Box, Multilines } from 'svelte-plots-basic/2d';

import { Vector, cbind } from 'mdatools/arrays';

// create x-values

const xValues = Vector.seq(0, 15, 0.1);

// compute y-values for four lines

const y1 = xValues.apply(v => Math.sin(v));

const y2 = y1.add(0.2);

const y3 = y2.add(0.2);

const y4 = y3.add(0.2);

// combine y-values so they form columns of matrix Y

const yValues = cbind(y1, y2, y3, y4);

</script>

<div class="plot-wrapper">

<Axes limX={[-1, 16]} limY={[-2,2]} >

<Multilines {xValues} {yValues} lineWidth={2} lineColor="#ff4422" />

<XAxis showGrid={true} />

<YAxis showGrid={true} />

<Box />

</Axes>

</div>

<style>

.plot-wrapper {

width: 100%;

height: 100%;

}

</style>