/*
 * This file is part of the nivo project.
 *
 * Copyright 2016-present, Raphaël Benitte.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
import React from 'react'
import { generateDayCounts } from '@nivo/generators'
import SEO from '../../components/seo'
import ApiClient from '../../components/components/api-client/ApiClient'
import mapper from '../../data/components/calendar/mapper'
import { groups } from '../../data/components/calendar/props'
import meta from '../../data/components/calendar/meta.yml'

const from = new Date(2015, 3, 1)
const to = new Date(2018, 7, 12)
const generateData = () => generateDayCounts(from, to)
const data = generateData()

const CalendarApi = () => {
    return (
        <>
            <SEO title="Calendar HTTP API" keywords={[...meta.Calendar.tags, 'HTTP API']} />
            <ApiClient
                componentName="Calendar"
                chartClass="calendar"
                apiPath="/charts/calendar"
                flavors={meta.flavors}
                dataProperty="data"
                controlGroups={groups}
                propsMapper={mapper}
                defaultProps={{
                    width: 600,
                    height: 400,
                    margin: {
                        top: 10,
                        right: 10,
                        bottom: 10,
                        left: 10,
                    },
                    from: '2015-03-01',
                    to: '2016-07-12',

                    align: 'center',
                    emptyColor: '#eeeeee',
                    colors: ['#61cdbb', '#97e3d5', '#e8c1a0', '#f47560'],
                    minValue: 0,
                    maxValue: 'auto',

                    margin: {
                        top: 40,
                        right: 40,
                        bottom: 40,
                        left: 40,
                    },
                    direction: 'horizontal',

                    yearSpacing: 40,
                    yearLegendPosition: 'before',
                    yearLegendOffset: 10,

                    monthBorderWidth: 2,
                    monthBorderColor: '#ffffff',
                    monthLegendPosition: 'before',
                    monthLegendOffset: 10,

                    daySpacing: 0,
                    dayBorderWidth: 2,
                    dayBorderColor: '#ffffff',
                    data: JSON.stringify(data, null, '  '),
                }}
            />
        </>
    )
}

export default CalendarApi

@@ -1284,199 +1284,8 @@
 00,%0A
-                    margin: %7B%0A                        top: 10,%0A                        right: 10,%0A                        bottom: 10,%0A                        left: 10,%0A                    %7D,%0A
     
@@ -1944,32 +1944,69 @@
 endOffset: 10,%0A%0A
+                    monthSpacing: 0,%0A
                 

fix missing prop for Calendar API demo