Merge branch 'release/v0.4.0'

Author: bkrem

.eslintrc.js

@@ -58,15 +58,7 @@ module.exports = {
     "no-console": 1,
     "no-param-reassign": "warn",
     "no-use-before-define": 0,
-    "no-underscore-dangle": [
-      "error",
-      {
-        "allow": [
-          "_children",
-          "_collapsed"
-        ]
-      }
-    ],
+    "no-underscore-dangle": "off",
     "no-unused-expressions": "warn",
     "prefer-template": 2,
     "class-methods-use-this": 0,
@@ -79,5 +71,6 @@ module.exports = {
     "react/jsx-no-target-blank": 0,
     "react/require-extension": 0,
     "react/self-closing-comp": 0,
+    "require-jsdoc": "warn"
   },
 };

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
 
 node_js:
+  - 8
   - 7
   - 6
   - 5
@@ -18,4 +19,4 @@ after_success: 'npm run coveralls'
 
 cache:
   directories:
-    - node_modules
+    - node_modules

README.md

@@ -5,21 +5,25 @@
 
 React D3 Tree is a [React](http://facebook.github.io/react/) component that lets you represent hierarchical data (e.g. ancestor trees, organisational structure, package dependencies) as an animated & interactive tree graph by leveraging [D3](https://d3js.org/)'s `tree` layout.
 
+
 ## Contents
 - [Demo](#demo)
 - [Installation](#installation)
 - [Minimal example](#minimal-example)
 - [Props](#props)
 
+
 ## Demo
 - Current release (stable): https://bkrem.github.io/react-d3-tree/ 
 
+
 ## Installation
 To install via NPM, run:
 ```bash
 npm i --save react-d3-tree
 ```
 
+
 ## Minimal example
 ```jsx
 import Tree from 'react-d3-tree';
@@ -65,6 +69,7 @@ class MyComponent extends Component {
 }
 ```
 
+
 ## Props
 | Property       | Type            | Options                 | Required? | Default                 | Description                                                                                                                                                                     |
 |----------------|-----------------|-------------------------|-----------|-------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -77,3 +82,46 @@ class MyComponent extends Component {
 | `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. |
+
+
+## External data sources
+Statically hosted JSON or CSV files can be used as data sources via the additional `treeUtil` module.
+
+### Example
+
+```jsx
+import { Tree, treeUtil } from 'react-d3-tree';
+
+const csvSource = 'https://raw.githubusercontent.com/bkrem/react-d3-tree/feature/add-csv-to-json-transform/examples/data/csv-example.csv';
+
+constructor() {
+  super();
+
+  this.state = {
+    data: undefined,
+  };
+  
+  componentWillMount() {
+    treeUtil.parseCSV(csvSource)
+    .then((data) => {
+      this.setState({ data })
+    })
+    .catch((err) => console.error(err));
+  }
+
+class MyComponent extends Component {
+  render() {
+    return (
+      {/* <Tree /> will fill width/height of its container; in this case `#treeWrapper` */}
+      <div id="treeWrapper" style={{width: '50em', height: '20em'}}> 
+      
+        <Tree data={this.state.data} />
+        
+      </div>
+    );
+  }
+}
+```
+
+For details regarding the `treeUtil` module, please check the module's [API docs](docs/util/util.md).  
+For examples of each data type that can be parsed with `treeUtil`, please check the [data source examples](docs/examples/data).

docs/components/Node.md

@@ -22,6 +22,11 @@ defaultValue: `{
 }`
 
 
+### `depthFactor`
+
+type: `number`
+
+
 ### `leafCircleStyle`
 
 type: `object`

docs/components/Tree.md

@@ -17,6 +17,12 @@ defaultValue: `true`
 type: `array`
 
 
+### `depthFactor`
+
+type: `number`
+defaultValue: `undefined`
+
+
 ### `initialDepth`
 
 type: `number`
@@ -35,8 +41,20 @@ type: `enum('diagonal'|'elbow')`
 defaultValue: `'diagonal'`
 
 
+### `scaleExtent`
+
+type: `shape[object Object]`
+defaultValue: `{ min: 0.1, max: 1 }`
+
+
 ### `translate`
 
 type: `shape[object Object]`
 defaultValue: `{ x: 0, y: 0 }`
 
+
+### `zoomable`
+
+type: `bool`
+defaultValue: `true`
+

docs/examples/data/csv-example.csv

@@ -0,0 +1,24 @@
+parent,child,CSV Attribute A,CSV Attribute B
+"CSVNode1","CSVNode2",22,someValue
+"CSVNode1","CSVNode3",23,someValue
+"CSVNode2","CSVNode4",1,someValue
+"CSVNode2","CSVNode5",2,someValue
+"CSVNode2","CSVNode6",3,someValue
+"CSVNode2","CSVNode7",4,someValue
+"CSVNode2","CSVNode8",5,someValue
+"CSVNode2","CSVNode9",6,someValue
+"CSVNode2","CSVNode10",7,someValue
+"CSVNode4","CSVNode11",8,someValue
+"CSVNode7","CSVNode12",9,someValue
+"CSVNode9","CSVNode13",10,someValue
+"CSVNode10","CSVNode14",11,someValue
+"CSVNode11","CSVNode15",12,someValue
+"CSVNode3","CSVNode16",13,someValue
+"CSVNode16","CSVNode17",14,someValue
+"CSVNode16","CSVNode18",15,someValue
+"CSVNode16","CSVNode19",16,someValue
+"CSVNode16","CSVNode20",17,someValue
+"CSVNode17","CSVNode21",18,someValue
+"CSVNode18","CSVNode22",19,someValue
+"CSVNode19","CSVNode23",20,someValue
+"CSVNode20","CSVNode24",21,someValue

docs/examples/data/flat-json-example.json

@@ -0,0 +1,116 @@
+[{
+  "parent": "CSVNode1",
+  "child": "CSVNode2",
+  "FlatJSON Attribute A": "22",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode1",
+  "child": "CSVNode3",
+  "FlatJSON Attribute A": "23",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode2",
+  "child": "CSVNode4",
+  "FlatJSON Attribute A": "1",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode2",
+  "child": "CSVNode5",
+  "FlatJSON Attribute A": "2",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode2",
+  "child": "CSVNode6",
+  "FlatJSON Attribute A": "3",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode2",
+  "child": "CSVNode7",
+  "FlatJSON Attribute A": "4",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode2",
+  "child": "CSVNode8",
+  "FlatJSON Attribute A": "5",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode2",
+  "child": "CSVNode9",
+  "FlatJSON Attribute A": "6",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode2",
+  "child": "CSVNode10",
+  "FlatJSON Attribute A": "7",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode4",
+  "child": "CSVNode11",
+  "FlatJSON Attribute A": "8",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode7",
+  "child": "CSVNode12",
+  "FlatJSON Attribute A": "9",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode9",
+  "child": "CSVNode13",
+  "FlatJSON Attribute A": "10",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode10",
+  "child": "CSVNode14",
+  "FlatJSON Attribute A": "11",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode11",
+  "child": "CSVNode15",
+  "FlatJSON Attribute A": "12",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode3",
+  "child": "CSVNode16",
+  "FlatJSON Attribute A": "13",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode16",
+  "child": "CSVNode17",
+  "FlatJSON Attribute A": "14",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode16",
+  "child": "CSVNode18",
+  "FlatJSON Attribute A": "15",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode16",
+  "child": "CSVNode19",
+  "FlatJSON Attribute A": "16",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode16",
+  "child": "CSVNode20",
+  "FlatJSON Attribute A": "17",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode17",
+  "child": "CSVNode21",
+  "FlatJSON Attribute A": "18",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode18",
+  "child": "CSVNode22",
+  "FlatJSON Attribute A": "19",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode19",
+  "child": "CSVNode23",
+  "FlatJSON Attribute A": "20",
+  "FlatJSON Attribute B": "someValue"
+}, {
+  "parent": "CSVNode20",
+  "child": "CSVNode24",
+  "FlatJSON Attribute A": "21",
+  "FlatJSON Attribute B": "someValue"
+}]