Feature/graph component decoupling (#2)

* Add eslint to project

* Start Node component

* Small folder structure refactor

* Rendering graph of Node components

* Add Link component

* Render nodes and links. Add helpers in Graph component

* Refactor Graph component. Move init props to constructor

* Add forceSimulation and apply tick via react forceUpdate

* Huge refactor in Node component. Passing props

* Small refactor in Link component

* Fix pause/play simulation behavior

* Move node and link build logic to graph helper file

* Add zoom to graph. Add drag and drop all network

* Removed unused react-redux dependency

* Clean the house 🛀

* Remove css-loader

* Small improvements

* Remove render first time logic

* Add node drag to Graph component

* Move coords to static object. Some comments in Graph component

* Drag & Drop sticky nodes behavior. Add button for reset nodes positions

* Improve setState method calls. Use pseudo private syntax for methods in Graph component

* Remove lodash dependency

* Remove unused configs from webpack.config

* Add node event handlers as callbacks

* Add callback for Link click

* Remove style file in Node

* Remove style from Link component

* Add arrange graph after node drag property to graph configs

* Add node helper. Add node configurable symbol type

* Pass on some more node properties

* Fix callbacks reference now in props in Node component

* Expose Link component style properties

* Add fallback cases for x and y props in nodes

* Graph properties config refactor

* Merging configurations properly

* Remove unused property. Remove lodash dependency

* Add property conditionally render node label

* Add configurable staticGraph property to disable graph forces and drag interactions

* Remove unused property pause from Graph component

* Remove path props from Node render method. Move hardcoded class names to const file

* Add documentation.js. Add npm task to generate docs

* Standardize imports order in js files

* Transform Link and Node component into really dumb components

* Add configurable highlight and opacity behavior to graph

* Remove labelDx property. Add labelDx to Node constants file

* Normalize config file to the default graph configuration

* Add link highlight property. Add new demo config example

* Delete unused coords. Delete buildCoords unused function

* Pass callbacks onto Demo component. Remove forceUpdate calls

* Move buttons for Demo component. Small fix in Node component class name

* Implement pause, play and reset nodes positions in Demo component

* Fix lint task. Fix lint errors

* Small refactor on Graph constructor. Move code to GraphHelper

* Unified ids. The id is always converted to string type for sake of consistency

* Fix drag. Support many graph instances. Id for graph. Add error logging

* Add Demo mock file miserables

Author: danielcaldas

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+    "parser": "babel-eslint",
+    "extends": [
+        "eslint:recommended"
+    ],
+    "plugins": [
+        "standard",
+        "promise",
+        "react"
+    ],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "rules": {
+        "react/jsx-uses-react": "error",
+        "react/jsx-uses-vars": "error"
+    },
+    "globals": {
+        "document": true,
+        "Reflect": true,
+        "window": true
+    }
+};

.gitignore

@@ -67,5 +67,7 @@ dist/
 # End of https://www.gitignore.io/api/node
 
 
-src/mock.js
-src/mock.xl.js
+src/mock/mock.js
+src/mock/mock.xl.js
+DOCUMENTATION.md
+docs

README.md

@@ -1,2 +1,5 @@
 # react-d3-graph
 Interactive and configurable graphs with react and d3 effortlessly
+
+## Tips
+- Obtain a cool node when set the fill property as white a other color for the border. It will seem like the node is more like a ring.

package.json

@@ -15,13 +15,15 @@
         "babel-preset-es2015": "latest",
         "babel-preset-react": "latest",
         "babel-preset-stage-0": "latest",
-        "css-loader": "latest",
         "d3": "^4.7.4",
+        "documentation": "^4.0.0-beta.18",
+        "eslint": "^3.18.0",
+        "eslint-config-recommended": "^1.5.0",
+        "eslint-plugin-promise": "^3.5.0",
+        "eslint-plugin-standard": "^2.1.1",
         "html-webpack-plugin": "^2.28.0",
-        "lodash": "latest",
         "react": "latest",
         "react-dom": "latest",
-        "react-redux": "latest",
         "react-router-dom": "^4.0.0",
         "react-spinkit": "^2.1.1",
         "redux": "latest",
@@ -36,6 +38,8 @@
     "devDependencies": {},
     "scripts": {
         "dev": "./node_modules/.bin/webpack-dev-server -d --content-base src --inline --hot --port 3002",
+        "docs": "node_modules/documentation/bin/documentation.js build src/**/*.js -f html -o docs && node_modules/documentation/bin/documentation.js build src/**/*.js -f md > DOCUMENTATION.md",
+        "lint": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js\"",
         "test": "echo \"Error: no test specified\" && exit 1"
     }
 }

src/index.html

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <title>react-d3-graph</title>
-  </head>
+</head>
 
-  <body>
+<body>
     <div id="app"></div>
     <script src="rd3g.bundle.js"></script>
-  </body>
+</body>
 </html>

src/js/app.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {
+  BrowserRouter as Router,
+  Route
+} from 'react-router-dom';
+
+import Demo from './components/Demo';
+
+const app = document.getElementById('app');
+
+ReactDOM.render(
+    <Router>
+        <div>
+            <Route path='/' component={Demo}/>
+        </div>
+     </Router>
+    , app);

src/js/client.js

@@ -0,0 +1,77 @@
+import React from 'react';
+
+import graphMock from '../../mock/miserables';
+
+import Graph from './Graph/';
+
+export default class Layout extends React.Component {
+
+    onClickNode = (id) => window.alert(`clicked node ${id}`);
+
+    onClickLink = (source, target) => window.alert(`clicked link between ${source} and ${target}`);
+
+    onMouseOverNode = () => {
+        // Do something with the node identifier ...
+    }
+
+    onMouseOutNode = () => {
+        // Do something with the node identifier ...
+    }
+
+    pauseGraphSimulation = () => this.refs.graph.pauseSimulation();
+
+    restartGraphSimulation = () => this.refs.graph.restartSimulation();
+
+    resetNodesPositions = () => this.refs.graph.resetNodesPositions();
+
+    render() {
+        const width = window.innerWidth - 50;
+        const graphProps = {
+            id: 'graph',
+            data: graphMock.graph || graphMock,
+            config: {
+                width,
+                height: 600,
+                highlightOpacity: 0.12,
+                highlightBehavior: true,
+                node: {
+                    color: '#4286f4',
+                    highlightFontSize: 14,
+                    highlightFontWeight: 'bold',
+                    highlightStrokeColor: '#8f41f4',
+                    highlightStrokeWidth: 2,
+                    labelProperty: 'uid',
+                    size: 100,
+                    strokeColor: 'white'
+                },
+                link: {
+                    highlightColor: '#8f41f4',
+                    strokeWidth: 1
+                }
+            },
+            onClickNode: this.onClickNode,
+            onClickLink: this.onClickLink,
+            onMouseOverNode: this.onMouseOverNode,
+            onMouseOutNode: this.onMouseOutNode
+        };
+
+        const graphWrapperStyle = {
+            border: '1px solid black',
+            marginTop: '25px',
+            width
+        };
+
+        return (
+            <div>
+                <h1>react-d3-graph</h1>
+                <h2>Work in progress <span>🔨👷</span></h2>
+                <button onClick={this.restartGraphSimulation}>▶️</button>
+                <button onClick={this.pauseGraphSimulation}>⏸</button>
+                <button onClick={this.resetNodesPositions}>Unstick nodes</button>
+                <div style={graphWrapperStyle}>
+                    <Graph ref='graph' {...graphProps}/>
+                </div>
+            </div>
+        );
+    }
+}