From 719862c7dbd676d2a3e4dd1647a1720e98fdbaf6 Mon Sep 17 00:00:00 2001 From: Fabien JUIF Date: Wed, 4 Mar 2020 11:25:10 +0100 Subject: [PATCH] :bookmark: v0.1.3 --- package.json | 2 +- pkg/README.md | 92 +++++++++++++++++++++++++++++++++++++++++++++++- pkg/package.json | 2 +- 3 files changed, 93 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index d190a42..657ab46 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-kgraph", - "version": "0.1.2", + "version": "0.1.3", "license": "MIT", "dependencies": { "webcola": "^3.4.0" diff --git a/pkg/README.md b/pkg/README.md index 5fd9ede..0b75176 100644 --- a/pkg/README.md +++ b/pkg/README.md @@ -4,4 +4,94 @@ ## Installation -`npm install --save react-kgraph` +`npm install --save react-kgraph d3@^5.15.0 d3-hierarchy@^1.1.9` + +## API + +There is only one component exported by this lib: `Graph` +This component takes this props: + +- `nodes` which is an array of nodes +- `links` which is an array of links +- `type` the type of graph to render (either **tree** or **graph**) +- `onNodeClick` the function to call when a node is clicked +- `onLinkClick` the function to call when a link is clicked + +### node + +A node as this fields + +| field | required | description | +| --------- | -------------------- | ------------------------------------------------------------------- | +| id | ✔ | the node id, it has to be uniq! | +| group | ✖ | the group, this is used for default colors only | +| label | ✖ | the label to print in the node | +| color | ✖ | color to set in the node background, overrides the default colors | +| children | ✖ (graph) / ✔ (tree) | only needed for tree layout, all children nodes | +| Component | ✖ | the custom React component to use to render this node in particular | +| ... | ✖ | all you other data | + +### link + +| field | required | description | +| --------- | -------- | ------------------------------------------------------------------- | +| source | ✔ | the index of the node that is the source of this link | +| target | ✔ | the index of the node that is the target of this link | +| label | ✖ | the label to print on the link | +| Component | ✖ | the custom React component to use to render this link in particular | + +## Simple example + +```tsx +import React from 'react' +import Graph from 'react-kgraph' + +const nodes = [ + { + id: 'jack', + label: 'Jack', + }, + { + id: 'john', + label: 'Jhon', + color: '#4f9ceb', + }, + { + id: 'meridith', + label: 'Meridith', + color: 'green', + }, +] + +const links = [ + { + source: 0, + target: 1, + label: '200€', + }, + { + source: 1, + target: 2, + label: '100€', + }, + { + source: 1, + target: 0, + label: '150€', + }, +] + +const Example = () => ( +
+
Money flow
+ +
+) + +export default Example +``` + +

+ + +

diff --git a/pkg/package.json b/pkg/package.json index f653b4c..59bcba6 100644 --- a/pkg/package.json +++ b/pkg/package.json @@ -1,6 +1,6 @@ { "name": "react-kgraph", - "version": "0.1.2", + "version": "0.1.3", "license": "MIT", "files": [ "dist-*/",