How to use @nivo/core - 10 common examples

return null
                })}
            
        )
    }
)

SwarmPlot.displayName = 'SwarmPlot'
SwarmPlot.propTypes = SwarmPlotPropTypes
SwarmPlot.defaultProps = {
    ...SwarmPlotDefaultProps,
    renderNode: props => , // eslint-disable-line react/display-name
}

export default withContainer(SwarmPlot)

cornerRadius: 0,

    // border
    borderWidth: 1,
    borderColor: 'white',

    childColor: 'inherit',

    // interactivity
    isInteractive: true,
}

const enhance = compose(
    defaultProps(SunburstDefaultProps),
    withTheme(),
    withDimensions(),
    withColors(),
    withProps(({ width, height }) => {
        const radius = Math.min(width, height) / 2

        const partition = Partition().size([2 * Math.PI, radius * radius])

        return { radius, partition, centerX: width / 2, centerY: height / 2 }
    }),
    withPropsOnChange(['cornerRadius'], ({ cornerRadius }) => ({
        arcGenerator: arc()
            .startAngle(d => d.x0)
            .endAngle(d => d.x1)
            .innerRadius(d => Math.sqrt(d.y0))
            .outerRadius(d => Math.sqrt(d.y1))
            .cornerRadius(cornerRadius),
    })),

cornerRadius: 0,

    // border
    borderWidth: 1,
    borderColor: 'white',

    childColor: 'inherit',

    // interactivity
    isInteractive: true,
}

const enhance = compose(
    defaultProps(SunburstDefaultProps),
    withTheme(),
    withDimensions(),
    withColors(),
    withProps(({ width, height }) => {
        const radius = Math.min(width, height) / 2

        const partition = Partition().size([2 * Math.PI, radius * radius])

        return { radius, partition, centerX: width / 2, centerY: height / 2 }
    }),
    withPropsOnChange(['cornerRadius'], ({ cornerRadius }) => ({
        arcGenerator: arc()
            .startAngle(d => d.x0)
            .endAngle(d => d.x1)
            .innerRadius(d => Math.sqrt(d.y0))
            .outerRadius(d => Math.sqrt(d.y1))
            .cornerRadius(cornerRadius),

const generateCode = settings =>
    `
// helper
patternDotsDef('${patternId}', ${JSON.stringify(settings, null, '  ')})
// plain object
${JSON.stringify(patternDotsDef(patternId, settings), null, '    ')}
`.trim()

label: PropTypes.string.isRequired,
            fill: PropTypes.string.isRequired,
        })
    ).isRequired,
    */
}

export const PieDefaultProps = {
    sortByValue: false,
    innerRadius: 0,
    padAngle: 0,
    cornerRadius: 0,

    // layout
    startAngle: 0,
    endAngle: radiansToDegrees(Math.PI * 2),
    fit: true,

    // border
    borderWidth: 0,
    borderColor: {
        from: 'color',
        modifiers: [['darker', 1]],
    },

    // radial labels
    enableRadialLabels: true,
    radialLabel: 'id',
    radialLabelsTextColor: { theme: 'labels.text.fill' },
    radialLabelsLinkColor: { theme: 'axis.ticks.line.stroke' },

    // slices labels

label: PropTypes.string.isRequired,
            fill: PropTypes.string.isRequired,
        })
    ).isRequired,
    */
}

export const PieDefaultProps = {
    sortByValue: false,
    innerRadius: 0,
    padAngle: 0,
    cornerRadius: 0,

    // layout
    startAngle: 0,
    endAngle: radiansToDegrees(Math.PI * 2),
    fit: true,

    // border
    borderWidth: 0,
    borderColor: 'inherit:darker(1)',

    // radial labels
    enableRadialLabels: true,
    radialLabel: 'id',
    radialLabelsTextColor: 'theme',
    radialLabelsLinkColor: 'theme',

    // slices labels
    enableSlicesLabels: true,
    sliceLabel: 'value',
    slicesLabelsTextColor: 'theme',

* file that was distributed with this source code.
 */
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { themePropType } from '@nivo/core'
import { TableTooltip } from '@nivo/tooltip'

export default class ParallelCoordinatesLineTooltip extends PureComponent {
    static propTypes = {
        data: PropTypes.object.isRequired,
        variables: PropTypes.arrayOf(
            PropTypes.shape({
                key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
            })
        ).isRequired,
        theme: themePropType.isRequired,
    }

    render() {
        const { data, variables, theme } = this.props

        return (
             [
                    variable.key,
                    <strong>{data[variable.key]}</strong>, // eslint-disable-line react/jsx-key
                ])}
            /&gt;
        )
    }
}

const CircleAnnotationOutline = memo(({ x, y, size }) => {
    const theme = useTheme()
    const { animate, springConfig } = useMotionConfig()

    if (!animate) {
        return (
            <>
                {theme.annotations.outline.outlineWidth > 0 && (

x,
    y,
    length,
    ticksPosition,
    tickValues,
    tickSize,
    tickPadding,
    tickRotation,
    format,
    renderTick,
    legend,
    legendPosition,
    legendOffset,
    onClick,
}) => {
    const theme = useTheme()
    const { animate, springConfig } = useMotionConfig()

    const formatValue = useMemo(() => getFormatter(format, scale), [format, scale])

    const { ticks, textAlign, textBaseline } = computeCartesianTicks({
        axis,
        scale,
        ticksPosition,
        tickValues,
        tickSize,
        tickPadding,
        tickRotation,
    })

    let legendNode = null
    if (legend !== undefined) {

const ChordRibbonTooltip = memo(({ ribbon }) => {
    const theme = useTheme()

    return (
        ,
                    <strong>{ribbon.source.label}</strong>,
                    ribbon.source.formattedValue,
                ],
                [
                    ,
                    <strong>{ribbon.target.label}</strong>,
                    ribbon.target.formattedValue,
                ],
            ]}