@nivo/core/dist/nivo-core.mjs.map

{"version":3,"file":"nivo-core.mjs","sources":["../src/motion/context.js","../src/motion/hooks.js","../src/components/ConditionalWrapper.js","../src/components/Container.js","../src/lib/noop.js","../src/components/LegacyContainer.js","../src/components/ResponsiveWrapper.js","../src/components/defs/gradients/LinearGradient.js","../src/components/defs/gradients/index.js","../src/components/defs/patterns/PatternDots.js","../src/lib/polar/utils.js","../src/lib/bridge.js","../src/lib/polar/labels.js","../src/components/defs/patterns/PatternLines.js","../src/components/defs/patterns/PatternSquares.js","../src/components/defs/patterns/index.js","../src/components/defs/Defs.js","../src/components/SvgWrapper.js","../src/components/dots/DotsItemSymbol.js","../src/components/dots/DotsItem.js","../src/components/cartesian/markers/CartesianMarkersItem.js","../src/components/cartesian/markers/CartesianMarkers.js","../src/hocs/withContainer.js","../src/hooks/useAnimatedPath.js","../src/hooks/useChartContext.js","../src/props/curve.js","../src/props/stack.js","../src/props/index.js","../src/hooks/useCurveInterpolation.js","../src/lib/colors/quantize.js","../src/lib/colors/index.js","../src/defaults/index.js","../src/hooks/useDimensions.js","../src/hooks/useMeasure.js","../src/hooks/useValueFormatter.js","../src/lib/propertiesConverters.js","../src/lib/cartesian/utils.js","../src/lib/interactivity/detect.js","../src/lib/interactivity/index.js","../src/lib/defs.js","../src/lib/mergeRefs.js","../src/constants.js"],"sourcesContent":["import { createContext, useMemo } from 'react'\nimport isString from 'lodash/isString.js'\nimport { config as presets } from '@react-spring/web'\n\nexport const motionConfigContext = createContext()\n\nexport const motionDefaultProps = {\n    animate: true,\n    config: 'default',\n}\n\n/**\n * MotionConfigProvider.propTypes = {\n *     children: PropTypes.node.isRequired,\n *     animate: motionPropTypes.animate,\n *     config: motionPropTypes.motionConfig,\n * }\n */\nexport const MotionConfigProvider = props => {\n    const { children, animate = true, config = 'default' } = props\n\n    const value = useMemo(() => {\n        const reactSpringConfig = isString(config) ? presets[config] : config\n\n        return {\n            animate,\n            config: reactSpringConfig,\n        }\n    }, [animate, config])\n\n    return <motionConfigContext.Provider value={value}>{children}</motionConfigContext.Provider>\n}\n","/*\n * This file is part of the nivo project.\n *\n * Copyright 2016-present, Raphaël Benitte.\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\nimport { useContext } from 'react'\nimport { motionConfigContext } from './context'\n\nexport const useMotionConfig = () => useContext(motionConfigContext)\n","import { cloneElement } from 'react'\n\n// type ConditionalWrapperProps = {\n//     children: ReactNode\n//     condition: boolean\n//     wrapper: ReactElement\n// }\n\nexport const ConditionalWrapper = ({ children, condition, wrapper }) => {\n    if (!condition) return children\n\n    return cloneElement(wrapper, {}, children)\n}\n","import { useRef } from 'react'\nimport { TooltipProvider, Tooltip } from '@nivo/tooltip'\nimport { ThemeProvider } from '@nivo/theming'\nimport { MotionConfigProvider } from '../motion'\nimport { ConditionalWrapper } from './ConditionalWrapper'\n\nconst containerStyle = {\n    position: 'relative',\n}\n\nexport const Container = ({\n    children,\n    theme,\n    renderWrapper = true,\n    isInteractive = true,\n    animate,\n    motionConfig,\n}) => {\n    const container = useRef(null)\n\n    return (\n        <ThemeProvider theme={theme}>\n            <MotionConfigProvider animate={animate} config={motionConfig}>\n                <TooltipProvider container={container}>\n                    {/* we should not render the div element if using the HTTP API */}\n                    <ConditionalWrapper\n                        condition={renderWrapper}\n                        wrapper={<div style={containerStyle} ref={container} />}\n                    >\n                        {children}\n                        {isInteractive && <Tooltip />}\n                    </ConditionalWrapper>\n                </TooltipProvider>\n            </MotionConfigProvider>\n        </ThemeProvider>\n    )\n}\n\nexport default Container\n","// eslint-disable-next-line @typescript-eslint/no-empty-function\nexport default () => {}\n","import { useRef, useMemo, useCallback } from 'react'\nimport {\n    TooltipActionsContext,\n    TooltipStateContext,\n    useTooltipHandlers,\n    Tooltip,\n} from '@nivo/tooltip'\nimport { ThemeProvider } from '@nivo/theming'\nimport noop from '../lib/noop'\nimport { MotionConfigProvider } from '../motion'\nimport { ConditionalWrapper } from './ConditionalWrapper'\n\nconst containerStyle = {\n    position: 'relative',\n}\n\n/**\n * This component should only be used when relying on render props,\n * passing `showTooltip`, `hideTooltip`, but you should use the regular\n * `Container` component.\n *\n * @deprecated\n *\n * LegacyContainer.propTypes = {\n *     children: PropTypes.func.isRequired,\n *     isInteractive: PropTypes.bool,\n *     renderWrapper: PropTypes.bool,\n *     theme: PropTypes.object.isRequired,\n *     animate: PropTypes.bool.isRequired,\n *     motionConfig: PropTypes.oneOfType([PropTypes.string, motionPropTypes.motionConfig]),\n * }\n */\nexport const LegacyContainer = ({\n    children,\n    theme,\n    isInteractive = true,\n    renderWrapper = true,\n    animate,\n    motionConfig,\n}) => {\n    const container = useRef(null)\n    const { actions: tooltipActions, state: tooltipState } = useTooltipHandlers(container)\n\n    const showTooltip = useCallback(\n        (content, event) => tooltipActions.showTooltipFromEvent(content, event),\n        [tooltipActions]\n    )\n\n    const handlers = useMemo(\n        () => ({\n            showTooltip: isInteractive ? showTooltip : noop,\n            hideTooltip: isInteractive ? tooltipActions.hideTooltip : noop,\n        }),\n        [tooltipActions, isInteractive, showTooltip]\n    )\n\n    return (\n        <ThemeProvider theme={theme}>\n            <MotionConfigProvider animate={animate} config={motionConfig}>\n                <TooltipActionsContext.Provider value={tooltipActions}>\n                    <TooltipStateContext.Provider value={tooltipState}>\n                        {/* we should not render the div element if using the HTTP API */}\n                        <ConditionalWrapper\n                            condition={renderWrapper}\n                            wrapper={<div style={containerStyle} ref={container} />}\n                        >\n                            {children(handlers)}\n                            {isInteractive && <Tooltip />}\n                        </ConditionalWrapper>\n                    </TooltipStateContext.Provider>\n                </TooltipActionsContext.Provider>\n            </MotionConfigProvider>\n        </ThemeProvider>\n    )\n}\n","import AutoSizer from 'react-virtualized-auto-sizer'\nimport { useDebounce } from 'use-debounce'\nimport { useEffect } from 'react'\n\nconst dimensionsEqual = (a, b) => a.width === b.width && a.height === b.height\n\nconst InnerResponsiveWrapper = ({ children, width, height, onResize, debounceResize }) => {\n    const [dimensions] = useDebounce({ width, height }, debounceResize, {\n        equalityFn: dimensionsEqual,\n    })\n\n    useEffect(() => {\n        onResize?.(dimensions)\n    }, [dimensions, onResize])\n\n    return <>{children(dimensions)}</>\n}\n\nexport const ResponsiveWrapper = ({\n    children,\n    defaultWidth,\n    defaultHeight,\n    onResize,\n    debounceResize = 0,\n}) => (\n    <AutoSizer defaultWidth={defaultWidth} defaultHeight={defaultHeight}>\n        {({ width, height }) => (\n            <InnerResponsiveWrapper\n                width={width}\n                height={height}\n                onResize={onResize}\n                debounceResize={debounceResize}\n            >\n                {children}\n            </InnerResponsiveWrapper>\n        )}\n    </AutoSizer>\n)\n","export const LinearGradient = ({ id, colors, ...rest }) => (\n    <linearGradient id={id} x1={0} x2={0} y1={0} y2={1} {...rest}>\n        {colors.map(({ offset, color, opacity }) => (\n            <stop\n                key={offset}\n                offset={`${offset}%`}\n                stopColor={color}\n                stopOpacity={opacity !== undefined ? opacity : 1}\n            />\n        ))}\n    </linearGradient>\n)\n\nexport const linearGradientDef = (id, colors, options = {}) => ({\n    id,\n    type: 'linearGradient',\n    colors,\n    ...options,\n})\n","/*\n * This file is part of the nivo project.\n *\n * Copyright 2016-present, Raphaël Benitte.\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\nimport { LinearGradient } from './LinearGradient'\n\nexport const gradientTypes = {\n    linearGradient: LinearGradient,\n}\n\nexport * from './LinearGradient'\n","import { memo } from 'react'\n\nexport const PatternDotsDefaultProps = {\n    color: '#000000',\n    background: '#ffffff',\n    size: 4,\n    padding: 4,\n    stagger: false,\n}\n\nexport const PatternDots = memo(props => {\n    const {\n        id,\n        background = PatternDotsDefaultProps.background,\n        color = PatternDotsDefaultProps.color,\n        size = PatternDotsDefaultProps.size,\n        padding = PatternDotsDefaultProps.padding,\n        stagger = PatternDotsDefaultProps.stagger,\n    } = props\n\n    let fullSize = size + padding\n    const radius = size / 2\n    const halfPadding = padding / 2\n    if (stagger === true) {\n        fullSize = size * 2 + padding * 2\n    }\n\n    return (\n        <pattern id={id} width={fullSize} height={fullSize} patternUnits=\"userSpaceOnUse\">\n            <rect width={fullSize} height={fullSize} fill={background} />\n            <circle cx={halfPadding + radius} cy={halfPadding + radius} r={radius} fill={color} />\n            {stagger && (\n                <circle\n                    cx={padding * 1.5 + size + radius}\n                    cy={padding * 1.5 + size + radius}\n                    r={radius}\n                    fill={color}\n                />\n            )}\n        </pattern>\n    )\n})\n\nexport const patternDotsDef = (id, options = {}) => ({\n    id,\n    type: 'patternDots',\n    ...options,\n})\n","export const TWO_PI = Math.PI * 2\n\nexport const degreesToRadians = degrees => (degrees * Math.PI) / 180\n\nexport const radiansToDegrees = radians => (180 * radians) / Math.PI\n\nexport const midAngle = arc => arc.startAngle + (arc.endAngle - arc.startAngle) / 2\n\nexport const positionFromAngle = (angle, distance) => ({\n    x: Math.cos(angle) * distance,\n    y: Math.sin(angle) * distance,\n})\n\n/**\n * Normalize given angle (degrees) in the 0~360 range.\n *\n * @param {number} angle\n * @return {number}\n */\nexport const normalizeAngleDegrees = angle => {\n    let absAngle = angle % 360\n    if (absAngle < 0) absAngle += 360\n\n    return absAngle\n}\n\n/**\n * Ensure the absolute difference between start and end angles\n * is at most given length.\n *\n * @param startAngle - in degrees\n * @param endAngle   - in degrees\n * @param length     - in degrees\n *\n * @returns {[number, number]}\n */\nexport const clampArc = (startAngle, endAngle, length = 360) => {\n    let clampedEndAngle = endAngle\n    if (Math.abs(endAngle - startAngle) > length) {\n        clampedEndAngle = startAngle + (endAngle > startAngle ? length : -length)\n    }\n\n    return [startAngle, clampedEndAngle]\n}\n","/**\n * @TODO: use @nivo/theming instead.\n */\nexport const textPropsByEngine = {\n    svg: {\n        align: {\n            left: 'start',\n            center: 'middle',\n            right: 'end',\n            start: 'start',\n            middle: 'middle',\n            end: 'end',\n        },\n        baseline: {\n            top: 'text-before-edge',\n            center: 'central',\n            bottom: 'alphabetic',\n        },\n    },\n    canvas: {\n        align: {\n            left: 'left',\n            center: 'center',\n            right: 'right',\n            start: 'left',\n            middle: 'center',\n            end: 'right',\n        },\n        baseline: {\n            top: 'top',\n            center: 'middle',\n            bottom: 'bottom',\n        },\n    },\n}\n","import { positionFromAngle, radiansToDegrees } from './utils'\nimport { textPropsByEngine } from '../bridge'\n\n/**\n * @param {number} radius\n * @param {number} angle          angle (radians)\n * @param {number} [rotation=0]   label rotation (degrees)\n * @param {string} [engine='svg'] one of: 'svg', 'canvas'\n * @return {{ x: number, y: number, rotate: number, align: string, baseline: string }}\n */\nexport const getPolarLabelProps = (radius, angle, rotation, engine = 'svg') => {\n    const textProps = textPropsByEngine[engine]\n\n    const { x, y } = positionFromAngle(angle - Math.PI / 2, radius)\n\n    let rotate = radiansToDegrees(angle)\n    let align = textProps.align.center\n    let baseline = textProps.baseline.bottom\n\n    if (rotation > 0) {\n        align = textProps.align.right\n        baseline = textProps.baseline.center\n    } else if (rotation < 0) {\n        align = textProps.align.left\n        baseline = textProps.baseline.center\n    }\n\n    // reverse labels after 180°\n    if (rotation !== 0 && rotate > 180) {\n        rotate -= 180\n        align = align === textProps.align.right ? textProps.align.left : textProps.align.right\n    }\n\n    rotate += rotation\n\n    return { x, y, rotate, align, baseline }\n}\n","import { memo } from 'react'\nimport { degreesToRadians } from '../../../lib/polar'\n\nexport const PatternLinesDefaultProps = {\n    spacing: 5,\n    rotation: 0,\n    background: '#000000',\n    color: '#ffffff',\n    lineWidth: 2,\n}\n\nexport const PatternLines = memo(\n    ({\n        id,\n        spacing: _spacing = PatternLinesDefaultProps.spacing,\n        rotation: _rotation = PatternLinesDefaultProps.rotation,\n        background = PatternLinesDefaultProps.background,\n        color = PatternLinesDefaultProps.color,\n        lineWidth = PatternLinesDefaultProps.lineWidth,\n    }) => {\n        let rotation = Math.round(_rotation) % 360\n        const spacing = Math.abs(_spacing)\n\n        if (rotation > 180) rotation = rotation - 360\n        else if (rotation > 90) rotation = rotation - 180\n        else if (rotation < -180) rotation = rotation + 360\n        else if (rotation < -90) rotation = rotation + 180\n\n        let width = spacing\n        let height = spacing\n        let path\n\n        if (rotation === 0) {\n            path = `\n                M 0 0 L ${width} 0\n                M 0 ${height} L ${width} ${height}\n            `\n        } else if (rotation === 90) {\n            path = `\n                M 0 0 L 0 ${height}\n                M ${width} 0 L ${width} ${height}\n            `\n        } else {\n            width = Math.abs(spacing / Math.sin(degreesToRadians(rotation)))\n            height = spacing / Math.sin(degreesToRadians(90 - rotation))\n\n            if (rotation > 0) {\n                path = `\n                    M 0 ${-height} L ${width * 2} ${height}\n                    M ${-width} ${-height} L ${width} ${height}\n                    M ${-width} 0 L ${width} ${height * 2}\n                `\n            } else {\n                path = `\n                    M ${-width} ${height} L ${width} ${-height}\n                    M ${-width} ${height * 2} L ${width * 2} ${-height}\n                    M 0 ${height * 2} L ${width * 2} 0\n                `\n            }\n        }\n\n        return (\n            <pattern id={id} width={width} height={height} patternUnits=\"userSpaceOnUse\">\n                <rect\n                    width={width}\n                    height={height}\n                    fill={background}\n                    stroke=\"rgba(255, 0, 0, 0.1)\"\n                    strokeWidth={0}\n                />\n                <path d={path} strokeWidth={lineWidth} stroke={color} strokeLinecap=\"square\" />\n            </pattern>\n        )\n    }\n)\n\nexport const patternLinesDef = (id, options = {}) => ({\n    id,\n    type: 'patternLines',\n    ...options,\n})\n","import { memo } from 'react'\n\nexport const PatternSquaresDefaultProps = {\n    color: '#000000',\n    background: '#ffffff',\n    size: 4,\n    padding: 4,\n    stagger: false,\n}\n\nexport const PatternSquares = memo(props => {\n    const {\n        id,\n        color = PatternSquaresDefaultProps.color,\n        background = PatternSquaresDefaultProps.background,\n        size = PatternSquaresDefaultProps.size,\n        padding = PatternSquaresDefaultProps.padding,\n        stagger = PatternSquaresDefaultProps.stagger,\n    } = props\n\n    let fullSize = size + padding\n    const halfPadding = padding / 2\n    if (stagger === true) {\n        fullSize = size * 2 + padding * 2\n    }\n\n    return (\n        <pattern id={id} width={fullSize} height={fullSize} patternUnits=\"userSpaceOnUse\">\n            <rect width={fullSize} height={fullSize} fill={background} />\n            <rect x={halfPadding} y={halfPadding} width={size} height={size} fill={color} />\n            {stagger && (\n                <rect\n                    x={padding * 1.5 + size}\n                    y={padding * 1.5 + size}\n                    width={size}\n                    height={size}\n                    fill={color}\n                />\n            )}\n        </pattern>\n    )\n})\n\nexport const patternSquaresDef = (id, options = {}) => ({\n    id,\n    type: 'patternSquares',\n    ...options,\n})\n","/*\n * This file is part of the nivo project.\n *\n * Copyright 2016-present, Raphaël Benitte.\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\nimport { PatternDots } from './PatternDots'\nimport { PatternLines } from './PatternLines'\nimport { PatternSquares } from './PatternSquares'\n\nexport const patternTypes = {\n    patternDots: PatternDots,\n    patternLines: PatternLines,\n    patternSquares: PatternSquares,\n}\n\nexport * from './PatternDots'\nexport * from './PatternLines'\nexport * from './PatternSquares'\n","import { createElement, memo } from 'react'\nimport { gradientTypes } from './gradients'\nimport { patternTypes } from './patterns'\n\nexport const defsMapping = {\n    ...gradientTypes,\n    ...patternTypes,\n}\n\n/**\n * Defs.propTypes = {\n *     defs: PropTypes.arrayOf(\n *         PropTypes.shape({\n *             type: PropTypes.oneOf(Object.keys(defsMapping)).isRequired,\n *             id: PropTypes.string.isRequired,\n *         })\n *     ),\n * }\n */\nconst Defs = ({ defs: definitions }) => {\n    if (!definitions || definitions.length < 1) return null\n\n    return (\n        <defs aria-hidden={true}>\n            {definitions.map(({ type, ...def }) => {\n                if (defsMapping[type])\n                    return createElement(defsMapping[type], { key: def.id, ...def })\n\n                return null\n            })}\n        </defs>\n    )\n}\n\nexport default memo(Defs)\n","import { forwardRef } from 'react'\nimport { useTheme } from '@nivo/theming'\nimport { Defs } from './defs'\n\nconst SvgWrapper = forwardRef(\n    (\n        {\n            width,\n            height,\n            margin,\n            defs,\n            children,\n            role,\n            ariaLabel,\n            ariaLabelledBy,\n            ariaDescribedBy,\n            isFocusable,\n        },\n        ref\n    ) => {\n        const theme = useTheme()\n\n        return (\n            <svg\n                xmlns=\"http://www.w3.org/2000/svg\"\n                width={width}\n                height={height}\n                role={role}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                focusable={isFocusable}\n                tabIndex={isFocusable ? 0 : undefined}\n                ref={ref}\n            >\n                <Defs defs={defs} />\n                <rect width={width} height={height} fill={theme.background} />\n                <g transform={`translate(${margin.left},${margin.top})`}>{children}</g>\n            </svg>\n        )\n    }\n)\n\nexport default SvgWrapper\n","import { memo } from 'react'\n\nconst DotsItemSymbol = ({ size, color, borderWidth, borderColor }) => (\n    <circle\n        r={size / 2}\n        fill={color}\n        stroke={borderColor}\n        strokeWidth={borderWidth}\n        style={{ pointerEvents: 'none' }}\n    />\n)\n\nexport default memo(DotsItemSymbol)\n","import { createElement, memo, useCallback } from 'react'\nimport { useSpring, animated } from '@react-spring/web'\nimport { useTheme, sanitizeSvgTextStyle } from '@nivo/theming'\nimport { useMotionConfig } from '../../motion'\nimport DotsItemSymbol from './DotsItemSymbol'\n\nconst DotsItem = ({\n    x,\n    y,\n    symbol = DotsItemSymbol,\n    size,\n    datum,\n    color,\n    borderWidth,\n    borderColor,\n    label,\n    labelTextAnchor = 'middle',\n    labelYOffset = -12,\n    ariaLabel,\n    ariaLabelledBy,\n    ariaDescribedBy,\n    ariaHidden,\n    ariaDisabled,\n    isFocusable = false,\n    tabIndex = 0,\n    onFocus,\n    onBlur,\n    testId,\n}) => {\n    const theme = useTheme()\n\n    const { animate, config: springConfig } = useMotionConfig()\n    const animatedProps = useSpring({\n        transform: `translate(${x}, ${y})`,\n        config: springConfig,\n        immediate: !animate,\n    })\n\n    const handleFocus = useCallback(\n        event => {\n            onFocus?.(datum, event)\n        },\n        [onFocus, datum]\n    )\n\n    const handleBlur = useCallback(\n        event => {\n            onBlur?.(datum, event)\n        },\n        [onBlur, datum]\n    )\n\n    return (\n        <animated.g\n            transform={animatedProps.transform}\n            style={{ pointerEvents: 'none' }}\n            focusable={isFocusable}\n            tabIndex={isFocusable ? tabIndex : undefined}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={ariaDescribedBy}\n            aria-disabled={ariaDisabled}\n            aria-hidden={ariaHidden}\n            onFocus={isFocusable && onFocus ? handleFocus : undefined}\n            onBlur={isFocusable && onBlur ? handleBlur : undefined}\n            data-testid={testId}\n        >\n            {createElement(symbol, {\n                size,\n                color,\n                datum,\n                borderWidth,\n                borderColor,\n            })}\n            {label && (\n                <text\n                    textAnchor={labelTextAnchor}\n                    y={labelYOffset}\n                    style={sanitizeSvgTextStyle(theme.dots.text)}\n                >\n                    {label}\n                </text>\n            )}\n        </animated.g>\n    )\n}\n\nexport default memo(DotsItem)\n","import { memo } from 'react'\nimport { useTheme } from '@nivo/theming'\n\n/**\n *\n * @param {string} axis\n * @param {number} width\n * @param {number} height\n * @param {string} position\n * @param {number} offsetX\n * @param {number} offsetY\n * @param {string} orientation\n * @return {{ x: number, y: number, textAnchor: string }}\n */\nconst computeLabel = ({ axis, width, height, position, offsetX, offsetY, orientation }) => {\n    let x = 0\n    let y = 0\n    const rotation = orientation === 'vertical' ? -90 : 0\n    let textAnchor = 'start'\n\n    if (axis === 'x') {\n        switch (position) {\n            case 'top-left':\n                x = -offsetX\n                y = offsetY\n                textAnchor = 'end'\n                break\n            case 'top':\n                y = -offsetY\n                if (orientation === 'horizontal') {\n                    textAnchor = 'middle'\n                } else {\n                    textAnchor = 'start'\n                }\n                break\n            case 'top-right':\n                x = offsetX\n                y = offsetY\n                if (orientation === 'horizontal') {\n                    textAnchor = 'start'\n                } else {\n                    textAnchor = 'end'\n                }\n                break\n            case 'right':\n                x = offsetX\n                y = height / 2\n                if (orientation === 'horizontal') {\n                    textAnchor = 'start'\n                } else {\n                    textAnchor = 'middle'\n                }\n                break\n            case 'bottom-right':\n                x = offsetX\n                y = height - offsetY\n                textAnchor = 'start'\n                break\n            case 'bottom':\n                y = height + offsetY\n                if (orientation === 'horizontal') {\n                    textAnchor = 'middle'\n                } else {\n                    textAnchor = 'end'\n                }\n                break\n            case 'bottom-left':\n                y = height - offsetY\n                x = -offsetX\n                if (orientation === 'horizontal') {\n                    textAnchor = 'end'\n                } else {\n                    textAnchor = 'start'\n                }\n                break\n            case 'left':\n                x = -offsetX\n                y = height / 2\n                if (orientation === 'horizontal') {\n                    textAnchor = 'end'\n                } else {\n                    textAnchor = 'middle'\n                }\n                break\n        }\n    } else {\n        switch (position) {\n            case 'top-left':\n                x = offsetX\n                y = -offsetY\n                textAnchor = 'start'\n                break\n            case 'top':\n                x = width / 2\n                y = -offsetY\n                if (orientation === 'horizontal') {\n                    textAnchor = 'middle'\n                } else {\n                    textAnchor = 'start'\n                }\n                break\n            case 'top-right':\n                x = width - offsetX\n                y = -offsetY\n                if (orientation === 'horizontal') {\n                    textAnchor = 'end'\n                } else {\n                    textAnchor = 'start'\n                }\n                break\n            case 'right':\n                x = width + offsetX\n                if (orientation === 'horizontal') {\n                    textAnchor = 'start'\n                } else {\n                    textAnchor = 'middle'\n                }\n                break\n            case 'bottom-right':\n                x = width - offsetX\n                y = offsetY\n                textAnchor = 'end'\n                break\n            case 'bottom':\n                x = width / 2\n                y = offsetY\n                if (orientation === 'horizontal') {\n                    textAnchor = 'middle'\n                } else {\n                    textAnchor = 'end'\n                }\n                break\n            case 'bottom-left':\n                x = offsetX\n                y = offsetY\n                if (orientation === 'horizontal') {\n                    textAnchor = 'start'\n                } else {\n                    textAnchor = 'end'\n                }\n                break\n            case 'left':\n                x = -offsetX\n                if (orientation === 'horizontal') {\n                    textAnchor = 'end'\n                } else {\n                    textAnchor = 'middle'\n                }\n                break\n        }\n    }\n\n    return { x, y, rotation, textAnchor }\n}\n\n/**\n * CartesianMarkersItem.propTypes = {\n *     width: PropTypes.number.isRequired,\n *     height: PropTypes.number.isRequired,\n *\n *     axis: PropTypes.oneOf(['x', 'y']).isRequired,\n *     scale: PropTypes.func.isRequired,\n *     value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.instanceOf(Date)])\n *         .isRequired,\n *     lineStyle: PropTypes.object,\n *     textStyle: PropTypes.object,\n *\n *     legend: PropTypes.string,\n *     legendPosition: PropTypes.oneOf([\n *         'top-left',\n *         'top',\n *         'top-right',\n *         'right',\n *         'bottom-right',\n *         'bottom',\n *         'bottom-left',\n *         'left',\n *     ]),\n *     legendOffsetX: PropTypes.number.isRequired,\n *     legendOffsetY: PropTypes.number.isRequired,\n *     legendOrientation: PropTypes.oneOf(['horizontal', 'vertical']).isRequired,\n * }\n */\nconst CartesianMarkersItem = ({\n    width,\n    height,\n    axis,\n    scale,\n    value,\n    lineStyle,\n    textStyle,\n    legend,\n    legendNode,\n    legendPosition = 'top-right',\n    legendOffsetX = 14,\n    legendOffsetY = 14,\n    legendOrientation = 'horizontal',\n}) => {\n    const theme = useTheme()\n\n    let x = 0\n    let x2 = 0\n    let y = 0\n    let y2 = 0\n\n    if (axis === 'y') {\n        y = scale(value)\n        x2 = width\n    } else {\n        x = scale(value)\n        y2 = height\n    }\n\n    if (legend && !legendNode) {\n        const legendProps = computeLabel({\n            axis,\n            width,\n            height,\n            position: legendPosition,\n            offsetX: legendOffsetX,\n            offsetY: legendOffsetY,\n            orientation: legendOrientation,\n        })\n        legendNode = (\n            <text\n                transform={`translate(${legendProps.x}, ${legendProps.y}) rotate(${legendProps.rotation})`}\n                textAnchor={legendProps.textAnchor}\n                dominantBaseline=\"central\"\n                style={textStyle}\n            >\n                {legend}\n            </text>\n        )\n    }\n\n    return (\n        <g transform={`translate(${x}, ${y})`}>\n            <line\n                x1={0}\n                x2={x2}\n                y1={0}\n                y2={y2}\n                stroke={theme.markers.lineColor}\n                strokeWidth={theme.markers.lineStrokeWidth}\n                style={lineStyle}\n            />\n            {legendNode}\n        </g>\n    )\n}\n\nexport default memo(CartesianMarkersItem)\n","import { memo } from 'react'\nimport CartesianMarkersItem from './CartesianMarkersItem'\n\nconst CartesianMarkers = ({ markers, width, height, xScale, yScale }) => {\n    if (!markers || markers.length === 0) return null\n\n    return markers.map((marker, i) => (\n        <CartesianMarkersItem\n            key={i}\n            {...marker}\n            width={width}\n            height={height}\n            scale={marker.axis === 'y' ? yScale : xScale}\n        />\n    ))\n}\n\nexport default memo(CartesianMarkers)\n","/*\n * This file is part of the nivo project.\n *\n * Copyright 2016-present, Raphaël Benitte.\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\nimport { Component } from 'react'\nimport { Container } from '../components/Container'\n\nexport const withContainer = WrappedComponent => {\n    return class extends Component {\n        render() {\n            const { theme, renderWrapper, animate, motionConfig, ...childProps } = this.props\n\n            return (\n                <Container\n                    theme={theme}\n                    renderWrapper={renderWrapper}\n                    isInteractive={childProps.isInteractive}\n                    animate={animate}\n                    motionConfig={motionConfig}\n                >\n                    <WrappedComponent {...childProps} />\n                </Container>\n            )\n        }\n    }\n}\n","import { interpolateString } from 'd3-interpolate'\nimport { useEffect, useMemo, useRef } from 'react'\nimport { useSpring, to } from '@react-spring/web'\nimport { useMotionConfig } from '../motion'\n\nconst usePrevious = value => {\n    const ref = useRef()\n\n    useEffect(() => {\n        ref.current = value\n    }, [value])\n\n    return ref.current\n}\n\nexport const useAnimatedPath = path => {\n    const { animate, config: springConfig } = useMotionConfig()\n\n    const previousPath = usePrevious(path)\n    const interpolator = useMemo(() => interpolateString(previousPath, path), [previousPath, path])\n\n    const { value } = useSpring({\n        from: { value: 0 },\n        to: { value: 1 },\n        reset: true,\n        config: springConfig,\n        immediate: !animate,\n    })\n\n    return to(value, interpolator)\n}\n","import { createContext } from 'react'\n\nexport const ChartContext = createContext(undefined)\n","import without from 'lodash/without.js'\nimport {\n    curveBasis,\n    curveBasisClosed,\n    curveBasisOpen,\n    curveBundle,\n    curveCardinal,\n    curveCardinalClosed,\n    curveCardinalOpen,\n    curveCatmullRom,\n    curveCatmullRomClosed,\n    curveCatmullRomOpen,\n    curveLinear,\n    curveLinearClosed,\n    curveMonotoneX,\n    curveMonotoneY,\n    curveNatural,\n    curveStep,\n    curveStepAfter,\n    curveStepBefore,\n} from 'd3-shape'\n\nexport const curvePropMapping = {\n    basis: curveBasis,\n    basisClosed: curveBasisClosed,\n    basisOpen: curveBasisOpen,\n    bundle: curveBundle,\n    cardinal: curveCardinal,\n    cardinalClosed: curveCardinalClosed,\n    cardinalOpen: curveCardinalOpen,\n    catmullRom: curveCatmullRom,\n    catmullRomClosed: curveCatmullRomClosed,\n    catmullRomOpen: curveCatmullRomOpen,\n    linear: curveLinear,\n    linearClosed: curveLinearClosed,\n    monotoneX: curveMonotoneX,\n    monotoneY: curveMonotoneY,\n    natural: curveNatural,\n    step: curveStep,\n    stepAfter: curveStepAfter,\n    stepBefore: curveStepBefore,\n}\n\nexport const curvePropKeys = Object.keys(curvePropMapping)\n\nexport const closedCurvePropKeys = curvePropKeys.filter(c => c.endsWith('Closed'))\n\n// Safe curves to be used with d3 area shape generator\nexport const areaCurvePropKeys = without(\n    curvePropKeys,\n    'bundle',\n    'basisClosed',\n    'basisOpen',\n    'cardinalClosed',\n    'cardinalOpen',\n    'catmullRomClosed',\n    'catmullRomOpen',\n    'linearClosed'\n)\n\n// Safe curves to be used with d3 line shape generator\nexport const lineCurvePropKeys = without(\n    curvePropKeys,\n    'bundle',\n    'basisClosed',\n    'basisOpen',\n    'cardinalClosed',\n    'cardinalOpen',\n    'catmullRomClosed',\n    'catmullRomOpen',\n    'linearClosed'\n)\n\n/**\n * Returns curve interpolator from given identifier.\n *\n * @param {string} id - Curve interpolator identifier\n * @return {Function}\n */\nexport const curveFromProp = id => {\n    const curveInterpolator = curvePropMapping[id]\n    if (!curveInterpolator) {\n        throw new TypeError(`'${id}', is not a valid curve interpolator identifier.`)\n    }\n\n    return curvePropMapping[id]\n}\n","import {\n    // order\n    stackOrderAscending,\n    stackOrderDescending,\n    stackOrderInsideOut,\n    stackOrderNone,\n    stackOrderReverse,\n    // offset\n    stackOffsetExpand,\n    stackOffsetDiverging,\n    stackOffsetNone,\n    stackOffsetSilhouette,\n    stackOffsetWiggle,\n} from 'd3-shape'\n\nexport const stackOrderPropMapping = {\n    ascending: stackOrderAscending,\n    descending: stackOrderDescending,\n    insideOut: stackOrderInsideOut,\n    none: stackOrderNone,\n    reverse: stackOrderReverse,\n}\n\nexport const stackOrderPropKeys = Object.keys(stackOrderPropMapping)\n\nexport const stackOrderFromProp = prop => stackOrderPropMapping[prop]\n\nexport const stackOffsetPropMapping = {\n    expand: stackOffsetExpand,\n    diverging: stackOffsetDiverging,\n    none: stackOffsetNone,\n    silhouette: stackOffsetSilhouette,\n    wiggle: stackOffsetWiggle,\n}\n\nexport const stackOffsetPropKeys = Object.keys(stackOffsetPropMapping)\n\nexport const stackOffsetFromProp = prop => stackOffsetPropMapping[prop]\n","export const blendModes = [\n    'normal',\n    'multiply',\n    'screen',\n    'overlay',\n    'darken',\n    'lighten',\n    'color-dodge',\n    'color-burn',\n    'hard-light',\n    'soft-light',\n    'difference',\n    'exclusion',\n    'hue',\n    'saturation',\n    'color',\n    'luminosity',\n]\n\nexport * from './curve'\nexport * from './stack'\n","import { useMemo } from 'react'\nimport { curveFromProp } from '../props'\n\n/**\n * Transform d3 curve interpolation identifier\n * to its corresponding interpolator.\n */\nexport const useCurveInterpolation = interpolation =>\n    useMemo(() => curveFromProp(interpolation), [interpolation])\n","/*\n * This file is part of the nivo project.\n *\n * Copyright 2016-present, Raphaël Benitte.\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\nimport last from 'lodash/last.js'\nimport isArray from 'lodash/isArray.js'\nimport isFunction from 'lodash/isFunction.js'\nimport { scaleQuantize } from 'd3-scale'\nimport {\n    // Diverging\n    schemeBrBG,\n    schemePRGn,\n    schemePiYG,\n    schemePuOr,\n    schemeRdBu,\n    schemeRdGy,\n    schemeRdYlBu,\n    schemeRdYlGn,\n    schemeSpectral,\n\n    // Sequential (Single Hue)\n    schemeBlues,\n    schemeGreens,\n    schemeGreys,\n    schemeOranges,\n    schemePurples,\n    schemeReds,\n\n    // Sequential (Multi-Hue)\n    schemeBuGn,\n    schemeBuPu,\n    schemeGnBu,\n    schemeOrRd,\n    schemePuBuGn,\n    schemePuBu,\n    schemePuRd,\n    schemeRdPu,\n    schemeYlGnBu,\n    schemeYlGn,\n    schemeYlOrBr,\n    schemeYlOrRd,\n} from 'd3-scale-chromatic'\n\nexport const quantizeColorScales = {\n    nivo: ['#d76445', '#f47560', '#e8c1a0', '#97e3d5', '#61cdbb', '#00b0a7'],\n\n    // Diverging\n    BrBG: last(schemeBrBG),\n    PRGn: last(schemePRGn),\n    PiYG: last(schemePiYG),\n    PuOr: last(schemePuOr),\n    RdBu: last(schemeRdBu),\n    RdGy: last(schemeRdGy),\n    RdYlBu: last(schemeRdYlBu),\n    RdYlGn: last(schemeRdYlGn),\n    spectral: last(schemeSpectral),\n\n    // Sequential (Single Hue)\n    blues: last(schemeBlues),\n    greens: last(schemeGreens),\n    greys: last(schemeGreys),\n    oranges: last(schemeOranges),\n    purples: last(schemePurples),\n    reds: last(schemeReds),\n\n    // Sequential (Multi-Hue)\n    BuGn: last(schemeBuGn),\n    BuPu: last(schemeBuPu),\n    GnBu: last(schemeGnBu),\n    OrRd: last(schemeOrRd),\n    PuBuGn: last(schemePuBuGn),\n    PuBu: last(schemePuBu),\n    PuRd: last(schemePuRd),\n    RdPu: last(schemeRdPu),\n    YlGnBu: last(schemeYlGnBu),\n    YlGn: last(schemeYlGn),\n    YlOrBr: last(schemeYlOrBr),\n    YlOrRd: last(schemeYlOrRd),\n}\n\nexport const quantizeColorScalesKeys = Object.keys(quantizeColorScales)\n\nexport const guessQuantizeColorScale = colors => {\n    // colors is already a valid scale\n    if (isFunction(colors)) {\n        if (!isFunction(colors.domain)) {\n            throw new Error(\n                `Provided colors should be a valid quantize scale providing a 'domain()' function`\n            )\n        }\n\n        return colors\n    }\n\n    if (quantizeColorScales[colors]) {\n        // use predefined d3 quantize color scale\n        return scaleQuantize().range(quantizeColorScales[colors])\n    }\n\n    // user defined colors\n    if (isArray(colors)) return scaleQuantize().range(colors)\n\n    throw new Error(\n        `Unable to guess quantize color scale from '${colors}',\\nmust be a function or one of:\\n'${quantizeColorScalesKeys.join(\n            `', '`\n        )}'`\n    )\n}\n","/*\n * This file is part of the nivo project.\n *\n * Copyright 2016-present, Raphaël Benitte.\n *\n * For the full copyright and license information, please view the LICENSE\n * file that was distributed with this source code.\n */\nimport last from 'lodash/last.js'\nimport isArray from 'lodash/isArray.js'\nimport isString from 'lodash/isString.js'\nimport { scaleOrdinal, scaleSequential } from 'd3-scale'\nimport {\n    // categorical\n    schemeCategory10,\n    schemeAccent,\n    schemeDark2,\n    schemePaired,\n    schemePastel1,\n    schemePastel2,\n    schemeSet1,\n    schemeSet2,\n    schemeSet3,\n    // diverging\n    interpolateBrBG,\n    schemeBrBG,\n    interpolatePRGn,\n    schemePRGn,\n    interpolatePiYG,\n    schemePiYG,\n    interpolatePuOr,\n    schemePuOr,\n    interpolateRdBu,\n    schemeRdBu,\n    interpolateRdGy,\n    schemeRdGy,\n    interpolateRdYlBu,\n    schemeRdYlBu,\n    interpolateRdYlGn,\n    schemeRdYlGn,\n    interpolateSpectral,\n    schemeSpectral,\n    // sequential single hue\n    interpolateBlues,\n    schemeBlues,\n    interpolateGreens,\n    schemeGreens,\n    interpolateGreys,\n    schemeGreys,\n    interpolateOranges,\n    schemeOranges,\n    interpolatePurples,\n    schemePurples,\n    interpolateReds,\n    schemeReds,\n    // sequential multi hue\n    interpolateViridis,\n    interpolateInferno,\n    interpolateMagma,\n    interpolatePlasma,\n    interpolateWarm,\n    interpolateCool,\n    interpolateCubehelixDefault,\n    interpolateBuGn,\n    schemeBuGn,\n    interpolateBuPu,\n    schemeBuPu,\n    interpolateGnBu,\n    schemeGnBu,\n    interpolateOrRd,\n    schemeOrRd,\n    interpolatePuBuGn,\n    schemePuBuGn,\n    interpolatePuBu,\n    schemePuBu,\n    interpolatePuRd,\n    schemePuRd,\n    interpolateRdPu,\n    schemeRdPu,\n    interpolateYlGnBu,\n    schemeYlGnBu,\n    interpolateYlGn,\n    schemeYlGn,\n    interpolateYlOrBr,\n    schemeYlOrBr,\n    interpolateYlOrRd,\n    schemeYlOrRd,\n    // cyclical\n    interpolateRainbow,\n    interpolateSinebow,\n} from 'd3-scale-chromatic'\n\n// used for ordinal color scales\nconst colorSchemes = {\n    nivo: ['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb', '#97e3d5'],\n    // categorical\n    category10: schemeCategory10,\n    accent: schemeAccent,\n    dark2: schemeDark2,\n    paired: schemePaired,\n    pastel1: schemePastel1,\n    pastel2: schemePastel2,\n    set1: schemeSet1,\n    set2: schemeSet2,\n    set3: schemeSet3,\n    // diverging\n    brown_blueGreen: last(schemeBrBG),\n    purpleRed_green: last(schemePRGn),\n    pink_yellowGreen: last(schemePiYG),\n    purple_orange: last(schemePuOr),\n    red_blue: last(schemeRdBu),\n    red_grey: last(schemeRdGy),\n    red_yellow_blue: last(schemeRdYlBu),\n    red_yellow_green: last(schemeRdYlGn),\n    spectral: last(schemeSpectral),\n    // sequential single hue\n    blues: last(schemeBlues),\n    greens: last(schemeGreens),\n    greys: last(schemeGreys),\n    oranges: last(schemeOranges),\n    purples: last(schemePurples),\n    reds: last(schemeReds),\n    // sequential multi hue\n    blue_green: last(schemeBuGn),\n    blue_purple: last(schemeBuPu),\n    green_blue: last(schemeGnBu),\n    orange_red: last(schemeOrRd),\n    purple_blue_green: last(schemePuBuGn),\n    purple_blue: last(schemePuBu),\n    purple_red: last(schemePuRd),\n    red_purple: last(schemeRdPu),\n    yellow_green_blue: last(schemeYlGnBu),\n    yellow_green: last(schemeYlGn),\n    yellow_orange_brown: last(schemeYlOrBr),\n    yellow_orange_red: last(schemeYlOrRd),\n}\n\nexport const colorSchemeIds = [\n    'nivo',\n    // categorical\n    'category10',\n    'accent',\n    'dark2',\n    'paired',\n    'pastel1',\n    'pastel2',\n    'set1',\n    'set2',\n    'set3',\n    // diverging\n    'brown_blueGreen',\n    'purpleRed_green',\n    'pink_yellowGreen',\n    'purple_orange',\n    'red_blue',\n    'red_grey',\n    'red_yellow_blue',\n    'red_yellow_green',\n    'spectral',\n    // sequential single hue\n    'blues',\n    'greens',\n    'greys',\n    'oranges',\n    'purples',\n    'reds',\n    // sequential multi hue\n    'blue_green',\n    'blue_purple',\n    'green_blue',\n    'orange_red',\n    'purple_blue_green',\n    'purple_blue',\n    'purple_red',\n    'red_purple',\n    'yellow_green_blue',\n    'yellow_green',\n    'yellow_orange_brown',\n    'yellow_orange_red',\n]\n\n// used for sequential color scales\nexport const colorInterpolators = {\n    // diverging\n    brown_blueGreen: interpolateBrBG,\n    purpleRed_green: interpolatePRGn,\n    pink_yellowGreen: interpolatePiYG,\n    purple_orange: interpolatePuOr,\n    red_blue: interpolateRdBu,\n    red_grey: interpolateRdGy,\n    red_yellow_blue: interpolateRdYlBu,\n    red_yellow_green: interpolateRdYlGn,\n    spectral: interpolateSpectral,\n    // sequential single hue\n    blues: interpolateBlues,\n    greens: interpolateGreens,\n    greys: interpolateGreys,\n    oranges: interpolateOranges,\n    purples: interpolatePurples,\n    reds: interpolateReds,\n    // sequential multi hue\n    viridis: interpolateViridis,\n    inferno: interpolateInferno,\n    magma: interpolateMagma,\n    plasma: interpolatePlasma,\n    warm: interpolateWarm,\n    cool: interpolateCool,\n    cubehelixDefault: interpolateCubehelixDefault,\n    blue_green: interpolateBuGn,\n    blue_purple: interpolateBuPu,\n    green_blue: interpolateGnBu,\n    orange_red: interpolateOrRd,\n    purple_blue_green: interpolatePuBuGn,\n    purple_blue: interpolatePuBu,\n    purple_red: interpolatePuRd,\n    red_purple: interpolateRdPu,\n    yellow_green_blue: interpolateYlGnBu,\n    yellow_green: interpolateYlGn,\n    yellow_orange_brown: interpolateYlOrBr,\n    yellow_orange_red: interpolateYlOrRd,\n    // cyclical\n    rainbow: interpolateRainbow,\n    sinebow: interpolateSinebow,\n}\n\nexport const colorInterpolatorIds = [\n    // diverging\n    'brown_blueGreen',\n    'purpleRed_green',\n    'pink_yellowGreen',\n    'purple_orange',\n    'red_blue',\n    'red_grey',\n    'red_yellow_blue',\n    'red_yellow_green',\n    'spectral',\n    // sequential single hue\n    'blues',\n    'greens',\n    'greys',\n    'oranges',\n    'purples',\n    'reds',\n    // sequential multi hue\n    'viridis',\n    'inferno',\n    'magma',\n    'plasma',\n    'warm',\n    'cool',\n    'cubehelixDefault',\n    'blue_green',\n    'blue_purple',\n    'green_blue',\n    'orange_red',\n    'purple_blue_green',\n    'purple_blue',\n    'purple_red',\n    'red_purple',\n    'yellow_green_blue',\n    'yellow_green',\n    'yellow_orange_brown',\n    'yellow_orange_red',\n    // cyclical\n    'rainbow',\n    'sinebow',\n]\n\nexport const nivoCategoricalColors = () =>\n    scaleOrdinal(['#e8c1a0', '#f47560', '#f1e15b', '#e8a838', '#61cdbb', '#97e3d5'])\n\nexport const getColorScale = (colors, dataScale) => {\n    if (isString(colors)) {\n        const scheme = colorSchemes[colors]\n        if (scheme !== undefined) {\n            const scale = scaleOrdinal(scheme)\n            scale.type = 'ordinal'\n\n            return scale\n        }\n\n        if (dataScale !== undefined && colors.indexOf('seq:') === 0) {\n            const interpolator = colorInterpolators[colors.slice(4)]\n            if (interpolator !== undefined) {\n                const scale = scaleSequential(interpolator).domain(dataScale.domain())\n                scale.type = 'sequential'\n\n                return scale\n            }\n        }\n    }\n\n    if (isArray(colors)) {\n        const scale = scaleOrdinal(colors)\n        scale.type = 'ordinal'\n\n        return scale\n    }\n\n    // just use provided value,\n    // all elements will have identical color\n    return () => colors\n}\n\nexport * from './quantize'\n","import { scaleOrdinal } from 'd3-scale'\nimport { schemeSet3 } from 'd3-scale-chromatic'\nimport { nivoCategoricalColors } from '../lib/colors'\n\n// motion\nexport const defaultAnimate = true\n\n// colors\nexport const defaultCategoricalColors = nivoCategoricalColors\nexport const defaultColorRange = scaleOrdinal(schemeSet3)\n\n// margin\nexport const defaultMargin = {\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0,\n}\n","import { useMemo } from 'react'\nimport { defaultMargin } from '../defaults'\n\nexport const useDimensions = (width, height, partialMargin = {}) =>\n    useMemo(() => {\n        const margin = {\n            ...defaultMargin,\n            ...partialMargin,\n        }\n\n        return {\n            margin,\n            innerWidth: width - margin.left - margin.right,\n            innerHeight: height - margin.top - margin.bottom,\n            outerWidth: width,\n            outerHeight: height,\n        }\n    }, [width, height, partialMargin])\n","import { useRef, useState, useEffect } from 'react'\n\nexport const useMeasure = () => {\n    const measureRef = useRef(null)\n\n    const [bounds, setBounds] = useState({\n        left: 0,\n        top: 0,\n        width: 0,\n        height: 0,\n    })\n\n    const [observer] = useState(() => {\n        // Check if ResizeObserver is defined in current env (could be browser, node.js, jsdom etc.).\n        if (typeof ResizeObserver === 'undefined') return null\n\n        return new ResizeObserver(([entry]) => setBounds(entry.contentRect))\n    })\n\n    useEffect(() => {\n        if (measureRef.current && observer !== null) {\n            observer.observe(measureRef.current)\n        }\n\n        return () => {\n            if (observer !== null) observer.disconnect()\n        }\n    }, [observer])\n\n    return [measureRef, bounds]\n}\n","import { useMemo } from 'react'\nimport { format as d3Format } from 'd3-format'\nimport { timeFormat as d3TimeFormat } from 'd3-time-format'\n\nexport const getValueFormatter = format => {\n    // user defined function\n    if (typeof format === 'function') return format\n\n    if (typeof format === 'string') {\n        // time format specifier\n        if (for