How to use @nivo/heatmap - 10 common examples

max: 10,
        },
    },
    {
        key: 'cellBorderColor',
        scopes: '*',
        description: (
            <span>
                how to compute cell border color,{' '}
                see dedicated documentation.
            </span>
        ),
        help: 'Method to compute cell border color.',
        type: '{string|Function}',
        required: false,
        default: defaults.cellBorderColor,
        controlType: 'color',
        controlGroup: 'Style',
        controlOptions: {
            withCustomColor: true,
        },
    },
    /*——————————————————————————————————————————————————————————————————————————

      Labels

    ————————————————————————————————————————————————————————————————————————————*/
    {
        key: 'enableLabels',
        scopes: '*',
        description: 'Enable/disable labels.',
        type: '{boolean}',

required: false,
        defaultValue: defaults.cellBorderWidth,
        type: 'number',
        controlType: 'lineWidth',
        group: 'Style',
    },
    {
        key: 'cellBorderColor',
        help: 'Method to compute cell border color.',
        description: `
            how to compute cell border color,
            [see dedicated documentation](self:/guides/colors).
        `,
        type: 'string | object | Function',
        required: false,
        defaultValue: defaults.cellBorderColor,
        controlType: 'inheritedColor',
        group: 'Style',
    },
    {
        key: 'enableLabels',
        help: 'Enable/disable labels.',
        type: 'boolean',
        required: false,
        defaultValue: defaults.enableLabels,
        controlType: 'switch',
        group: 'Labels',
    },
    {
        key: 'labelTextColor',
        help: 'Method to compute label text color.',
        description: `

default: defaults.cellOpacity,
        type: '{number}',
        controlType: 'range',
        controlGroup: 'Style',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.05,
        },
    },
    {
        key: 'cellBorderWidth',
        scopes: '*',
        description: 'Cell border width (px).',
        required: false,
        default: defaults.cellBorderWidth,
        type: '{number}',
        controlType: 'range',
        controlGroup: 'Style',
        controlOptions: {
            unit: 'px',
            min: 0,
            max: 10,
        },
    },
    {
        key: 'cellBorderColor',
        scopes: '*',
        description: (
            <span>
                how to compute cell border color,{' '}
                see dedicated documentation.</span>

group: 'Style',
    },
    {
        key: 'cellOpacity',
        help: 'Cell opacity (0~1).',
        required: false,
        defaultValue: defaults.cellOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Style',
    },
    {
        key: 'cellBorderWidth',
        help: 'Cell border width.',
        required: false,
        defaultValue: defaults.cellBorderWidth,
        type: 'number',
        controlType: 'lineWidth',
        group: 'Style',
    },
    {
        key: 'cellBorderColor',
        help: 'Method to compute cell border color.',
        description: `
            how to compute cell border color,
            [see dedicated documentation](self:/guides/colors).
        `,
        type: 'string | object | Function',
        required: false,
        defaultValue: defaults.cellBorderColor,
        controlType: 'inheritedColor',
        group: 'Style',

type: '{number}',
        controlType: 'choices',
        controlGroup: 'Interactivity',
        controlOptions: {
            choices: ['cell', 'row', 'column', 'rowColumn'].map(key => ({
                label: key,
                value: key,
            })),
        },
    },
    {
        key: 'cellHoverOpacity',
        scopes: ['HeatMap', 'HeatMapCanvas'],
        description: 'Cell opacity on hover (0~1).',
        required: false,
        default: defaults.cellHoverOpacity,
        type: '{number}',
        controlType: 'range',
        controlGroup: 'Interactivity',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.05,
        },
    },
    {
        key: 'cellHoverOthersOpacity',
        scopes: ['HeatMap', 'HeatMapCanvas'],
        description: 'Cell opacity when not hovered (0~1).',
        required: false,
        default: defaults.cellHoverOthersOpacity,
        type: '{number}',

type: 'string',
        controlType: 'choices',
        group: 'Interactivity',
        controlOptions: {
            choices: ['cell', 'row', 'column', 'rowColumn'].map(key => ({
                label: key,
                value: key,
            })),
        },
    },
    {
        key: 'cellHoverOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Cell opacity on hover.',
        required: false,
        defaultValue: defaults.cellHoverOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'cellHoverOthersOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Cell opacity when not hovered.',
        required: false,
        defaultValue: defaults.cellHoverOthersOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    ...motionProperties(['svg'], defaults),
]

{
        key: 'cellHoverOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Cell opacity on hover.',
        required: false,
        defaultValue: defaults.cellHoverOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    {
        key: 'cellHoverOthersOpacity',
        flavors: ['svg', 'canvas'],
        help: 'Cell opacity when not hovered.',
        required: false,
        defaultValue: defaults.cellHoverOthersOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Interactivity',
    },
    ...motionProperties(['svg'], defaults),
]

export const groups = groupProperties(props)

default: defaults.cellHoverOpacity,
        type: '{number}',
        controlType: 'range',
        controlGroup: 'Interactivity',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.05,
        },
    },
    {
        key: 'cellHoverOthersOpacity',
        scopes: ['HeatMap', 'HeatMapCanvas'],
        description: 'Cell opacity when not hovered (0~1).',
        required: false,
        default: defaults.cellHoverOthersOpacity,
        type: '{number}',
        controlType: 'range',
        controlGroup: 'Interactivity',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.05,
        },
    },
    /*——————————————————————————————————————————————————————————————————————————

      Motion

    ————————————————————————————————————————————————————————————————————————————*/
    ...motionProperties(['HeatMap'], defaults),
]

},
    },
    {
        key: 'colors',
        help: 'Defines color range.',
        type: 'string | Function | string[]',
        required: false,
        defaultValue: 'nivo',
        controlType: 'quantizeColors',
        group: 'Style',
    },
    {
        key: 'cellOpacity',
        help: 'Cell opacity (0~1).',
        required: false,
        defaultValue: defaults.cellOpacity,
        type: 'number',
        controlType: 'opacity',
        group: 'Style',
    },
    {
        key: 'cellBorderWidth',
        help: 'Cell border width.',
        required: false,
        defaultValue: defaults.cellBorderWidth,
        type: 'number',
        controlType: 'lineWidth',
        group: 'Style',
    },
    {
        key: 'cellBorderColor',
        help: 'Method to compute cell border color.',

{
        key: 'colors',
        scopes: '*',
        description: 'Defines color range.',
        type: '{string|Function|Array}',
        required: false,
        default: 'nivo',
        controlType: 'quantizeColors',
        controlGroup: 'Style',
    },
    {
        key: 'cellOpacity',
        scopes: '*',
        description: 'Cell opacity (0~1).',
        required: false,
        default: defaults.cellOpacity,
        type: '{number}',
        controlType: 'range',
        controlGroup: 'Style',
        controlOptions: {
            min: 0,
            max: 1,
            step: 0.05,
        },
    },
    {
        key: 'cellBorderWidth',
        scopes: '*',
        description: 'Cell border width (px).',
        required: false,
        default: defaults.cellBorderWidth,
        type: '{number}',