From 872c4a7b68c88a6a0eade24deb154337ec87d6e2 Mon Sep 17 00:00:00 2001 From: yvonneyx Date: Fri, 6 Dec 2024 17:03:43 +0800 Subject: [PATCH] refactor: split code and description --- .gitignore | 1 + .prettierignore | 3 +- .../dendrogram/collapse-expand.md | 7 ++++ .../dendrogram/collapse-expand.tsx | 0 .../graphs-demos/dendrogram/compact.md | 7 ++++ .../dendrogram/compact.tsx | 0 .../graphs-demos/dendrogram/default.md | 7 ++++ .../dendrogram/default.tsx | 0 .../graphs-demos/dendrogram/direction.md | 9 +++++ .../dendrogram/direction.tsx | 0 .../options/graphs-demos/fishbone/decision.md | 7 ++++ .../fishbone/decision.tsx | 0 .../options/graphs-demos/fishbone/default.md | 7 ++++ .../fishbone/default.tsx | 0 .../options/graphs-demos/fishbone/layout.md | 7 ++++ .../fishbone/layout.tsx | 0 .../flow-direction-graph/custom.md | 3 ++ .../flow-direction-graph/custom.tsx | 0 .../flow-direction-graph/default.md | 21 +++++++++++ .../flow-direction-graph/default.tsx | 0 .../hover-activate-chain.md | 7 ++++ .../hover-activate-chain.tsx | 0 .../hover-activate-neigbor.md | 7 ++++ .../hover-activate-neighbor.tsx | 0 .../graphs-demos/flow-graph/custom-node.md | 7 ++++ .../flow-graph/custom-node.tsx | 0 .../graphs-demos/flow-graph/default.md | 7 ++++ .../flow-graph/default.tsx | 0 .../flow-graph/hover-activate-chain.md | 7 ++++ .../flow-graph/hover-activate-chain.tsx | 0 .../indented-tree/collapse-expand.md | 27 ++++++++++++++ .../indented-tree/collapse-expand.tsx | 0 .../graphs-demos/indented-tree/color.md | 7 ++++ .../indented-tree/color.tsx | 0 .../graphs-demos/indented-tree/custom-node.md | 7 ++++ .../indented-tree/custom-node.tsx | 0 .../graphs-demos/indented-tree/default.md | 7 ++++ .../indented-tree/default.tsx | 0 .../graphs-demos/indented-tree/direction.md | 7 ++++ .../indented-tree/direction.tsx | 0 .../graphs-demos/indented-tree/type.md | 7 ++++ .../indented-tree/type.tsx | 0 .../graphs-demos/mind-map/collapse-expand.md | 27 ++++++++++++++ .../mind-map/collapse-expand.tsx | 0 .../options/graphs-demos/mind-map/color.md | 7 ++++ .../demos => graphs-demos}/mind-map/color.tsx | 0 .../graphs-demos/mind-map/custom-node.md | 7 ++++ .../mind-map/custom-node.tsx | 0 .../options/graphs-demos/mind-map/default.md | 7 ++++ .../mind-map/default.tsx | 0 .../graphs-demos/mind-map/direction.md | 7 ++++ .../mind-map/direction.tsx | 0 .../options/graphs-demos/mind-map/type.md | 7 ++++ .../demos => graphs-demos}/mind-map/type.tsx | 0 .../graphs-demos/network-graph/default.md | 7 ++++ .../network-graph/default.tsx | 0 .../graphs-demos/network-graph/label.md | 7 ++++ .../network-graph/label.tsx | 0 .../network-graph/node-importance.md | 7 ++++ .../network-graph/node-importance.tsx | 0 .../organization-chart/collapse-expand.md | 27 ++++++++++++++ .../organization-chart/collapse-expand.tsx | 0 .../organization-chart/custom-node.md | 7 ++++ .../organization-chart/custom-node.tsx | 0 .../organization-chart/default.md | 7 ++++ .../organization-chart/default.tsx | 0 .../organization-chart/direction.md | 7 ++++ .../organization-chart/direction.tsx | 0 site/docs/options/graphs/dendrogram.en.md | 14 ++++---- site/docs/options/graphs/dendrogram.zh.md | 12 +++---- site/docs/options/graphs/fishbone.en.md | 9 +++-- site/docs/options/graphs/fishbone.zh.md | 9 +++-- .../options/graphs/flow-direction-graph.en.md | 20 +++++------ .../options/graphs/flow-direction-graph.zh.md | 12 +++---- site/docs/options/graphs/flow-graph.en.md | 9 +++-- site/docs/options/graphs/flow-graph.zh.md | 9 +++-- site/docs/options/graphs/indented-tree.en.md | 36 ++++++++----------- site/docs/options/graphs/indented-tree.zh.md | 20 ++++------- site/docs/options/graphs/mind-map.en.md | 22 +++++------- site/docs/options/graphs/mind-map.zh.md | 20 ++++------- site/docs/options/graphs/network-graph.en.md | 11 +++--- site/docs/options/graphs/network-graph.zh.md | 9 +++-- .../options/graphs/organization-chart.en.md | 16 ++++----- .../options/graphs/organization-chart.zh.md | 14 +++----- site/package.json | 2 +- 85 files changed, 404 insertions(+), 147 deletions(-) create mode 100644 site/docs/options/graphs-demos/dendrogram/collapse-expand.md rename site/docs/options/{graphs/demos => graphs-demos}/dendrogram/collapse-expand.tsx (100%) create mode 100644 site/docs/options/graphs-demos/dendrogram/compact.md rename site/docs/options/{graphs/demos => graphs-demos}/dendrogram/compact.tsx (100%) create mode 100644 site/docs/options/graphs-demos/dendrogram/default.md rename site/docs/options/{graphs/demos => graphs-demos}/dendrogram/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/dendrogram/direction.md rename site/docs/options/{graphs/demos => graphs-demos}/dendrogram/direction.tsx (100%) create mode 100644 site/docs/options/graphs-demos/fishbone/decision.md rename site/docs/options/{graphs/demos => graphs-demos}/fishbone/decision.tsx (100%) create mode 100644 site/docs/options/graphs-demos/fishbone/default.md rename site/docs/options/{graphs/demos => graphs-demos}/fishbone/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/fishbone/layout.md rename site/docs/options/{graphs/demos => graphs-demos}/fishbone/layout.tsx (100%) create mode 100644 site/docs/options/graphs-demos/flow-direction-graph/custom.md rename site/docs/options/{graphs/demos => graphs-demos}/flow-direction-graph/custom.tsx (100%) create mode 100644 site/docs/options/graphs-demos/flow-direction-graph/default.md rename site/docs/options/{graphs/demos => graphs-demos}/flow-direction-graph/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md rename site/docs/options/{graphs/demos => graphs-demos}/flow-direction-graph/hover-activate-chain.tsx (100%) create mode 100644 site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neigbor.md rename site/docs/options/{graphs/demos => graphs-demos}/flow-direction-graph/hover-activate-neighbor.tsx (100%) create mode 100644 site/docs/options/graphs-demos/flow-graph/custom-node.md rename site/docs/options/{graphs/demos => graphs-demos}/flow-graph/custom-node.tsx (100%) create mode 100644 site/docs/options/graphs-demos/flow-graph/default.md rename site/docs/options/{graphs/demos => graphs-demos}/flow-graph/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md rename site/docs/options/{graphs/demos => graphs-demos}/flow-graph/hover-activate-chain.tsx (100%) create mode 100644 site/docs/options/graphs-demos/indented-tree/collapse-expand.md rename site/docs/options/{graphs/demos => graphs-demos}/indented-tree/collapse-expand.tsx (100%) create mode 100644 site/docs/options/graphs-demos/indented-tree/color.md rename site/docs/options/{graphs/demos => graphs-demos}/indented-tree/color.tsx (100%) create mode 100644 site/docs/options/graphs-demos/indented-tree/custom-node.md rename site/docs/options/{graphs/demos => graphs-demos}/indented-tree/custom-node.tsx (100%) create mode 100644 site/docs/options/graphs-demos/indented-tree/default.md rename site/docs/options/{graphs/demos => graphs-demos}/indented-tree/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/indented-tree/direction.md rename site/docs/options/{graphs/demos => graphs-demos}/indented-tree/direction.tsx (100%) create mode 100644 site/docs/options/graphs-demos/indented-tree/type.md rename site/docs/options/{graphs/demos => graphs-demos}/indented-tree/type.tsx (100%) create mode 100644 site/docs/options/graphs-demos/mind-map/collapse-expand.md rename site/docs/options/{graphs/demos => graphs-demos}/mind-map/collapse-expand.tsx (100%) create mode 100644 site/docs/options/graphs-demos/mind-map/color.md rename site/docs/options/{graphs/demos => graphs-demos}/mind-map/color.tsx (100%) create mode 100644 site/docs/options/graphs-demos/mind-map/custom-node.md rename site/docs/options/{graphs/demos => graphs-demos}/mind-map/custom-node.tsx (100%) create mode 100644 site/docs/options/graphs-demos/mind-map/default.md rename site/docs/options/{graphs/demos => graphs-demos}/mind-map/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/mind-map/direction.md rename site/docs/options/{graphs/demos => graphs-demos}/mind-map/direction.tsx (100%) create mode 100644 site/docs/options/graphs-demos/mind-map/type.md rename site/docs/options/{graphs/demos => graphs-demos}/mind-map/type.tsx (100%) create mode 100644 site/docs/options/graphs-demos/network-graph/default.md rename site/docs/options/{graphs/demos => graphs-demos}/network-graph/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/network-graph/label.md rename site/docs/options/{graphs/demos => graphs-demos}/network-graph/label.tsx (100%) create mode 100644 site/docs/options/graphs-demos/network-graph/node-importance.md rename site/docs/options/{graphs/demos => graphs-demos}/network-graph/node-importance.tsx (100%) create mode 100644 site/docs/options/graphs-demos/organization-chart/collapse-expand.md rename site/docs/options/{graphs/demos => graphs-demos}/organization-chart/collapse-expand.tsx (100%) create mode 100644 site/docs/options/graphs-demos/organization-chart/custom-node.md rename site/docs/options/{graphs/demos => graphs-demos}/organization-chart/custom-node.tsx (100%) create mode 100644 site/docs/options/graphs-demos/organization-chart/default.md rename site/docs/options/{graphs/demos => graphs-demos}/organization-chart/default.tsx (100%) create mode 100644 site/docs/options/graphs-demos/organization-chart/direction.md rename site/docs/options/{graphs/demos => graphs-demos}/organization-chart/direction.tsx (100%) diff --git a/.gitignore b/.gitignore index 887c70de0..8d71ec01c 100644 --- a/.gitignore +++ b/.gitignore @@ -35,3 +35,4 @@ logs # temp temp-gallery.md +pnpm-lock.yaml diff --git a/.prettierignore b/.prettierignore index 8af90c5d6..58db32539 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,5 @@ **/*.svg **/*.html -*.md package.json .umi .umi-production @@ -11,4 +10,4 @@ dist node_modules *.ejs gatsby-browser.js -*.min.js \ No newline at end of file +*.min.js diff --git a/site/docs/options/graphs-demos/dendrogram/collapse-expand.md b/site/docs/options/graphs-demos/dendrogram/collapse-expand.md new file mode 100644 index 000000000..41dcbc779 --- /dev/null +++ b/site/docs/options/graphs-demos/dendrogram/collapse-expand.md @@ -0,0 +1,7 @@ +## zh + +添加 G6 内置 CollapseExpand 交互，双击触发展开/收起。更多 G6 内置交互请查阅[此处](https://g6.antv.antgroup.com/manual/core-concept/behavior)。 + +## en + +Add G6's built-in CollapseExpand interaction, allowing nodes to expand/collapse on double-click. For more built-in interactions, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior). diff --git a/site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx b/site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx similarity index 100% rename from site/docs/options/graphs/demos/dendrogram/collapse-expand.tsx rename to site/docs/options/graphs-demos/dendrogram/collapse-expand.tsx diff --git a/site/docs/options/graphs-demos/dendrogram/compact.md b/site/docs/options/graphs-demos/dendrogram/compact.md new file mode 100644 index 000000000..38bccd887 --- /dev/null +++ b/site/docs/options/graphs-demos/dendrogram/compact.md @@ -0,0 +1,7 @@ +## zh + +通过 `compact` 配置紧凑模式。 + +## en + +Use the `compact` configuration for compact mode. diff --git a/site/docs/options/graphs/demos/dendrogram/compact.tsx b/site/docs/options/graphs-demos/dendrogram/compact.tsx similarity index 100% rename from site/docs/options/graphs/demos/dendrogram/compact.tsx rename to site/docs/options/graphs-demos/dendrogram/compact.tsx diff --git a/site/docs/options/graphs-demos/dendrogram/default.md b/site/docs/options/graphs-demos/dendrogram/default.md new file mode 100644 index 000000000..7241b63ff --- /dev/null +++ b/site/docs/options/graphs-demos/dendrogram/default.md @@ -0,0 +1,7 @@ +## zh + +简单的展示。 + +## en + +A simple demonstration. diff --git a/site/docs/options/graphs/demos/dendrogram/default.tsx b/site/docs/options/graphs-demos/dendrogram/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/dendrogram/default.tsx rename to site/docs/options/graphs-demos/dendrogram/default.tsx diff --git a/site/docs/options/graphs-demos/dendrogram/direction.md b/site/docs/options/graphs-demos/dendrogram/direction.md new file mode 100644 index 000000000..40365d194 --- /dev/null +++ b/site/docs/options/graphs-demos/dendrogram/direction.md @@ -0,0 +1,9 @@ +## zh + +通过设置语法糖 `direction` 为 `vertical` `radial` 分别让子节点垂直、径向分布。若不设置 `direction`，则默认 `horizontal` 水平分布。 +注意，节点标签也会自动根据 `direction` 排布，当设置 `node.style.labelPlacement` 时会以后者为准。 + +## en + +Use the syntax sugar `direction` to set the arrangement of child nodes as `vertical` or `radial`. If `direction` is not set, the default is `horizontal`. +Note that the label placement will adjust based on the `direction`, but if `node.style.labelPlacement` is set, it takes precedence. diff --git a/site/docs/options/graphs/demos/dendrogram/direction.tsx b/site/docs/options/graphs-demos/dendrogram/direction.tsx similarity index 100% rename from site/docs/options/graphs/demos/dendrogram/direction.tsx rename to site/docs/options/graphs-demos/dendrogram/direction.tsx diff --git a/site/docs/options/graphs-demos/fishbone/decision.md b/site/docs/options/graphs-demos/fishbone/decision.md new file mode 100644 index 000000000..318c3fc84 --- /dev/null +++ b/site/docs/options/graphs-demos/fishbone/decision.md @@ -0,0 +1,7 @@ +## zh + +决策型鱼骨图（鱼头在左），用于解决问题。 + +## en + +Decision-type fishbone diagram (with the head on the left), used for solving problems. diff --git a/site/docs/options/graphs/demos/fishbone/decision.tsx b/site/docs/options/graphs-demos/fishbone/decision.tsx similarity index 100% rename from site/docs/options/graphs/demos/fishbone/decision.tsx rename to site/docs/options/graphs-demos/fishbone/decision.tsx diff --git a/site/docs/options/graphs-demos/fishbone/default.md b/site/docs/options/graphs-demos/fishbone/default.md new file mode 100644 index 000000000..e8a8e39af --- /dev/null +++ b/site/docs/options/graphs-demos/fishbone/default.md @@ -0,0 +1,7 @@ +## zh + +原因型鱼骨图（鱼头在右），用于分析问题。 + +## en + +Cause-type fishbone diagram (with the head on the right), used for analyzing problems. diff --git a/site/docs/options/graphs/demos/fishbone/default.tsx b/site/docs/options/graphs-demos/fishbone/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/fishbone/default.tsx rename to site/docs/options/graphs-demos/fishbone/default.tsx diff --git a/site/docs/options/graphs-demos/fishbone/layout.md b/site/docs/options/graphs-demos/fishbone/layout.md new file mode 100644 index 000000000..11b30927e --- /dev/null +++ b/site/docs/options/graphs-demos/fishbone/layout.md @@ -0,0 +1,7 @@ +## zh + +调整鱼骨分支位置。 + +## en + +Adjust the position of the fishbone branches. diff --git a/site/docs/options/graphs/demos/fishbone/layout.tsx b/site/docs/options/graphs-demos/fishbone/layout.tsx similarity index 100% rename from site/docs/options/graphs/demos/fishbone/layout.tsx rename to site/docs/options/graphs-demos/fishbone/layout.tsx diff --git a/site/docs/options/graphs-demos/flow-direction-graph/custom.md b/site/docs/options/graphs-demos/flow-direction-graph/custom.md new file mode 100644 index 000000000..88cb5ab53 --- /dev/null +++ b/site/docs/options/graphs-demos/flow-direction-graph/custom.md @@ -0,0 +1,3 @@ +## zh + +## en diff --git a/site/docs/options/graphs/demos/flow-direction-graph/custom.tsx b/site/docs/options/graphs-demos/flow-direction-graph/custom.tsx similarity index 100% rename from site/docs/options/graphs/demos/flow-direction-graph/custom.tsx rename to site/docs/options/graphs-demos/flow-direction-graph/custom.tsx diff --git a/site/docs/options/graphs-demos/flow-direction-graph/default.md b/site/docs/options/graphs-demos/flow-direction-graph/default.md new file mode 100644 index 000000000..0955fc47a --- /dev/null +++ b/site/docs/options/graphs-demos/flow-direction-graph/default.md @@ -0,0 +1,21 @@ +## zh + +简单的展示。 + +通过交互 `map-edge-line-width` 来调整 `edge.style.lineWidth`。包含以下属性： + +- `value`（数值或函数，用于计算边的数值 +- `minValue` 和 `maxValue`（可选，最小值和最大值，可以是数值或函数） +- `minLineWidth` 和 `maxLineWidth`（可选，最小线宽和最大线宽，可以是数值或函数） +- `scale`（可选，插值函数，用于将数值映射到线宽，支持 `'linear`'、'`log'`、`'pow'`、`'sqrt'` 和自定义插值函数） + +## en + +A simple demonstration. + +Adjust `edge.style.lineWidth` via the behavior `map-edge-line-width`. It includes the following properties: + +- `value` (number or function to compute the value of the edge) +- `minValue` and `maxValue` (optional, minimum and maximum values, can be numbers or functions) +- `minLineWidth` and `maxLineWidth` (optional, minimum and maximum line widths, can be numbers or functions) +- `scale` (optional, interpolation function to map values to line widths, supports `'linear'`, `'log'`, `'pow'`, `'sqrt'`, and custom interpolation functions) diff --git a/site/docs/options/graphs/demos/flow-direction-graph/default.tsx b/site/docs/options/graphs-demos/flow-direction-graph/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/flow-direction-graph/default.tsx rename to site/docs/options/graphs-demos/flow-direction-graph/default.tsx diff --git a/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md new file mode 100644 index 000000000..618a61b5f --- /dev/null +++ b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.md @@ -0,0 +1,7 @@ +## zh + +通过添加悬浮高亮交互（注册类型：`hover-activate-chain`）可以高亮显示当前元素及其所在的链路。此交互基于 G6 内置交互 `hover-activate` 实现，并继承了其[配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate)。 + +## en + +By adding the hover highlight behavior (registration type: `hover-activate-chain`), you can highlight the current element and its entire chain. This behavior is based on the G6 built-in behavior `hover-activate` and inherits its [configuration options](https://g6.antv.antgroup.com/api/behaviors/hover-activate). diff --git a/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-chain.tsx b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.tsx similarity index 100% rename from site/docs/options/graphs/demos/flow-direction-graph/hover-activate-chain.tsx rename to site/docs/options/graphs-demos/flow-direction-graph/hover-activate-chain.tsx diff --git a/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neigbor.md b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neigbor.md new file mode 100644 index 000000000..7ec92d4a3 --- /dev/null +++ b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neigbor.md @@ -0,0 +1,7 @@ +## zh + +通过添加悬浮高亮交互（注册类型：`hover-activate-neighbors`）可以高亮当前元素及其相邻元素。该交互基于 G6 内置交互 `hover-activate` 实现，并继承了其[配置项](https://g6.antv.antgroup.com/api/behaviors/hover-activate)。 + +## en + +By adding the hover highlight behavior (registration type: `hover-activate-neighbors`), you can highlight the current element and its neighboring elements. This behavior is based on the G6 built-in behavior `hover-activate` and inherits its [configuration options](https://g6.antv.antgroup.com/api/behaviors/hover-activate). diff --git a/site/docs/options/graphs/demos/flow-direction-graph/hover-activate-neighbor.tsx b/site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.tsx similarity index 100% rename from site/docs/options/graphs/demos/flow-direction-graph/hover-activate-neighbor.tsx rename to site/docs/options/graphs-demos/flow-direction-graph/hover-activate-neighbor.tsx diff --git a/site/docs/options/graphs-demos/flow-graph/custom-node.md b/site/docs/options/graphs-demos/flow-graph/custom-node.md new file mode 100644 index 000000000..5f0d79c0f --- /dev/null +++ b/site/docs/options/graphs-demos/flow-graph/custom-node.md @@ -0,0 +1,7 @@ +## zh + +通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。 + +## en + +Customize nodes using `node.component`, which needs to be paired with `node.size` to work properly. diff --git a/site/docs/options/graphs/demos/flow-graph/custom-node.tsx b/site/docs/options/graphs-demos/flow-graph/custom-node.tsx similarity index 100% rename from site/docs/options/graphs/demos/flow-graph/custom-node.tsx rename to site/docs/options/graphs-demos/flow-graph/custom-node.tsx diff --git a/site/docs/options/graphs-demos/flow-graph/default.md b/site/docs/options/graphs-demos/flow-graph/default.md new file mode 100644 index 000000000..7241b63ff --- /dev/null +++ b/site/docs/options/graphs-demos/flow-graph/default.md @@ -0,0 +1,7 @@ +## zh + +简单的展示。 + +## en + +A simple demonstration. diff --git a/site/docs/options/graphs/demos/flow-graph/default.tsx b/site/docs/options/graphs-demos/flow-graph/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/flow-graph/default.tsx rename to site/docs/options/graphs-demos/flow-graph/default.tsx diff --git a/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md b/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md new file mode 100644 index 000000000..f84eb9bda --- /dev/null +++ b/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.md @@ -0,0 +1,7 @@ +## zh + +通过添加悬浮高亮交互（注册类型：`hover-activate-chain`），可以高亮显示元素及其所在的链路。 + +## en + +By adding hover-highlight interaction (registered as `hover-activate-chain`), elements and their associated chains are highlighted on hover. diff --git a/site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx b/site/docs/options/graphs-demos/flow-graph/hover-activate-chain.tsx similarity index 100% rename from site/docs/options/graphs/demos/flow-graph/hover-activate-chain.tsx rename to site/docs/options/graphs-demos/flow-graph/hover-activate-chain.tsx diff --git a/site/docs/options/graphs-demos/indented-tree/collapse-expand.md b/site/docs/options/graphs-demos/indented-tree/collapse-expand.md new file mode 100644 index 000000000..6438f4caf --- /dev/null +++ b/site/docs/options/graphs-demos/indented-tree/collapse-expand.md @@ -0,0 +1,27 @@ +## zh + +通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。 + +- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false` +- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'` +- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'` +- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'` +- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 +- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'` +- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0` +- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式 +- `refreshLayout`: 每次收起/展开节点后，是否刷新布局 + +## en + +Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes. + +- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` +- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'` +- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'` +- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` +- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon +- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` +- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` +- `iconClassName/iconStyle`: CSS class name and inline styles for the icon +- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation diff --git a/site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx b/site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx similarity index 100% rename from site/docs/options/graphs/demos/indented-tree/collapse-expand.tsx rename to site/docs/options/graphs-demos/indented-tree/collapse-expand.tsx diff --git a/site/docs/options/graphs-demos/indented-tree/color.md b/site/docs/options/graphs-demos/indented-tree/color.md new file mode 100644 index 000000000..b73cece67 --- /dev/null +++ b/site/docs/options/graphs-demos/indented-tree/color.md @@ -0,0 +1,7 @@ +## zh + +`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。 + +## en + +`assign-color-by-branch` is a built-in data transformation step that allows you to assign different colors to branches by modifying`colors`. diff --git a/site/docs/options/graphs/demos/indented-tree/color.tsx b/site/docs/options/graphs-demos/indented-tree/color.tsx similarity index 100% rename from site/docs/options/graphs/demos/indented-tree/color.tsx rename to site/docs/options/graphs-demos/indented-tree/color.tsx diff --git a/site/docs/options/graphs-demos/indented-tree/custom-node.md b/site/docs/options/graphs-demos/indented-tree/custom-node.md new file mode 100644 index 000000000..3d90d1ef4 --- /dev/null +++ b/site/docs/options/graphs-demos/indented-tree/custom-node.md @@ -0,0 +1,7 @@ +## zh + +通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。 + +## en + +Customize nodes using `node.component`, which must be paired with `node.size` to take effect. diff --git a/site/docs/options/graphs/demos/indented-tree/custom-node.tsx b/site/docs/options/graphs-demos/indented-tree/custom-node.tsx similarity index 100% rename from site/docs/options/graphs/demos/indented-tree/custom-node.tsx rename to site/docs/options/graphs-demos/indented-tree/custom-node.tsx diff --git a/site/docs/options/graphs-demos/indented-tree/default.md b/site/docs/options/graphs-demos/indented-tree/default.md new file mode 100644 index 000000000..7241b63ff --- /dev/null +++ b/site/docs/options/graphs-demos/indented-tree/default.md @@ -0,0 +1,7 @@ +## zh + +简单的展示。 + +## en + +A simple demonstration. diff --git a/site/docs/options/graphs/demos/indented-tree/default.tsx b/site/docs/options/graphs-demos/indented-tree/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/indented-tree/default.tsx rename to site/docs/options/graphs-demos/indented-tree/default.tsx diff --git a/site/docs/options/graphs-demos/indented-tree/direction.md b/site/docs/options/graphs-demos/indented-tree/direction.md new file mode 100644 index 000000000..dc4cbb4c3 --- /dev/null +++ b/site/docs/options/graphs-demos/indented-tree/direction.md @@ -0,0 +1,7 @@ +## zh + +通过设置 `direction` 为 `alternate` `left` 分别让子节点自由、左侧分布。若不设置 `direction`，则默认 `right` 右侧分布。 + +## en + +Set `direction` to `alternate` or `left` to distribute child nodes freely or to the left. If not set, the default is `right` (right distribution). diff --git a/site/docs/options/graphs/demos/indented-tree/direction.tsx b/site/docs/options/graphs-demos/indented-tree/direction.tsx similarity index 100% rename from site/docs/options/graphs/demos/indented-tree/direction.tsx rename to site/docs/options/graphs-demos/indented-tree/direction.tsx diff --git a/site/docs/options/graphs-demos/indented-tree/type.md b/site/docs/options/graphs-demos/indented-tree/type.md new file mode 100644 index 000000000..304952c5f --- /dev/null +++ b/site/docs/options/graphs-demos/indented-tree/type.md @@ -0,0 +1,7 @@ +## zh + +通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。 + +## en + +Use the `type` syntax sugar to apply preset styles: line style or boxed style. diff --git a/site/docs/options/graphs/demos/indented-tree/type.tsx b/site/docs/options/graphs-demos/indented-tree/type.tsx similarity index 100% rename from site/docs/options/graphs/demos/indented-tree/type.tsx rename to site/docs/options/graphs-demos/indented-tree/type.tsx diff --git a/site/docs/options/graphs-demos/mind-map/collapse-expand.md b/site/docs/options/graphs-demos/mind-map/collapse-expand.md new file mode 100644 index 000000000..6438f4caf --- /dev/null +++ b/site/docs/options/graphs-demos/mind-map/collapse-expand.md @@ -0,0 +1,27 @@ +## zh + +通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。 + +- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false` +- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'` +- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'` +- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'` +- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 +- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'` +- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0` +- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式 +- `refreshLayout`: 每次收起/展开节点后，是否刷新布局 + +## en + +Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes. + +- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` +- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'` +- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'` +- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` +- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon +- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` +- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` +- `iconClassName/iconStyle`: CSS class name and inline styles for the icon +- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation diff --git a/site/docs/options/graphs/demos/mind-map/collapse-expand.tsx b/site/docs/options/graphs-demos/mind-map/collapse-expand.tsx similarity index 100% rename from site/docs/options/graphs/demos/mind-map/collapse-expand.tsx rename to site/docs/options/graphs-demos/mind-map/collapse-expand.tsx diff --git a/site/docs/options/graphs-demos/mind-map/color.md b/site/docs/options/graphs-demos/mind-map/color.md new file mode 100644 index 000000000..d100d969e --- /dev/null +++ b/site/docs/options/graphs-demos/mind-map/color.md @@ -0,0 +1,7 @@ +## zh + +`assign-color-by-branch` 是内置数据转换的一个环节，可以通过修改 `colors` 来分配不同的颜色来区分思维导图的分支。 + +## en + +The `assign-color-by-branch` feature allows branch differentiation by modifying `colors` to assign different colors to the mind map branches. diff --git a/site/docs/options/graphs/demos/mind-map/color.tsx b/site/docs/options/graphs-demos/mind-map/color.tsx similarity index 100% rename from site/docs/options/graphs/demos/mind-map/color.tsx rename to site/docs/options/graphs-demos/mind-map/color.tsx diff --git a/site/docs/options/graphs-demos/mind-map/custom-node.md b/site/docs/options/graphs-demos/mind-map/custom-node.md new file mode 100644 index 000000000..a692d0a4a --- /dev/null +++ b/site/docs/options/graphs-demos/mind-map/custom-node.md @@ -0,0 +1,7 @@ +## zh + +通过 `node.component` 来进行自定义节点，需要与 `node.size` 配合实现。 + +## en + +Customize nodes using `node.component`, in conjunction with `node.size`. diff --git a/site/docs/options/graphs/demos/mind-map/custom-node.tsx b/site/docs/options/graphs-demos/mind-map/custom-node.tsx similarity index 100% rename from site/docs/options/graphs/demos/mind-map/custom-node.tsx rename to site/docs/options/graphs-demos/mind-map/custom-node.tsx diff --git a/site/docs/options/graphs-demos/mind-map/default.md b/site/docs/options/graphs-demos/mind-map/default.md new file mode 100644 index 000000000..04a9c6dc9 --- /dev/null +++ b/site/docs/options/graphs-demos/mind-map/default.md @@ -0,0 +1,7 @@ +## zh + +基本用法。 + +## en + +A simple demonstration. diff --git a/site/docs/options/graphs/demos/mind-map/default.tsx b/site/docs/options/graphs-demos/mind-map/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/mind-map/default.tsx rename to site/docs/options/graphs-demos/mind-map/default.tsx diff --git a/site/docs/options/graphs-demos/mind-map/direction.md b/site/docs/options/graphs-demos/mind-map/direction.md new file mode 100644 index 000000000..a8b832d49 --- /dev/null +++ b/site/docs/options/graphs-demos/mind-map/direction.md @@ -0,0 +1,7 @@ +## zh + +通过设置 `direction` 为 `right` `left` 分别让子节点右侧、左侧分布。若不设置 `direction`，则默认自由分布。 + +## en + +Set `direction` to `right` or `left` to distribute child nodes on the right or left. If `direction` is not set, the default is free distribution. diff --git a/site/docs/options/graphs/demos/mind-map/direction.tsx b/site/docs/options/graphs-demos/mind-map/direction.tsx similarity index 100% rename from site/docs/options/graphs/demos/mind-map/direction.tsx rename to site/docs/options/graphs-demos/mind-map/direction.tsx diff --git a/site/docs/options/graphs-demos/mind-map/type.md b/site/docs/options/graphs-demos/mind-map/type.md new file mode 100644 index 000000000..3bdc5f731 --- /dev/null +++ b/site/docs/options/graphs-demos/mind-map/type.md @@ -0,0 +1,7 @@ +## zh + +通过 `type` 语法糖，使用预设的风格：线条风格和方框风格。 + +## en + +Use the `type` syntax to apply preset styles: linear style and boxed style. diff --git a/site/docs/options/graphs/demos/mind-map/type.tsx b/site/docs/options/graphs-demos/mind-map/type.tsx similarity index 100% rename from site/docs/options/graphs/demos/mind-map/type.tsx rename to site/docs/options/graphs-demos/mind-map/type.tsx diff --git a/site/docs/options/graphs-demos/network-graph/default.md b/site/docs/options/graphs-demos/network-graph/default.md new file mode 100644 index 000000000..7241b63ff --- /dev/null +++ b/site/docs/options/graphs-demos/network-graph/default.md @@ -0,0 +1,7 @@ +## zh + +简单的展示。 + +## en + +A simple demonstration. diff --git a/site/docs/options/graphs/demos/network-graph/default.tsx b/site/docs/options/graphs-demos/network-graph/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/network-graph/default.tsx rename to site/docs/options/graphs-demos/network-graph/default.tsx diff --git a/site/docs/options/graphs-demos/network-graph/label.md b/site/docs/options/graphs-demos/network-graph/label.md new file mode 100644 index 000000000..a7c8a0c73 --- /dev/null +++ b/site/docs/options/graphs-demos/network-graph/label.md @@ -0,0 +1,7 @@ +## zh + +展示节点标签，默认显示三行文字，鼠标悬浮时显示全部内容。 + +## en + +Display node labels. By default, three lines of text are shown, with the full content displayed on hover. diff --git a/site/docs/options/graphs/demos/network-graph/label.tsx b/site/docs/options/graphs-demos/network-graph/label.tsx similarity index 100% rename from site/docs/options/graphs/demos/network-graph/label.tsx rename to site/docs/options/graphs-demos/network-graph/label.tsx diff --git a/site/docs/options/graphs-demos/network-graph/node-importance.md b/site/docs/options/graphs-demos/network-graph/node-importance.md new file mode 100644 index 000000000..271728216 --- /dev/null +++ b/site/docs/options/graphs-demos/network-graph/node-importance.md @@ -0,0 +1,7 @@ +## zh + +根据节点重要性映射到节点大小，点击[此处](https://g6.antv.antgroup.com/api/transforms/map-node-size)查看更多配置项 + +## en + +Map node importance to node size. Click [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) for more configuration options. diff --git a/site/docs/options/graphs/demos/network-graph/node-importance.tsx b/site/docs/options/graphs-demos/network-graph/node-importance.tsx similarity index 100% rename from site/docs/options/graphs/demos/network-graph/node-importance.tsx rename to site/docs/options/graphs-demos/network-graph/node-importance.tsx diff --git a/site/docs/options/graphs-demos/organization-chart/collapse-expand.md b/site/docs/options/graphs-demos/organization-chart/collapse-expand.md new file mode 100644 index 000000000..6438f4caf --- /dev/null +++ b/site/docs/options/graphs-demos/organization-chart/collapse-expand.md @@ -0,0 +1,27 @@ +## zh + +通过调整 `collapse-expand-react-node` 交互配置来控制展开/收起子节点的操作。 + +- `enable`: 是否启用该交互，类型为 `boolean | ((data: NodeData) => boolean)`，默认为 `false` +- `trigger`: 点击指定元素，触发节点收起/展开；`'icon'` 代表点击图标触发，`'node'` 代表点击节点触发，`HTMLElement` 代表自定义元素，默认为 `'icon'` +- `direction`: 收起/展开指定方向上的邻居节点，`'in'` 代表前驱节点，`'out'` 代表后继节点，`'both'` 代表前驱和后继节点，默认为 `'out'` +- `iconType`: 内置图标语法糖，`'plus-minus'` 或 `'arrow-count'` +- `iconRender`: 渲染函数，用于自定义收起/展开图标，参数为 `isCollapsed`（当前节点是否已收起）和 `data`（节点数据），返回自定义图标 +- `iconPlacement`: 图标相对于节点的位置，可选值为 `'left'`、`'right'`、`'top'`、`'bottom'`，默认为 `'bottom'` +- `iconOffsetX/iconOffsetY`: 图标相对于节点的水平、垂直偏移量，默认为 `0` +- `iconClassName/iconStyle`: 指定图标的 CSS 类名及内联样式 +- `refreshLayout`: 每次收起/展开节点后，是否刷新布局 + +## en + +Adjust the `collapse-expand-react-node` interaction configuration to control expand/collapse behavior for child nodes. + +- `enable`: Whether to enable the interaction, type is `boolean | ((data: NodeData) => boolean)`, default is `false` +- `trigger`: The element that triggers node collapse/expand; `'icon'` triggers on icon click, `'node'` triggers on node click, and `HTMLElement` allows custom elements, default is `'icon'` +- `direction`: Collapse/expand neighbor nodes in the specified direction, `'in'` for predecessor nodes, `'out'` for successor nodes, and `'both'` for both predecessors and successors, default is `'out'` +- `iconType`: Built-in icon options, either `'plus-minus'` or `'arrow-count'` +- `iconRender`: Render function to customize the collapse/expand icon, takes `isCollapsed` (whether the node is collapsed) and `data` (node data) as parameters, returns a custom icon +- `iconPlacement`: Icon position relative to the node, can be `'left'`, `'right'`, `'top'`, or `'bottom'`, default is `'bottom'` +- `iconOffsetX/iconOffsetY`: Horizontal/vertical offset for the icon relative to the node, default is `0` +- `iconClassName/iconStyle`: CSS class name and inline styles for the icon +- `refreshLayout`: Whether to refresh the layout after each collapse/expand operation diff --git a/site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx b/site/docs/options/graphs-demos/organization-chart/collapse-expand.tsx similarity index 100% rename from site/docs/options/graphs/demos/organization-chart/collapse-expand.tsx rename to site/docs/options/graphs-demos/organization-chart/collapse-expand.tsx diff --git a/site/docs/options/graphs-demos/organization-chart/custom-node.md b/site/docs/options/graphs-demos/organization-chart/custom-node.md new file mode 100644 index 000000000..428b4a17b --- /dev/null +++ b/site/docs/options/graphs-demos/organization-chart/custom-node.md @@ -0,0 +1,7 @@ +## zh + +使用自定义的 React 节点进行图的渲染。此示例中使用了内置的 RC 组件 `OrganizationChartNode` 进行简单实现，你也可以自行开发 RC 组件以满足特定需求。 + +## en + +Render the chart using custom React nodes. The example uses the built-in `OrganizationChartNode`, but you can develop your own RC component for specific needs. diff --git a/site/docs/options/graphs/demos/organization-chart/custom-node.tsx b/site/docs/options/graphs-demos/organization-chart/custom-node.tsx similarity index 100% rename from site/docs/options/graphs/demos/organization-chart/custom-node.tsx rename to site/docs/options/graphs-demos/organization-chart/custom-node.tsx diff --git a/site/docs/options/graphs-demos/organization-chart/default.md b/site/docs/options/graphs-demos/organization-chart/default.md new file mode 100644 index 000000000..7241b63ff --- /dev/null +++ b/site/docs/options/graphs-demos/organization-chart/default.md @@ -0,0 +1,7 @@ +## zh + +简单的展示。 + +## en + +A simple demonstration. diff --git a/site/docs/options/graphs/demos/organization-chart/default.tsx b/site/docs/options/graphs-demos/organization-chart/default.tsx similarity index 100% rename from site/docs/options/graphs/demos/organization-chart/default.tsx rename to site/docs/options/graphs-demos/organization-chart/default.tsx diff --git a/site/docs/options/graphs-demos/organization-chart/direction.md b/site/docs/options/graphs-demos/organization-chart/direction.md new file mode 100644 index 000000000..65c672304 --- /dev/null +++ b/site/docs/options/graphs-demos/organization-chart/direction.md @@ -0,0 +1,7 @@ +## zh + +通过设置 `direction` 为 `vertical` `horizontal` 分别让垂直（自上而下）、水平（自左而右）分布。若不设置 `direction`，则默认垂直分布。 + +## en + +Set `direction` to `vertical` for top-down or `horizontal` for left-right layout. The default is vertical. diff --git a/site/docs/options/graphs/demos/organization-chart/direction.tsx b/site/docs/options/graphs-demos/organization-chart/direction.tsx similarity index 100% rename from site/docs/options/graphs/demos/organization-chart/direction.tsx rename to site/docs/options/graphs-demos/organization-chart/direction.tsx diff --git a/site/docs/options/graphs/dendrogram.en.md b/site/docs/options/graphs/dendrogram.en.md index 8435e059b..53a854969 100644 --- a/site/docs/options/graphs/dendrogram.en.md +++ b/site/docs/options/graphs/dendrogram.en.md @@ -19,13 +19,11 @@ It is suitable for displaying hierarchical data relationships, clarifying key po ## Examples -Basic Usage - -Arrangement Direction - -Compact Mode - -Expand/Collapse Nodes + +Basic Usage +Arrangement Direction +Compact Mode +Expand/Collapse Nodes ## API @@ -39,5 +37,5 @@ Common props ref: [Common Graph Properties](./overview#common-graph-properties) | compact | Whether to enable compact mode | `boolean` | `false` | | layout | Tree layout configuration | [`DendrogramLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/dendrogram-layout) | `{ type: 'dendrogram' }` | | behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | -| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/dendrogram.zh.md b/site/docs/options/graphs/dendrogram.zh.md index 3c02acb31..0098e4c04 100644 --- a/site/docs/options/graphs/dendrogram.zh.md +++ b/site/docs/options/graphs/dendrogram.zh.md @@ -19,13 +19,11 @@ import { Dendrogram } from '@ant-design/graphs'; ## 代码演示 -基本用法 - -排布方向 - -紧凑模式 - -展开/收起节点 + +基本用法 +排布方向 +紧凑模式 +展开/收起节点 ## API diff --git a/site/docs/options/graphs/fishbone.en.md b/site/docs/options/graphs/fishbone.en.md index de7e89d46..0b4bce299 100644 --- a/site/docs/options/graphs/fishbone.en.md +++ b/site/docs/options/graphs/fishbone.en.md @@ -20,11 +20,10 @@ The basic principle of the Fishbone method is to identify the main causes of a p ## Examples -Cause-type Fishbone Diagram - -Decision-type Fishbone Diagram - -Adjust Layout Parameters + +Cause-type Fishbone Diagram +Decision-type Fishbone Diagram +Adjust Layout Parameters ## API diff --git a/site/docs/options/graphs/fishbone.zh.md b/site/docs/options/graphs/fishbone.zh.md index ca66db575..cb8e5b124 100644 --- a/site/docs/options/graphs/fishbone.zh.md +++ b/site/docs/options/graphs/fishbone.zh.md @@ -20,11 +20,10 @@ import { Fishbone } from '@ant-design/graphs'; ## 代码演示 -原因型鱼骨图 - -决策型鱼骨图 - -调整布局参数 + +原因型鱼骨图 +决策型鱼骨图 +调整布局参数 ## API diff --git a/site/docs/options/graphs/flow-direction-graph.en.md b/site/docs/options/graphs/flow-direction-graph.en.md index e4c4dbdef..845458e9a 100644 --- a/site/docs/options/graphs/flow-direction-graph.en.md +++ b/site/docs/options/graphs/flow-direction-graph.en.md @@ -19,21 +19,19 @@ Ideal for complex information that requires clear logical relationships or decis ## Examples -Basic Usage - -Highlight Neighboring Elements - -Highlight Element and Its Chain - -Custom + +Basic Usage +Highlight Neighboring Elements +Highlight Element and Its Chain +Custom ## API Common props ref: [Common Graph Properties](./overview#common-graph-properties) -| Property | Description | Type | Default Value | -| --- | --- | --- | --- | -| layout | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| layout | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | | behaviors | Set user behavior events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | -| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/flow-direction-graph.zh.md b/site/docs/options/graphs/flow-direction-graph.zh.md index 79904b7b9..07473be20 100644 --- a/site/docs/options/graphs/flow-direction-graph.zh.md +++ b/site/docs/options/graphs/flow-direction-graph.zh.md @@ -19,13 +19,11 @@ import { FlowDirectionGraph } from '@ant-design/graphs'; ## 代码演示 -基本用法 - -高亮相邻元素 - -高亮元素及其所在链路 - -自定义 + +基本用法 +高亮相邻元素 +高亮元素及其所在链路 +自定义 ## API diff --git a/site/docs/options/graphs/flow-graph.en.md b/site/docs/options/graphs/flow-graph.en.md index ab36d955b..d94d5283b 100644 --- a/site/docs/options/graphs/flow-graph.en.md +++ b/site/docs/options/graphs/flow-graph.en.md @@ -23,11 +23,10 @@ A flowchart shows the entire process from start to finish. Each node represents ## Examples -Basic Usage - -Highlight Elements and Their Chains - -Custom Nodes + +Basic Usage +Highlight Elements and Their Chains +Custom Nodes ## API diff --git a/site/docs/options/graphs/flow-graph.zh.md b/site/docs/options/graphs/flow-graph.zh.md index 11dbd4eb6..4b89aac09 100644 --- a/site/docs/options/graphs/flow-graph.zh.md +++ b/site/docs/options/graphs/flow-graph.zh.md @@ -23,11 +23,10 @@ import { FlowGraph } from '@ant-design/graphs'; ## 代码演示 -基本用法 - -高亮元素及其所在链路 - -自定义节点 + +基本用法 +高亮元素及其所在链路 +自定义节点 ## API diff --git a/site/docs/options/graphs/indented-tree.en.md b/site/docs/options/graphs/indented-tree.en.md index 175412c53..5a2b351eb 100644 --- a/site/docs/options/graphs/indented-tree.en.md +++ b/site/docs/options/graphs/indented-tree.en.md @@ -22,19 +22,13 @@ import { IndentedTree } from '@ant-design/graphs'; ## Examples -Basic Usage - -Styles - -Child Node Distribution - -Custom Nodes - -Expand/Collapse Child Nodes - -Set Branch Colors + +Basic Usage +Styles +Child Node Distribution +Custom Nodes +Expand/Collapse Child Nodes +Set Branch Colors ## API @@ -42,13 +36,13 @@ Common props ref: [Common Graph Properties](./overview#common-graph-properties) ### IndentedTree -| Property | Description | Type | Default Value | -| --- | --- | --- | --- | -| type | Syntax sugar for setting the display style of the indented tree. When `node.component` is set, it takes precedence. | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | -| direction | Syntax sugar for setting the node arrangement direction. When `layout.direction` is set, it takes precedence. | `'left'` \| `'right'` \| `'alternate'` | `'right'` | -| nodeMinWidth | Minimum node width in the indented tree | `number` | `0` | -| nodeMaxWidth | Maximum node width in the indented tree | `number` | `300` | -| layout | Indented tree layout configuration | [`IndentedLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/indented-layout) | `{ type: 'indented' }` | +| Property | Description | Type | Default Value | +| --- | --- | --- | --- | +| type | Syntax sugar for setting the display style of the indented tree. When `node.component` is set, it takes precedence. | `'default'` \| `'linear'` \| `'boxed'` | `'default'` | +| direction | Syntax sugar for setting the node arrangement direction. When `layout.direction` is set, it takes precedence. | `'left'` \| `'right'` \| `'alternate'` | `'right'` | +| nodeMinWidth | Minimum node width in the indented tree | `number` | `0` | +| nodeMaxWidth | Maximum node width in the indented tree | `number` | `300` | +| layout | Indented tree layout configuration | [`IndentedLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/indented-layout) | `{ type: 'indented' }` | | behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | -| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/indented-tree.zh.md b/site/docs/options/graphs/indented-tree.zh.md index dd6bbe7a7..65ca6a14d 100644 --- a/site/docs/options/graphs/indented-tree.zh.md +++ b/site/docs/options/graphs/indented-tree.zh.md @@ -22,19 +22,13 @@ import { IndentedTree } from '@ant-design/graphs'; ## 代码演示 -基本用法 - -风格 - -子节点分布 - -自定义节点 - -展开/收起子节点 - -设置分支颜色 + +基本用法 +风格 +子节点分布 +自定义节点 +展开/收起子节点 +设置分支颜色 ## API diff --git a/site/docs/options/graphs/mind-map.en.md b/site/docs/options/graphs/mind-map.en.md index 79b47896b..53abd1a8a 100644 --- a/site/docs/options/graphs/mind-map.en.md +++ b/site/docs/options/graphs/mind-map.en.md @@ -19,19 +19,13 @@ When information is complex or requires clear logical relationships, organize it ## Examples -Basic Usage - -Styles - -Child Node Distribution - -Custom Nodes - -Collapse/Expand Child Nodes - -Set Branch Colors + +Basic Usage +Styles +Child Node Distribution +Custom Nodes +Collapse/Expand Child Nodes +Set Branch Colors ## API @@ -47,5 +41,5 @@ Common props ref: [Common Graph Properties](./overview#common-graph-properties) | nodeMaxWidth | Maximum width of the mind map nodes | `number` | `300` | | layout | Mind map layout configuration | [`MindmapLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/mindmaplayout) | `{ type: 'mindmap' }` | | behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | -| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/mind-map.zh.md b/site/docs/options/graphs/mind-map.zh.md index da004b879..6d50cafd5 100644 --- a/site/docs/options/graphs/mind-map.zh.md +++ b/site/docs/options/graphs/mind-map.zh.md @@ -19,19 +19,13 @@ import { MindMap } from '@ant-design/graphs'; ## 代码演示 -基本用法 - -风格 - -子节点分布 - -自定义节点 - -展开/收起子节点 - -设置分支颜色 + +基本用法 +风格 +子节点分布 +自定义节点 +展开/收起子节点 +设置分支颜色 ## API diff --git a/site/docs/options/graphs/network-graph.en.md b/site/docs/options/graphs/network-graph.en.md index 17aeda8df..89b5c4bba 100644 --- a/site/docs/options/graphs/network-graph.en.md +++ b/site/docs/options/graphs/network-graph.en.md @@ -19,11 +19,10 @@ Use when you need to visualize nodes and their relationships in a complex networ ## Examples -Basic Usage - -Node Labels - -Node Importance + +Basic Usage +Node Labels +Node Importance ## API @@ -33,5 +32,5 @@ Common props ref: [Common Graph Properties](./overview#common-graph-properties) | --- | --- | --- | --- | | layout | D3 Force layout configuration | [`D3ForceLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/d3-force-layout) | `{ type: 'd3-force' }` | | behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | -| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/network-graph.zh.md b/site/docs/options/graphs/network-graph.zh.md index f8d48bea8..6db7d1534 100644 --- a/site/docs/options/graphs/network-graph.zh.md +++ b/site/docs/options/graphs/network-graph.zh.md @@ -19,11 +19,10 @@ import { NetworkGraph } from '@ant-design/graphs'; ## 代码演示 -基本用法 - -节点标签 - -节点重要性 + +基本用法 +节点标签 +节点重要性 ## API diff --git a/site/docs/options/graphs/organization-chart.en.md b/site/docs/options/graphs/organization-chart.en.md index 178bfa3b2..247194e97 100644 --- a/site/docs/options/graphs/organization-chart.en.md +++ b/site/docs/options/graphs/organization-chart.en.md @@ -22,15 +22,11 @@ import { OrganizationChart } from '@ant-design/graphs'; ## Examples -Basic Usage - -Node Layout - -Custom Nodes - -Collapse/Expand Child Nodes + +Basic Usage +Node Layout +Custom Nodes +Collapse/Expand Child Nodes ## API @@ -43,5 +39,5 @@ Common props ref: [Common Graph Properties](./overview#common-graph-properties) | direction | Syntax sugar for node layout direction. Takes precedence over `layout.rankdir` if set | `'vertical'` \| `'horizontal'` | `'vertical'` | | layout | AntV Dagre layout configuration | [`AntVDagreLayoutOptions`](https://g6.antv.antgroup.com/en/api/layouts/antv-dagre-layout) | `{ type: 'antv-dagre' }` | | behaviors | Set user interaction events, also supports G6 built-in behaviors. For more details on behaviors, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/behavior) | [`BehaviorOptions[]`](https://g6.antv.antgroup.com/en/api/behaviors/brush-select) \| `((existingBehaviors: BehaviorOptions[]) => BehaviorOptions[])` | - | -| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | +| plugins | Set canvas plugins for handling rendering logic and additional component rendering. Also supports G6 built-in plugins. For more details on plugins, refer to [here](https://g6.antv.antgroup.com/en/manual/core-concept/plugin) | [`PluginOptions[]`](https://g6.antv.antgroup.com/en/api/plugins/background) \| `((existingPlugins: PluginOptions[]) => PluginOptions[])` | - | | transforms | Set data transformers to process user input data and convert it into internal flow data. Also supports G6 built-in data transformers. For more details on data transformation, refer to [here](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) | [`TransformOptions[]`](https://g6.antv.antgroup.com/en/api/transforms/map-node-size) \| `((existingTransforms: TransformOptions[]) => TransformOptions[])` | - | diff --git a/site/docs/options/graphs/organization-chart.zh.md b/site/docs/options/graphs/organization-chart.zh.md index 2291175da..e4ad5c89e 100644 --- a/site/docs/options/graphs/organization-chart.zh.md +++ b/site/docs/options/graphs/organization-chart.zh.md @@ -22,15 +22,11 @@ import { OrganizationChart } from '@ant-design/graphs'; ## 代码演示 -基本用法 - -节点排布 - -自定义节点 - -展开/收起子节点 + +基本用法 +节点排布 +自定义节点 +展开/收起子节点 ## API diff --git a/site/package.json b/site/package.json index df9dff40b..9dc6b6b51 100644 --- a/site/package.json +++ b/site/package.json @@ -44,7 +44,7 @@ "dependencies": { "@ant-design/graphs": "workspace:*", "@ant-design/plots": "workspace:*", - "@antv/dumi-theme-antv": "^0.5.4", + "@antv/dumi-theme-antv": "0.5.5-beta.1", "antd": "^5.22.4", "dumi": "^2.4.16", "insert-css": "^2.0.0",