import { LayerCake, ScaledSvg } from 'layercake';

import { nest } from 'd3-collection';

import { scaleQuantize } from 'd3-scale';

import CalendarMonth from './CalendarMonth.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 dates from './dates.js';

const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

const datesTransformed = dates.split('\n').map(row => {

return { date: new Date(row), timestring: row };

});

const gutter = 10;

const seriesColors = ['#fff5cc', '#ffeba9', '#ffe182', '#ffd754', '#ffcc00'];

/* --------------------------------------------

* Group by month then by date

*/

const byMonthByDate = nest()

.key(d => d.date.getUTCMonth())

.key(d => d.timestring.split('T')[0])

.entries(datesTransformed);

const sortedData = byMonthByDate.sort((a, b) => a.key - b.key);

</script>

<style>

/*

The wrapper div needs to have an explicit width and height in CSS.

It can also be a flexbox child or CSS grid element.

The point being it needs dimensions since the <LayerCake> element will

expand to fill it.