feat(bump): add AreaBump component

conf/base.yaml

@@ -80,10 +80,10 @@ capture:
       # - path: /network/
       #   selector: '#chart'
       #   output: ./packages/network/doc/network.png
-      - path: /network/canvas/
-        selector: '#chart'
-        theme: dark
-        output: ./packages/network/doc/network-canvas.png
+      # - path: /network/canvas/
+      #   selector: '#chart'
+      #   theme: dark
+      #   output: ./packages/network/doc/network-canvas.png
 
       # - path: /parallel-coordinates
       #   selector: '#chart'
@@ -175,6 +175,19 @@ capture:
       #   selector: '#bullet-darkColored'
       #   output: ./website/src/assets/icons/bullet-dark-colored.png
 
+      - path: /internal/icons/
+        selector: '#bump-lightNeutral'
+        output: ./website/src/assets/icons/bump-light-neutral.png
+      - path: /internal/icons/
+        selector: '#bump-lightColored'
+        output: ./website/src/assets/icons/bump-light-colored.png
+      - path: /internal/icons/
+        selector: '#bump-darkNeutral'
+        output: ./website/src/assets/icons/bump-dark-neutral.png
+      - path: /internal/icons/
+        selector: '#bump-darkColored'
+        output: ./website/src/assets/icons/bump-dark-colored.png
+
       # - path: /internal/icons/
       #   selector: '#circle-packing-lightNeutral'
       #   output: ./website/src/assets/icons/circle-packing-light-neutral.png

packages/axes/src/components/Axes.js

@@ -40,8 +40,8 @@ const Axes = ({ xScale, yScale, width, height, top, right, bottom, left }) => {
 }
 
 Axes.propTypes = {
-    xScale: PropTypes.func.isRequired,
-    yScale: PropTypes.func.isRequired,
+    xScale: PropTypes.func,
+    yScale: PropTypes.func,
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
     top: axisPropType,

packages/bump/src/area-bump/Area.js

@@ -0,0 +1,60 @@
+/*
+ * 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, { memo, useCallback } from 'react'
+import { useTooltip } from '@nivo/tooltip'
+import AreaTooltip from './AreaTooltip'
+
+const Area = ({
+    serie,
+    areaGenerator,
+    blendMode,
+    setCurrentSerie
+}) => {
+    const { showTooltipFromEvent, hideTooltip } = useTooltip()
+    const onMouseEnter = useCallback(
+        event => {
+            showTooltipFromEvent(<AreaTooltip serie={serie}/>, event)
+            setCurrentSerie(serie.id)
+        },
+        [serie, showTooltipFromEvent, setCurrentSerie]
+    )
+    const onMouseMove = useCallback(
+        event => {
+            showTooltipFromEvent(<AreaTooltip serie={serie}/>, event)
+        },
+        [serie, showTooltipFromEvent]
+    )
+    const onMouseLeave = useCallback(() => {
+        hideTooltip()
+        setCurrentSerie(null)
+    }, [hideTooltip, setCurrentSerie])
+
+    return (
+        <>
+            <path
+                d={areaGenerator(serie.areaPoints)}
+                fill={serie.color}
+                fillOpacity={serie.style.fillOpacity}
+                stroke={serie.color}
+                strokeWidth={serie.style.borderWidth}
+                strokeOpacity={serie.style.strokeOpacity}
+                style={{ mixBlendMode: blendMode }}
+                onMouseEnter={onMouseEnter}
+                onMouseMove={onMouseMove}
+                onMouseLeave={onMouseLeave}
+            />
+        </>
+    )
+}
+
+Area.propTypes = {
+
+}
+
+export default memo(Area)

packages/bump/src/area-bump/AreaBump.js

@@ -0,0 +1,179 @@
+/*
+ * 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, { memo, useState, Fragment } from 'react'
+import { withContainer, useDimensions, SvgWrapper } from '@nivo/core'
+import { Grid, Axes } from '@nivo/axes'
+import { AreaBumpPropTypes, AreaBumpDefaultProps } from './props'
+import { useAreaBump } from './hooks'
+import Area from './Area'
+import AreasLabels from './AreasLabels'
+
+const AreaBump = props => {
+    const {
+        data,
+        align,
+
+        width,
+        height,
+        margin: partialMargin,
+
+        layers,
+
+        interpolation,
+        spacing,
+        xPadding,
+
+        colors,
+        blendMode,
+        fillOpacity,
+        activeFillOpacity,
+        inactiveFillOpacity,
+        borderWidth,
+        activeBorderWidth,
+        inactiveBorderWidth,
+        borderOpacity,
+        activeBorderOpacity,
+        inactiveBorderOpacity,
+
+        startLabel,
+        startLabelPadding,
+        startLabelTextColor,
+        endLabel,
+        endLabelPadding,
+        endLabelTextColor,
+
+        enableGridX,
+        axisTop,
+        axisBottom,
+
+        isInteractive,
+    } = props
+
+    const [currentSerie, setCurrentSerie] = useState(null)
+
+    const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
+        width,
+        height,
+        partialMargin
+    )
+
+    const {
+        series,
+        xScale,
+        heightScale,
+        areaGenerator,
+        getColor,
+    } = useAreaBump({
+        data,
+        width: innerWidth,
+        height: innerHeight,
+        align,
+        spacing,
+        xPadding,
+        interpolation,
+        colors,
+        fillOpacity,
+        activeFillOpacity,
+        inactiveFillOpacity,
+        borderWidth,
+        activeBorderWidth,
+        inactiveBorderWidth,
+        borderOpacity,
+        activeBorderOpacity,
+        inactiveBorderOpacity,
+        isInteractive,
+        current: currentSerie
+    })
+
+    const layerById = {
+        grid: enableGridX && (
+            <Grid
+                key="grid"
+                width={innerWidth}
+                height={innerHeight}
+                xScale={xScale}
+            />
+        ),
+        axes: (
+            <Axes
+                key="axes"
+                xScale={xScale}
+                width={innerWidth}
+                height={innerHeight}
+                top={axisTop}
+                bottom={axisBottom}
+            />
+        ),
+        labels: [],
+        areas: (
+            <Fragment key="areas">
+                {series.map(serie => (
+                    <Area
+                        key={serie.id}
+                        areaGenerator={areaGenerator}
+                        serie={serie}
+                        blendMode={blendMode}
+                        setCurrentSerie={setCurrentSerie}
+                    />
+                ))}
+            </Fragment>
+        ),
+    }
+
+    if (startLabel !== false) {
+        layerById.labels.push(
+            <AreasLabels
+                key="start"
+                series={series}
+                position="start"
+                padding={startLabelPadding}
+                margin={margin}
+                color={startLabelTextColor}
+                setCurrentSerie={setCurrentSerie}
+            />
+        )
+    }
+    if (endLabel !== false) {
+        layerById.labels.push(
+            <AreasLabels
+                key="end"
+                series={series}
+                position="end"
+                padding={endLabelPadding}
+                margin={margin}
+                color={endLabelTextColor}
+                setCurrentSerie={setCurrentSerie}
+            />
+        )
+    }
+
+    return (
+        <SvgWrapper width={outerWidth} height={outerHeight} margin={margin}>
+            {layers.map((layer, i) => {
+                if (typeof layer === 'function') {
+                    return (
+                        <Fragment key={i}>
+                            {layer({
+                                innerWidth,
+                                innerHeight,
+                            })}
+                        </Fragment>
+                    )
+                }
+
+                return layerById[layer]
+            })}
+        </SvgWrapper>
+    )
+}
+
+AreaBump.propTypes = AreaBumpPropTypes
+AreaBump.defaultProps = AreaBumpDefaultProps
+
+export default memo(withContainer(AreaBump))

packages/bump/src/area-bump/AreaTooltip.js

@@ -0,0 +1,24 @@
+/*
+ * 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, { memo } from 'react'
+import PropTypes from 'prop-types'
+import { BasicTooltip } from '@nivo/tooltip'
+
+const AreaTooltip = ({ serie }) => {
+    return <BasicTooltip id={serie.id} enableChip={true} color={serie.color} />
+}
+
+AreaTooltip.propTypes = {
+    serie: PropTypes.shape({
+        id: PropTypes.string.isRequired,
+        color: PropTypes.string.isRequired,
+    }),
+}
+
+export default memo(AreaTooltip)