diff --git a/.babelrc b/.babelrc
new file mode 100644
index 000000000..38733e673
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "presets": ["react", "es2015", "stage-0"]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
index 8c84c06be..9b5b367bf 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,25 +1,34 @@
module.exports = {
- "parser": "babel-eslint",
"extends": [
"eslint:recommended"
],
- "plugins": [
- "standard",
- "promise",
- "react"
- ],
+ "globals": {
+ "document": true,
+ "Reflect": true,
+ "window": true
+ },
+ "parser": "babel-eslint",
"parserOptions": {
+ "ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},
+ "plugins": [
+ "standard",
+ "promise",
+ "react"
+ ],
"rules": {
"react/jsx-uses-react": "error",
- "react/jsx-uses-vars": "error"
- },
- "globals": {
- "document": true,
- "Reflect": true,
- "window": true
+ "react/jsx-uses-vars": "error",
+ "camelcase": "error",
+ "keyword-spacing": "error",
+ "max-len": ["error", 120, 4, { "ignoreComments": true }],
+ "max-lines": ["error", {"max": 250, "skipComments": true}],
+ "newline-after-var": ["error", "always"],
+ "no-nested-ternary": "error",
+ "no-useless-constructor": "error",
+ "semi": "error"
}
};
diff --git a/.gitignore b/.gitignore
index 8e3d10168..4e1847959 100644
--- a/.gitignore
+++ b/.gitignore
@@ -67,5 +67,6 @@ typings/
dist/
DOCUMENTATION.md
docs
+coverage
sandbox/rd3g.sandbox.bundle.js
sandbox/rd3g.sandbox.bundle.js.map
diff --git a/README.md b/README.md
index d8bd53498..d8236a28e 100644
--- a/README.md
+++ b/README.md
@@ -46,8 +46,16 @@ export default {
```
## TODOs
-This are some ideas to further development:
-- Expose a graph property **background-color** that is applied to the svg graph container.
+This consists in a list of ideas for further development:
+- Expose a graph property **background-color** that is applied to the svg graph container;
+- Expose d3-force values as configurable such as **alphaTarget** simulation value;
+- Improve opacity/highlightBehavior strategy maybe use a global *background: rgba(...)* value and then set a higher
+value on selected nodes;
+- At the moment highlightBehavior is highlighting the mouse hovered node, its 1st degree connections and their 1st
+degree connections. Make **highlightBehaviorDegree** which consists in a *step value* on the depth that we wish to highlight.
+
+#### Sanbox/Playground
+- Improve page layout (optimize space).
## Contributions
Contributions are welcome fell free to submit new features or simply grab something from
diff --git a/package.json b/package.json
index aa67ab83f..c65a7a7dd 100644
--- a/package.json
+++ b/package.json
@@ -4,35 +4,53 @@
"description": "React component to build interactive and configurable graphs with d3 effortlessly",
"author": "Daniel Caldas",
"license": "MIT",
+ "scripts": {
+ "dev": "node_modules/.bin/webpack-dev-server -d --content-base sandbox --inline --hot --port 3002",
+ "dist": "node_modules/.bin/npm-run-all --parallel dist:*",
+ "dist:rd3g": "webpack --config webpack.config.dist.js -p --display-modules",
+ "dist:sandbox": "webpack --config webpack.config.js -p --display-modules",
+ "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": "jest --verbose --coverage",
+ "test:clean": "jest --no-cache --updateSnapshot --verbose --coverage",
+ "test:watch": "jest --verbose --watchAll"
+ },
"dependencies": {
"d3": "4.7.4",
- "react": "15.4.2"
+ "react": "^15.5.0"
},
"devDependencies": {
"babel-core": "6.24.0",
+ "babel-jest": "19.0.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-es2015": "6.24.1",
+ "babel-preset-react": "6.24.1",
"babel-preset-stage-0": "6.16.0",
- "css-loader": "^0.28.0",
+ "css-loader": "0.28.0",
"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",
+ "jest": "19.0.2",
"npm-run-all": "4.0.2",
- "react-dom": "15.4.2",
+ "react-addons-test-utils": "^15.5.0",
+ "react-dom": "^15.5.0",
"react-jsonschema-form": "0.46.0",
"react-router-dom": "4.0.0",
- "style-loader": "^0.16.1",
+ "react-test-renderer": "^15.5.0",
+ "style-loader": "0.16.1",
"webpack": "2.3.2",
"webpack-dev-server": "2.4.2"
},
+ "engines": {
+ "node": ">=6.9.5"
+ },
"repository": {
"type": "git",
"url": "git+https://github.com/danielcaldas/react-d3-graph.git"
@@ -47,14 +65,5 @@
"social-network-analysis",
"social-network-graph",
"visualization"
- ],
- "scripts": {
- "dev": "node_modules/.bin/webpack-dev-server -d --content-base sandbox --inline --hot --port 3002",
- "dist": "node_modules/.bin/npm-run-all --parallel dist:*",
- "dist:rd3g": "webpack --config webpack.config.dist.js -p --display-modules",
- "dist:sandbox": "webpack --config webpack.config.js -p --display-modules",
- "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"
- }
+ ]
}
diff --git a/sandbox/Sandbox.js b/sandbox/Sandbox.js
index 7c43ffb51..4de14af8b 100644
--- a/sandbox/Sandbox.js
+++ b/sandbox/Sandbox.js
@@ -93,6 +93,8 @@ export default class Sandbox extends React.Component {
}
resetGraphConfig = () => {
+ const generatedConfig = {};
+
const schemaProps = Utils.generateFormSchema(defaultConfig, '', {});
const schema = {
@@ -102,6 +104,7 @@ export default class Sandbox extends React.Component {
this.setState({
config: defaultConfig,
+ generatedConfig,
schema
});
}
@@ -109,7 +112,7 @@ export default class Sandbox extends React.Component {
render() {
const graphProps = {
id: 'graph',
- data: mock,
+ data: JSON.parse(JSON.stringify(mock)),
config: this.state.config,
onClickNode: this.onClickNode,
onClickLink: this.onClickLink,
@@ -130,7 +133,7 @@ export default class Sandbox extends React.Component {
-
Graph configurations
+
react-d3-graph configurations
+
+