Feature/npm dependencies

README.md

@@ -1,5 +1,46 @@
 # react-d3-graph
 Interactive and configurable graphs with react and d3 effortlessly
 
-## Tips
+## Compatibility
+- Node version >= 4.7.0
+- npm3
+
+## Notes
 - 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.
+- Default configuration:
+```javascript
+export default {
+    automaticRearrangeAfterDropNode: false, // Very expensive for dense graph
+    height: 450,
+    highlightBehavior: false,
+    highlightOpacity: 1, // For all elements: nodes, text and links
+    maxZoom: 8,
+    minZoom: 0.5,
+    staticGraph: false,
+    width: 800,
+    node: {
+        color: '#d3d3d3',
+        fontSize: 10, // in px
+        fontWeight: 'normal',
+        highlightColor: 'SAME',
+        highlightFontSize: 10,
+        highlightFontWeight: 'normal',
+        highlightStrokeColor: 'none',
+        highlightStrokeWidth: 1.5,
+        labelProperty: 'id',
+        mouseCursor: 'pointer',
+        opacity: 1,
+        renderLabel: true,
+        size: 200,
+        strokeColor: 'none',
+        strokeWidth: 1.5,
+        symbolType: 'circle'
+    },
+    link: {
+        color: '#d3d3d3',
+        highlightColor: '#d3d3d3',
+        opacity: 1,
+        strokeWidth: 1.5
+    }
+};
+```

package.json

@@ -1,43 +1,52 @@
 {
     "name": "react-d3-graph",
     "version": "0.0.0",
-    "description": "React component to build interactive and configurable graphs with d3 effortlessly\"",
-    "main": "index.js",
+    "description": "React component to build interactive and configurable graphs with d3 effortlessly",
     "author": "Daniel Caldas",
     "license": "MIT",
     "dependencies": {
-        "babel-core": "latest",
-        "babel-loader": "latest",
-        "babel-plugin-add-module-exports": "latest",
-        "babel-plugin-react-html-attrs": "latest",
-        "babel-plugin-transform-class-properties": "latest",
-        "babel-plugin-transform-decorators-legacy": "latest",
-        "babel-preset-es2015": "latest",
-        "babel-preset-react": "latest",
-        "babel-preset-stage-0": "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",
-        "react": "latest",
-        "react-dom": "latest",
-        "react-router-dom": "^4.0.0",
-        "react-spinkit": "^2.1.1",
-        "redux": "latest",
-        "redux-logger": "latest",
-        "redux-promise": "latest",
-        "redux-promise-middleware": "latest",
-        "redux-thunk": "latest",
-        "style-loader": "^0.14.1",
-        "webpack": "latest",
-        "webpack-dev-server": "latest"
+        "d3": "4.7.4",
+        "react": "15.4.2"
     },
-    "devDependencies": {},
+    "devDependencies": {
+        "babel-core": "6.24.0",
+        "babel-loader": "6.4.1",
+        "babel-plugin-add-module-exports": "0.2.1",
+        "babel-plugin-react-html-attrs": "2.0.0",
+        "babel-plugin-transform-class-properties": "6.22.0",
+        "babel-plugin-transform-decorators-legacy": "1.3.4",
+        "babel-preset-es2015": "6.16.0",
+        "babel-preset-react": "6.16.0",
+        "babel-preset-stage-0": "6.16.0",
+        "documentation": "4.0.0-beta.18",
+        "eslint-config-recommended": "1.5.0",
+        "eslint-plugin-promise": "3.5.0",
+        "eslint-plugin-standard": "2.1.1",
+        "eslint": "3.18.0",
+        "html-webpack-plugin": "2.28.0",
+        "react-dom": "15.4.2",
+        "react-router-dom": "4.0.0",
+        "webpack": "2.3.2",
+        "webpack-dev-server": "2.4.2"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/danielcaldas/react-d3-graph.git"
+    },
+    "keywords": [
+        "d3-visualization",
+        "d3js",
+        "graphs",
+        "javascript",
+        "networks",
+        "react",
+        "social-network-analysis",
+        "social-network-graph",
+        "visualization"
+    ],
     "scripts": {
-        "dev": "./node_modules/.bin/webpack-dev-server -d --content-base src --inline --hot --port 3002",
+        "dev": "node_modules/.bin/webpack-dev-server -d --content-base src --inline --hot --port 3002",
+        "dist": "webpack -p",
         "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/js/components/Graph/config.js

@@ -1,15 +1,15 @@
 export default {
-    automaticRearrangeAfterDropNode: false, // Very expensive for dense graphs, this will start a new force ...
+    automaticRearrangeAfterDropNode: false,
     height: 450,
     highlightBehavior: false,
-    highlightOpacity: 1, // For all elements: nodes, text and links
+    highlightOpacity: 1,
     maxZoom: 8,
     minZoom: 0.5,
     staticGraph: false,
     width: 800,
     node: {
         color: '#d3d3d3',
-        fontSize: 10, // in px
+        fontSize: 10,
         fontWeight: 'normal',
         highlightColor: 'SAME',
         highlightFontSize: 10,

src/js/components/Graph/index.js

@@ -9,7 +9,6 @@ import ERRORS from '../../err';
 import GraphHelper from './helper';
 import Utils from '../../utils';
 
-// @TODO: When node dragged out of bouds the graph gets repainted
 export default class Graph extends React.Component {
     constructor(props) {
         super(props);

webpack.config.js

@@ -1,4 +1,4 @@
-var debug = process.env.NODE_ENV !== 'production';
+var dev = process.env.NODE_ENV !== 'production';
 var webpack = require('webpack');
 var path = require('path');
 
@@ -7,7 +7,7 @@ var path = require('path');
 
 module.exports = {
     context: path.join(__dirname, 'src'),
-    devtool: debug ? 'source-map' : null,
+    devtool: dev ? 'source-map' : null,
     entry: './js/app.js',
     output: {
         path: __dirname + '/dist/',
@@ -26,7 +26,7 @@ module.exports = {
             }
         ]
     },
-    plugins: debug ? [] : [
+    plugins: dev ? [] : [
         new webpack.optimize.OccurrenceOrderPlugin(),
         new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
     ],