Merge branch 'feature/5-add-fixed-depth' into develop

Author: bkrem

README.md

@@ -59,13 +59,14 @@ class MyComponent extends Component {
 ```
 
 ## Props
-| Property       | Type            | Options                 | Required? | Default                 | Description                                                                                                                                     |
-|----------------|-----------------|-------------------------|-----------|-------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
-| `data`         | `array`         |                         | required  | `undefined`             | Single-element array containing hierarchical object (see `myTreeData` above); contains (at least) `name` and `parent` keys.                     |
-| `orientation`  | `string` (enum) | `horizontal` `vertical` |           | `horizontal`            | `horizontal` - Tree expands left-to-right. `vertical` - Tree expands top-to-bottom                                                              |
-| `translate`    | `object`        |                         |           | `{x: 0, y: 0}`          | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner)          |
-| `pathFunc`     | `string` (enum) | `diagonal` `elbow`      |           | `diagonal`              | `diagonal` - Renders smooth, curved edges between parent-child nodes. `elbow` - Renders sharp edges at right angles between parent-child nodes  |
-| `collapsible`  | `bool`          |                         |           | `true`                  | Toggles ability to collapse/expand the tree's nodes by clicking them                                                                            |
-| `initialDepth` | `number`        | `0` or greater          |           | `undefined`             | Sets the maximum node depth to which the tree is expanded on its initial render; tree renders to full depth if prop is omitted.                 |
-| `zoomable`     | `bool`          |                         |           | `true`                  | Toggles ability to zoom in/out on the Tree by scaling the SVG element according to `props.scaleExtent`                                          |
-| `scaleExtent` | `object`         |                         |           | `{min: 0.1, max: 1}`    | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true                                                     |
+| Property       | Type            | Options                 | Required? | Default                 | Description                                                                                                                                                                     |
+|----------------|-----------------|-------------------------|-----------|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `data`         | `array`         |                         | required  | `undefined`             | Single-element array containing hierarchical object (see `myTreeData` above). <br /> Contains (at least) `name` and `parent` keys.                                              |
+| `orientation`  | `string` (enum) | `horizontal` `vertical` |           | `horizontal`            | `horizontal` - Tree expands left-to-right. <br /><br /> `vertical` - Tree expands top-to-bottom.                                                                                |
+| `translate`    | `object`        |                         |           | `{x: 0, y: 0}`          | Translates the graph along the x/y axis by the specified amount of pixels (avoids the graph being stuck in the top left canvas corner).                                         |
+| `pathFunc`     | `string` (enum) | `diagonal` `elbow`      |           | `diagonal`              | `diagonal` - Renders smooth, curved edges between parent-child nodes. <br /><br /> `elbow` - Renders sharp edges at right angles between parent-child nodes.                    |
+| `collapsible`  | `bool`          |                         |           | `true`                  | Toggles ability to collapse/expand the tree's nodes by clicking them.                                                                                                           |
+| `initialDepth` | `number`        | `0..n`                  |           | `undefined`             | Sets the maximum node depth to which the tree is expanded on its initial render. <br /> Tree renders to full depth if prop is omitted.                                          |
+| `zoomable`     | `bool`          |                         |           | `true`                  | Toggles ability to zoom in/out on the Tree by scaling the SVG element according to `props.scaleExtent`.                                                                         |
+| `scaleExtent`  | `object`        |                         |           | `{min: 0.1, max: 1}`    | Sets the minimum/maximum extent to which the tree can be scaled if `props.zoomable` is true.                                                                                    |
+| `depthFactor`  | `number`        | `-n..0..n`              |           | `undefined`             | Ensures the tree takes up a fixed amount of space (`node.y = node.depth * depthFactor`), regardless of tree depth. <br /> **TIP**: Negative values invert the tree's direction. |

package.json

@@ -8,10 +8,11 @@
     "build": "npm run clean && webpack --progress --colors --env build",
     "dev": "npm run clean && webpack --progress --colors --watch --env dev",
     "lint": "eslint .",
-    "test": "npm run lint && jest --coverage",
+    "test": "npm run lint && jest --coverage --verbose",
     "test:clean": "rimraf ./coverage",
     "test:watch": "jest --watchAll",
-    "coveralls": "cat ./coverage/lcov.info | coveralls"
+    "coveralls": "cat ./coverage/lcov.info | coveralls",
+    "show:cov": "open coverage/lcov-report/index.html"
   },
   "jest": {
     "collectCoverageFrom": [
@@ -63,6 +64,7 @@
     "react-addons-test-utils": "15.4.2",
     "react-dom": "15.4.2",
     "regenerator-runtime": "^0.10.5",
+    "rimraf": "^2.6.1",
     "style-loader": "^0.17.0",
     "webpack": "2.4.1",
     "yargs": "7.1.0"

src/Node/index.js

@@ -4,7 +4,13 @@ import uuid from 'uuid';
 import './style.css';
 
 function Node(props) {
-  const { nodeData, orientation } = props;
+  const { nodeData, orientation, depthFactor } = props;
+
+  // Normalise node position for fixed depth
+  if (depthFactor) {
+    nodeData.y = nodeData.depth * depthFactor;
+  }
+
   const transform = orientation === 'horizontal' ?
     `translate(${nodeData.y},${nodeData.x})` :
     `translate(${nodeData.x},${nodeData.y})`;
@@ -70,6 +76,7 @@ Node.propTypes = {
     'vertical',
   ]).isRequired,
   onClick: PropTypes.func,
+  depthFactor: PropTypes.number,
   primaryLabel: PropTypes.string,
   primaryLabelStyle: PropTypes.object,
   secondaryLabels: PropTypes.object,

src/Node/tests/index.test.js

@@ -7,11 +7,12 @@ describe('<Node />', () => {
   const nodeData = {
     id: 'abc123',
     name: 'mockNode',
+    depth: 3,
     x: 123,
     y: 321,
   };
 
-  it('should have the correct `id` attribute value', () => {
+  it('has the correct `id` attribute value', () => {
     const renderedComponent = shallow(
       <Node
         nodeData={nodeData}
@@ -22,7 +23,7 @@ describe('<Node />', () => {
     expect(renderedComponent.find('g').prop('id')).toBe(nodeData.id);
   });
 
-  it('should apply correct base className if `nodeData._children` is defined', () => {
+  it('applies correct base className if `nodeData._children` is defined', () => {
     const noChildrenComponent = shallow(
       <Node
         nodeData={nodeData}
@@ -40,7 +41,7 @@ describe('<Node />', () => {
     expect(withChildrenComponent.prop('className')).toBe('nodeBase');
   });
 
-  it('should apply correct <circle> style prop if `nodeData._children` is defined', () => {
+  it('applies correct <circle> style prop if `nodeData._children` is defined', () => {
     const leafCircleStyle = { fill: 'blue' };
     const circleStyle = { fill: 'green' };
     const noChildrenComponent = shallow(
@@ -64,7 +65,7 @@ describe('<Node />', () => {
     expect(withChildrenComponent.find('circle').prop('style')).toBe(circleStyle);
   });
 
-  it('should apply correct `transform` prop, depending on parent `orientation`', () => {
+  it('applies correct `transform` prop, depending on parent `orientation`', () => {
     const horizontalTransform = `translate(${nodeData.y},${nodeData.x})`;
     const verticalTransform = `translate(${nodeData.x},${nodeData.y})`;
     const horizontalComponent = shallow(
@@ -96,7 +97,7 @@ describe('<Node />', () => {
     expect(renderedComponent.prop('onClick')).toBeDefined();
   });
 
-  it('should handle click events and pass the nodeId to onClick handler', () => {
+  it('handles click events and pass the nodeId to onClick handler', () => {
     const onClickSpy = jest.fn();
     const renderedComponent = shallow(
       <Node
@@ -110,7 +111,7 @@ describe('<Node />', () => {
     expect(onClickSpy).toHaveBeenCalledWith(nodeData.id);
   });
 
-  it('should map each `props.secondaryLabels` to a <tspan> element', () => {
+  it('maps each `props.secondaryLabels` to a <tspan> element', () => {
     const fixture = { keyA: 'valA', keyB: 'valB' };
     const renderedComponent = shallow(
       <Node
@@ -130,4 +131,18 @@ describe('<Node />', () => {
       n.text() === `keyB: ${fixture.keyB}`).length
     ).toBe(1);
   });
+
+  it('mutates a node\'s `y` property according to `depthFactor`, when specified', () => {
+    const depthFactor = 100;
+    const expectedY = nodeData.depth * depthFactor;
+    const renderedComponent = shallow(
+      <Node
+        nodeData={nodeData}
+        orientation="vertical"
+        depthFactor={depthFactor}
+      />
+    );
+
+    expect(renderedComponent.prop('transform')).toBe(`translate(${nodeData.x},${expectedY})`);
+  });
 });

src/Tree/index.js

@@ -206,7 +206,7 @@ export default class Tree extends React.Component {
   }
 
   render() {
-    const { orientation, translate, pathFunc } = this.props;
+    const { orientation, translate, pathFunc, depthFactor } = this.props;
     const { nodes, links } = this.generateTree();
     return (
       <div className="treeContainer">
@@ -225,6 +225,7 @@ export default class Tree extends React.Component {
               <Node
                 key={nodeData.id}
                 orientation={orientation}
+                depthFactor={depthFactor}
                 textAnchor="start"
                 nodeData={nodeData}
                 primaryLabel={nodeData.name}
@@ -253,6 +254,7 @@ Tree.defaultProps = {
   orientation: 'horizontal',
   translate: { x: 0, y: 0 },
   pathFunc: 'diagonal',
+  depthFactor: undefined,
   collapsible: true,
   initialDepth: undefined,
   zoomable: true,
@@ -273,6 +275,7 @@ Tree.propTypes = {
     'diagonal',
     'elbow',
   ]),
+  depthFactor: PropTypes.number,
   collapsible: PropTypes.bool,
   initialDepth: PropTypes.number,
   zoomable: PropTypes.bool,