Skip to content

Commit

Permalink
feat(docs):update Legend
Browse files Browse the repository at this point in the history
  • Loading branch information
@pomelo-nwu
pomelo-nwu committed May 13, 2020
1 parent 2fb07a2 commit c59bc77
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 51 deletions.
122 changes: 71 additions & 51 deletions packages/graphin-site/docs/api/components.en.md
View file
Expand Up @@ -3,85 +3,105 @@ title: Analysis component
order: 5
---

## \<ContextMenu />
## \<ContextMenu />

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 |
|   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 ContextMenu:

|   Property | Type | Required | Description |
| ------- | ------------ | -------- | -------------------- |
| onClose | ( ) => void; | no | Called when closing menu |
|   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 |
| render | (props: [ContainerProps](#containerprops)) => ReactElement; | no | custom rendering function |
|   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 |
| 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 |
|   Property | Type | Required | Description |
| ---------- | -------------------------------- | -------- | ------------------------ |
| graph | Graph | no | G6 instance |
| menu | [MenuItemType](#menuitemtype)[ ] | no | configuration of menu |
| onClose | ( ) => void; | no | Called when closing menu |

## \<Toolbar /> 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 |
|   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 |
|   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 |
|   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 |

## \<Legend />

Props：

|   Property | Type | Required | Description |
| ---------- | ----------------------------------------------------------------------------------------- | -------- | ------------------------- |
| options | [Option](#Option)[] | **yes** | item config |
| onchange | (checked: [Option](#Option), newOptions: [Option](#Option)[], props: LegendProps) => any; | no | Called when clicking item |
| graph | Graph | no | G6 instance |
| apis | [Apis](/zh/docs/api/graphin/#apis) | no | Graphin API |

### Option

|   Property | Type | Required | Description |
| ---------- | ---------------- | -------- | ---------------- |
| label | string | **yes** | label name |
| color | string | **yes** | dot background |
| value | string ｜ number | **yes** | every Item's key |
| checked | boolean | no | Whether selected |
20 changes: 20 additions & 0 deletions packages/graphin-site/docs/api/components.zh.md
View file
Expand Up @@ -87,3 +87,23 @@ Props：
| apis | [Apis](/zh/docs/api/graphin/#apis) | 否 | Graphin API | |
| graphVars | { width?: number; height: number; } | 否 | G6 图表信息 |
| direction | horizontal \| vertical | 否 | Toolbar 布局方向 |

## \<Legend /> 组件

Props：

|   属性 | 类型 | 是否必选 | 说明 |
| -------- | ----------------------------------------------------------------------------------------- | -------- | ---------------- |
| options | [Option](#Option)[] | **是** | Legend 的配置 |
| onchange | (checked: [Option](#Option), newOptions: [Option](#Option)[], props: LegendProps) => any; | 否 | 点击后的回调函数 |
| graph | Graph | 否 | G6 实例 |
| apis | [Apis](/zh/docs/api/graphin/#apis) | 否 | Graphin API |

### Option

|   属性 | 类型 | 是否必选 | 说明 |
| ------- | ---------------- | -------- | ------------------- |
| label | string | **是** | 标签名 |
| color | string | **是** | 小圆点的颜色 |
| value | string ｜ number | **是** | 每个 Item 的 Key 值 |
| checked | boolean | 否 | 默认全部选中 |

0 comments on commit c59bc77

Please sign in to comment.