diff --git a/packages/network/src/AnimatedLinks.js b/packages/network/src/AnimatedLinks.js
index 3bcb422052..2b09a20611 100644
--- a/packages/network/src/AnimatedLinks.js
+++ b/packages/network/src/AnimatedLinks.js
@@ -10,16 +10,17 @@ import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { TransitionMotion, spring } from 'react-motion'
import { useMotionConfig } from '@nivo/core'
+import Link from './Link'
const willEnter = ({ style, data }) => {
- const x0 = data.previousSource ? data.previousSource.x : style.x0.val
- const y0 = data.previousSource ? data.previousSource.y : style.y0.val
+ const sourceX = data.previousSource ? data.previousSource.x : style.sourceX.val
+ const sourceY = data.previousSource ? data.previousSource.y : style.sourceY.val
return {
- x0,
- y0,
- x1: x0,
- y1: y0,
+ sourceX,
+ sourceY,
+ targetX: sourceX,
+ targetY: sourceY,
}
}
@@ -33,10 +34,10 @@ const AnimatedLinks = ({ links, linkThickness, linkColor }) => {
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),
+ sourceX: spring(link.source.x, springConfig),
+ sourceY: spring(link.source.y, springConfig),
+ targetX: spring(link.target.x, springConfig),
+ targetY: spring(link.target.y, springConfig),
},
}))}
>
@@ -44,15 +45,15 @@ const AnimatedLinks = ({ links, linkThickness, linkColor }) => {
<>
{interpolatedStyles.map(({ key, style, data: link }) => {
return (
-
)
})}
diff --git a/packages/network/src/AnimatedNodes.js b/packages/network/src/AnimatedNodes.js
index f255070f57..540c3bd291 100644
--- a/packages/network/src/AnimatedNodes.js
+++ b/packages/network/src/AnimatedNodes.js
@@ -10,6 +10,7 @@ import React, { memo } from 'react'
import PropTypes from 'prop-types'
import { TransitionMotion, spring } from 'react-motion'
import { useMotionConfig } from '@nivo/core'
+import Node from './Node'
const willEnter = ({ style }) => ({
x: style.x.val,
@@ -47,20 +48,17 @@ const AnimatedNodes = ({ nodes, color, borderWidth, borderColor }) => {
<>
{interpolatedStyles.map(({ key, style, data: node }) => {
return (
-
-
-
+ node={node}
+ x={style.x}
+ y={style.y}
+ radius={Math.max(style.radius, 0)}
+ color={color(node)}
+ borderWidth={borderWidth}
+ borderColor={borderColor(node)}
+ scale={Math.max(style.scale, 0)}
+ />
)
})}
>
diff --git a/packages/network/src/Link.js b/packages/network/src/Link.js
new file mode 100644
index 0000000000..1f6d72b472
--- /dev/null
+++ b/packages/network/src/Link.js
@@ -0,0 +1,36 @@
+/*
+ * 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'
+
+const Link = ({ sourceX, sourceY, targetX, targetY, thickness, color }) => {
+ return (
+
+ )
+}
+
+Link.propTypes = {
+ link: PropTypes.object.isRequired,
+ sourceX: PropTypes.number.isRequired,
+ sourceY: PropTypes.number.isRequired,
+ targetX: PropTypes.number.isRequired,
+ targetY: PropTypes.number.isRequired,
+ thickness: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+}
+
+export default memo(Link)
diff --git a/packages/network/src/Network.js b/packages/network/src/Network.js
index 421389a83a..fcc23863a8 100644
--- a/packages/network/src/Network.js
+++ b/packages/network/src/Network.js
@@ -7,12 +7,14 @@
* file that was distributed with this source code.
*/
import React, { Fragment } from 'react'
-import { withContainer, useDimensions, SvgWrapper, useTheme } from '@nivo/core'
+import { withContainer, useDimensions, SvgWrapper, useTheme, useMotionConfig } from '@nivo/core'
import { useInheritedColor } from '@nivo/colors'
import { NetworkPropTypes, NetworkDefaultProps } from './props'
import { useNetwork, useNodeColor, useLinkThickness } from './hooks'
import AnimatedNodes from './AnimatedNodes'
+import StaticNodes from './StaticNodes'
import AnimatedLinks from './AnimatedLinks'
+import StaticLinks from './StaticLinks'
const Network = props => {
const {
@@ -45,6 +47,7 @@ const Network = props => {
partialMargin
)
+ const { animate } = useMotionConfig()
const theme = useTheme()
const getColor = useNodeColor(nodeColor)
const getBorderColor = useInheritedColor(nodeBorderColor, theme)
@@ -62,26 +65,21 @@ const Network = props => {
center: [innerWidth / 2, innerHeight / 2],
})
- const layerById = {}
-
- layerById.links = (
-
- )
-
- layerById.nodes = (
-
- )
+ const layerById = {
+ links: React.createElement(animate === true ? AnimatedLinks : StaticLinks, {
+ key: 'links',
+ links,
+ linkThickness: getLinkThickness,
+ linkColor: getLinkColor,
+ }),
+ nodes: React.createElement(animate === true ? AnimatedNodes : StaticNodes, {
+ key: 'nodes',
+ nodes,
+ color: getColor,
+ borderWidth: nodeBorderWidth,
+ borderColor: getBorderColor,
+ }),
+ }
return (
diff --git a/packages/network/src/Node.js b/packages/network/src/Node.js
new file mode 100644
index 0000000000..a31cc9bcfb
--- /dev/null
+++ b/packages/network/src/Node.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, { memo } from 'react'
+import PropTypes from 'prop-types'
+
+const Node = ({ x, y, radius, color, borderWidth, borderColor, scale = 1 }) => {
+ return (
+
+ )
+}
+
+Node.propTypes = {
+ node: PropTypes.object.isRequired,
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ radius: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+ borderWidth: PropTypes.number.isRequired,
+ borderColor: PropTypes.string.isRequired,
+ scale: PropTypes.number,
+}
+
+export default memo(Node)
diff --git a/packages/network/src/StaticLinks.js b/packages/network/src/StaticLinks.js
new file mode 100644
index 0000000000..03d105de8c
--- /dev/null
+++ b/packages/network/src/StaticLinks.js
@@ -0,0 +1,36 @@
+/*
+ * 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 Link from './Link'
+
+const StaticLinks = ({ links, linkThickness, linkColor }) => {
+ return links.map(link => {
+ return (
+
+ )
+ })
+}
+
+StaticLinks.propTypes = {
+ links: PropTypes.array.isRequired,
+ linkThickness: PropTypes.func.isRequired,
+ linkColor: PropTypes.func.isRequired,
+}
+
+export default memo(StaticLinks)
diff --git a/packages/network/src/StaticNodes.js b/packages/network/src/StaticNodes.js
index e69de29bb2..113a397b58 100644
--- a/packages/network/src/StaticNodes.js
+++ b/packages/network/src/StaticNodes.js
@@ -0,0 +1,37 @@
+/*
+ * 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 Node from './Node'
+
+const StaticNodes = ({ nodes, color, borderWidth, borderColor }) => {
+ return nodes.map(node => {
+ return (
+
+ )
+ })
+}
+
+StaticNodes.propTypes = {
+ nodes: PropTypes.array.isRequired,
+ color: PropTypes.func.isRequired,
+ borderWidth: PropTypes.number.isRequired,
+ borderColor: PropTypes.func.isRequired,
+}
+
+export default memo(StaticNodes)