-
Notifications
You must be signed in to change notification settings - Fork 233
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
baa31f2
commit 7d53d10
Showing
26 changed files
with
2,921 additions
and
945 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} | ||
} |
Oops, something went wrong.