Skip to content

Commit

Permalink
Chore/change indentation to tab with 2 spaces (#363)
Browse files Browse the repository at this point in the history
* Update all configs to tab with of 2 spaces

* Run prettier against the project

* Run prettier against test folder

* Fix small lint error

* Update README.md
  • Loading branch information
danielcaldas committed Aug 29, 2020
1 parent 173caf3 commit a71cb89
Show file tree
Hide file tree
Showing 56 changed files with 4,286 additions and 4,333 deletions.
10 changes: 3 additions & 7 deletions .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,12 @@ root = true
end_of_line = lf
insert_final_newline = true

[*.{js}]
[*.{js,jsx,json}]
charset = utf-8

[*.js]
[*.{js,jsx,json}]
indent_style = space
indent_size = 4
indent_size = 2

[Makefile]
indent_style = tab

[{package.json,package-lock.json}]
indent_style = space
indent_size = 4
112 changes: 56 additions & 56 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
module.exports = {
extends: ["eslint:recommended", "plugin:jest/recommended"],
globals: {
cy: true,
Cypress: true,
document: true,
module: true,
Promise: true,
Reflect: true,
window: true,
__dirname: true,
process: true,
extends: ["eslint:recommended", "plugin:jest/recommended"],
globals: {
cy: true,
Cypress: true,
document: true,
module: true,
Promise: true,
Reflect: true,
window: true,
__dirname: true,
process: true,
},
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
},
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
},
plugins: ["standard", "promise", "react", "jest", "cypress", "babel"],
env: {
browser: true,
},
rules: {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
camelcase: "error",
"keyword-spacing": "error",
"max-len": ["error", 120, 4, { ignoreComments: true }],
"max-lines": ["error", { max: 450, skipComments: true }],
"no-nested-ternary": "error",
"no-useless-constructor": "error",
semi: "error",
"require-jsdoc": "error",
"valid-jsdoc": [
"error",
{
prefer: {
arg: "param",
argument: "param",
class: "constructor",
return: "returns",
virtual: "abstract",
},
},
plugins: ["standard", "promise", "react", "jest", "cypress", "babel"],
env: {
browser: true,
},
rules: {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
camelcase: "error",
"keyword-spacing": "error",
"max-len": ["error", 120, 4, { ignoreComments: true }],
"max-lines": ["error", { max: 450, skipComments: true }],
"no-nested-ternary": "error",
"no-useless-constructor": "error",
semi: "error",
"require-jsdoc": "error",
"valid-jsdoc": [
"error",
{
prefer: {
arg: "param",
argument: "param",
class: "constructor",
return: "returns",
virtual: "abstract",
},
preferType: {
Boolean: "boolean",
Number: "number",
object: "Object",
String: "string",
Function: "Function",
},
requireReturn: true,
requireReturnType: true,
},
],
quotes: ["error", "double"],
"comma-dangle": ["error", "always-multiline"],
},
preferType: {
Boolean: "boolean",
Number: "number",
object: "Object",
String: "string",
Function: "Function",
},
requireReturn: true,
requireReturnType: true,
},
],
quotes: ["error", "double"],
"comma-dangle": ["error", "always-multiline"],
},
};
52 changes: 26 additions & 26 deletions .eslintrc.test.config.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
module.exports = {
extends: ["plugin:jest/recommended"],
globals: {
document: true,
Reflect: true,
window: true,
},
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
},
},
plugins: ["standard", "promise", "react", "jest"],
rules: {
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/valid-expect": "error",
"max-len": ["error", 180, 4, { ignoreComments: true }],
"max-lines": ["error", { max: 800, skipComments: true }],
quotes: ["error", "double"],
"comma-dangle": ["error", "always-multiline"],
},
env: {
"jest/globals": true,
extends: ["plugin:jest/recommended"],
globals: {
document: true,
Reflect: true,
window: true,
},
parser: "babel-eslint",
parserOptions: {
ecmaVersion: 6,
ecmaFeatures: {
jsx: true,
},
},
plugins: ["standard", "promise", "react", "jest"],
rules: {
"jest/no-disabled-tests": "warn",
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/valid-expect": "error",
"max-len": ["error", 180, 4, { ignoreComments: true }],
"max-lines": ["error", { max: 800, skipComments: true }],
quotes: ["error", "double"],
"comma-dangle": ["error", "always-multiline"],
},
env: {
"jest/globals": true,
},
};
8 changes: 4 additions & 4 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
module.exports = {
printWidth: 120,
singleQuote: false,
tabWidth: 4,
trailingComma: "es5",
printWidth: 120,
singleQuote: false,
tabWidth: 2,
trailingComma: "es5",
};
96 changes: 47 additions & 49 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
# react-d3-graph · [![Build Status](https://github.com/danielcaldas/react-d3-graph/workflows/react-d3-graph/badge.svg)](https://github.com/danielcaldas/react-d3-graph/workflows/react-d3-graph/badge.svg)

⚠️ __There has been some changes in the domain where I host the documentation and live examples, please use https://danielcaldas.github.io/react-d3-graph/docs instead of the old domain https://goodguydaniel.com/react-d3-graph. Sorry for any inconvenient__ ⚠️

[![npm version](https://img.shields.io/npm/v/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![npm](https://img.shields.io/npm/dw/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph)
[![npm](https://img.shields.io/npm/dt/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg?longCache=true&style=flat-square)](https://probot.github.io/) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

Expand Down Expand Up @@ -66,87 +64,87 @@ import { Graph } from "react-d3-graph";

// graph payload (with minimalist structure)
const data = {
nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
links: [
{ source: "Harry", target: "Sally" },
{ source: "Harry", target: "Alice" },
],
nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
links: [
{ source: "Harry", target: "Sally" },
{ source: "Harry", target: "Alice" },
],
};

// the graph configuration, you only need to pass down properties
// that you want to override, otherwise default ones will be used
const myConfig = {
nodeHighlightBehavior: true,
node: {
color: "lightgreen",
size: 120,
highlightStrokeColor: "blue",
},
link: {
highlightColor: "lightblue",
},
nodeHighlightBehavior: true,
node: {
color: "lightgreen",
size: 120,
highlightStrokeColor: "blue",
},
link: {
highlightColor: "lightblue",
},
};

// graph event callbacks
const onClickGraph = function() {
window.alert(`Clicked the graph background`);
window.alert(`Clicked the graph background`);
};

const onClickNode = function(nodeId) {
window.alert(`Clicked node ${nodeId}`);
window.alert(`Clicked node ${nodeId}`);
};

const onDoubleClickNode = function(nodeId) {
window.alert(`Double clicked node ${nodeId}`);
window.alert(`Double clicked node ${nodeId}`);
};

const onRightClickNode = function(event, nodeId) {
window.alert(`Right clicked node ${nodeId}`);
window.alert(`Right clicked node ${nodeId}`);
};

const onMouseOverNode = function(nodeId) {
window.alert(`Mouse over node ${nodeId}`);
window.alert(`Mouse over node ${nodeId}`);
};

const onMouseOutNode = function(nodeId) {
window.alert(`Mouse out node ${nodeId}`);
window.alert(`Mouse out node ${nodeId}`);
};

const onClickLink = function(source, target) {
window.alert(`Clicked link between ${source} and ${target}`);
window.alert(`Clicked link between ${source} and ${target}`);
};

const onRightClickLink = function(event, source, target) {
window.alert(`Right clicked link between ${source} and ${target}`);
window.alert(`Right clicked link between ${source} and ${target}`);
};

const onMouseOverLink = function(source, target) {
window.alert(`Mouse over in link between ${source} and ${target}`);
window.alert(`Mouse over in link between ${source} and ${target}`);
};

const onMouseOutLink = function(source, target) {
window.alert(`Mouse out link between ${source} and ${target}`);
window.alert(`Mouse out link between ${source} and ${target}`);
};

const onNodePositionChange = function(nodeId, x, y) {
window.alert(`Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y}`);
window.alert(`Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y}`);
};

<Graph
id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
data={data}
config={myConfig}
onClickNode={onClickNode}
onDoubleClickNode={onDoubleClickNode}
onRightClickNode={onRightClickNode}
onClickGraph={onClickGraph}
onClickLink={onClickLink}
onRightClickLink={onRightClickLink}
onMouseOverNode={onMouseOverNode}
onMouseOutNode={onMouseOutNode}
onMouseOverLink={onMouseOverLink}
onMouseOutLink={onMouseOutLink}
onNodePositionChange={onNodePositionChange}
id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
data={data}
config={myConfig}
onClickNode={onClickNode}
onDoubleClickNode={onDoubleClickNode}
onRightClickNode={onRightClickNode}
onClickGraph={onClickGraph}
onClickLink={onClickLink}
onRightClickLink={onRightClickLink}
onMouseOverNode={onMouseOverNode}
onMouseOutNode={onMouseOutNode}
onMouseOverLink={onMouseOverLink}
onMouseOutLink={onMouseOutLink}
onNodePositionChange={onNodePositionChange}
/>;
```

Expand All @@ -156,14 +154,14 @@ Contributions are welcome, feel free to submit new ideas/features, just open an

To run react-d3-graph in development mode you just need to run `npm run dev` and the interactive sandbox will reload with the changes to the library code, that way you can test your changes not only through unit test but also through a real life example. It's that simple. The development workflow usually should follow the steps:

- Create a branch prefixed with `fix/` for bug fixes, `feature/` for new features, `chore/` or `refactor/` for refactoring or tooling and CI/CD related tasks.
- Make sure you are up to date running `npm install`.
- Run `npm run dev`.
- Make you changes inside the folder `src` and the interactive sandbox consumes your changes in real time
with webpack-dev-server.
- You can run tests locally with `npm run test` (for unit tests) or `npm run functional:local` for e2e tests.
- After you're done, open the Pull Request and describe the changes you've made.
- Create a branch prefixed with `fix/` for bug fixes, `feature/` for new features, `chore/` or `refactor/` for refactoring or tooling and CI/CD related tasks.
- Make sure you are up to date running `npm install`.
- Run `npm run dev`.
- Make you changes inside the folder `src` and the interactive sandbox consumes your changes in real time
with webpack-dev-server.
- You can run tests locally with `npm run test` (for unit tests) or `npm run functional:local` for e2e tests.
- After you're done, open the Pull Request and describe the changes you've made.

## Alternatives (Not what you where looking for?)

Well if you scrolled this far maybe _react-d3-graph_ does not fulfill all your requirements 😭, but don't worry I got you covered! There are a lot of different and good alternatives out there, [here is a list with a few alternatives](http://anvaka.github.io/graph-drawing-libraries/#!/all#%2Fall). Btw, not in the previous list but also a valid alternative built by uber [uber/react-vis-force](https://github.com/uber/react-vis-force).
Well if you scrolled this far maybe _react-d3-graph_ does not fulfill all your requirements 😭, but don't worry I got you covered! There are a lot of different and good alternatives out there, [here is a list with a few alternatives](http://anvaka.github.io/graph-drawing-libraries/#!/all#%2Fall).
2 changes: 1 addition & 1 deletion cypress.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"video": false
"video": false
}
Loading

0 comments on commit a71cb89

Please sign in to comment.