feat(bump): init @nivo/bump package

packages/bump/LICENSE.md

@@ -0,0 +1,19 @@
+Copyright (c) Raphaël Benitte
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/bump/README.md

@@ -0,0 +1,9 @@
+# `@nivo/bump`
+
+[![version](https://img.shields.io/npm/v/@nivo/bump.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/bump)
+
+## Bump
+
+[documentation](http://nivo.rocks/bump/)
+
+![Bump](https://raw.githubusercontent.com/plouc/nivo/master/packages/bump/doc/bump.png)

packages/bump/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@nivo/bump",
+  "version": "0.57.0",
+  "license": "MIT",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "keywords": [
+    "nivo",
+    "dataviz",
+    "react",
+    "d3",
+    "charts",
+    "bump-chart",
+    "area-bump-chart"
+  ],
+  "main": "./dist/nivo-bump.cjs.js",
+  "module": "./dist/nivo-bump.esm.js",
+  "files": [
+    "README.md",
+    "LICENSE.md",
+    "index.d.ts",
+    "dist/"
+  ],
+  "dependencies": {
+    "@nivo/colors": "0.57.0",
+    "@nivo/core": "0.57.0",
+    "@nivo/legends": "0.57.0",
+    "@nivo/tooltip": "0.57.0",
+    "d3-chord": "^1.0.6",
+    "d3-shape": "^1.3.5",
+    "lodash": "^4.17.11",
+    "react-motion": "^0.5.2"
+  },
+  "peerDependencies": {
+    "prop-types": ">= 15.5.10 < 16.0.0",
+    "react": ">= 16.8.4 < 17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/bump/src/Bump.js

@@ -0,0 +1,248 @@
+/*
+ * 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, useMemo, useState, Fragment } from 'react'
+import { withContainer, useDimensions, SvgWrapper } from '@nivo/core'
+import { useOrdinalColorScale } from '@nivo/colors'
+import { Grid, Axes } from '@nivo/axes'
+import { useScales, useLineGenerator, useLineWidth, useSerieOpacity, usePointSize } from './hooks'
+import { BumpPropTypes, BumpDefaultProps } from './props'
+import Line from './Line'
+import LineLabels from './LineLabels'
+import Points from './Points'
+
+const Bump = props => {
+    const {
+        data,
+
+        xOuterPadding,
+        yOuterPadding,
+
+        width,
+        height,
+        margin: partialMargin,
+
+        layers,
+
+        lineInterpolation,
+        lineCurvaturePadding,
+        lineWidth,
+        lineOpacity,
+        activeLineWidth,
+        activeLineOpacity,
+        inactiveLineWidth,
+        inactiveLineOpacity,
+
+        startLabel,
+        startLabelPadding,
+        startLabelTextColor,
+        endLabel,
+        endLabelPadding,
+        endLabelTextColor,
+
+        pointSize,
+        activePointSize,
+        inactivePointSize,
+        pointColor,
+
+        axisTop,
+        axisRight,
+        axisBottom,
+        axisLeft,
+        enableGridX,
+        enableGridY,
+
+        colors,
+    } = props
+
+    const [currentSerie, setCurrentSerie] = useState(null)
+
+    const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
+        width,
+        height,
+        partialMargin
+    )
+
+    const { xScale, yScale } = useScales({
+        width: innerWidth,
+        height: innerHeight,
+        data,
+        xOuterPadding,
+        yOuterPadding,
+    })
+    const linePadding = xScale.step() * lineCurvaturePadding
+
+    const getColor = useOrdinalColorScale(colors, 'id')
+
+    const { series, points } = useMemo(() => {
+        const allPoints = []
+        const series = data.map(rawSerie => {
+            const serie = {
+                ...rawSerie,
+                color: getColor(rawSerie),
+                points: [],
+                linePoints: [],
+            }
+            rawSerie.data.forEach((datum, i) => {
+                const point = {
+                    ...datum,
+                    id: `${datum.x}.${datum.y}`,
+                    x: xScale(datum.x),
+                    y: yScale(datum.y),
+                    serie,
+                }
+                allPoints.push(point)
+                serie.points.push(point)
+                if (i === 0) {
+                    serie.linePoints.push([0, point.y])
+                    serie.linePoints.push([point.x, point.y])
+                    serie.linePoints.push([point.x + linePadding, point.y])
+                } else if (i === rawSerie.data.length - 1) {
+                    serie.linePoints.push([point.x - linePadding, point.y])
+                    serie.linePoints.push([point.x, point.y])
+                    serie.linePoints.push([innerWidth, point.y])
+                } else {
+                    serie.linePoints.push([point.x - linePadding, point.y])
+                    serie.linePoints.push([point.x, point.y])
+                    serie.linePoints.push([point.x + linePadding, point.y])
+                }
+            })
+
+            return serie
+        })
+
+        return { series, points: allPoints }
+    }, [data, xScale, yScale, linePadding, getColor])
+
+    const lineGenerator = useLineGenerator()
+    const getLineWidth = useLineWidth({
+        lineWidth,
+        activeLineWidth,
+        inactiveLineWidth,
+        current: currentSerie,
+    })
+    const getSerieOpacity = useSerieOpacity({
+        opacity: lineOpacity,
+        activeOpacity: activeLineOpacity,
+        inactiveOpacity: inactiveLineOpacity,
+        current: currentSerie,
+    })
+    const getPointSize = usePointSize({
+        size: pointSize,
+        activeSize: activePointSize,
+        inactiveSize: inactivePointSize,
+        current: currentSerie,
+    })
+
+    const layerById = {
+        grid: (
+            <Grid
+                key="grid"
+                width={innerWidth}
+                height={innerHeight}
+                xScale={enableGridX ? xScale : null}
+                yScale={enableGridY ? yScale : null}
+            />
+        ),
+        axes: (
+            <Axes
+                key="axes"
+                xScale={xScale}
+                yScale={yScale}
+                width={innerWidth}
+                height={innerHeight}
+                top={axisTop}
+                right={axisRight}
+                bottom={axisBottom}
+                left={axisLeft}
+            />
+        ),
+        labels: [],
+        lines: (
+            <Fragment key="lines">
+                {series.map(serie => (
+                    <Line
+                        key={serie.id}
+                        serie={serie}
+                        currentSerie={currentSerie}
+                        setCurrentSerie={setCurrentSerie}
+                        lineGenerator={lineGenerator}
+                        getOpacity={getSerieOpacity}
+                        getLineWidth={getLineWidth}
+                        yScale={yScale}
+                        margin={margin}
+                    />
+                ))}
+            </Fragment>
+        ),
+        points: null,
+    }
+
+    if (startLabel !== false) {
+        layerById.labels.push(
+            <LineLabels
+                key="start"
+                series={series}
+                yScale={yScale}
+                position="start"
+                padding={startLabelPadding}
+                margin={margin}
+                color={startLabelTextColor}
+                currentSerie={currentSerie}
+                setCurrentSerie={setCurrentSerie}
+                getOpacity={getSerieOpacity}
+            />
+        )
+    }
+    if (endLabel !== false) {
+        layerById.labels.push(
+            <LineLabels
+                key="end"
+                series={series}
+                yScale={yScale}
+                position="end"
+                padding={endLabelPadding}
+                margin={margin}
+                color={endLabelTextColor}
+                currentSerie={currentSerie}
+                setCurrentSerie={setCurrentSerie}
+                getOpacity={getSerieOpacity}
+            />
+        )
+    }
+
+    layerById.points = (
+        <Points key="points" points={points} getSize={getPointSize} color={pointColor} />
+    )
+
+    return (
+        <SvgWrapper width={outerWidth} height={outerHeight} margin={margin}>
+            {layers.map((layer, i) => {
+                if (typeof layer === 'function') {
+                    return (
+                        <Fragment key={i}>
+                            {layer({
+                                innerWidth,
+                                innerHeight,
+                                xScale,
+                                yScale,
+                            })}
+                        </Fragment>
+                    )
+                }
+
+                return layerById[layer]
+            })}
+        </SvgWrapper>
+    )
+}
+
+Bump.propTypes = BumpPropTypes
+Bump.defaultProps = BumpDefaultProps
+
+export default memo(withContainer(Bump))

packages/bump/src/Line.js

@@ -0,0 +1,59 @@
+/*
+ * 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, useMemo } from 'react'
+import { useTooltip } from '@nivo/tooltip'
+import LineTooltip from './LineTooltip'
+
+const Line = ({ serie, setCurrentSerie, lineGenerator, yScale, getLineWidth, getOpacity }) => {
+    const { showTooltipFromEvent, hideTooltip } = useTooltip()
+    const onMouseEnter = useCallback(
+        event => {
+            showTooltipFromEvent(<LineTooltip serie={serie} />, event)
+            setCurrentSerie(serie.id)
+        },
+        [serie, showTooltipFromEvent, setCurrentSerie]
+    )
+    const onMouseMove = useCallback(
+        event => {
+            showTooltipFromEvent(<LineTooltip serie={serie} />, event)
+        },
+        [serie, showTooltipFromEvent]
+    )
+    const onMouseLeave = useCallback(() => {
+        hideTooltip()
+        setCurrentSerie(null)
+    }, [hideTooltip, setCurrentSerie])
+    const path = useMemo(() => lineGenerator(serie.linePoints), [serie.linePoints])
+
+    return (
+        <>
+            <path
+                fill="none"
+                stroke={serie.color}
+                strokeWidth={getLineWidth(serie)}
+                d={path}
+                strokeLinecap="round"
+                strokeOpacity={getOpacity(serie)}
+            />
+            <path
+                fill="none"
+                stroke="red"
+                strokeOpacity={0}
+                strokeWidth={yScale.step()}
+                d={path}
+                strokeLinecap="butt"
+                onMouseEnter={onMouseEnter}
+                onMouseMove={onMouseMove}
+                onMouseLeave={onMouseLeave}
+            />
+        </>
+    )
+}
+
+export default memo(Line)