feat(funnel): init @nivo/funnel package

conf/base.yaml

@@ -8,13 +8,13 @@ capture:
       #
       #########################################################################
 
-      - path: /area-bump/
-        selector: '#chart'
-        output: ./packages/bump/doc/area-bump.png
+      # - path: /area-bump/
+      #   selector: '#chart'
+      #   output: ./packages/bump/doc/area-bump.png
 
-      - path: /bump/
-        selector: '#chart'
-        output: ./packages/bump/doc/bump.png
+      # - path: /bump/
+      #   selector: '#chart'
+      #   output: ./packages/bump/doc/bump.png
 
       # - path: /swarmplot
       #   selector: '#chart'
@@ -158,6 +158,19 @@ capture:
       #
       #########################################################################
 
+      - path: /internal/icons/
+        selector: '#funnel-lightNeutral'
+        output: ./website/src/assets/icons/funnel-light-neutral.png
+      - path: /internal/icons/
+        selector: '#funnel-lightColored'
+        output: ./website/src/assets/icons/funnel-light-colored.png
+      - path: /internal/icons/
+        selector: '#funnel-darkNeutral'
+        output: ./website/src/assets/icons/funnel-dark-neutral.png
+      - path: /internal/icons/
+        selector: '#funnel-darkColored'
+        output: ./website/src/assets/icons/funnel-dark-colored.png
+
       # - path: /internal/icons/
       #   selector: '#area-bump-lightNeutral'
       #   output: ./website/src/assets/icons/area-bump-light-neutral.png

packages/funnel/README.md

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

packages/funnel/index.d.ts

@@ -0,0 +1,71 @@
+/*
+ * 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 * as React from 'react'
+import {
+    Dimensions,
+    Box,
+    Theme,
+    MotionProps,
+} from '@nivo/core'
+import { OrdinalColorsInstruction, InheritedColorProp } from '@nivo/colors'
+
+declare module '@nivo/funnel' {
+    export interface FunnelDatum {
+        id: string | number
+        value: number
+        label?: string
+    }
+
+    export interface PartProps {
+        data: FunnelDatum
+        width: number
+        height: number
+        color: string
+        fillOpacity: number
+        borderWidth: number
+        borderOpacity: number
+    }
+
+    export enum FunnelLayerType {
+        Parts = 'parts',
+    }
+    export interface FunnelCustomLayerProps {
+        parts: PartProps[]
+    }
+    export type FunnelCustomLayer = (props: FunnelCustomLayerProps) => React.ReactNode
+    export type Layer = FunnelLayerType | FunnelCustomLayer
+
+    export interface FunnelProps {
+        data: FunnelDatum[]
+
+        margin?: Box
+
+        groupMode?: 'stacked' | 'grouped'
+        direction?: 'horizontal' | 'vertical'
+        interpolation?: 'smooth' | 'linear'
+        spacing?: number
+        shapeContinuity?: number
+
+        theme?: Theme
+        colors?: OrdinalColorsInstruction
+
+        borderWidth?: number
+        borderColor?: InheritedColorProp<PartProps>
+        borderOpacity?: number
+
+        layers?: Layer[]
+
+        isInteractive?: boolean
+    }
+
+    export interface FunnelSvgProps extends FunnelProps, MotionProps {}
+
+    export class Funnel extends React.Component<FunnelSvgProps & Dimensions> {}
+    export class ResponsiveFunnel extends React.Component<FunnelSvgProps> {}
+}

packages/funnel/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@nivo/funnel",
+  "version": "0.62.0",
+  "license": "MIT",
+  "author": {
+    "name": "Raphaël Benitte",
+    "url": "https://github.com/plouc"
+  },
+  "keywords": [
+    "nivo",
+    "dataviz",
+    "react",
+    "d3",
+    "charts",
+    "funnel"
+  ],
+  "main": "./dist/nivo-funnel.cjs.js",
+  "module": "./dist/nivo-funnel.esm.js",
+  "files": [
+    "README.md",
+    "LICENSE.md",
+    "index.d.ts",
+    "dist/"
+  ],
+  "dependencies": {
+    "@nivo/colors": "0.62.0",
+    "@nivo/core": "0.62.0",
+    "@nivo/scales": "0.62.0",
+    "@nivo/tooltip": "0.62.0",
+    "d3-scale": "^3.0.0",
+    "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/funnel/src/Funnel.js

@@ -0,0 +1,151 @@
+/*
+ * 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, { Fragment } from 'react'
+import { SvgWrapper, withContainer, useDimensions, useTheme, useMotionConfig } from '@nivo/core'
+import { FunnelPropTypes, FunnelDefaultProps } from './props'
+import { useFunnel } from './hooks'
+import { Parts } from './Parts'
+
+const Funnel = props => {
+    const {
+        data,
+
+        width,
+        height,
+        margin: partialMargin,
+
+        direction,
+        interpolation,
+        spacing,
+        shapeContinuity,
+        colors,
+        fillOpacity,
+        borderWidth,
+        borderColor,
+        borderOpacity,
+
+        enableBeforeSeparators,
+        beforeSeparatorsLength,
+        beforeSeparatorsOffset,
+        enableAfterSeparators,
+        afterSeparatorsLength,
+        afterSeparatorsOffset,
+
+        layers,
+
+        isInteractive,
+        onMouseEnter,
+        onMouseMove,
+        onMouseLeave,
+        onClick,
+        tooltip,
+    } = props
+
+    const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
+        width,
+        height,
+        partialMargin
+    )
+
+    const theme = useTheme()
+    const { animate } = useMotionConfig()
+
+    const {
+        areaGenerator,
+        borderGenerator,
+        parts,
+        beforeSeparators,
+        afterSeparators,
+    } = useFunnel({
+        data,
+        width: innerWidth,
+        height: innerHeight,
+        direction,
+        interpolation,
+        spacing,
+        shapeContinuity,
+        colors,
+        fillOpacity,
+        borderWidth,
+        borderColor,
+        borderOpacity,
+        beforeSeparatorsLength,
+        beforeSeparatorsOffset,
+        afterSeparatorsLength,
+        afterSeparatorsOffset,
+    })
+
+    const layerById = {
+        parts: (
+            <Parts
+                key="parts"
+                width={innerWidth}
+                parts={parts}
+                areaGenerator={areaGenerator}
+                borderGenerator={borderGenerator}
+            />
+        ),
+    }
+
+    return (
+        <SvgWrapper width={outerWidth} height={outerHeight} margin={margin} theme={theme}>
+            {layers.map((layer, i) => {
+                if (typeof layer === 'function') {
+                    return (
+                        <Fragment key={i}>
+                            {layer({
+                                ...props,
+                                innerWidth,
+                                innerHeight,
+                                outerWidth,
+                                outerHeight,
+                                parts,
+                            })}
+                        </Fragment>
+                    )
+                }
+
+                return layerById[layer]
+            })}
+            <g transform={`translate(${innerWidth / 2}, 0)`}>
+                {enableBeforeSeparators && beforeSeparators.map((separator, index) => {
+                    return (
+                        <line
+                            key={separator.partId}
+                            x1={separator.x0}
+                            x2={separator.x1}
+                            y1={separator.y}
+                            y2={separator.y}
+                            fill="none"
+                            {...theme.grid.line}
+                        />
+                    )
+                })}
+                {enableAfterSeparators && afterSeparators.map((separator, index) => {
+                    return (
+                        <line
+                            key={separator.partId}
+                            x1={separator.x0}
+                            x2={separator.x1}
+                            y1={separator.y}
+                            y2={separator.y}
+                            fill="none"
+                            {...theme.grid.line}
+                        />
+                    )
+                })}
+            </g>
+        </SvgWrapper>
+    )
+}
+
+Funnel.propTypes = FunnelPropTypes
+Funnel.defaultProps = FunnelDefaultProps
+
+export default withContainer(Funnel)

packages/funnel/src/Part.js

@@ -0,0 +1,35 @@
+/*
+ * 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 from 'react'
+
+export const Part = ({ part, areaGenerator, borderGenerator }) => {
+    return (
+        <g>
+            {part.borderWidth > 0 && (
+                <path
+                    d={borderGenerator(part.borderPoints)}
+                    stroke={part.borderColor}
+                    strokeWidth={part.borderWidth}
+                    strokeOpacity={part.borderOpacity}
+                    fill="none"
+                />
+            )}
+            <path
+                d={areaGenerator(part.areaPoints)}
+                fill={part.color}
+                fillOpacity={part.fillOpacity}
+            />
+            <g transform={`translate(${part.x}, ${part.y})`}>
+                <text textAnchor="middle">
+                    {part.data.value}
+                </text>
+            </g>
+        </g>
+    )
+}

packages/funnel/src/Parts.js

@@ -0,0 +1,27 @@
+/*
+ * 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 from 'react'
+import { Part } from './Part'
+
+export const Parts = ({ width, parts, areaGenerator, borderGenerator }) => {
+    return (
+        <g transform={`translate(${width / 2}, 0)`}>
+            {parts.map(part => {
+                return (
+                    <Part
+                        key={part.data.id}
+                        part={part}
+                        areaGenerator={areaGenerator}
+                        borderGenerator={borderGenerator}
+                    />
+                )
+            })}
+        </g>
+    )
+}