npmpackage.info

Gathering detailed insights and metrics for react-graph-vis

Other packages similar to react-graph-vis

react-vis-network-graph

3.0.1

A react component to render nice graphs using vis.js

react-vis-ts

0.0.3

A typescript and react wrapper for vis-network.

react-graph-vis-ts

1.0.9

A react component to render nice graphs using vis.js

d3-react-component

2.0.1

A class-based React Componenet for D3 visualizations

Gathering detailed insights and metrics for react-graph-vis

react-graph-vis

A react component to render nice graphs using vis.js

1.0.7

965

MIT

JavaScript

180.69 kB

3,331,979 3.2

Installations

npm install react-graph-vis

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.20.1

NPM Version

6.14.10 Score

81.8

Supply Chain

94.7

Quality

75.1

Maintenance

100

Vulnerability

97.9

License

Pull Requests

Open

16

Total

51

Closed

11

Merged

24

Issues

Open

44

Total

103

Closed

59

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View all 20 contributors

Languages

JavaScript

HTML

JavaScript (99.31%)

HTML (0.69%)

Developer

crubier

Download Statistics

Total Downloads

3,331,979

Last Day

1,853

Last Week

12,248

Last Month

74,935

Last Year

956,838

GitHub Statistics

965 Stars

115 Commits

173 Forks

18 Watching

14 Branches

20 Contributors

Bundle Size

654.93 kB

Minified

180.69 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.0.7

Package Id

react-graph-vis@1.0.7

Size

741.96 kB

NPM Version

6.14.10

Node Version

12.20.1

Publised On

15 Feb 2021

Total Downloads

Cumulative downloads

Total Downloads

3,331,979

Last day

-34.4%

1,853

Compared to previous day

Last week

-28.8%

12,248

Compared to previous week

Last month

-3.1%

74,935

Compared to previous month

Last year

52.6%

956,838

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

React graph vis

A React component to display beautiful network graphs using vis.js

Show, don't tell: Demo

Make sure to visit visjs.org for more info.

Rendered graphs are scrollable, zoomable, retina ready, dynamic, and switch layout on double click.

A graph rendered by vis js

Due to the imperative nature of vis.js, updating graph properties causes complete redraw of graph and completely porting it to React is a big project itself!

This component takes three vis.js configuration objects as properties:

graph: contains two arrays { edges, nodes }
options: normal vis.js options as described here
events: an object that has event name as keys and their callback as values

Usage

1import React from "react";
2import ReactDOM from "react-dom";
3import Graph from "react-graph-vis";
4
5import "./styles.css";
6// need to import the vis network css in order to show tooltip
7import "./network.css";
8
9function App() {
10  const graph = {
11    nodes: [
12      { id: 1, label: "Node 1", title: "node 1 tootip text" },
13      { id: 2, label: "Node 2", title: "node 2 tootip text" },
14      { id: 3, label: "Node 3", title: "node 3 tootip text" },
15      { id: 4, label: "Node 4", title: "node 4 tootip text" },
16      { id: 5, label: "Node 5", title: "node 5 tootip text" }
17    ],
18    edges: [
19      { from: 1, to: 2 },
20      { from: 1, to: 3 },
21      { from: 2, to: 4 },
22      { from: 2, to: 5 }
23    ]
24  };
25
26  const options = {
27    layout: {
28      hierarchical: true
29    },
30    edges: {
31      color: "#000000"
32    },
33    height: "500px"
34  };
35
36  const events = {
37    select: function(event) {
38      var { nodes, edges } = event;
39    }
40  };
41  return (
42    <Graph
43      graph={graph}
44      options={options}
45      events={events}
46      getNetwork={network => {
47        //  if you want access to vis.js network api you can set the state in a parent component using this property
48      }}
49    />
50  );
51}
52
53const rootElement = document.getElementById("root");
54ReactDOM.render(<App />, rootElement);
55

You can also check out the demo in the example folder.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

4

Security-Policy

Determines if the project has published a security policy.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

53 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Warn: Project is vulnerable to: GHSA-9vvw-cc9w-f27h
Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
Warn: Project is vulnerable to: GHSA-hr2v-3952-633q
Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
Warn: Project is vulnerable to: MAL-2023-462
Warn: Project is vulnerable to: GHSA-44pw-h2cw-w3vq
Warn: Project is vulnerable to: GHSA-jp4x-w63m-7wgm
Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
Warn: Project is vulnerable to: GHSA-w9mr-4mfr-499f
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-gqgv-6jq5-jjj9
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-xc7v-wxcw-j472
Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3

Score

3.2

/10

Last Scanned on 2024-12-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to react-graph-vis

Other packages similar to react-graph-vis

react-graph-vis

Installations

Developer Guide

No

CommonJS

12.20.1

6.14.10

Score

Pull Requests

16

51

11

24

Issues

44

103

59

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

Languages

Developer

Download Statistics

GitHub Statistics

Bundle Size

654.93 kB

180.69 kB

Maintainers

Package Meta Information

Total Downloads

3,331,979

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

React graph vis

Usage

10

10

10

4

3

3

0

0

0

0

0

0

0

3.2

/10