feat(swarmplot): init @nivo/swarmplot package

packages/swarmplot/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/swarmplot/README.md

@@ -0,0 +1,15 @@
+# `@nivo/swarmplot`
+
+[![version](https://img.shields.io/npm/v/@nivo/swarmplot.svg?style=flat-square)](https://www.npmjs.com/package/@nivo/swarmplot)
+
+## SwarmPlot
+
+[documentation](http://nivo.rocks/swarmplot)
+
+![SwarmPlot](./doc/swarmplot.png)
+
+## SwarmPlotCanvas
+
+[documentation](http://nivo.rocks/swarmplot/canvas)
+
+![SwarmPlotCanvas](./doc/swarmplot-canvas.png)

packages/swarmplot/package.json

@@ -0,0 +1,46 @@
+{
+    "name": "@nivo/swarmplot",
+    "version": "0.55.0",
+    "license": "MIT",
+    "author": {
+        "name": "Raphaël Benitte",
+        "url": "https://github.com/plouc"
+    },
+    "keywords": [
+        "nivo",
+        "dataviz",
+        "react",
+        "d3",
+        "charts",
+        "force",
+        "swarmplot"
+    ],
+    "main": "./dist/nivo-swarmplot.cjs.js",
+    "module": "./dist/nivo-swarmplot.esm.js",
+    "files": [
+        "README.md",
+        "LICENSE.md",
+        "index.d.ts",
+        "dist/"
+    ],
+    "dependencies": {
+        "@nivo/axes": "0.55.0",
+        "@nivo/colors": "0.55.0",
+        "@nivo/core": "0.55.0",
+        "@nivo/legends": "0.55.0",
+        "@nivo/scales": "0.55.0",
+        "d3-force": "^2.0.1",
+        "d3-quadtree": "^1.0.6",
+        "d3-scale": "^3.0.0",
+        "lodash": "^4.17.11",
+        "react-motion": "^0.5.2",
+        "recompose": "^0.30.0"
+    },
+    "peerDependencies": {
+        "prop-types": ">= 15.5.10 < 16.0.0",
+        "react": ">= 16.8.4 < 17.0.0"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

packages/swarmplot/src/AnimatedSwarmPlotNodes.js

@@ -0,0 +1,76 @@
+/*
+ * 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 { TransitionMotion, spring } from 'react-motion'
+import { interpolateColor, getInterpolatedColor } from '@nivo/colors'
+
+const willEnter = ({ style, ...rest }) => ({
+    x: style.x.val,
+    y: style.y.val,
+    scale: 0,
+    colorR: style.colorR.val,
+    colorG: style.colorG.val,
+    colorB: style.colorB.val,
+})
+
+const willLeave = springConfig => ({ style }) => ({
+    x: style.x,
+    y: style.y,
+    scale: spring(0, springConfig),
+    colorR: style.colorR,
+    colorG: style.colorG,
+    colorB: style.colorB,
+})
+
+const AnimatedSwarmPlotNodes = memo(({ nodes, nodeSize, motionStiffness, motionDamping }) => {
+    const springConfig = {
+        stiffness: motionStiffness,
+        damping: motionDamping,
+    }
+
+    return (
+        <TransitionMotion
+            willEnter={willEnter}
+            willLeave={willLeave(springConfig)}
+            styles={nodes.map(node => ({
+                key: node.uid,
+                data: node,
+                style: {
+                    x: spring(node.x, springConfig),
+                    y: spring(node.y, springConfig),
+                    scale: spring(1, springConfig),
+                    ...interpolateColor(node.color, springConfig),
+                },
+            }))}
+        >
+            {interpolatedStyles => (
+                <g>
+                    {interpolatedStyles.map(({ key, style, data: node }) => {
+                        const color = getInterpolatedColor(style)
+
+                        return (
+                            <circle
+                                key={key}
+                                transform={`translate(${style.x}, ${style.y}) scale(${
+                                    style.scale
+                                })`}
+                                r={nodeSize / 2}
+                                fill={color}
+                            />
+                        )
+                    })}
+                </g>
+            )}
+        </TransitionMotion>
+    )
+})
+
+AnimatedSwarmPlotNodes.displayName = 'AnimatedSwarmPlotNodes'
+
+export default AnimatedSwarmPlotNodes

packages/swarmplot/src/ResponsiveSwarmPlot.js

@@ -0,0 +1,19 @@
+/*
+ * 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 { ResponsiveWrapper } from '@nivo/core'
+import SwarmPlot from './SwarmPlot'
+
+const ResponsiveSwarmPlot = props => (
+    <ResponsiveWrapper>
+        {({ width, height }) => <SwarmPlot width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
+)
+
+export default ResponsiveSwarmPlot

packages/swarmplot/src/ResponsiveSwarmPlotCanvas.js

@@ -0,0 +1,19 @@
+/*
+ * 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 { ResponsiveWrapper } from '@nivo/core'
+import SwarmPlotCanvas from './SwarmPlotCanvas'
+
+const ResponsiveSwarmPlotCanvas = props => (
+    <ResponsiveWrapper>
+        {({ width, height }) => <SwarmPlotCanvas width={width} height={height} {...props} />}
+    </ResponsiveWrapper>
+)
+
+export default ResponsiveSwarmPlotCanvas

packages/swarmplot/src/SwarmPlot.js

@@ -0,0 +1,112 @@
+/*
+ * 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 { TransitionMotion, spring } from 'react-motion'
+import { SvgWrapper, withContainer, useDimensions, useTheme, useTooltip, Grid } from '@nivo/core'
+import { interpolateColor, getInterpolatedColor } from '@nivo/colors'
+import { Axes } from '@nivo/axes'
+import { SwarmPlotPropTypes, SwarmPlotDefaultProps } from './props'
+import { useSwarmPlot } from './hooks'
+import AnimatedSwarmPlotNodes from './AnimatedSwarmPlotNodes'
+
+const SwarmPlot = memo(
+    ({
+        width,
+        height,
+        margin: partialMargin,
+        colors,
+        data,
+        layout,
+        forceStrength,
+        simulationIterations,
+        scale,
+        gap,
+        nodeSize,
+        nodePadding,
+        borderWidth,
+
+        enableGridX,
+        enableGridY,
+        axisTop,
+        axisRight,
+        axisBottom,
+        axisLeft,
+
+        animate,
+        motionStiffness,
+        motionDamping,
+    }) => {
+        const { margin, innerWidth, innerHeight, outerWidth, outerHeight } = useDimensions(
+            width,
+            height,
+            partialMargin
+        )
+        const theme = useTheme()
+        const [showTooltip, hideTooltip] = useTooltip()
+
+        const { nodes, xScale, yScale } = useSwarmPlot({
+            width: innerWidth,
+            height: innerHeight,
+            data,
+            layout,
+            scale,
+            gap,
+            nodeSize,
+            nodePadding,
+            colors,
+            forceStrength,
+            simulationIterations,
+        })
+
+        return (
+            <SvgWrapper width={outerWidth} height={outerHeight} margin={margin} theme={theme}>
+                <Grid
+                    theme={theme}
+                    width={innerWidth}
+                    height={innerHeight}
+                    xScale={xScale}
+                    yScale={yScale}
+                    animate={animate}
+                    motionStiffness={motionStiffness}
+                    motionDaming={motionDamping}
+                />
+                <Axes
+                    key="axes"
+                    xScale={xScale}
+                    yScale={yScale}
+                    width={innerWidth}
+                    height={innerHeight}
+                    theme={theme}
+                    top={axisTop}
+                    right={axisRight}
+                    bottom={axisBottom}
+                    left={axisLeft}
+                    animate={animate}
+                    motionStiffness={motionStiffness}
+                    motionDamping={motionDamping}
+                />
+                {animate && (
+                    <AnimatedSwarmPlotNodes
+                        nodes={nodes}
+                        nodeSize={nodeSize}
+                        borderWidth={borderWidth}
+                        motionStiffness={motionStiffness}
+                        motionDamping={motionDamping}
+                    />
+                )}
+            </SvgWrapper>
+        )
+    }
+)
+
+SwarmPlot.displayName = 'SwarmPlot'
+SwarmPlot.propTypes = SwarmPlotPropTypes
+SwarmPlot.defaultProps = SwarmPlotDefaultProps
+
+export default withContainer(SwarmPlot)

packages/swarmplot/src/SwarmPlotCanvas.js

@@ -0,0 +1 @@
+export default () => null

packages/swarmplot/src/SwarmPlotTooltip.js

@@ -0,0 +1,32 @@
+/*
+ * 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 PropTypes from 'prop-types'
+import { BasicTooltip } from '@nivo/core'
+
+const SwarmPlotTooltip = ({ node, format, tooltip, theme }) => (
+    <BasicTooltip
+        id={node.serieId}
+        value={node.value}
+        enableChip={true}
+        color={node.color}
+        theme={theme}
+        format={format}
+        renderContent={typeof tooltip === 'function' ? tooltip.bind(null, node) : null}
+    />
+)
+
+SwarmPlotTooltip.propTypes = {
+    node: PropTypes.shape({}).isRequired,
+    format: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    tooltip: PropTypes.func,
+    theme: PropTypes.object.isRequired,
+}
+
+export default SwarmPlotTooltip