diff --git a/packages/network/src/NetworkLinks.tsx b/packages/network/src/NetworkLinks.tsx index 82457d54f0..b35941d140 100644 --- a/packages/network/src/NetworkLinks.tsx +++ b/packages/network/src/NetworkLinks.tsx @@ -8,32 +8,38 @@ interface NetworkLinksProps { linkComponent: NetworkLinkComponent } -const getEnterTransition = () => (link: ComputedLink) => ({ - x1: link.source.x, - y1: link.source.y, - x2: link.source.x, - y2: link.source.y, - color: link.color, - opacity: 0, -}) +const getEnterTransition = + () => + (link: ComputedLink) => ({ + x1: link.source.x, + y1: link.source.y, + x2: link.source.x, + y2: link.source.y, + color: link.color, + opacity: 0, + }) -const getRegularTransition = () => (link: ComputedLink) => ({ - x1: link.source.x, - y1: link.source.y, - x2: link.target.x, - y2: link.target.y, - color: link.color, - opacity: 1, -}) +const getRegularTransition = + () => + (link: ComputedLink) => ({ + x1: link.source.x, + y1: link.source.y, + x2: link.target.x, + y2: link.target.y, + color: link.color, + opacity: 1, + }) -const getExitTransition = () => (link: ComputedLink) => ({ - x1: link.source.x, - y1: link.source.y, - x2: link.source.x, - y2: link.source.y, - color: link.color, - opacity: 0, -}) +const getExitTransition = + () => + (link: ComputedLink) => ({ + x1: link.source.x, + y1: link.source.y, + x2: link.source.x, + y2: link.source.y, + color: link.color, + opacity: 0, + }) export const NetworkLinks = ({ links, diff --git a/packages/network/src/NetworkNodes.tsx b/packages/network/src/NetworkNodes.tsx index 55bbfb33b2..d6ebf39f95 100644 --- a/packages/network/src/NetworkNodes.tsx +++ b/packages/network/src/NetworkNodes.tsx @@ -17,35 +17,41 @@ interface NetworkNodesProps { onMouseLeave?: (node: NetworkComputedNode, event: MouseEvent) => void } -const getEnterTransition = () => (node: NetworkComputedNode) => ({ - x: node.x, - y: node.y, - radius: node.radius, - color: node.color, - borderWidth: node.borderWidth, - borderColor: node.borderColor, - scale: 0, -}) +const getEnterTransition = + () => + (node: NetworkComputedNode) => ({ + x: node.x, + y: node.y, + radius: node.radius, + color: node.color, + borderWidth: node.borderWidth, + borderColor: node.borderColor, + scale: 0, + }) -const getRegularTransition = () => (node: NetworkComputedNode) => ({ - x: node.x, - y: node.y, - radius: node.radius, - color: node.color, - borderWidth: node.borderWidth, - borderColor: node.borderColor, - scale: 1, -}) +const getRegularTransition = + () => + (node: NetworkComputedNode) => ({ + x: node.x, + y: node.y, + radius: node.radius, + color: node.color, + borderWidth: node.borderWidth, + borderColor: node.borderColor, + scale: 1, + }) -const getExitTransition = () => (node: NetworkComputedNode) => ({ - x: node.x, - y: node.y, - radius: node.radius, - color: node.color, - borderWidth: node.borderWidth, - borderColor: node.borderColor, - scale: 0, -}) +const getExitTransition = + () => + (node: NetworkComputedNode) => ({ + x: node.x, + y: node.y, + radius: node.radius, + color: node.color, + borderWidth: node.borderWidth, + borderColor: node.borderColor, + scale: 0, + }) export const NetworkNodes = ({ nodes, diff --git a/packages/network/src/hooks.ts b/packages/network/src/hooks.ts index e7dae0ba80..6a20b7114c 100644 --- a/packages/network/src/hooks.ts +++ b/packages/network/src/hooks.ts @@ -125,9 +125,9 @@ export const useNetwork = ({ simulation.tick(iterations) // d3 mutates data, hence the castings - setCurrentNodes((nodesCopy as unknown) as NetworkComputedNode[]) + setCurrentNodes(nodesCopy as unknown as NetworkComputedNode[]) setCurrentLinks( - ((linksCopy as unknown) as ComputedLink[]).map(link => { + (linksCopy as unknown as ComputedLink[]).map(link => { link.previousSource = currentNodes ? currentNodes.find(n => n.id === link.source.id) : undefined diff --git a/packages/network/tests/.eslintrc.yml b/packages/network/tests/.eslintrc.yml new file mode 100644 index 0000000000..4e0ff0d227 --- /dev/null +++ b/packages/network/tests/.eslintrc.yml @@ -0,0 +1,5 @@ +env: + jest: true + +rules: + react/prop-types: 0 \ No newline at end of file diff --git a/packages/network/tests/Network.test.tsx b/packages/network/tests/Network.test.tsx new file mode 100644 index 0000000000..e69de29bb2 diff --git a/website/src/data/components/network/props.ts b/website/src/data/components/network/props.ts index c3db709bf8..1beaafe2c2 100644 --- a/website/src/data/components/network/props.ts +++ b/website/src/data/components/network/props.ts @@ -1,6 +1,6 @@ import { commonDefaultProps } from '@nivo/network' -import { motionProperties, groupProperties, themeProperty } from '../../../lib/componentProperties' -import { chartDimensions, pixelRatio } from '../../../lib/chart-properties' +import { groupProperties, themeProperty, motionProperties } from '../../../lib/componentProperties' +import { chartDimensions, isInteractive } from '../../../lib/chart-properties' import { ChartProperty, Flavor } from '../../../types' const allFlavors: Flavor[] = ['svg', 'canvas'] @@ -31,7 +31,6 @@ const props: ChartProperty[] = [ `, }, ...chartDimensions(allFlavors), - pixelRatio(), { key: 'linkDistance', group: 'Simulation', @@ -74,13 +73,8 @@ const props: ChartProperty[] = [ type: 'number', required: false, help: 'Sets the minimum distance between nodes for the many-body force.', -<<<<<<< HEAD flavors: allFlavors, - defaultValue: NetworkDefaultProps.distanceMin, -======= - flavors: ['svg', 'canvas'], defaultValue: commonDefaultProps.distanceMin, ->>>>>>> feat(network): types are now valid }, { key: 'distanceMax', @@ -88,13 +82,8 @@ const props: ChartProperty[] = [ type: 'number', required: false, help: 'Sets the maximum disteance between nodes for the many-body force.', -<<<<<<< HEAD flavors: allFlavors, - defaultValue: NetworkDefaultProps.distanceMax, -======= - flavors: ['svg', 'canvas'], defaultValue: commonDefaultProps.distanceMax, ->>>>>>> feat(network): types are now valid }, { key: 'iterations', @@ -106,22 +95,15 @@ const props: ChartProperty[] = [ `, type: 'number', required: false, -<<<<<<< HEAD - defaultValue: NetworkDefaultProps.iterations, flavors: allFlavors, + defaultValue: commonDefaultProps.iterations, control: { type: 'range', -======= - defaultValue: commonDefaultProps.iterations, - flavors: ['svg', 'canvas'], - controlType: 'range', - controlOptions: { ->>>>>>> feat(network): types are now valid min: 60, max: 260, }, }, - themeProperty(['svg', 'canvas']), + themeProperty(allFlavors), { key: 'nodeComponent', group: 'Nodes', @@ -145,13 +127,8 @@ const props: ChartProperty[] = [ type: 'string | (node: InputNode) => string', required: false, help: `Control nodes' color.`, -<<<<<<< HEAD flavors: allFlavors, - defaultValue: NetworkDefaultProps.nodeColor, -======= - flavors: ['svg', 'canvas'], defaultValue: commonDefaultProps.nodeColor, ->>>>>>> feat(network): types are now valid }, { key: 'nodeBorderWidth', @@ -159,15 +136,9 @@ const props: ChartProperty[] = [ type: 'number | (node: NetworkComputedNode) => number', required: false, help: `Control nodes' border width.`, -<<<<<<< HEAD - defaultValue: NetworkDefaultProps.nodeBorderWidth, flavors: allFlavors, control: { type: 'lineWidth' }, -======= defaultValue: commonDefaultProps.nodeBorderWidth, - flavors: ['svg', 'canvas'], - controlType: 'lineWidth', ->>>>>>> feat(network): types are now valid }, { key: 'nodeBorderColor', @@ -175,15 +146,9 @@ const props: ChartProperty[] = [ type: 'InheritedColorConfig', required: false, help: `Control nodes' border color.`, -<<<<<<< HEAD - defaultValue: NetworkDefaultProps.nodeBorderColor, flavors: allFlavors, control: { type: 'inheritedColor' }, -======= defaultValue: commonDefaultProps.nodeBorderColor, - flavors: ['svg', 'canvas'], - controlType: 'inheritedColor', ->>>>>>> feat(network): types are now valid }, { key: 'linkComponent', @@ -209,15 +174,9 @@ const props: ChartProperty[] = [ type: 'number | (link: NetworkComputedLink) => number', required: false, help: `Control links' thickness.`, -<<<<<<< HEAD flavors: allFlavors, - defaultValue: NetworkDefaultProps.linkThickness, control: { type: 'lineWidth' }, -======= - flavors: ['svg', 'canvas'], defaultValue: commonDefaultProps.linkThickness, - controlType: 'lineWidth', ->>>>>>> feat(network): types are now valid }, { key: 'linkColor', @@ -225,30 +184,14 @@ const props: ChartProperty[] = [ type: 'InheritedColorConfig', required: false, help: `Control links' color.`, -<<<<<<< HEAD - defaultValue: NetworkDefaultProps.linkColor, flavors: allFlavors, control: { type: 'inheritedColor', -======= - defaultValue: commonDefaultProps.linkColor, - flavors: ['svg', 'canvas'], - controlType: 'inheritedColor', - controlOptions: { ->>>>>>> feat(network): types are now valid inheritableProperties: ['source.color', 'target.color'], }, + defaultValue: commonDefaultProps.linkColor, }, - { - key: 'isInteractive', - group: 'Interactivity', - type: 'boolean', - required: false, - help: 'Enable/disable interactivity.', - flavors: ['svg', 'canvas'], - defaultValue: commonDefaultProps.isInteractive, - controlType: 'switch', - }, + isInteractive({ flavors: allFlavors, defaultValue: commonDefaultProps.isInteractive }), { key: 'nodeTooltip', group: 'Interactivity', diff --git a/website/src/lib/chart-properties/accessibility.ts b/website/src/lib/chart-properties/accessibility.ts new file mode 100644 index 0000000000..e69de29bb2