@next-bricks/data-view 1.12.11 → 1.12.13

package/docs/globe-with-halo-indicator.react.md

@@ -0,0 +1,69 @@
+---
+tagName: data-view.globe-with-halo-indicator
+displayName: WrappedDataViewGlobeWithHaloIndicator
+description: 地球加光环的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGlobeWithHaloIndicator
+
+> 地球加光环的数据展示构件。
+
+## 导入
+
+```tsx
+import { WrappedDataViewGlobeWithHaloIndicator } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                    |
+| ---------------- | ------------------ | ---- | ------ | --------------------------------------- |
+| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在环上），最多显示8项 |
+| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心地球内）            |
+| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                      |
+| maxScale         | `number`           | -    | `1`    | 最大缩放比例                            |
+
+## Examples
+
+### Basic
+
+展示地球加光环的完整用法，包含中心数据、环上指标和角落指标。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewGlobeWithHaloIndicator
+    centerDataSource={{ label: "资产总数", value: 30123 }}
+    dataSource={[
+      { label: "低值易耗品", value: 3889 },
+      { label: "摊销资产", value: 2087 },
+      { label: "固定资产", value: 12088 },
+      { label: "无形资产", value: 1082 },
+      { label: "在建工程", value: 10997 },
+    ]}
+    cornerDataSource={[
+      { label: "资产增长", value: 43, color: "red" },
+      { label: "资产减少", value: 21, color: "green" },
+    ]}
+  />
+</div>
+```
+
+### Max Scale
+
+通过 maxScale 限制最大缩放比例。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewGlobeWithHaloIndicator
+    maxScale={0.8}
+    centerDataSource={{ label: "服务总数", value: 8800 }}
+    dataSource={[
+      { label: "健康服务", value: 7200 },
+      { label: "异常服务", value: 1600 },
+    ]}
+    cornerDataSource={[{ label: "新增", value: 55, color: "#83F5E1" }]}
+  />
+</div>
+```

package/docs/globe-with-orbit-indicator.md

@@ -1,9 +1,43 @@
-地球加轨道的数据展示构件。
+---
+tagName: data-view.globe-with-orbit-indicator
+displayName: WrappedDataViewGlobeWithOrbitIndicator
+description: 地球加轨道的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.globe-with-orbit-indicator
+
+> 地球加轨道的数据展示构件。
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                      |
+| ---------------- | ------------------ | ---- | ------ | ----------------------------------------- |
+| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在轨道上），最多显示8项 |
+| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心地球内）              |
+| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                        |
+| maxScale         | `number`           | -    | `1`    | 最大缩放比例                              |
+
+其中 `DataItem` 的类型为：
+
+| 字段  | 类型               | 说明     |
+| ----- | ------------------ | -------- |
+| label | `string`           | 标签文字 |
+| value | `string \| number` | 数值     |
+
+`CornerDataItem` 在 `DataItem` 基础上扩展：
+
+| 字段  | 类型     | 说明           |
+| ----- | -------- | -------------- |
+| color | `string` | 可选，标签颜色 |
 
 ## Examples
 
 ### Basic
 
+展示地球加轨道的完整用法，包含中心数据、轨道上指标和角落指标。
+
 ```yaml preview height="660px"
 brick: div
 properties:
@@ -42,3 +76,35 @@ children:
         args:
           - dark-v2
 ```
+
+### Max Scale
+
+通过 maxScale 限制最大缩放比例。
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.globe-with-orbit-indicator
+    properties:
+      maxScale: 0.8
+      centerDataSource:
+        label: 主机总数
+        value: 6000
+      dataSource:
+        - label: 运行中
+          value: 5200
+        - label: 已停止
+          value: 800
+      cornerDataSource:
+        - label: 新增主机
+          value: 30
+          color: "#83F5E1"
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```

package/docs/globe-with-orbit-indicator.react.md

@@ -0,0 +1,70 @@
+---
+tagName: data-view.globe-with-orbit-indicator
+displayName: WrappedDataViewGlobeWithOrbitIndicator
+description: 地球加轨道的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGlobeWithOrbitIndicator
+
+> 地球加轨道的数据展示构件。
+
+## 导入
+
+```tsx
+import { WrappedDataViewGlobeWithOrbitIndicator } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                      |
+| ---------------- | ------------------ | ---- | ------ | ----------------------------------------- |
+| dataSource       | `DataItem[]`       | -    | -      | 指标数据列表（显示在轨道上），最多显示8项 |
+| centerDataSource | `DataItem`         | -    | -      | 中心数据（显示在中心地球内）              |
+| cornerDataSource | `CornerDataItem[]` | -    | -      | 左上角指标数据列表                        |
+| maxScale         | `number`           | -    | `1`    | 最大缩放比例                              |
+
+## Examples
+
+### Basic
+
+展示地球加轨道的完整用法，包含中心数据、轨道上指标和角落指标。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewGlobeWithOrbitIndicator
+    centerDataSource={{ label: "资产总数", value: 30123 }}
+    dataSource={[
+      { label: "低值易耗品", value: 3889 },
+      { label: "摊销资产", value: 2087 },
+      { label: "固定资产", value: 12088 },
+      { label: "无形资产", value: 1082 },
+      { label: "在建工程", value: 10997 },
+      { label: "其他资产", value: 4203 },
+    ]}
+    cornerDataSource={[
+      { label: "资产增长", value: 43, color: "red" },
+      { label: "资产减少", value: 21, color: "green" },
+    ]}
+  />
+</div>
+```
+
+### Max Scale
+
+通过 maxScale 限制最大缩放比例。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewGlobeWithOrbitIndicator
+    maxScale={0.8}
+    centerDataSource={{ label: "主机总数", value: 6000 }}
+    dataSource={[
+      { label: "运行中", value: 5200 },
+      { label: "已停止", value: 800 },
+    ]}
+    cornerDataSource={[{ label: "新增主机", value: 30, color: "#83F5E1" }]}
+  />
+</div>
+```

package/docs/graph-layout-grid.md

@@ -1,97 +1,120 @@
-有规律的网格布局的拓扑
+---
+tagName: data-view.graph-layout-grid
+displayName: WrappedDataViewGraphLayoutGrid
+description: Graph grid 布局
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.graph-layout-grid
+
+> Graph grid 布局
+
+## Props
+
+| 属性       | 类型               | 必填 | 默认值 | 说明                                                                                           |
+| ---------- | ------------------ | ---- | ------ | ---------------------------------------------------------------------------------------------- |
+| columns    | `number`           | 是   | -      | 布局的列数                                                                                     |
+| rows       | `number`           | 是   | -      | 布局的行数                                                                                     |
+| dataSource | `DataSourceType[]` | -    | -      | 数据源，每项包含 text、value 和 url 字段                                                       |
+| isReverse  | `boolean`          | -    | -      | 布局是否反转。默认奇数行位置13579…，偶数行位置02468…；反转后偶数行位置13579…，奇数行位置02468… |
 
 ## Examples
 
 ### Basic
 
+展示 graph grid 布局的基本用法，按网格规律排列图文节点。
+
 ```yaml preview
-- brick: data-view.graph-layout-grid
-  properties:
-    columns: 7
-    rows: 3
-    style:
-      width: 960px
-      height: 600px
-      display: block
-      background-color: "#1c1e21"
-    dataSource:
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 应用
-        value: 7348
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 存储卷数
-        value: 638
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 应用
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 守护进程数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 容器组数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 无状态服务数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+brick: data-view.graph-layout-grid
+properties:
+  columns: 7
+  rows: 3
+  style:
+    width: 960px
+    height: 600px
+    display: block
+    background-color: "#1c1e21"
+  dataSource:
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 应用
+      value: 7348
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 存储卷数
+      value: 638
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 应用
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 守护进程数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 容器组数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 无状态服务数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
 ```
 
 ### IsReverse
 
+开启 isReverse 后，节点排布方式按偶数行优先排列。
+
 ```yaml preview
-- brick: data-view.graph-layout-grid
-  properties:
-    columns: 7
-    rows: 3
-    isReverse: true
-    style:
-      width: 960px
-      height: 600px
-      display: block
-      background-color: "#1c1e21"
-    dataSource:
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 应用
-        value: 7348
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 存储卷数
-        value: 638
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 应用
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 守护进程数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 容器组数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 无状态服务数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-      - text: 负载均衡数
-        value: 200
-        url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+brick: data-view.graph-layout-grid
+properties:
+  columns: 7
+  rows: 3
+  isReverse: true
+  style:
+    width: 960px
+    height: 600px
+    display: block
+    background-color: "#1c1e21"
+  dataSource:
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 应用
+      value: 7348
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 存储卷数
+      value: 638
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 应用
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 守护进程数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 容器组数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 无状态服务数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+    - text: 负载均衡数
+      value: 200
+      url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
 ```

package/docs/graph-layout-grid.react.md

@@ -0,0 +1,172 @@
+---
+tagName: data-view.graph-layout-grid
+displayName: WrappedDataViewGraphLayoutGrid
+description: Graph grid 布局
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGraphLayoutGrid
+
+> Graph grid 布局
+
+## 导入
+
+```tsx
+import { WrappedDataViewGraphLayoutGrid } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性       | 类型               | 必填 | 默认值 | 说明                                                                                           |
+| ---------- | ------------------ | ---- | ------ | ---------------------------------------------------------------------------------------------- |
+| columns    | `number`           | 是   | -      | 布局的列数                                                                                     |
+| rows       | `number`           | 是   | -      | 布局的行数                                                                                     |
+| dataSource | `DataSourceType[]` | -    | -      | 数据源，每项包含 text、value 和 url 字段                                                       |
+| isReverse  | `boolean`          | -    | -      | 布局是否反转。默认奇数行位置13579…，偶数行位置02468…；反转后偶数行位置13579…，奇数行位置02468… |
+
+## Examples
+
+### Basic
+
+展示 graph grid 布局的基本用法，按网格规律排列图文节点。
+
+```tsx
+<WrappedDataViewGraphLayoutGrid
+  columns={7}
+  rows={3}
+  style={{
+    width: "960px",
+    height: "600px",
+    display: "block",
+    backgroundColor: "#1c1e21",
+  }}
+  dataSource={[
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "应用",
+      value: 7348,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "存储卷数",
+      value: 638,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "应用",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "守护进程数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "容器组数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "无状态服务数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+  ]}
+/>
+```
+
+### IsReverse
+
+开启 isReverse 后，节点排布方式按偶数行优先排列。
+
+```tsx
+<WrappedDataViewGraphLayoutGrid
+  columns={7}
+  rows={3}
+  isReverse={true}
+  style={{
+    width: "960px",
+    height: "600px",
+    display: "block",
+    backgroundColor: "#1c1e21",
+  }}
+  dataSource={[
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "应用",
+      value: 7348,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "存储卷数",
+      value: 638,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "应用",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "守护进程数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "容器组数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "无状态服务数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+    {
+      text: "负载均衡数",
+      value: 200,
+      url: "https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png",
+    },
+  ]}
+/>
+```

package/docs/graph-node.md

@@ -1,14 +1,32 @@
-data-view.graph-node
+---
+tagName: data-view.graph-node
+displayName: WrappedDataViewGraphNode
+description: Graph Node
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.graph-node
+
+> Graph Node
+
+## Props
+
+| 属性 | 类型     | 必填 | 默认值 | 说明         |
+| ---- | -------- | ---- | ------ | ------------ |
+| url  | `string` | 是   | -      | 节点图片路径 |
 
 ## Examples
 
 ### Basic
 
+展示 graph 节点的基本用法，通过 url 指定节点图片。
+
 ```yaml preview
-- brick: data-view.graph-node
-  properties:
-    url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
-    style:
-      width: 140px
-      display: block
+brick: data-view.graph-node
+properties:
+  url: https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png
+  style:
+    width: 140px
+    display: block
 ```

package/docs/graph-node.react.md

@@ -0,0 +1,36 @@
+---
+tagName: data-view.graph-node
+displayName: WrappedDataViewGraphNode
+description: Graph Node
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewGraphNode
+
+> Graph Node
+
+## 导入
+
+```tsx
+import { WrappedDataViewGraphNode } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性 | 类型     | 必填 | 默认值 | 说明         |
+| ---- | -------- | ---- | ------ | ------------ |
+| url  | `string` | 是   | -      | 节点图片路径 |
+
+## Examples
+
+### Basic
+
+展示 graph 节点的基本用法，通过 url 指定节点图片。
+
+```tsx
+<WrappedDataViewGraphNode
+  url="https://user-assets.sxlcdn.com/images/367275/FtgabYjUD_Xhmne2wsyLPcKqlgCi.png"
+  style={{ width: "140px", display: "block" }}
+/>
+```