Skip to content

Commit

Permalink
feat(site):update english docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@pomelo-nwu
pomelo-nwu committed Nov 18, 2019
1 parent b1545ed commit a1f0c39
Show file tree
Hide file tree
Showing 21 changed files with 468 additions and 77 deletions.
88 changes: 88 additions & 0 deletions packages/graphin-site/docs/api/components.en.md
View file
@@ -0,0 +1,88 @@
---
title: Analysis component
order: 5
---

## \<Toolbar />

Props：

|   Property | Type | Required | Description |
| ------------- | ---------------------------------------------------------- | -------- | --------------------------------------------------------- |
| bindType | 'node' \| 'edge' \| 'canvas' | no | type of the monitor target and the default value is node |
| graph | Graph | no | G6 Instance |
| options | [MenuItemType](#menuitemtype)[] | no | configuration of menu |
| render | (props: [RenderProps](#renderprops)) => React.ReactElement | no | rendering function of custom menu |
| onContextmenu | (e: G6Event, graph: Graph) => boolean; | no | The hook function of the right-click menu. Return false if you want to prevent appearing of the menu |

注意：options 和 render 必须提供一个。

### RenderProps

Argument of render function which extends Props of Toolbar:

|   Property | Type | Required | Description |
| ------- | ------------ | -------- | -------------------- |
| onClose | ( ) => void; | no | Called when closing menu |

### MenuItemType

configuration of MenuItem

|   Property | Type | Required | Description |
| ------------- | ----------------------------------------------------------- | -------- | ------------------- |
| key | string | **yes** | key of React component |
| visible | boolean | no | Whether the item is visible or not |
| iconType | string | no | antd icon Type |
| title | string | no | text of item |
| width | number | no | width of item |
| height | number | no | height of item |
| onClick | (props: [ContainerProps](#containerprops)) => void; | no | Called when clicking item |
| useCustomIcon | boolean | no | Whether to use custom icon |
| render | (props: [ContainerProps](#containerprops)) => ReactElement; | no | custom rendering function |

### ContainerProps

arguments of Clicking and rendering MenuItem

|   Property | Type | Required | Description |
| ------- | -------------------------------- | -------- | -------------------- |
| graph | Graph | no | G6 instance |
| menu | [MenuItemType](#menuitemtype)[ ] | no | configuration of menu |
| onClose | ( ) => void; | no | Called when closing menu |

## \<ContextMenu /> component

Props：

|   Property | Type | Required | Description |
| --------- | ---------------------------------------------------------------- | -------- | ---------------------------------------------------- |
| graphDOM | HTMLElement | **yes** | Mounted DOM of G6 which will be injected to children of Graphin automatically |
| graph | Graph | no | G6 instance |
| apis | [Apis](/zh/docs/api/graphin/#apis) | no | Graphin API |
| className | string | no | className |
| graphVars | { width?: number; height: number; } | no | graph infomation of G6 |
| direction | horizontal \| vertical | no | Direction of Toolbar |
| render | (props: [RenderProps](#renderprops)) => [MenuItem](#menuitem)[ ] | no | custom rendering function of menu |

### MenuItem

|   Property | Type | Required | Description |
| ------------- | ---------------------- | -------- | ------------------------ |
| id | string | **yes** | Unique identifier |
| name | string | **yes** | display text of menu |
| icon | string | **yes** | icon Type（antd） of menu |
| action | horizontal \| vertical | **yes** | Called when clicking items |
| disabled | boolean | no | Whether disabled select |
| style | CSSProperties | no | custom style |
| renderTooltip | () => ReactElement; | no | custom rendering function of tooltip |

### RenderProps

|   Property | Type | Required | Description |
| ---------- | ----------------------------------- | -------- | -------------------- |
| toolbarCfg | [MenuItem](#menuitem)[] | **yes** | Default configuration of toolbar |
| graph | Graph | no | G6 instance |
| apis | [Apis](/zh/docs/api/graphin/#apis) | no | Graphin API | |
| graphVars | { width?: number; height: number; } | no | Graph infomation of G6 |
| direction | horizontal \| vertical | no | Direction of Toolbar |
50 changes: 50 additions & 0 deletions packages/graphin-site/docs/api/extend.en.md
View file
@@ -0,0 +1,50 @@
---
title: Extend
order: 3
---

The property `extend` of component `<Graphin/>` is used to extend layout, NodeShape and Marker of Graphin.

|   Property | Type | Required | Description |
| --------- | -------------------------------------------------------------- | -------- | ---------- |
| layout | (graphin: [Graphin](), prevProps: [GraphinProps](/zh/docs/api/graphin#props)) => [ExendLayout](#extendlayout)[ ] | no | custom Layout |
| nodeShape | (node: [Node](/zh/docs/api/graphin#node)) => [ExtendNodeShape](#extendnodeshape)[ ] | no | custom Node |
| marker | ( ) => [ExtendMarker](#extendmarker)[ ] | no | custom Icon |


### ExendLayout

Configuration of custom layout

|   Property | Type | Required | Description |
| -------- | --------------------- | -------- | ------------- |
| name | string | **yes** | name of the layout |
| desc | string | **yes** | name of the layout |
| icon | string | **yes** | antd icon type |
| layout | (data: [Data](/zh/docs/api/graphin#data), options: [LayoutOption]()) => { data: [Data](/zh/docs/api/graphin#data); forceSimulation?: [ForceSimulation]();} | **yes** | a function for calculating the layout which accept nodes as arguments and return nodes with location |

### ExendNodeShape

Configuration of custom node

|   Property | Type | Required | Description |
| -------- | --------------------- | -------- | ------------- |
| shape | string | **yes** | name of custom NodeShape |
| shapeComponents | [ShapeComponent](#shapecomponent)[ ] | **yes** | 构成 Shape 的组件数组 |

#### ShapeComponent

|   Property | Type | Required | Description |
| -------- | --------------------- | -------- | ------------- |
| shape | string | **yes** | name of built-in nodeShape in G6 |
| attrs | [Attrs](https://www.yuque.com/antv/g6/ffzwfp) | **yes** | Property of shape |


### ExendMarker

Configuration of custom marker

|   Property | Type | Required | Description |
| -------- | --------------------- | -------- | ------------- |
| name | string | **yes** | icon type |
| path | string | **yes** | svg path |
119 changes: 119 additions & 0 deletions packages/graphin-site/docs/api/graphin.en.md
View file
@@ -0,0 +1,119 @@
---
title: Graphin
order: 1
---

This is the API documentation for the `<Graphin/>` component.

## Props

|   Property | Type | Required | Description |
| -------- | --------------------- | -------- | ------------- |
| data | [Data](#data) | **yes** | node and edge data of graph |
| layout | [Layout](#layout) | no | configuration of layout |
| options | [Options](#option) | no | configuration of G6 |
| ref | [Ref](#ref) | no | Ref of Graphin |
| extend | [Extend](#extend) | no | Extended Configuration |
| register | [Register](#register) | no | customize NodeShape, EdgeShape and behavior using the G6 API |

## Data

Node and edge data of graph

|   Property | Type | Required | Description |
| ------ | ---------------------- | -------- | ---------- |
| nodes | [Node[]](#node) | yes | collection of nodes |
| edges | [Edge[]](#edge) | yes | collection of edges |

### Node

Node

|   Property | Type | Required | Description |
| -------------- | ------------------------------------- | -------- | ------------------------------------------------- |
| id | string | **yes** | unique id |
| data | [NodeData](#nodedata) | **yes** | source data |
| shape | string | no | type of the node (NodeShape), the default value is `CircleNode`. |
| style | [NodeDefaultStyle](#nodedefaultstyle) | no | style information corresponding to NodeShape |
| x | number | no | the x coordinate of the node |
| y | number | no | the y coordinate of the node |
| layout | NodeLayoutType | no | layout |
| `[key:string]` | any | no | custom property |
| |

### NodeData

The key-value data that comes with the node. properties are typically returned from the backend, indicating some properties that describe the node.

|   Property | Type | Required | Description |
| -------------- | -------- | -------- | ----------------------- |
| id | string | **yes** | unique identifier of a node |
| label | string | no | text information of node |
| properties | any[] | no | node properties |
| `[key:string]` | any | no | Other Properties |

### NodeDefaultStyle

Style information corresponding to NodeShape

|   Property | Default | Description |
| ------------ | --------- | -------------- |
| nodeSize | 20 | size of node |
| primaryColor | #9900EF | main color of node |
| fontSize | 12 | font size of text |
| fontColor | #3b3b3b | font color of text |
| dark | #eee | color of the node when it is darkened |

### Edge

Edge

|   Property | Type | Required | Description |
| -------------- | -------- | -------- | ---------------------------- |
| data | { properties: any[], [key: string]:any } | **yes** | data of edge |
| source | string | **yes** | ID of **source node** |
| target | string | **yes** | ID of **target node** |
| shape | string | no | edge type, default value is `LineEdge` |
| label | string | no | text information of edge |
| style | any | no | style of edge |
| spring | number | no | spring length of the edge which is used when the layout is force layout |
| `[key:string]` | any | no | custom properties |

## Layout

Layout configuration, see [Layout](/zh/docs/api/layout) for details.

## Extend

Extended configuration, see [Extend] (/zh/docs/api/extend) for details.


## Register

Register is used to customize NodeShape, EdgeShape and behavior using the G6 API directly. See [Register](/zh/docs/api/register) for details.

## Options

See [G6 Options] (https://www.yuque.com/antv/g6/graph#VjayE) for details.


## Ref

|   Property | Type | Required | Description |
| ------ | ----- | -------- | ----------- |
| graph | [Graph](https://www.yuque.com/antv/g6/graph) | yes | graph instance of G6 |
| apis | [Apis](#apis) | no | API provided by Graphin |


### Apis


|   Property | Type | Description |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
| search | (words: string) => Node[ ] | search for nodes, keywords can be id, label, or value of property |
| highlight | (nodeIds: string[ ]) => void | highlight Node |
| clear | ( ) => void | reset Graphin |
| getInfo | { layouts: { desc:string;icon:string;name:string}[ ], count: { nodes: number;edges:number; } } | get rendering data |
| history | { redo: ( ) => void;undo: ( ) => void;save: ( ) => void;getInfo: ( ) => { currentStep:number;allStep:number;disableRedo:number;disableUndo:number;};} | History of Operations


0 comments on commit a1f0c39

Please sign in to comment.