From 62037664679e9cb3d661c4c5caa73a0c68a19f6e Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Wed, 11 Oct 2017 21:04:50 -0400 Subject: [PATCH 1/2] Add Pack, Partition, and Treemap hierarchical layouts. Swap data/root meanings and simplify child render function params. --- .../vx-hierarchy/src/hierarchies/Cluster.js | 15 ++--- packages/vx-hierarchy/src/hierarchies/Pack.js | 52 +++++++++++++++ .../vx-hierarchy/src/hierarchies/Partition.js | 52 +++++++++++++++ packages/vx-hierarchy/src/hierarchies/Tree.js | 14 ++-- .../vx-hierarchy/src/hierarchies/Treemap.js | 66 +++++++++++++++++++ 5 files changed, 183 insertions(+), 16 deletions(-) create mode 100644 packages/vx-hierarchy/src/hierarchies/Pack.js create mode 100644 packages/vx-hierarchy/src/hierarchies/Partition.js create mode 100644 packages/vx-hierarchy/src/hierarchies/Treemap.js diff --git a/packages/vx-hierarchy/src/hierarchies/Cluster.js b/packages/vx-hierarchy/src/hierarchies/Cluster.js index 3d4d123aa..d6323a572 100644 --- a/packages/vx-hierarchy/src/hierarchies/Cluster.js +++ b/packages/vx-hierarchy/src/hierarchies/Cluster.js @@ -7,7 +7,7 @@ import DefaultLink from '../HierarchyDefaultLink'; import DefaultNode from '../HierarchyDefaultNode'; Cluster.propTypes = { - root: PropTypes.object.isRequired, + data: PropTypes.object.isRequired, children: PropTypes.func, }; @@ -15,7 +15,7 @@ export default function Cluster({ top, left, className, - root, + data, size, nodeSize, separation, @@ -28,9 +28,8 @@ export default function Cluster({ if (size) cluster.size(size); if (nodeSize) cluster.nodeSize(nodeSize); if (separation) cluster.separation(separation); - const data = cluster(root); - const links = data.links(); - const descendants = root.descendants(); + + const root = cluster(data); if (!!children) { return ( @@ -39,7 +38,7 @@ export default function Cluster({ left={left} className={cx('vx-cluster', className)} > - {children({ data, links, root, descendants })} + {children({ root })} ); } @@ -51,7 +50,7 @@ export default function Cluster({ className={cx('vx-cluster', className)} > {linkComponent && - links.map((link, i) => { + root.links().map((link, i) => { return ( {React.createElement(linkComponent, { link })} @@ -59,7 +58,7 @@ export default function Cluster({ ); })} {nodeComponent && - descendants.map((node, i) => { + root.descendants().map((node, i) => { return ( {React.createElement(nodeComponent, { node })} diff --git a/packages/vx-hierarchy/src/hierarchies/Pack.js b/packages/vx-hierarchy/src/hierarchies/Pack.js new file mode 100644 index 000000000..3fa48b5c5 --- /dev/null +++ b/packages/vx-hierarchy/src/hierarchies/Pack.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import { Group } from '@vx/group'; +import { pack as d3pack } from 'd3-hierarchy'; +import DefaultNode from '../HierarchyDefaultNode'; + +Pack.propTypes = { + data: PropTypes.object.isRequired, + children: PropTypes.func +}; + +export default function Pack({ + top, + left, + className, + data, + radius, + size, + padding, + children, + nodeComponent = DefaultNode, + ...restProps +}) { + const pack = d3pack(); + if (size) pack.size(size); + if (radius) pack.radius(radius); + if (padding) pack.padding(padding); + + const root = pack(data); + + if (!!children) { + return ( + + {children({ root })} + + ); + } + + return ( + + {nodeComponent && + root.descendants().map((node, i) => { + return ( + + {React.createElement(nodeComponent, { node })} + + ); + })} + + ); +} diff --git a/packages/vx-hierarchy/src/hierarchies/Partition.js b/packages/vx-hierarchy/src/hierarchies/Partition.js new file mode 100644 index 000000000..2c1006d24 --- /dev/null +++ b/packages/vx-hierarchy/src/hierarchies/Partition.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import { Group } from '@vx/group'; +import { partition as d3partition } from 'd3-hierarchy'; +import DefaultNode from '../HierarchyDefaultNode'; + +Partition.propTypes = { + data: PropTypes.object.isRequired, + children: PropTypes.func +}; + +export default function Partition({ + top, + left, + className, + data, + size, + round, + padding, + children, + nodeComponent = DefaultNode, + ...restProps +}) { + const partition = d3partition(); + if (size) partition.size(size); + if (round) partition.round(round); + if (padding) partition.padding(padding); + + const root = partition(data); + + if (!!children) { + return ( + + {children({ root })} + + ); + } + + return ( + + {nodeComponent && + root.descendants().map((node, i) => { + return ( + + {React.createElement(nodeComponent, { node })} + + ); + })} + + ); +} diff --git a/packages/vx-hierarchy/src/hierarchies/Tree.js b/packages/vx-hierarchy/src/hierarchies/Tree.js index 361df9ccc..3fce22738 100644 --- a/packages/vx-hierarchy/src/hierarchies/Tree.js +++ b/packages/vx-hierarchy/src/hierarchies/Tree.js @@ -7,7 +7,7 @@ import DefaultLink from '../HierarchyDefaultLink'; import DefaultNode from '../HierarchyDefaultNode'; Tree.propTypes = { - root: PropTypes.object.isRequired, + data: PropTypes.object.isRequired, children: PropTypes.func, }; @@ -15,7 +15,7 @@ export default function Tree({ top, left, className, - root, + data, size, nodeSize, separation, @@ -29,9 +29,7 @@ export default function Tree({ if (nodeSize) tree.nodeSize(nodeSize); if (separation) tree.separation(separation); - const data = tree(root); - const links = data.links(); - const descendants = root.descendants(); + const root = tree(data); if (!!children) { return ( @@ -40,7 +38,7 @@ export default function Tree({ left={left} className={cx('vx-tree', className)} > - {children({ data, links, root, descendants })} + {children({ root })} ); } @@ -48,7 +46,7 @@ export default function Tree({ return ( {linkComponent && - links.map((link, i) => { + root.links().map((link, i) => { return ( {React.createElement(linkComponent, { link })} @@ -56,7 +54,7 @@ export default function Tree({ ); })} {nodeComponent && - descendants.map((node, i) => { + root.descendants().map((node, i) => { return ( {React.createElement(nodeComponent, { node })} diff --git a/packages/vx-hierarchy/src/hierarchies/Treemap.js b/packages/vx-hierarchy/src/hierarchies/Treemap.js new file mode 100644 index 000000000..4c6df003c --- /dev/null +++ b/packages/vx-hierarchy/src/hierarchies/Treemap.js @@ -0,0 +1,66 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import cx from 'classnames'; +import { Group } from '@vx/group'; +import { treemap as d3treemap } from 'd3-hierarchy'; +import DefaultNode from '../HierarchyDefaultNode'; + +Treemap.propTypes = { + root: PropTypes.object.isRequired, + children: PropTypes.func +}; + +export default function Treemap({ + top, + left, + className, + data, + tile, + size, + round, + padding, + paddingInner, + paddingOuter, + paddingTop, + paddingRight, + paddingBottom, + paddingLeft, + children, + nodeComponent = DefaultNode, + ...restProps +}) { + const treemap = d3treemap(); + if (tile) treemap.tile(tile); + if (size) treemap.size(size); + if (round) treemap.round(round); + if (padding) treemap.padding(padding); + if (paddingInner) treemap.paddingInner(paddingInner); + if (paddingOuter) treemap.paddingOuter(paddingOuter); + if (paddingTop) treemap.paddingTop(paddingTop); + if (paddingRight) treemap.paddingRight(paddingRight); + if (paddingBottom) treemap.paddingBottom(paddingBottom); + if (paddingLeft) treemap.paddingLeft(paddingLeft); + + const root = treemap(data); + + if (!!children) { + return ( + + {children({ root })} + + ); + } + + return ( + + {nodeComponent && + root.descendants().map((node, i) => { + return ( + + {React.createElement(nodeComponent, { node })} + + ); + })} + + ); +} From 636b64cfba775a88abc871a4f5357d6cb00b2725 Mon Sep 17 00:00:00 2001 From: Sean Lynch Date: Thu, 12 Oct 2017 13:23:20 -0400 Subject: [PATCH 2/2] Swap "data" and "root" back --- package.json | 24 ++++++++++++++----- .../vx-hierarchy/src/hierarchies/Cluster.js | 12 +++++----- packages/vx-hierarchy/src/hierarchies/Pack.js | 10 ++++---- .../vx-hierarchy/src/hierarchies/Partition.js | 10 ++++---- packages/vx-hierarchy/src/hierarchies/Tree.js | 12 +++++----- .../vx-hierarchy/src/hierarchies/Treemap.js | 8 +++---- 6 files changed, 44 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index 5e10e54a0..bdbc4ecfc 100644 --- a/package.json +++ b/package.json @@ -6,18 +6,30 @@ "scripts": { "test": "lerna exec npm install && jest", "docs": "node ./scripts/docs/index.js", - "prepare-release": - "git checkout master && git pull --rebase origin master && npm run docs && lerna updated", + "prepare-release": "git checkout master && git pull --rebase origin master && npm run docs && lerna updated", "release": "npm run prepare-release && lerna publish --exact" }, "jest": { - "projects": ["/packages/*"], + "projects": [ + "/packages/*" + ], "collectCoverage": true, "coverageDirectory": "/coverage", - "coveragePathIgnorePatterns": ["/node_modules/"], - "coverageReporters": ["text", "lcov"] + "coveragePathIgnorePatterns": [ + "/node_modules/" + ], + "coverageReporters": [ + "text", + "lcov" + ] }, - "keywords": ["react", "d3", "visualization", "vx", "charts"], + "keywords": [ + "react", + "d3", + "visualization", + "vx", + "charts" + ], "author": "@hshoff", "license": "MIT", "devDependencies": { diff --git a/packages/vx-hierarchy/src/hierarchies/Cluster.js b/packages/vx-hierarchy/src/hierarchies/Cluster.js index d6323a572..753049289 100644 --- a/packages/vx-hierarchy/src/hierarchies/Cluster.js +++ b/packages/vx-hierarchy/src/hierarchies/Cluster.js @@ -7,7 +7,7 @@ import DefaultLink from '../HierarchyDefaultLink'; import DefaultNode from '../HierarchyDefaultNode'; Cluster.propTypes = { - data: PropTypes.object.isRequired, + root: PropTypes.object.isRequired, children: PropTypes.func, }; @@ -15,7 +15,7 @@ export default function Cluster({ top, left, className, - data, + root, size, nodeSize, separation, @@ -29,7 +29,7 @@ export default function Cluster({ if (nodeSize) cluster.nodeSize(nodeSize); if (separation) cluster.separation(separation); - const root = cluster(data); + const data = cluster(root); if (!!children) { return ( @@ -38,7 +38,7 @@ export default function Cluster({ left={left} className={cx('vx-cluster', className)} > - {children({ root })} + {children({ data })} ); } @@ -50,7 +50,7 @@ export default function Cluster({ className={cx('vx-cluster', className)} > {linkComponent && - root.links().map((link, i) => { + data.links().map((link, i) => { return ( {React.createElement(linkComponent, { link })} @@ -58,7 +58,7 @@ export default function Cluster({ ); })} {nodeComponent && - root.descendants().map((node, i) => { + data.descendants().map((node, i) => { return ( {React.createElement(nodeComponent, { node })} diff --git a/packages/vx-hierarchy/src/hierarchies/Pack.js b/packages/vx-hierarchy/src/hierarchies/Pack.js index 3fa48b5c5..362017be2 100644 --- a/packages/vx-hierarchy/src/hierarchies/Pack.js +++ b/packages/vx-hierarchy/src/hierarchies/Pack.js @@ -6,7 +6,7 @@ import { pack as d3pack } from 'd3-hierarchy'; import DefaultNode from '../HierarchyDefaultNode'; Pack.propTypes = { - data: PropTypes.object.isRequired, + root: PropTypes.object.isRequired, children: PropTypes.func }; @@ -14,7 +14,7 @@ export default function Pack({ top, left, className, - data, + root, radius, size, padding, @@ -27,12 +27,12 @@ export default function Pack({ if (radius) pack.radius(radius); if (padding) pack.padding(padding); - const root = pack(data); + const data = pack(root); if (!!children) { return ( - {children({ root })} + {children({ data })} ); } @@ -40,7 +40,7 @@ export default function Pack({ return ( {nodeComponent && - root.descendants().map((node, i) => { + data.descendants().map((node, i) => { return ( {React.createElement(nodeComponent, { node })} diff --git a/packages/vx-hierarchy/src/hierarchies/Partition.js b/packages/vx-hierarchy/src/hierarchies/Partition.js index 2c1006d24..78d55f18b 100644 --- a/packages/vx-hierarchy/src/hierarchies/Partition.js +++ b/packages/vx-hierarchy/src/hierarchies/Partition.js @@ -6,7 +6,7 @@ import { partition as d3partition } from 'd3-hierarchy'; import DefaultNode from '../HierarchyDefaultNode'; Partition.propTypes = { - data: PropTypes.object.isRequired, + root: PropTypes.object.isRequired, children: PropTypes.func }; @@ -14,7 +14,7 @@ export default function Partition({ top, left, className, - data, + root, size, round, padding, @@ -27,12 +27,12 @@ export default function Partition({ if (round) partition.round(round); if (padding) partition.padding(padding); - const root = partition(data); + const data = partition(root); if (!!children) { return ( - {children({ root })} + {children({ data })} ); } @@ -40,7 +40,7 @@ export default function Partition({ return ( {nodeComponent && - root.descendants().map((node, i) => { + data.descendants().map((node, i) => { return ( {React.createElement(nodeComponent, { node })} diff --git a/packages/vx-hierarchy/src/hierarchies/Tree.js b/packages/vx-hierarchy/src/hierarchies/Tree.js index 3fce22738..a5b989bbc 100644 --- a/packages/vx-hierarchy/src/hierarchies/Tree.js +++ b/packages/vx-hierarchy/src/hierarchies/Tree.js @@ -7,7 +7,7 @@ import DefaultLink from '../HierarchyDefaultLink'; import DefaultNode from '../HierarchyDefaultNode'; Tree.propTypes = { - data: PropTypes.object.isRequired, + root: PropTypes.object.isRequired, children: PropTypes.func, }; @@ -15,7 +15,7 @@ export default function Tree({ top, left, className, - data, + root, size, nodeSize, separation, @@ -29,7 +29,7 @@ export default function Tree({ if (nodeSize) tree.nodeSize(nodeSize); if (separation) tree.separation(separation); - const root = tree(data); + const data = tree(root); if (!!children) { return ( @@ -38,7 +38,7 @@ export default function Tree({ left={left} className={cx('vx-tree', className)} > - {children({ root })} + {children({ data })} ); } @@ -46,7 +46,7 @@ export default function Tree({ return ( {linkComponent && - root.links().map((link, i) => { + data.links().map((link, i) => { return ( {React.createElement(linkComponent, { link })} @@ -54,7 +54,7 @@ export default function Tree({ ); })} {nodeComponent && - root.descendants().map((node, i) => { + data.descendants().map((node, i) => { return ( {React.createElement(nodeComponent, { node })} diff --git a/packages/vx-hierarchy/src/hierarchies/Treemap.js b/packages/vx-hierarchy/src/hierarchies/Treemap.js index 4c6df003c..0bfa463ab 100644 --- a/packages/vx-hierarchy/src/hierarchies/Treemap.js +++ b/packages/vx-hierarchy/src/hierarchies/Treemap.js @@ -14,7 +14,7 @@ export default function Treemap({ top, left, className, - data, + root, tile, size, round, @@ -41,12 +41,12 @@ export default function Treemap({ if (paddingBottom) treemap.paddingBottom(paddingBottom); if (paddingLeft) treemap.paddingLeft(paddingLeft); - const root = treemap(data); + const data = treemap(root); if (!!children) { return ( - {children({ root })} + {children({ data })} ); } @@ -54,7 +54,7 @@ export default function Treemap({ return ( {nodeComponent && - root.descendants().map((node, i) => { + data.descendants().map((node, i) => { return ( {React.createElement(nodeComponent, { node })}