@next-bricks/data-view 0.13.4 → 0.13.5

package/docs/battery-chart.md

@@ -0,0 +1,76 @@
+电池显示构件
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.battery-chart
+  properties:
+    value: 30
+    style:
+      background-color: "#1c1e21"
+      display: block
+```
+
+### ThresholdValue
+
+```yaml preview
+- brick: data-view.battery-chart
+  properties:
+    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:
+      background-color: "#1c1e21"
+      display: block
+  slots:
+    "":
+      type: bricks
+      bricks:
+        - brick: div
+          properties:
+            textContent: 标题
+            style:
+              color: "#fff"
+              opacity: 0.6
+              marginTop: 10px
+              fontSize: 14px
+        - brick: div
+          properties:
+            textContent: 数据信息
+            style:
+              color: "#fff"
+              fontSize: 20px
+              line-height: 29px
+              fontWeight: 500
+    left:
+      type: bricks
+      bricks:
+        - brick: div
+          properties:
+            textContent: 标题
+            style:
+              color: "#fff"
+              opacity: 0.6
+              marginTop: 10px
+              fontSize: 14px
+        - brick: div
+          properties:
+            textContent: 数据信息
+            style:
+              color: "#fff"
+              fontSize: 20px
+              line-height: 29px
+              fontWeight: 500
+```

package/docs/cabinet-app-layer.md

@@ -0,0 +1,14 @@
+data-view.cabinet-app-layer
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.cabinet-app-layer
+  properties:
+    appTitle: inventory-api
+    style:
+      width: 600px
+      background-color: "#1c1e21"
+```

package/docs/cabinet-button.md

@@ -0,0 +1,14 @@
+data-view.cabinet-button
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.cabinet-button
+  properties:
+    buttonStyle:
+      width: 50px
+      height: 50px
+      background: "#1c1e21"
+```

package/docs/cabinet-container.md

@@ -0,0 +1,36 @@
+data-view.cabinet-container
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.cabinet-container
+  properties:
+    customTitle: 集群容器
+    data:
+      - type: physical-machine
+        nodeTitle: "255.255.255"
+      - type: physical-machine
+        nodeTitle: "255.255.255"
+    style:
+      width: 400px
+      height: 500px
+```
+
+### Status
+
+```yaml preview
+- brick: data-view.cabinet-container
+  properties:
+    customTitle: 集群容器
+    status: active
+    data:
+      - type: physical-machine
+        nodeTitle: "255.255.255"
+      - type: physical-machine
+        nodeTitle: "255.255.255"
+    style:
+      width: 400px
+      height: 500px
+```

package/docs/cabinet-node.md

@@ -0,0 +1,28 @@
+data-view.cabinet-node
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.cabinet-node
+  properties:
+    type: container-group
+    nodeTitle: 容器组
+    style:
+      width: 100px
+      background: "#1c1e21"
+```
+
+### IsAlert
+
+```yaml preview
+- brick: data-view.cabinet-node
+  properties:
+    type: container-group
+    nodeTitle: 容器组
+    isAlert: true
+    style:
+      width: 100px
+      background: "#1c1e21"
+```

package/docs/complex-search.md

@@ -0,0 +1,33 @@
+复杂的搜索框
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.complex-search
+  properties:
+    placeholder: Search
+    style:
+      background: "#1c1e21"
+      display: block
+      height: 300px
+    options:
+      - name: 主机1
+        icon:
+          lib: "antd"
+          icon: "account-book"
+          theme: "outlined"
+      - name: 主机2
+        icon:
+          lib: "antd"
+          icon: "account-book"
+          theme: "outlined"
+  events:
+    select:
+      - action: console.log
+    search:
+      - action: console.log
+    focus:
+      - action: console.log
+```

package/docs/dropdown-menu.md

@@ -0,0 +1,20 @@
+大屏基础下拉菜单
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.dropdown-menu
+  properties:
+    options:
+      - label: 测试1
+        value: test1
+      - label: 测试2
+        value: test2
+    placeholder: 请选择
+    allowClear: true
+  events:
+    value.change:
+      - action: console.log
+```

package/docs/gauge-chart.md

@@ -0,0 +1,26 @@
+大屏仪表盘构件
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.gauge-chart
+  properties:
+    value: 100
+    radius: 180
+    strokeWidth: 20
+    description: 已部署 1490 个 / 3300个
+  slots:
+    "":
+      type: bricks
+      bricks:
+        - brick: div
+          properties:
+            textContent: 已部署 1490 个 / 3300个
+            style:
+              font-size: 16px
+              font-weight: 500
+              color: "#fff"
+              margin: 0 0 300px 0
+```

package/docs/gear-background.md

@@ -0,0 +1,15 @@
+齿轮背景
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.gear-background
+  properties:
+    style:
+      width: 300px
+      height: 300px
+      display: block
+      background: "#1c1e21"
+```

package/docs/graph-layout-grid.md

@@ -0,0 +1,97 @@
+有规律的网格布局的拓扑
+
+## Examples
+
+### Basic
+
+```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
+```
+
+### 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
+```

package/docs/graph-node.md

@@ -0,0 +1,14 @@
+data-view.graph-node
+
+## Examples
+
+### Basic
+
+```yaml preview
+- 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-text.md

@@ -0,0 +1,13 @@
+data-view.graph-text
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.graph-text
+  properties:
+    text: 负载均衡数
+    value: 234
+    style:
+```

package/docs/grid-background.md

@@ -0,0 +1,21 @@
+网格背景
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.grid-background
+  properties:
+    style:
+      width: 920px
+      height: 600px
+      display: block
+      background-color: "#1c1e21"
+    color: "#235F90"
+    particleColor:
+      startColor: "#477AFFFF"
+      endColor: "#5F83FF00"
+    maskStyle:
+      background: "rgba(41, 109, 255, 0.8)"
+```

package/docs/loading-panel.md

@@ -0,0 +1,32 @@
+data-view.loading-panel
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.loading-panel
+  properties:
+    customTitle: Hello World!!
+    loading: false
+    style:
+      height: 300px
+      display: block
+```
+
+### Progress
+
+```yaml preview
+- brick: data-view.loading-panel
+  properties:
+    customTitle: Hello World!!
+    progress: 60
+    useRealTimeProgress: true
+    intervalTime: 300
+    style:
+      height: 300px
+      display: block
+  events:
+    end:
+      - action: console.log
+```

package/docs/modern-style-component-title.md

@@ -0,0 +1,54 @@
+现在风格的组件标题
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.modern-style-component-title
+  properties:
+    componentTitle: 组件标题
+    style:
+      height: 50px
+      display: block
+      background-color: "#1c1e21"
+```
+
+### TitleSuffix && Toolbar slot
+
+```yaml preview
+- brick: data-view.modern-style-component-title
+  properties:
+    componentTitle: 组件标题
+    style:
+      height: 50px
+      display: block
+      background-color: "#1c1e21"
+  slots:
+    toolbar:
+      type: bricks
+      bricks:
+        - brick: span
+          properties:
+            textContent: toolbar
+    titleSuffix:
+      type: bricks
+      bricks:
+        - brick: span
+          properties:
+            textContent: titleSuffix
+```
+
+### hideRightComponent
+
+```yaml preview
+- brick: data-view.modern-style-component-title
+  properties:
+    componentTitle: 组件标题
+    hideRightComponent: false
+    hideLeftComponent: true
+    style:
+      height: 50px
+      display: block
+      background-color: "#1c1e21"
+```

package/docs/modern-style-page-title.md

@@ -0,0 +1,15 @@
+现代风格的页面标题构件
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: data-view.modern-style-page-title
+  properties:
+    pageTitle: XX应用大屏
+    description: "- APPLICATION HEALTH MONITORING SCREEN -"
+    style:
+      display: block
+      background-color: "#1c1e21"
+```