How to use @nivo/calendar - 10 common examples

defaultValue: defaults.monthLegendOffset,
        controlType: 'range',
        group: 'Months',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 36,
        },
    },
    // Days
    {
        key: 'daySpacing',
        help: 'define spacing between each day cell.',
        type: 'number',
        required: false,
        defaultValue: defaults.daySpacing,
        controlType: 'range',
        group: 'Days',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 20,
        },
    },
    {
        key: 'dayBorderWidth',
        help: 'width of days border.',
        type: 'number',
        required: false,
        defaultValue: defaults.dayBorderWidth,
        controlType: 'lineWidth',
        group: 'Days',

controlType: 'range',
        group: 'Years',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 60,
        },
    },
    // Months
    {
        key: 'monthBorderWidth',
        flavors: ['svg', 'api'],
        help: 'width of month borders.',
        type: 'number',
        required: false,
        defaultValue: defaults.monthBorderWidth,
        controlType: 'lineWidth',
        group: 'Months',
    },
    {
        key: 'monthBorderColor',
        flavors: ['svg', 'api'],
        help: 'color to use for months border.',
        type: 'string',
        required: false,
        defaultValue: defaults.monthBorderColor,
        controlType: 'colorPicker',
        group: 'Months',
    },
    {
        key: 'monthLegend',
        help: `can be used to customize months label, returns abbreviated month name (english) by default. This can be used to use a different language`,

defaultValue: defaults.monthLegendPosition,
        controlType: 'radio',
        group: 'Months',
        controlOptions: {
            choices: [
                { label: 'before', value: 'before' },
                { label: 'after', value: 'after' },
            ],
        },
    },
    {
        key: 'monthLegendOffset',
        help: 'define offset from month edge to its label.',
        type: 'number',
        required: false,
        defaultValue: defaults.monthLegendOffset,
        controlType: 'range',
        group: 'Months',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 36,
        },
    },
    // Days
    {
        key: 'daySpacing',
        help: 'define spacing between each day cell.',
        type: 'number',
        required: false,
        defaultValue: defaults.daySpacing,
        controlType: 'range',

defaultValue: defaults.yearLegendPosition,
        controlType: 'radio',
        group: 'Years',
        controlOptions: {
            choices: [
                { label: 'before', value: 'before' },
                { label: 'after', value: 'after' },
            ],
        },
    },
    {
        key: 'yearLegendOffset',
        help: 'define offset from year edge to its label.',
        type: 'number',
        required: false,
        defaultValue: defaults.yearLegendOffset,
        controlType: 'range',
        group: 'Years',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 60,
        },
    },
    // Months
    {
        key: 'monthBorderWidth',
        flavors: ['svg', 'api'],
        help: 'width of month borders.',
        type: 'number',
        required: false,
        defaultValue: defaults.monthBorderWidth,

defaultValue: 'Depends on device',
        type: `number`,
        controlType: 'range',
        group: 'Base',
        controlOptions: {
            min: 1,
            max: 2,
        },
    },
    // Years
    {
        key: 'yearSpacing',
        help: 'define spacing between each year row/column depending on the direction.',
        type: 'number',
        required: false,
        defaultValue: defaults.yearSpacing,
        controlType: 'range',
        group: 'Years',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 160,
            step: 5,
        },
    },
    {
        key: 'yearLegend',
        group: 'Years',
        help: `can be used to customize years label, returns 'YYYY' by default.`,
        type: '(year: number) => string | number',
        required: false,
    },

},
    },
    {
        key: 'margin',
        help: 'Chart margin.',
        type: 'object',
        required: false,
        controlType: 'margin',
        group: 'Base',
    },
    {
        key: 'align',
        help: 'defines how calendar should be aligned inside chart container.',
        type: 'string',
        required: false,
        defaultValue: defaults.align,
        controlType: 'boxAnchor',
        group: 'Base',
        controlOptions: {
            choices: boxAlignments.map(align => ({
                label: align,
                value: align,
            })),
        },
    },
    {
        key: 'minValue',
        help: 'Minimum value.',
        description: `
            Minimum value. If 'auto', will pick the lowest value
            in the provided data set.
            Should be overriden if your data set does not contain

},
    },
    {
        key: 'colors',
        help: 'Chart colors.',
        group: 'Base',
        help: 'Cell colors.',
        description: `
            An array of colors to be used in conjunction with
            \`domain\` to compute days' color.
            It applies to days having a value defined, otherwise,
            \`emptyColor\` will be used.
        `,
        type: 'string[]',
        required: false,
        defaultValue: defaults.colors,
    },
    {
        key: 'emptyColor',
        help: 'color to use to fill days without available value.',
        type: 'string',
        required: false,
        defaultValue: defaults.emptyColor,
        controlType: 'colorPicker',
        group: 'Base',
    },
    {
        key: 'pixelRatio',
        flavors: ['canvas'],
        help: `Adjust pixel ratio, useful for HiDPI screens.`,
        required: false,
        defaultValue: 'Depends on device',

},
    {
        key: 'dayBorderWidth',
        help: 'width of days border.',
        type: 'number',
        required: false,
        defaultValue: defaults.dayBorderWidth,
        controlType: 'lineWidth',
        group: 'Days',
    },
    {
        key: 'dayBorderColor',
        help: 'color to use for days border.',
        type: 'string',
        required: false,
        defaultValue: defaults.dayBorderColor,
        controlType: 'colorPicker',
        group: 'Days',
    },
    {
        key: 'isInteractive',
        flavors: ['svg', 'canvas'],
        help: 'Enable/disable interactivity.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.isInteractive,
        controlType: 'switch',
        group: 'Interactivity',
    },
    {
        key: 'onClick',
        flavors: ['svg', 'canvas'],

required: false,
        defaultValue: defaults.daySpacing,
        controlType: 'range',
        group: 'Days',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 20,
        },
    },
    {
        key: 'dayBorderWidth',
        help: 'width of days border.',
        type: 'number',
        required: false,
        defaultValue: defaults.dayBorderWidth,
        controlType: 'lineWidth',
        group: 'Days',
    },
    {
        key: 'dayBorderColor',
        help: 'color to use for days border.',
        type: 'string',
        required: false,
        defaultValue: defaults.dayBorderColor,
        controlType: 'colorPicker',
        group: 'Days',
    },
    {
        key: 'isInteractive',
        flavors: ['svg', 'canvas'],
        help: 'Enable/disable interactivity.',

required: true,
        controlType: 'range',
        group: 'Base',
        controlOptions: {
            unit: 'px',
            min: 100,
            max: 1000,
            step: 5,
        },
    },
    {
        key: 'direction',
        help: 'defines calendar layout direction.',
        type: 'string',
        required: false,
        defaultValue: defaults.direction,
        controlType: 'radio',
        group: 'Base',
        controlOptions: {
            choices: [
                { label: 'horizontal', value: 'horizontal' },
                { label: 'vertical', value: 'vertical' },
            ],
        },
    },
    {
        key: 'margin',
        help: 'Chart margin.',
        type: 'object',
        required: false,
        controlType: 'margin',
        group: 'Base',