vis-react - npm Package Compare versions
Comparing version 0.4.3 to 0.4.4
| { | ||
| "_args": [ | ||
| [ | ||
| { | ||
| "raw": "vis-react@^0.4.3", | ||
| "scope": null, | ||
| "escapedName": "vis-react", | ||
| "name": "vis-react", | ||
| "rawSpec": "^0.4.3", | ||
| "spec": ">=0.4.3 <0.4.3", | ||
| "type": "range" | ||
| } | ||
| ] | ||
| ], | ||
| "_from": "vis-react@>=0.4.3 <0.4.3", | ||
| "_id": "vis-react@0.4.3", | ||
| "_inCache": true, | ||
| "_location": "/vis-react", | ||
| "_nodeVersion": "7.10.0", | ||
| "_npmOperationalInternal": { | ||
| "host": "s3://npm-registry-packages", | ||
| "tmp": "tmp/vis-react-0.4.3.tgz_1496238181363_0.8129479601047933" | ||
| }, | ||
| "_npmUser": { | ||
| "name": "anish", | ||
| "email": "anish.m.prasad@gmail.com" | ||
| }, | ||
| "_npmVersion": "4.2.0", | ||
| "_phantomChildren": {}, | ||
| "_requested": { | ||
| "raw": "vis-react@^0.4.3", | ||
| "scope": null, | ||
| "escapedName": "vis-react", | ||
| "name": "vis-react", | ||
| "rawSpec": "^0.4.3", | ||
| "spec": ">=0.4.3 <0.4.3", | ||
| "type": "range" | ||
| }, | ||
| "_requiredBy": [ | ||
| "#DEV:/" | ||
| ], | ||
| "_resolved": "https://registry.npmjs.org/vis-react/-/vis-react-0.4.3.tgz", | ||
| "_shasum": "5c9afbdf12242ab499d8bd2fbfeeb1433c441fae", | ||
| "_shrinkwrap": null, | ||
| "_spec": "vis-react@^0.4.3", | ||
| "author": { | ||
@@ -61,12 +17,7 @@ "name": "Anish M Prasad", | ||
| "devDependencies": { | ||
| "babel-cli": "^6.22.2", | ||
| "babel-preset-env": "^1.1.8", | ||
| "babel-preset-stage-3": "^6.22.0" | ||
| "babel-cli": "^6.26.0", | ||
| "babel-preset-env": "^1.7.0", | ||
| "babel-preset-stage-3": "^6.24.1" | ||
| }, | ||
| "directories": {}, | ||
| "dist": { | ||
| "shasum": "5c9afbdf12242ab499d8bd2fbfeeb1433c441fae", | ||
| "tarball": "https://registry.npmjs.org/vis-react/-/vis-react-0.4.3.tgz" | ||
| }, | ||
| "gitHead": "e037c5e7e6b3c84a55d1e13e7cd64e81ebf6e3b0", | ||
| "homepage": "https://github.com/anishmprasad/vis-react#readme", | ||
@@ -82,3 +33,3 @@ "keywords": [ | ||
| "license": "MIT", | ||
| "main": "lib/index.js", | ||
| "main": "index.js", | ||
| "maintainers": [ | ||
@@ -93,3 +44,3 @@ { | ||
| "peerDependencies": { | ||
| "react": "^16.0.0" | ||
| "react": "^16.8.6" | ||
| }, | ||
@@ -102,3 +53,3 @@ "readme": "ERROR: No README data found!", | ||
| "scripts": {}, | ||
| "version": "0.4.3" | ||
| "version": "0.4.4" | ||
| } |
121
README.md
@@ -11,8 +11,18 @@ # vis-react | ||
| This component takes three vis.js configuration objects as properties: | ||
| This component takes three vis.js configuration objects as properties: | ||
| - graph: contains two arrays { edges, nodes } | ||
| - options: normal vis.js options as described [here](http://visjs.org/docs/network/#options) | ||
| - events: an object that has [event name](http://visjs.org/docs/network/#Events) as keys and their callback as values | ||
| - graph: contains two arrays { edges, nodes } | ||
| - options: normal vis.js options as described [here](http://visjs.org/docs/network/#options) | ||
| - events: an object that has [event name](http://visjs.org/docs/network/#Events) as keys and their callback as values | ||
| ### Installation | ||
| ``` | ||
| // with npm | ||
| $ npm install netslider --save | ||
| // with yarn | ||
| $ yarn add netslider | ||
| ``` | ||
| ## Load | ||
@@ -23,13 +33,13 @@ | ||
| ```html | ||
| <!DOCTYPE HTML> | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> | ||
| <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" /> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| // ... load a visualization | ||
| </script> | ||
| </body> | ||
| <head> | ||
| <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script> | ||
| <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css" /> | ||
| </head> | ||
| <body> | ||
| <script type="text/javascript"> | ||
| // ... load a visualization | ||
| </script> | ||
| </body> | ||
| </html> | ||
@@ -46,33 +56,68 @@ ``` | ||
| var graph = { | ||
| nodes: [ | ||
| {id: 1, label: 'Node 1'}, | ||
| {id: 2, label: 'Node 2'}, | ||
| {id: 3, label: 'Node 3'}, | ||
| {id: 4, label: 'Node 4'}, | ||
| {id: 5, label: 'Node 5'} | ||
| ], | ||
| edges: [ | ||
| {from: 1, to: 2}, | ||
| {from: 1, to: 3}, | ||
| {from: 2, to: 4}, | ||
| {from: 2, to: 5} | ||
| ] | ||
| nodes: [ | ||
| { id: 1, label: 'Node 1' }, | ||
| { id: 2, label: 'Node 2' }, | ||
| { id: 3, label: 'Node 3' }, | ||
| { id: 4, label: 'Node 4' }, | ||
| { id: 5, label: 'Node 5' } | ||
| ], | ||
| edges: [{ from: 1, to: 2 }, { from: 1, to: 3 }, { from: 2, to: 4 }, { from: 2, to: 5 }] | ||
| }; | ||
| var options = { | ||
| layout: { | ||
| hierarchical: true | ||
| }, | ||
| edges: { | ||
| color: "#000000" | ||
| } | ||
| layout: { | ||
| hierarchical: true | ||
| }, | ||
| edges: { | ||
| color: '#000000' | ||
| } | ||
| }; | ||
| var events = { | ||
| select: function(event) { | ||
| var { nodes, edges } = event; | ||
| } | ||
| } | ||
| select: function(event) { | ||
| var { nodes, edges } = event; | ||
| } | ||
| }; | ||
| React.render(<Graph graph={graph} options={options} events={events} />, document.body); | ||
| React.render( | ||
| <Graph | ||
| graph={graph} | ||
| options={options} | ||
| events={events} | ||
| style={style} | ||
| getNetwork={this.getNetwork} | ||
| getEdges={this.getEdges} | ||
| getNodes={this.getNodes} | ||
| vis={vis => (this.vis = vis)} | ||
| />, | ||
| document.body | ||
| ); | ||
| ``` | ||
| Yes, it's really all you need to get started as you can see in this live and interactive demo: | ||
| [](https://codesandbox.io/s/3vvy7xqo9m) | ||
| ### Props | ||
| | Name | Type | Required | Description | | ||
| | ---------- | -------- | -------- | --------------------- | | ||
| | graph | `object` | `true` | nodes and edges | | ||
| | options | `object` | `true` | options | | ||
| | events | `object` | `true` | events callback | | ||
| | style | `object` | `false` | custom styles | | ||
| | getNetwork | `func` | `false` | returns network nodes | | ||
| | getNodes | `func` | `false` | returns all nodes | | ||
| | vis | `object` | `false` | returns vis instance | | ||
| <!-- ### Screenshot | ||
| ![Preview][screenshot] | ||
| [screenshot]: https://raw.githubusercontent.com/anishmprasad/netslider/master/screenshot/Screenshot.png 'Preview screenshot' --> | ||
| ### Demo | ||
| - [anish.m.prasad.com](https://anishmprasad.com/opensource/vis-react) | ||
| - [anishmprasad.github.io](https://anishmprasad.github.io/opensource/vis-react) | ||
| - [codesandbox.io](https://codesandbox.io/embed/3vvy7xqo9m) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by42.06%
21171
- Number of package files
- increased by25%
5
- Number of lines in readme file
- increased by59.21%
121
No dependency changes