feat(network): init network package

packages/line/src/LineCanvas.js

@@ -212,32 +212,31 @@ const LineCanvas = ({
                     })
                 })
             }
-        }),
-            [
-                canvasEl,
-                outerWidth,
-                outerHeight,
-                layers,
-                theme,
-                lineGenerator,
-                series,
-                xScale,
-                yScale,
-                enableGridX,
-                gridXValues,
-                enableGridY,
-                gridYValues,
-                axisTop,
-                axisRight,
-                axisBottom,
-                axisLeft,
-                legends,
-                points,
-                enablePoints,
-                pointSize,
-                currentPoint,
-            ]
-    })
+        })
+    }, [
+        canvasEl,
+        outerWidth,
+        outerHeight,
+        layers,
+        theme,
+        lineGenerator,
+        series,
+        xScale,
+        yScale,
+        enableGridX,
+        gridXValues,
+        enableGridY,
+        gridYValues,
+        axisTop,
+        axisRight,
+        axisBottom,
+        axisLeft,
+        legends,
+        points,
+        enablePoints,
+        pointSize,
+        currentPoint,
+    ])
 
     const getPointFromMouseEvent = useCallback(
         event => {

packages/line/src/index.js

@@ -11,3 +11,4 @@ export { default as ResponsiveLine } from './ResponsiveLine'
 export { default as LineCanvas } from './LineCanvas'
 export { default as ResponsiveLineCanvas } from './ResponsiveLineCanvas'
 export * from './props'
+export * from './hooks'

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

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

packages/network/package.json

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

@@ -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 React, { memo } from 'react'
+import PropTypes from 'prop-types'
+import { TransitionMotion, spring } from 'react-motion'
+import { useMotionConfig } from '@nivo/core'
+
+const willEnter = ({ style, data }) => {
+    const x0 = data.previousSource ? data.previousSource.x : style.x0.val
+    const y0 = data.previousSource ? data.previousSource.y : style.y0.val
+
+    return {
+        x0,
+        y0,
+        x1: x0,
+        y1: y0,
+    }
+}
+
+const AnimatedLinks = ({ links, linkThickness, linkColor }) => {
+    const { springConfig } = useMotionConfig()
+
+    return (
+        <TransitionMotion
+            willEnter={willEnter}
+            styles={links.map(link => ({
+                key: link.id,
+                data: link,
+                style: {
+                    x0: spring(link.source.x, springConfig),
+                    y0: spring(link.source.y, springConfig),
+                    x1: spring(link.target.x, springConfig),
+                    y1: spring(link.target.y, springConfig),
+                },
+            }))}
+        >
+            {interpolatedStyles => (
+                <>
+                    {interpolatedStyles.map(({ key, style, data: link }) => {
+                        return (
+                            <line
+                                key={key}
+                                stroke={linkColor(link)}
+                                strokeWidth={linkThickness(link)}
+                                strokeLinecap="round"
+                                x1={style.x0}
+                                y1={style.y0}
+                                x2={style.x1}
+                                y2={style.y1}
+                            />
+                        )
+                    })}
+                </>
+            )}
+        </TransitionMotion>
+    )
+}
+
+AnimatedLinks.propTypes = {
+    links: PropTypes.array.isRequired,
+    linkThickness: PropTypes.func.isRequired,
+    linkColor: PropTypes.func.isRequired,
+}
+
+export default memo(AnimatedLinks)

packages/network/src/AnimatedNodes.js

@@ -0,0 +1,79 @@
+/*
+ * 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 { TransitionMotion, spring } from 'react-motion'
+import { useMotionConfig } from '@nivo/core'
+
+const willEnter = ({ style }) => ({
+    x: style.x.val,
+    y: style.y.val,
+    radius: style.radius.val,
+    scale: 0,
+})
+
+const willLeave = springConfig => ({ style }) => ({
+    x: style.x,
+    y: style.y,
+    radius: style.radius,
+    scale: spring(0, springConfig),
+})
+
+const AnimatedNodes = ({ nodes, color, borderWidth, borderColor }) => {
+    const { springConfig } = useMotionConfig()
+
+    return (
+        <TransitionMotion
+            willEnter={willEnter}
+            willLeave={willLeave(springConfig)}
+            styles={nodes.map(node => ({
+                key: node.id,
+                data: node,
+                style: {
+                    x: spring(node.x, springConfig),
+                    y: spring(node.y, springConfig),
+                    radius: spring(node.radius, springConfig),
+                    scale: spring(1, springConfig),
+                },
+            }))}
+        >
+            {interpolatedStyles => (
+                <>
+                    {interpolatedStyles.map(({ key, style, data: node }) => {
+                        return (
+                            <g
+                                key={key}
+                                transform={`translate(${style.x},${style.y}) scale(${Math.max(
+                                    style.scale,
+                                    0
+                                )})`}
+                            >
+                                <circle
+                                    r={Math.max(style.radius, 0)}
+                                    fill={color(node)}
+                                    strokeWidth={borderWidth}
+                                    stroke={borderColor(node)}
+                                />
+                            </g>
+                        )
+                    })}
+                </>
+            )}
+        </TransitionMotion>
+    )
+}
+
+AnimatedNodes.propTypes = {
+    nodes: PropTypes.array.isRequired,
+    color: PropTypes.func.isRequired,
+    borderWidth: PropTypes.number.isRequired,
+    borderColor: PropTypes.func.isRequired,
+}
+
+export default memo(AnimatedNodes)