@next-bricks/data-view 1.12.11 → 1.12.12

package/docs/app-wall.react.md

@@ -0,0 +1,235 @@
+---
+tagName: data-view.app-wall
+displayName: WrappedDataViewAppWall
+description: 应用墙
+category: big-screen-layout
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewAppWall
+
+> 应用墙
+
+## 导入
+
+```tsx
+import { WrappedDataViewAppWall } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性                      | 类型                       | 必填 | 默认值                                                                                        | 说明                                                                                    |
+| ------------------------- | -------------------------- | ---- | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
+| dataSource                | `AppData[]`                | 是   | -                                                                                             | 数据                                                                                    |
+| relations                 | `Relation[]`               | 是   | -                                                                                             | 关系                                                                                    |
+| cardSize                  | `CardSize`                 | 否   | `{ width: 120, height: 160, outerWidth: 140, outerHeight: 180, lgWidth: 180, lgHeight: 240 }` | 卡的大小配置，注意这里卡片大小宽高将影响T台大小展示                                     |
+| cardBrickName             | `AppWallCardBrickNameType` | 否   | `"data-view.app-wall-card-item"`                                                              | 卡片支持的构件类型                                                                      |
+| useDblclick               | `boolean`                  | 否   | -                                                                                             | 是否使用双击事件，开启之后卡片不会触发内部dblclick事件展示梯台                          |
+| useDistanceConfig         | `boolean`                  | 否   | -                                                                                             | 是否使用内置的distanceConfig配置                                                        |
+| disabledDefaultClickEvent | `boolean`                  | 否   | -                                                                                             | 是否禁用触发默认单击事件，开启之后卡片不会触发内部click事件展示卡片，直接抛出了点击事件 |
+| containerId               | `string`                   | 否   | -                                                                                             | 容器id，用于监听容器大小                                                                |
+| noRotate                  | `boolean`                  | 否   | -                                                                                             | 控制是否旋转                                                                            |
+| boundMargin               | `number`                   | 否   | `100`                                                                                         | 四周的边距                                                                              |
+| useSystemPopover          | `boolean`                  | 否   | -                                                                                             | 是否使用系统卡片popover                                                                 |
+
+## Events
+
+| 事件                    | detail                                         | 说明                                                                   |
+| ----------------------- | ---------------------------------------------- | ---------------------------------------------------------------------- |
+| onSystemCardButtonClick | `AppData` — 当前点击的应用数据                 | 系统卡片详情按钮点击事件                                               |
+| onLeftBtnClick          | `AppData` — 展示台左边按钮点击时传出的应用数据 | 展示台左边按钮点击事件                                                 |
+| onRightBtnClick         | `AppData` — 展示台右边按钮点击时传出的应用数据 | 展示台右边按钮点击事件                                                 |
+| onOnCardDbclick         | `AppData` — 双击卡片时传出的应用数据           | 卡片双击事件，useDblclick 为 true 或当前节点 clusters 属性无数据时触发 |
+| onCardClick             | `AppData` — 单击卡片时传出的应用数据           | 卡片单击事件，disabledDefaultClickEvent 为 true 时点击卡片触发         |
+
+## Examples
+
+### Basic
+
+展示包含多个应用节点和关系连线的三维应用墙。
+
+```tsx
+<WrappedDataViewAppWall
+  style={{ width: "1000px", height: "600px", backgroundColor: "#1c1e21" }}
+  relations={[
+    { source: "5e63e70340f6f", target: "5e63e70340f76" },
+    { source: "5e63e70340f73", target: "5e63e70340f6f" },
+    { source: "5e63e70340f73", target: "5e63e70340f81" },
+  ]}
+  dataSource={[
+    {
+      key: "5e63e70340f6f",
+      status: "normal",
+      cardItemProps: {
+        status: "normal",
+        cardTitle: "diss",
+        description: "数字孪生门店",
+      },
+      systemCardProps: {
+        status: "normal",
+        cardTitle: "数字孪生门店",
+        itemList: [
+          { key: "实例ID", value: "5d570a851bef6" },
+          { key: "系统英文名称", value: "app-fms" },
+          { key: "系统中文名称", value: "A财务系统" },
+        ],
+        buttonName: "应用墙大屏",
+      },
+      trapezoidalProps: {
+        leftBtnName: "应用健康监控大屏",
+        rightBtnName: "应用部署架构",
+      },
+    },
+    {
+      key: "5e63e70340f51",
+      status: "normal",
+      cardItemProps: {
+        status: "normal",
+        cardTitle: "img",
+        description: "购物系统",
+      },
+      systemCardProps: {
+        status: "normal",
+        cardTitle: "购物系统",
+        itemList: [
+          { key: "实例ID", value: "5d570a851bef7" },
+          { key: "系统英文名称", value: "app-shop" },
+          { key: "系统中文名称", value: "购物系统" },
+        ],
+        buttonName: "应用墙大屏",
+      },
+      trapezoidalProps: {
+        leftBtnName: "应用健康监控大屏",
+        rightBtnName: "应用部署架构",
+      },
+    },
+    {
+      key: "5e63e70340f73",
+      status: "warning",
+      cardItemProps: {
+        status: "warning",
+        cardTitle: "crm",
+        description: "零售CRM",
+      },
+      systemCardProps: {
+        status: "warning",
+        cardTitle: "零售CRM",
+        itemList: [
+          { key: "实例ID", value: "5d570a851bef8" },
+          { key: "系统英文名称", value: "app-crm" },
+          { key: "系统中文名称", value: "零售CRM" },
+        ],
+        buttonName: "应用墙大屏",
+      },
+      trapezoidalProps: {
+        leftBtnName: "应用健康监控大屏",
+        rightBtnName: "应用部署架构",
+      },
+    },
+    {
+      key: "5e63e70340f76",
+      status: "normal",
+      cardItemProps: {
+        status: "normal",
+        cardTitle: "pos",
+        description: "店铺收银系统",
+      },
+      systemCardProps: {
+        status: "normal",
+        cardTitle: "店铺收银系统",
+        itemList: [
+          { key: "实例ID", value: "5d570a851bef9" },
+          { key: "系统英文名称", value: "app-pos" },
+          { key: "系统中文名称", value: "店铺收银系统" },
+        ],
+        buttonName: "应用墙大屏",
+      },
+      trapezoidalProps: {
+        leftBtnName: "应用健康监控大屏",
+        rightBtnName: "应用部署架构",
+      },
+    },
+    {
+      key: "5e63e70340f81",
+      status: "normal",
+      cardItemProps: {
+        status: "normal",
+        cardTitle: "pay",
+        description: "支付中心",
+      },
+      systemCardProps: {
+        status: "normal",
+        cardTitle: "支付中心",
+        itemList: [
+          { key: "实例ID", value: "5d570a851befa" },
+          { key: "系统英文名称", value: "app-pay" },
+          { key: "系统中文名称", value: "支付中心" },
+        ],
+        buttonName: "应用墙大屏",
+      },
+      trapezoidalProps: {
+        leftBtnName: "应用健康监控大屏",
+        rightBtnName: "应用部署架构",
+      },
+    },
+  ]}
+  boundMargin={80}
+  noRotate={false}
+  useSystemPopover={true}
+  onSystemCardButtonClick={(e) => console.log(e.detail)}
+  onLeftBtnClick={(e) => console.log(e.detail)}
+  onRightBtnClick={(e) => console.log(e.detail)}
+  onCardClick={(e) => console.log(e.detail)}
+  onOnCardDbclick={(e) => console.log(e.detail)}
+/>
+```
+
+### 禁用默认点击行为
+
+设置 disabledDefaultClickEvent 为 true，点击卡片时直接抛出 card.click 事件，不展示内部卡片详情。
+
+```tsx
+<WrappedDataViewAppWall
+  style={{ width: "1000px", height: "600px", backgroundColor: "#1c1e21" }}
+  disabledDefaultClickEvent={true}
+  useDblclick={true}
+  useDistanceConfig={true}
+  dataSource={[
+    {
+      key: "node-1",
+      status: "normal",
+      cardItemProps: {
+        status: "normal",
+        cardTitle: "app-a",
+        description: "应用A",
+      },
+      systemCardProps: {
+        status: "normal",
+        cardTitle: "应用A",
+        itemList: [{ key: "实例ID", value: "inst-001" }],
+        buttonName: "详情",
+      },
+      trapezoidalProps: { leftBtnName: "健康监控", rightBtnName: "部署架构" },
+    },
+    {
+      key: "node-2",
+      status: "error",
+      cardItemProps: {
+        status: "error",
+        cardTitle: "app-b",
+        description: "应用B",
+      },
+      systemCardProps: {
+        status: "error",
+        cardTitle: "应用B",
+        itemList: [{ key: "实例ID", value: "inst-002" }],
+        buttonName: "详情",
+      },
+      trapezoidalProps: { leftBtnName: "健康监控", rightBtnName: "部署架构" },
+    },
+  ]}
+  relations={[{ source: "node-1", target: "node-2" }]}
+  onCardClick={(e) => console.log(e.detail)}
+  onOnCardDbclick={(e) => console.log(e.detail)}
+/>
+```

package/docs/basic-index-group.md

@@ -1,9 +1,30 @@
-构件 `data-view.basic-index-group`
+---
+tagName: data-view.basic-index-group
+displayName: WrappedDataViewBasicIndexGroup
+description: 基础指标组构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.basic-index-group
+
+> 基础指标组构件
+
+## Props
+
+| 属性     | 类型          | 必填 | 默认值         | 说明                     |
+| -------- | ------------- | ---- | -------------- | ------------------------ |
+| itemList | `ItemProps[]` | 是   | -              | 指标组的数据源           |
+| width    | `number`      | 否   | -              | 容器组宽度               |
+| gap      | `number`      | 否   | `30`           | 指标卡片之间的间距       |
+| layout   | `string`      | 否   | `"left-right"` | 布局，左右或上下两种形式 |
 
 ## Examples
 
 ### Basic
 
+展示基础指标组的多种布局形式，包含有描述和无描述的左右布局及上下布局。
+
 ```yaml preview
 - brick: div
   properties:

package/docs/basic-index-group.react.md

@@ -0,0 +1,132 @@
+---
+tagName: data-view.basic-index-group
+displayName: WrappedDataViewBasicIndexGroup
+description: 基础指标组构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewBasicIndexGroup
+
+> 基础指标组构件
+
+## 导入
+
+```tsx
+import { WrappedDataViewBasicIndexGroup } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性     | 类型          | 必填 | 默认值         | 说明                     |
+| -------- | ------------- | ---- | -------------- | ------------------------ |
+| itemList | `ItemProps[]` | 是   | -              | 指标组的数据源           |
+| width    | `number`      | 否   | -              | 容器组宽度               |
+| gap      | `number`      | 否   | `30`           | 指标卡片之间的间距       |
+| layout   | `string`      | 否   | `"left-right"` | 布局，左右或上下两种形式 |
+
+## Examples
+
+### Basic
+
+展示基础指标组的多种布局形式，包含有描述和无描述的左右布局及上下布局。
+
+```tsx
+<>
+  <div>左右布局，有描述，不换行</div>
+  <WrappedDataViewBasicIndexGroup
+    style={{ marginTop: "20px" }}
+    width={1000}
+    itemList={[
+      {
+        type: "host",
+        title: "主机",
+        number: 289,
+        description: "较昨日增长24.5%",
+        trendIcon: "up",
+      },
+      {
+        type: "cloud",
+        title: "容器",
+        number: 24,
+        description: "较昨日下降10.2%",
+        trendIcon: "down",
+      },
+      {
+        type: "network",
+        title: "网络设施",
+        number: 24,
+        description: "较昨日下降10.2%",
+        trendIcon: "down",
+      },
+      {
+        type: "database",
+        title: "数据库",
+        number: 24,
+        description: "较昨日下降10.2%",
+        trendIcon: "down",
+      },
+    ]}
+  />
+  <div style={{ marginTop: "20px" }}>左右布局，有描述，换行</div>
+  <WrappedDataViewBasicIndexGroup
+    style={{ marginTop: "20px" }}
+    width={500}
+    itemList={[
+      {
+        type: "host",
+        title: "主机",
+        number: 289,
+        description: "较昨日增长24.5%",
+        trendIcon: "up",
+      },
+      {
+        type: "cloud",
+        title: "容器",
+        number: 24,
+        description: "较昨日下降10.2%",
+        trendIcon: "down",
+      },
+      {
+        type: "network",
+        title: "网络设施",
+        number: 24,
+        description: "较昨日下降10.2%",
+        trendIcon: "down",
+      },
+      {
+        type: "database",
+        title: "数据库",
+        number: 24,
+        description: "较昨日下降10.2%",
+        trendIcon: "down",
+      },
+    ]}
+  />
+  <div style={{ marginTop: "20px" }}>左右布局，无描述</div>
+  <WrappedDataViewBasicIndexGroup
+    style={{ marginTop: "20px" }}
+    width={500}
+    gap={48}
+    itemList={[
+      { type: "host", title: "主机", number: 289 },
+      { type: "cloud", title: "容器", number: 24 },
+      { type: "network", title: "网络设施", number: 24 },
+      { type: "database", title: "数据库", number: 24 },
+    ]}
+  />
+  <div style={{ marginTop: "20px" }}>上下布局</div>
+  <WrappedDataViewBasicIndexGroup
+    style={{ marginTop: "20px" }}
+    width={1000}
+    layout="top-bottom"
+    gap={48}
+    itemList={[
+      { type: "host", title: "主机", number: 289 },
+      { type: "cloud", title: "容器", number: 24 },
+      { type: "network", title: "网络设施", number: 24 },
+      { type: "database", title: "数据库", number: 24 },
+    ]}
+  />
+</>
+```

package/docs/battery-chart.md

@@ -1,13 +1,54 @@
-电池显示构件
+---
+tagName: data-view.battery-chart
+displayName: WrappedDataViewBatteryChart
+description: 大屏电池
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.battery-chart
+
+> 大屏电池
+
+## Props
+
+| 属性            | 类型               | 必填 | 默认值 | 说明                                                                                                |
+| --------------- | ------------------ | ---- | ------ | --------------------------------------------------------------------------------------------------- |
+| value           | `number`           | 是   | -      | 值，默认范围在 [0-100]，范围还可通过 thresholdColors 来改变，将取第一个和最后一个配置项的值作为区间 |
+| batteryWidth    | `number`           | 是   | -      | 电池的宽度                                                                                          |
+| batteryHeight   | `number`           | 是   | -      | 电池的高度                                                                                          |
+| thresholdColors | `ThresholdColor[]` | 是   | -      | 阈值范围以及颜色的配置                                                                              |
+| thresholdValue  | `number`           | 是   | -      | 阈值刻度线                                                                                          |
+
+## Slots
+
+| 名称        | 说明                                   |
+| ----------- | -------------------------------------- |
+| _(default)_ | 电池右侧内容插槽，可放置标题和数据信息 |
+| left        | 电池左侧阈值线附近内容插槽             |
 
 ## Examples
 
 ### Basic
 
+基本用法，展示默认配置的电池图表。
+
 ```yaml preview
 - brick: data-view.battery-chart
   properties:
     value: 30
+    batteryWidth: 38
+    batteryHeight: 58
+    thresholdValue: 50
+    thresholdColors:
+      - color: "linear-gradient(180deg, #246EFF 0%, #26CE90 100%)"
+        startValue: 0
+        endValue: 50
+        headerColor: "#246EFF"
+      - color: "linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)"
+        startValue: 50
+        endValue: 100
+        headerColor: "#FF772A"
     style:
       background-color: "#1c1e21"
       display: block
@@ -15,6 +56,8 @@
 
 ### ThresholdValue
 
+自定义阈值范围、电池尺寸，并通过插槽展示标题和数据信息。
+
 ```yaml preview
 - brick: data-view.battery-chart
   properties:

package/docs/battery-chart.react.md

@@ -0,0 +1,137 @@
+---
+tagName: data-view.battery-chart
+displayName: WrappedDataViewBatteryChart
+description: 大屏电池
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewBatteryChart
+
+> 大屏电池
+
+## 导入
+
+```tsx
+import { WrappedDataViewBatteryChart } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性            | 类型               | 必填 | 默认值 | 说明                                                                                                |
+| --------------- | ------------------ | ---- | ------ | --------------------------------------------------------------------------------------------------- |
+| value           | `number`           | 是   | -      | 值，默认范围在 [0-100]，范围还可通过 thresholdColors 来改变，将取第一个和最后一个配置项的值作为区间 |
+| batteryWidth    | `number`           | 是   | -      | 电池的宽度                                                                                          |
+| batteryHeight   | `number`           | 是   | -      | 电池的高度                                                                                          |
+| thresholdColors | `ThresholdColor[]` | 是   | -      | 阈值范围以及颜色的配置                                                                              |
+| thresholdValue  | `number`           | 是   | -      | 阈值刻度线                                                                                          |
+
+## Slots
+
+| 名称        | 说明                                   |
+| ----------- | -------------------------------------- |
+| _(default)_ | 电池右侧内容插槽，可放置标题和数据信息 |
+| left        | 电池左侧阈值线附近内容插槽             |
+
+## Examples
+
+### Basic
+
+基本用法，展示默认配置的电池图表。
+
+```tsx
+<WrappedDataViewBatteryChart
+  value={30}
+  batteryWidth={38}
+  batteryHeight={58}
+  thresholdValue={50}
+  thresholdColors={[
+    {
+      color: "linear-gradient(180deg, #246EFF 0%, #26CE90 100%)",
+      startValue: 0,
+      endValue: 50,
+      headerColor: "#246EFF",
+    },
+    {
+      color: "linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)",
+      startValue: 50,
+      endValue: 100,
+      headerColor: "#FF772A",
+    },
+  ]}
+  style={{ backgroundColor: "#1c1e21", display: "block" }}
+/>
+```
+
+### ThresholdValue
+
+自定义阈值范围、电池尺寸，并通过插槽展示标题和数据信息。
+
+```tsx
+<WrappedDataViewBatteryChart
+  value={100}
+  thresholdValue={120}
+  batteryHeight={80}
+  batteryWidth={50}
+  thresholdColors={[
+    {
+      color: "linear-gradient(180deg, #246EFF 0%, #26CE90 100%)",
+      startValue: 0,
+      endValue: 120,
+      headerColor: "#246EFF",
+    },
+    {
+      color: "linear-gradient(180deg, #FF772A 0%, #FFC22A 100%)",
+      startValue: 120,
+      endValue: 200,
+      headerColor: "#FF772A",
+    },
+  ]}
+  style={{ backgroundColor: "#1c1e21", display: "block" }}
+>
+  <div>
+    <div
+      style={{
+        color: "#fff",
+        opacity: 0.6,
+        marginTop: "10px",
+        fontSize: "14px",
+      }}
+    >
+      标题
+    </div>
+    <div
+      style={{
+        color: "#fff",
+        fontSize: "20px",
+        lineHeight: "29px",
+        fontWeight: 500,
+      }}
+    >
+      数据信息
+    </div>
+  </div>
+  <div slot="left">
+    <div
+      style={{
+        color: "#fff",
+        opacity: 0.6,
+        marginTop: "10px",
+        fontSize: "14px",
+      }}
+    >
+      标题
+    </div>
+    <div
+      style={{
+        color: "#fff",
+        fontSize: "20px",
+        lineHeight: "29px",
+        fontWeight: 500,
+      }}
+    >
+      数据信息
+    </div>
+  </div>
+</WrappedDataViewBatteryChart>
+```

package/docs/brick-notification.md

@@ -1,9 +1,28 @@
-大屏通知提示构件
+---
+tagName: data-view.brick-notification
+displayName: WrappedDataViewBrickNotification
+description: 大屏提示构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# data-view.brick-notification
+
+> 大屏提示构件
+
+## Props
+
+| 属性    | 类型               | 必填 | 默认值                               | 说明     |
+| ------- | ------------------ | ---- | ------------------------------------ | -------- |
+| message | `string`           | 是   | -                                    | 提示内容 |
+| icon    | `GeneralIconProps` | 否   | `{ lib: "fa", icon: "volume-down" }` | 图标     |
 
 ## Examples
 
 ### Basic
 
+展示大屏提示构件的基本用法。
+
 ```yaml preview
 - brick: data-view.brick-notification
   properties:
@@ -12,6 +31,8 @@
 
 ### Icon
 
+展示自定义图标的大屏提示构件。
+
 ```yaml preview
 - brick: data-view.brick-notification
   properties:

package/docs/brick-notification.react.md

@@ -0,0 +1,45 @@
+---
+tagName: data-view.brick-notification
+displayName: WrappedDataViewBrickNotification
+description: 大屏提示构件
+category: big-screen-content
+source: "@next-bricks/data-view"
+---
+
+# WrappedDataViewBrickNotification
+
+> 大屏提示构件
+
+## 导入
+
+```tsx
+import { WrappedDataViewBrickNotification } from "@easyops/wrapped-components";
+```
+
+## Props
+
+| 属性    | 类型               | 必填 | 默认值                               | 说明     |
+| ------- | ------------------ | ---- | ------------------------------------ | -------- |
+| message | `string`           | 是   | -                                    | 提示内容 |
+| icon    | `GeneralIconProps` | 否   | `{ lib: "fa", icon: "volume-down" }` | 图标     |
+
+## Examples
+
+### Basic
+
+展示大屏提示构件的基本用法。
+
+```tsx
+<WrappedDataViewBrickNotification message="This is the content of the notification." />
+```
+
+### Icon
+
+展示自定义图标的大屏提示构件。
+
+```tsx
+<WrappedDataViewBrickNotification
+  message="This is the content of the notification."
+  icon={{ icon: "smile", lib: "antd", theme: "outlined" }}
+/>
+```