@next-bricks/data-view 1.12.11 → 1.12.12

package/docs/bubbles-indicator.md

@@ -1,9 +1,30 @@
-构件 `data-view.bubbles-indicator`
+---
+tagName: data-view.bubbles-indicator
+displayName: WrappedDataViewBubblesIndicator
+description: 气泡样式的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.bubbles-indicator
+
+> 气泡样式的数据展示构件。
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                             |
+| ---------------- | ------------------ | ---- | ------ | ------------------------------------------------ |
+| dataSource       | `DataItem[]`       | 否   | -      | 指标数据列表（显示在环上），注意最多显示12项数据 |
+| centerDataSource | `DataItem`         | 否   | -      | 中心数据（显示在中心水晶球内）                   |
+| cornerDataSource | `CornerDataItem[]` | 否   | -      | 左上角指标数据列表                               |
+| maxScale         | `number`           | 否   | `1`    | 最大缩放比例                                     |
 
 ## Examples
 
 ### Basic
 
+展示气泡指标构件的基本用法，包含中心数据、环上指标数据及左上角角标数据（仅在暗色主题下生效）。
+
 ```yaml preview height="660px"
 brick: div
 properties:
@@ -33,6 +54,7 @@ children:
         - label: 资产减少
           value: 21
           color: green
+      maxScale: 1
     # Currently this brick only works within dark theme
     lifeCycle:
       onPageLoad:

package/docs/bubbles-indicator.react.md

@@ -0,0 +1,52 @@
+---
+tagName: data-view.bubbles-indicator
+displayName: WrappedDataViewBubblesIndicator
+description: 气泡样式的数据展示构件。
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewBubblesIndicator
+
+> 气泡样式的数据展示构件。
+
+## 导入
+
+```tsx
+import { WrappedDataViewBubblesIndicator } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性             | 类型               | 必填 | 默认值 | 说明                                             |
+| ---------------- | ------------------ | ---- | ------ | ------------------------------------------------ |
+| dataSource       | `DataItem[]`       | 否   | -      | 指标数据列表（显示在环上），注意最多显示12项数据 |
+| centerDataSource | `DataItem`         | 否   | -      | 中心数据（显示在中心水晶球内）                   |
+| cornerDataSource | `CornerDataItem[]` | 否   | -      | 左上角指标数据列表                               |
+| maxScale         | `number`           | 否   | `1`    | 最大缩放比例                                     |
+
+## Examples
+
+### Basic
+
+展示气泡指标构件的基本用法，包含中心数据、环上指标数据及左上角角标数据（仅在暗色主题下生效）。
+
+```tsx
+<div style={{ height: "calc(100vh - 2em)" }}>
+  <WrappedDataViewBubblesIndicator
+    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" },
+    ]}
+    maxScale={1}
+  />
+</div>
+```

package/docs/cabinet-app-layer.md

@@ -1,9 +1,28 @@
-data-view.cabinet-app-layer
+---
+tagName: data-view.cabinet-app-layer
+displayName: WrappedDataViewCabinetAppLayer
+description: cabinet子构件----应用层
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.cabinet-app-layer
+
+> cabinet子构件----应用层
+
+## Props
+
+| 属性     | 类型                  | 必填 | 默认值 | 说明     |
+| -------- | --------------------- | ---- | ------ | -------- |
+| appTitle | `string`              | 是   | -      | 标题     |
+| status   | `"active" \| "faded"` | 否   | -      | 当前状态 |
 
 ## Examples
 
 ### Basic
 
+展示 cabinet 应用层子构件的基本用法。
+
 ```yaml preview
 - brick: data-view.cabinet-app-layer
   properties:
@@ -12,3 +31,32 @@ data-view.cabinet-app-layer
       width: 600px
       background-color: "#1c1e21"
 ```
+
+### Status
+
+展示不同状态下的 cabinet 应用层。
+
+```yaml preview
+- brick: div
+  properties:
+    textContent: active 状态
+- brick: data-view.cabinet-app-layer
+  properties:
+    appTitle: inventory-api
+    status: active
+    style:
+      width: 600px
+      background-color: "#1c1e21"
+- brick: div
+  properties:
+    textContent: faded 状态
+    style:
+      margin-top: 20px
+- brick: data-view.cabinet-app-layer
+  properties:
+    appTitle: inventory-api
+    status: faded
+    style:
+      width: 600px
+      background-color: "#1c1e21"
+```

package/docs/cabinet-app-layer.react.md

@@ -0,0 +1,58 @@
+---
+tagName: data-view.cabinet-app-layer
+displayName: WrappedDataViewCabinetAppLayer
+description: cabinet子构件----应用层
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewCabinetAppLayer
+
+> cabinet子构件----应用层
+
+## 导入
+
+```tsx
+import { WrappedDataViewCabinetAppLayer } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性     | 类型                  | 必填 | 默认值 | 说明     |
+| -------- | --------------------- | ---- | ------ | -------- |
+| appTitle | `string`              | 是   | -      | 标题     |
+| status   | `"active" \| "faded"` | 否   | -      | 当前状态 |
+
+## Examples
+
+### Basic
+
+展示 cabinet 应用层子构件的基本用法。
+
+```tsx
+<WrappedDataViewCabinetAppLayer
+  style={{ width: "600px", backgroundColor: "#1c1e21" }}
+  appTitle="inventory-api"
+/>
+```
+
+### Status
+
+展示不同状态下的 cabinet 应用层。
+
+```tsx
+<>
+  <div>active 状态</div>
+  <WrappedDataViewCabinetAppLayer
+    style={{ width: "600px", backgroundColor: "#1c1e21" }}
+    appTitle="inventory-api"
+    status="active"
+  />
+  <div style={{ marginTop: "20px" }}>faded 状态</div>
+  <WrappedDataViewCabinetAppLayer
+    style={{ width: "600px", backgroundColor: "#1c1e21" }}
+    appTitle="inventory-api"
+    status="faded"
+  />
+</>
+```

package/docs/cabinet-button.md

@@ -1,9 +1,27 @@
-data-view.cabinet-button
+---
+tagName: data-view.cabinet-button
+displayName: WrappedDataViewCabinetButton
+description: 大屏按钮
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# data-view.cabinet-button
+
+> 大屏按钮
+
+## Props
+
+| 属性        | 类型                  | 必填 | 默认值 | 说明       |
+| ----------- | --------------------- | ---- | ------ | ---------- |
+| buttonStyle | `React.CSSProperties` | 否   | -      | 按钮的样式 |
 
 ## Examples
 
 ### Basic
 
+展示一个带自定义样式的大屏关闭按钮。
+
 ```yaml preview
 - brick: data-view.cabinet-button
   properties:

package/docs/cabinet-button.react.md

@@ -0,0 +1,39 @@
+---
+tagName: data-view.cabinet-button
+displayName: WrappedDataViewCabinetButton
+description: 大屏按钮
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewCabinetButton
+
+> 大屏按钮
+
+## 导入
+
+```tsx
+import { WrappedDataViewCabinetButton } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                  | 必填 | 默认值 | 说明       |
+| ----------- | --------------------- | ---- | ------ | ---------- |
+| buttonStyle | `React.CSSProperties` | 否   | -      | 按钮的样式 |
+
+## Examples
+
+### Basic
+
+展示一个带自定义样式的大屏关闭按钮。
+
+```tsx
+<WrappedDataViewCabinetButton
+  buttonStyle={{
+    width: "50px",
+    height: "50px",
+    background: "#1c1e21",
+  }}
+/>
+```

package/docs/cabinet-container.md

@@ -1,9 +1,37 @@
-data-view.cabinet-container
+---
+tagName: data-view.cabinet-container
+displayName: WrappedDataViewCabinetContainer
+description: 大屏集群容器构件
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# data-view.cabinet-container
+
+> 大屏集群容器构件
+
+## Props
+
+| 属性        | 类型                  | 必填 | 默认值   | 说明                                                  |
+| ----------- | --------------------- | ---- | -------- | ----------------------------------------------------- |
+| type        | `ContainerType`       | 是   | `"host"` | 容器类型，host、k8s（主题橙色）、k8s-blue（蓝色主题） |
+| data        | `CabinetNodeProps[]`  | 是   | `[]`     | 数据                                                  |
+| status      | `"active" \| "faded"` | 否   | -        | 当前状态,是否高亮或者淡化                             |
+| customTitle | `string \| undefined` | 否   | -        | 容器标题                                              |
+
+## Events
+
+| 事件              | detail                                                                                                                       | 说明                       |
+| ----------------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| container.click   | `ClickEventDataType` — { type: 点击对象类型（"node" 或 "container"）, data: 被点击节点的数据（点击容器本身时为 undefined） } | 节点或者container 点击事件 |
+| container.dbclick | `ClickEventDataType` — { type: 点击对象类型（"node" 或 "container"）, data: 被双击节点的数据（双击容器本身时为 undefined） } | 节点或者container 双击事件 |
 
 ## Examples
 
 ### Basic
 
+展示一个基本的大屏集群容器，包含若干物理机节点。
+
 ```yaml preview
 - brick: data-view.cabinet-container
   properties:
@@ -20,6 +48,8 @@ data-view.cabinet-container
 
 ### Status
 
+展示高亮状态下的集群容器。
+
 ```yaml preview
 - brick: data-view.cabinet-container
   properties:
@@ -34,3 +64,27 @@ data-view.cabinet-container
       width: 400px
       height: 500px
 ```
+
+### Click events
+
+演示节点和容器的点击与双击事件处理。
+
+```yaml preview
+- brick: data-view.cabinet-container
+  properties:
+    type: k8s
+    customTitle: K8S集群
+    data:
+      - type: container-group
+        nodeTitle: "容器组A"
+      - type: pod
+        nodeTitle: "Pod-1"
+    style:
+      width: 400px
+      height: 500px
+  events:
+    container.click:
+      - action: console.log
+    container.dbclick:
+      - action: console.log
+```

package/docs/cabinet-container.react.md

@@ -0,0 +1,84 @@
+---
+tagName: data-view.cabinet-container
+displayName: WrappedDataViewCabinetContainer
+description: 大屏集群容器构件
+category: ""
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewCabinetContainer
+
+> 大屏集群容器构件
+
+## 导入
+
+```tsx
+import { WrappedDataViewCabinetContainer } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性        | 类型                  | 必填 | 默认值   | 说明                                                  |
+| ----------- | --------------------- | ---- | -------- | ----------------------------------------------------- |
+| type        | `ContainerType`       | 是   | `"host"` | 容器类型，host、k8s（主题橙色）、k8s-blue（蓝色主题） |
+| data        | `CabinetNodeProps[]`  | 是   | `[]`     | 数据                                                  |
+| status      | `"active" \| "faded"` | 否   | -        | 当前状态,是否高亮或者淡化                             |
+| customTitle | `string \| undefined` | 否   | -        | 容器标题                                              |
+
+## Events
+
+| 事件               | detail                                                                                                                       | 说明                       |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
+| onContainerClick   | `ClickEventDataType` — { type: 点击对象类型（"node" 或 "container"）, data: 被点击节点的数据（点击容器本身时为 undefined） } | 节点或者container 点击事件 |
+| onContainerDbclick | `ClickEventDataType` — { type: 点击对象类型（"node" 或 "container"）, data: 被双击节点的数据（双击容器本身时为 undefined） } | 节点或者container 双击事件 |
+
+## Examples
+
+### Basic
+
+展示一个基本的大屏集群容器，包含若干物理机节点。
+
+```tsx
+<WrappedDataViewCabinetContainer
+  customTitle="集群容器"
+  data={[
+    { type: "physical-machine", nodeTitle: "255.255.255" },
+    { type: "physical-machine", nodeTitle: "255.255.255" },
+  ]}
+  style={{ width: "400px", height: "500px" }}
+/>
+```
+
+### Status
+
+展示高亮状态下的集群容器。
+
+```tsx
+<WrappedDataViewCabinetContainer
+  customTitle="集群容器"
+  status="active"
+  data={[
+    { type: "physical-machine", nodeTitle: "255.255.255" },
+    { type: "physical-machine", nodeTitle: "255.255.255" },
+  ]}
+  style={{ width: "400px", height: "500px" }}
+/>
+```
+
+### Click events
+
+演示节点和容器的点击与双击事件处理。
+
+```tsx
+<WrappedDataViewCabinetContainer
+  type="k8s"
+  customTitle="K8S集群"
+  data={[
+    { type: "container-group", nodeTitle: "容器组A" },
+    { type: "pod", nodeTitle: "Pod-1" },
+  ]}
+  style={{ width: "400px", height: "500px" }}
+  onContainerClick={(e) => console.log(e.detail)}
+  onContainerDbclick={(e) => console.log(e.detail)}
+/>
+```

package/docs/cabinet-graph.md

@@ -1,9 +1,37 @@
-data-view.cabinet-graph 部署架构拓扑
+---
+tagName: data-view.cabinet-graph
+displayName: WrappedDataViewCabinetGraph
+description: cabinet 部署架构拓扑
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.cabinet-graph
+
+> cabinet 部署架构拓扑
+
+## Props
+
+| 属性           | 类型                 | 必填 | 默认值 | 说明                 |
+| -------------- | -------------------- | ---- | ------ | -------------------- |
+| dataSource     | `AppData`            | 是   | -      | 数据源               |
+| activeKey      | `string \| string[]` | 否   | -      | 选中项，支持数组     |
+| hiddenCloseBtn | `boolean`            | 否   | -      | 取消按钮是否需要展示 |
+
+## Events
+
+| 事件               | detail                                                                                                                 | 说明                                   |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| close.button.click | `void`                                                                                                                 | 关闭按钮点击事件                       |
+| cabinet.click      | `{ type: ChangeType, data: Record<string, any> }` — { type: 点击类型（node/cluster/layer），data: 对应节点或集群数据 } | 节点或外层的点击事件                   |
+| cabinet.dbclick    | `{ type: ChangeType, data: Record<string, any> }` — { type: 双击类型（node/cluster），data: 对应节点或集群数据 }       | 节点或外层的双击事件，目前不支持应用层 |
 
 ## Examples
 
 ### Basic
 
+展示 cabinet 部署架构拓扑构件的基本用法，包含物理机、虚拟机和容器组节点。
+
 ```yaml preview
 - brick: data-view.cabinet-graph
   properties:
@@ -51,4 +79,36 @@ data-view.cabinet-graph 部署架构拓扑
             - nodeTitle: b容器组
               key: bb
               type: pod
+  events:
+    cabinet.click:
+      action: console.log
+    cabinet.dbclick:
+      action: console.log
+    close.button.click:
+      action: console.log
+```
+
+### 隐藏关闭按钮
+
+展示隐藏关闭按钮的部署架构拓扑。
+
+```yaml preview
+- brick: data-view.cabinet-graph
+  properties:
+    hiddenCloseBtn: true
+    activeKey: k8s-cluster
+    dataSource:
+      appName: my-app
+      key: my-app
+      clusters:
+        - clusterName: K8S集群
+          key: k8s-cluster
+          type: k8s
+          nodes:
+            - nodeTitle: web容器组
+              key: web-pod
+              type: container-group
+            - nodeTitle: api容器组
+              key: api-pod
+              type: container-group
 ```

package/docs/cabinet-graph.react.md

@@ -0,0 +1,131 @@
+---
+tagName: data-view.cabinet-graph
+displayName: WrappedDataViewCabinetGraph
+description: cabinet 部署架构拓扑
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewCabinetGraph
+
+> cabinet 部署架构拓扑
+
+## 导入
+
+```tsx
+import { WrappedDataViewCabinetGraph } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性           | 类型                 | 必填 | 默认值 | 说明                 |
+| -------------- | -------------------- | ---- | ------ | -------------------- |
+| dataSource     | `AppData`            | 是   | -      | 数据源               |
+| activeKey      | `string \| string[]` | 否   | -      | 选中项，支持数组     |
+| hiddenCloseBtn | `boolean`            | 否   | -      | 取消按钮是否需要展示 |
+
+## Events
+
+| 事件               | detail                                                                                                                 | 说明                                   |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
+| onCloseButtonClick | `void`                                                                                                                 | 关闭按钮点击事件                       |
+| onCabinetClick     | `{ type: ChangeType, data: Record<string, any> }` — { type: 点击类型（node/cluster/layer），data: 对应节点或集群数据 } | 节点或外层的点击事件                   |
+| onCabinetDbclick   | `{ type: ChangeType, data: Record<string, any> }` — { type: 双击类型（node/cluster），data: 对应节点或集群数据 }       | 节点或外层的双击事件，目前不支持应用层 |
+
+## Examples
+
+### Basic
+
+展示 cabinet 部署架构拓扑构件的基本用法，包含物理机、虚拟机和容器组节点。
+
+```tsx
+<WrappedDataViewCabinetGraph
+  dataSource={{
+    appName: "inventory-api",
+    key: "inventory-api",
+    clusters: [
+      {
+        clusterName: "inventory-api##aaaaa",
+        key: "inventory-api##aaaaa",
+        type: "host",
+        nodes: [
+          {
+            nodeTitle: "244.244.244.244",
+            key: "244.244.244.244",
+            type: "physical-machine",
+            isAlert: true,
+          },
+          {
+            nodeTitle: "244.244.244.245",
+            key: "244.244.244.245",
+            type: "virtual-machine",
+            isAlert: true,
+          },
+          {
+            nodeTitle: "244.244.245.245",
+            key: "244.244.245.245",
+            type: "physical-machine",
+          },
+          {
+            nodeTitle: "244.244.245.244",
+            key: "244.244.245.244",
+            type: "virtual-machine",
+          },
+        ],
+      },
+      {
+        clusterName: "K8S集群xxx",
+        key: "k8s-cluster",
+        type: "k8s",
+        nodes: [
+          {
+            nodeTitle: "a容器组",
+            key: "aa",
+            type: "container-group",
+            isAlert: true,
+          },
+          { nodeTitle: "b容器组", key: "bb", type: "container-group" },
+        ],
+      },
+      {
+        clusterName: "K8S集群xx",
+        key: "xxxx",
+        type: "k8s-blue",
+        nodes: [
+          { nodeTitle: "a容器组", key: "aa", type: "pod", isAlert: true },
+          { nodeTitle: "b容器组", key: "bb", type: "pod" },
+        ],
+      },
+    ],
+  }}
+  onCabinetClick={(e) => console.log(e.detail)}
+  onCabinetDbclick={(e) => console.log(e.detail)}
+  onCloseButtonClick={(e) => console.log(e.detail)}
+/>
+```
+
+### 隐藏关闭按钮
+
+展示隐藏关闭按钮的部署架构拓扑。
+
+```tsx
+<WrappedDataViewCabinetGraph
+  hiddenCloseBtn={true}
+  activeKey="k8s-cluster"
+  dataSource={{
+    appName: "my-app",
+    key: "my-app",
+    clusters: [
+      {
+        clusterName: "K8S集群",
+        key: "k8s-cluster",
+        type: "k8s",
+        nodes: [
+          { nodeTitle: "web容器组", key: "web-pod", type: "container-group" },
+          { nodeTitle: "api容器组", key: "api-pod", type: "container-group" },
+        ],
+      },
+    ],
+  }}
+/>
+```