Merge branch 'release/v1.2.0'

Author: bkrem

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,3 @@
+- [ ] Implementation
+- [ ] Unit test
+- [ ] Docs

README.md

@@ -11,6 +11,7 @@ React D3 Tree is a [React](http://facebook.github.io/react/) component that lets
 - [Installation](#installation)
 - [Usage](#usage)
 - [Props](#props)
+- [Styling](#styling)
 - [External data sources](#external-data-sources)
 
 
@@ -87,6 +88,39 @@ class MyComponent extends React.Component {
 | `zoomable`            | `bool`          |                         |           | `true`                  | Toggles ability to zoom in/out on the Tree by scaling it 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.                                                                                    |
 | `transitionDuration`  | `number`        | `0..n`                  |           | `500`                   | Sets the animation duration (in ms) of each expansion/collapse of a tree node. <br /><br /> Set this to `0` to deactivate animations completely.                                |
+| `styles`              | `object`        | see [Styling](#styling) |           | `Node`/`Link` CSS files | Overrides and/or enhances the tree's default styling.                                                                                                                           |
+
+
+## Styling
+The tree's `styles` prop may be used to override any of the tree's default styling.
+The following object shape is expected by `styles`:
+```js
+{
+  links: <svgStyleObject>,
+  nodes: {
+    node: {
+      circle: <svgStyleObject>,
+      name: <svgStyleObject>,
+      attributes: <svgStyleObject>,
+    },
+    leafNode: {
+      circle: <svgStyleObject>,
+      name: <svgStyleObject>,
+      attributes: <svgStyleObject>,
+    },
+  },
+}
+```
+where `<svgStyleObject>` is any object containing CSS-like properties that are compatible with an `<svg>` element's `style` attribute, for example:
+```js
+{
+  stroke: 'blue',
+  strokeWidth: 3,
+}
+```
+
+For more information on the SVG `style` attribute, [check this out](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/style).
+
 
 ## External data sources
 Statically hosted JSON or CSV files can be used as data sources via the additional `treeUtil` module.

lib/react-d3-tree.min.js

@@ -1,6 +1,6 @@
 {
   "name": "react-d3-tree",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "React component to create interactive D3 tree hierarchies",
   "main": "lib/react-d3-tree.min.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "coverageThreshold": {
       "global": {
         "statements": 90,
-        "branches": 83,
+        "branches": 82,
         "functions": 90,
         "lines": 90
       }
@@ -42,6 +42,8 @@
   "dependencies": {
     "clone": "^2.1.1",
     "d3": "3.5.17",
+    "deep-equal": "^1.0.1",
+    "prop-types": "^15.5.10",
     "react-transition-group": "^1.1.3",
     "uuid": "^3.0.1"
   },
@@ -67,9 +69,9 @@
     "jest": "^19.0.2",
     "jsdoc-to-markdown": "^3.0.0",
     "postcss-loader": "^1.3.3",
-    "react": "15.4.2",
-    "react-addons-test-utils": "15.4.2",
-    "react-dom": "15.4.2",
+    "react": "^15.6.0",
+    "react-dom": "^15.6.0",
+    "react-test-renderer": "^15.5.4",
     "regenerator-runtime": "^0.10.5",
     "rimraf": "^2.6.1",
     "style-loader": "^0.17.0",

package-lock.json

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { svg, select } from 'd3';
 
 import './style.css';
@@ -53,10 +54,11 @@ export default class Link extends React.PureComponent {
   }
 
   render() {
+    const { styles } = this.props;
     return (
       <path
         ref={(l) => { this.link = l; }}
-        style={this.state.initialStyle}
+        style={{ ...this.state.initialStyle, ...styles }}
         className="linkBase"
         d={this.drawPath()}
       />
@@ -75,4 +77,5 @@ Link.propTypes = {
     'elbow',
   ]).isRequired,
   transitionDuration: PropTypes.number.isRequired,
+  styles: PropTypes.object.isRequired,
 };

package.json

@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme';
 
 import Link from '../index';
 
+// TODO Find a way to meaningfully test `componentWillLeave`
 describe('<Link />', () => {
   const linkData = {
     source: {
@@ -20,6 +21,7 @@ describe('<Link />', () => {
     pathFunc: 'diagonal',
     orientation: 'horizontal',
     transitionDuration: 500,
+    styles: {},
   };
 
 
@@ -40,6 +42,20 @@ describe('<Link />', () => {
   });
 
 
+  it('applies `props.styles` when defined', () => {
+    const initialStyle = { opacity: 0 }; // state.initialStyle
+    const fixture = { ...initialStyle, stroke: '#777', strokeWidth: 2 };
+    const renderedComponent = shallow(
+      <Link
+        {...mockProps}
+        styles={fixture}
+      />
+    );
+
+    expect(renderedComponent.prop('style')).toEqual(fixture);
+  });
+
+
   it('calls the appropriate path func based on `props.pathFunc`', () => {
     const diagonalComponent = shallow(
       <Link {...mockProps} />
@@ -74,6 +90,4 @@ describe('<Link />', () => {
 
     expect(renderedComponent.instance().applyOpacity).toHaveBeenCalledWith(fixture);
   });
-
-  // TODO Find a way to meaningfully test `componentWillLeave`
 });

src/Link/index.js

@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import uuid from 'uuid';
 import { select } from 'd3';
 
@@ -65,8 +66,8 @@ export default class Node extends React.Component {
   }
 
   render() {
-    const { nodeData } = this.props;
-
+    const { nodeData, styles } = this.props;
+    const nodeStyle = nodeData._children ? { ...styles.node } : { ...styles.leafNode };
     return (
       <g
         id={nodeData.id}
@@ -77,54 +78,47 @@ export default class Node extends React.Component {
         onClick={this.handleClick}
       >
         <text
-          className="primaryLabelBase"
+          className="nodeNameBase"
           textAnchor={this.props.textAnchor}
-          style={this.props.primaryLabelStyle}
+          style={nodeStyle.name}
           x="10"
           y="-10"
           dy=".35em"
         >
-          {this.props.primaryLabel}
+          {this.props.name}
         </text>
 
         <circle
           r={this.props.circleRadius}
-          style={nodeData._children ? this.props.circleStyle : this.props.leafCircleStyle}
+          style={nodeStyle.circle}
         />
 
         <text
-          className="secondaryLabelsBase"
+          className="nodeAttributesBase"
           y="0"
           textAnchor={this.props.textAnchor}
-          style={this.props.secondaryLabelsStyle}
+          style={nodeStyle.attributes}
         >
-          {this.props.secondaryLabels && Object.keys(this.props.secondaryLabels).map((labelKey) =>
-            <tspan x="10" dy="1.2em" key={uuid.v4()}>
-              {labelKey}: {this.props.secondaryLabels[labelKey]}
-            </tspan>
-          )}
+          {
+            this.props.attributes &&
+            Object.keys(this.props.attributes).map((labelKey) =>
+              <tspan x="10" dy="1.2em" key={uuid.v4()}>
+                {labelKey}: {this.props.attributes[labelKey]}
+              </tspan>
+            )
+          }
         </text>
       </g>
     );
   }
 }
 
 Node.defaultProps = {
-  depthFactor: undefined,
   circleRadius: 10,
-  circleStyle: {
-    stroke: '#000',
-    strokeWidth: 2,
-    fill: 'grey',
-  },
-  leafCircleStyle: {
-    stroke: '#000',
-    strokeWidth: 2,
-    fill: 'transparent',
-  },
+  textAnchor: 'start',
+  attributes: undefined,
 };
 
-/* eslint-disable */
 Node.propTypes = {
   nodeData: PropTypes.object.isRequired,
   orientation: PropTypes.oneOf([
@@ -133,14 +127,9 @@ Node.propTypes = {
   ]).isRequired,
   transitionDuration: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
-  depthFactor: PropTypes.number,
-  primaryLabel: PropTypes.string,
-  primaryLabelStyle: PropTypes.object,
-  secondaryLabels: PropTypes.object,
-  secondaryLabelsStyle: PropTypes.object,
+  name: PropTypes.string.isRequired,
+  attributes: PropTypes.object,
   textAnchor: PropTypes.string,
   circleRadius: PropTypes.number,
-  circleStyle: PropTypes.object,
-  leafCircleStyle: PropTypes.object,
+  styles: PropTypes.object.isRequired,
 };
-/* eslint-enable */

src/Link/tests/index.test.js

@@ -1,16 +1,24 @@
 .nodeBase {
   cursor: pointer;
+  fill: #777;
+  stroke: #000;
+  stroke-width: 2;
 }
 
 .leafNodeBase {
   cursor: pointer;
+  fill: transparent;
+  stroke: #000;
+  stroke-width: 2;
 }
 
-.primaryLabelBase {
-  fill: #000;
+.nodeNameBase {
+  stroke: #000;
+  stroke-width: 1;
 }
 
-.secondaryLabelsBase {
-  fill: #777;
+.nodeAttributesBase {
+  stroke: #777;
+  stroke-width: 1;
   font-size: smaller;
-}
+}