@antv/graphin-components
v2.4.1
Published
Components for graphin
Downloads
2,998
Maintainers
Keywords
Readme
@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