@antv/graphin-components
This is Graphin's library of pre-built React components for common analytical use cases. Graphin is a graph analysis solution based on G6 4.x.
Components list:
Component | Category | Description |
---|---|---|
ContextMenu | Interactive Component | Help users perform node or edge operations such as tagging or expansion |
Tooltip | Interactive Component | Help users quickly browse node or edge information |
MiniMap | Interactive Component | Help users to navigate around the canvas |
Toolbar | Interactive Component | Help users with canvas operations: zoom out, zoom in, full screen etc. |
RedoUndo | Interactive Component | Help users manage graph history |
FishEye | Interactive Component | Help users to enlarge cluttered graph details |
CreateEdge | Interactive Component | Help users draw connections between nodes |
Legend | Labeling Component | Displays categorical information about nodes and/or edges |
Hull | Labeling Component | Help users group similar nodes together |
Statistic | Labeling Component | Help users monitor canvas information |
SnapshotGallery | Analytical Component | Provide snapshot saving and replaying function as part of an image carousel |
LayoutSelector | Analytical Component | Help users switch layouts and configure layout options for optimal display |
Sheetbar | Analytical Component | Help users analyze and manage multiple canvases |
TableMode | Analytical Component | Help users view relational data as tables |
FindPathPanel | Algorithm Based Component | Help users calculate the shortest path and possible paths between two nodes |
MapMode | Advanced Analytical Component | Help users analyze geospatial relational data |
Timebar | Advanced Analytical Component | Help users analyze time series relational data |
Install
npm install @antv/graphin-components --save
UMD bundle is available in releases. Peer dependencies: react, react-dom, antd.
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import Graphin, { Utils } from '@antv/graphin';
import { Toolbar } from '@antv/graphin-components';
// Do not forget to import required CSS
const App = () => {
const data = Utils.mock(10).graphin();
return (
<div className="App">
<Graphin data={data}>
<Toolbar />
</Graphin>
</div>
);
};
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
Docs
Please refer to Graphin Docs - Components
APIs
Please refer to Graphin Components API Doc