<script>
import { LayerCake, Svg, Html, groupLonger, flatten } from 'layercake';
import { scaleOrdinal } from 'd3-scale';
import { timeParse, timeFormat } from 'd3-time-format';
import { format } from 'd3-format';
import MultiLine from './MultiLine.svelte';
import AxisX from './AxisX.svelte';
import AxisY from './AxisY.svelte';
import Labels from './GroupLabels.html.svelte';
import SharedTooltip from './SharedTooltip.html.svelte';
// In your local project, you will more likely be loading this as a csv and converting it to json using @rollup/plugin-dsv
import data from './fruit.js';
/* --------------------------------------------
* Set what is our x key to separate it from the other series
*/
const xKey = 'month';
const yKey = 'value';
const zKey = 'fruit';
const xKeyCast = timeParse('%Y-%m-%d');
const seriesNames = Object.keys(data[0]).filter(d => d !== xKey);
const seriesColors = ['#ffe4b8', '#ffb3c0', '#ff7ac7', '#ff00cc'];
/* --------------------------------------------
* Cast values
*/
data.forEach(d => {
d[xKey] = typeof d[xKey] === 'string'
? xKeyCast(d[xKey])
: d[xKey];