@next-bricks/data-view 1.4.0 → 1.6.0

package/dist-types/bootstrap.d.ts

@@ -40,3 +40,6 @@ import "./indicator-card/index.js";
 import "./progress-bar-list/index.js";
 import "./china-map-chart/index.js";
 import "./crystal-ball-indicator/index.js";
+import "./globe-with-halo-indicator/index.js";
+import "./globe-with-gear-indicator/index.js";
+import "./bubbles-indicator/index.js";

package/dist-types/bubbles-indicator/index.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+import "../fonts/ALiBaBaPuHuiTi.css";
+import "../fonts/PangMenZhengDaoBiaoTiTi.css";
+export interface BubblesIndicatorProps {
+    dataSource?: DataItem[];
+    centerDataSource?: DataItem;
+    cornerDataSource?: CornerDataItem[];
+    maxScale?: number;
+}
+export interface DataItem {
+    label: string;
+    value: string | number;
+}
+export interface CornerDataItem extends DataItem {
+    color?: string;
+}
+/**
+ * 气泡样式的数据展示构件。
+ */
+export declare class BubblesIndicator extends ReactNextElement implements BubblesIndicatorProps {
+    /** 指标数据列表（显示在环上）
+     *
+     * 注意：最多显示12项数据
+     */
+    accessor dataSource: DataItem[] | undefined;
+    /** 中心数据（显示在中心水晶球内） */
+    accessor centerDataSource: DataItem | undefined;
+    /**
+     * 左上角指标数据列表
+     */
+    accessor cornerDataSource: CornerDataItem[] | undefined;
+    /**
+     * 最大缩放比例
+     *
+     * @default 1
+     */
+    accessor maxScale: number | undefined;
+    render(): React.JSX.Element;
+}
+export interface BubblesIndicatorComponentProps extends BubblesIndicatorProps {
+    root: BubblesIndicator;
+}
+export declare function BubblesIndicatorComponent({ root, dataSource, centerDataSource, cornerDataSource, maxScale, }: BubblesIndicatorComponentProps): React.JSX.Element;

package/dist-types/bubbles-indicator/index.spec.d.ts

@@ -0,0 +1 @@
+import "./";

package/dist-types/china-map-chart/index.d.ts

@@ -2,7 +2,7 @@ import React, { CSSProperties } from "react";
 import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
 /**
- * 构件 `data-view.china-map-chart`
+ * 中国地图图表构件，可以显示省级指标数据
  */
 export declare class ChinaMapChart extends ReactNextElement {
     #private;
@@ -17,6 +17,7 @@ export declare class ChinaMapChart extends ReactNextElement {
     render(): React.JSX.Element;
 }
 interface DataSource {
+    /** 省级行政区域名，例如：四川、北京 */
     city: string;
     detailDisplayLocation: "pageCenter" | "textBottom";
     text: string;

package/dist-types/crystal-ball-indicator/index.d.ts

@@ -6,28 +6,31 @@ import "../fonts/PangMenZhengDaoBiaoTiTi.css";
 export interface CrystalBallIndicatorProps {
     dataSource?: DataItem[];
     centerDataSource?: DataItem;
-    cornerDataSource?: cornerDataItem[];
+    cornerDataSource?: CornerDataItem[];
     maxScale?: number;
 }
 export interface DataItem {
     label: string;
     value: string | number;
 }
-export interface cornerDataItem extends DataItem {
+export interface CornerDataItem extends DataItem {
     color?: string;
 }
 /**
  * 有水晶球动画的数据展示构件。
  */
 export declare class CrystalBallIndicator extends ReactNextElement implements CrystalBallIndicatorProps {
-    /** 指标数据列表（显示在环上） */
+    /** 指标数据列表（显示在环上）
+     *
+     * 注意：最多显示12项数据
+     */
     accessor dataSource: DataItem[] | undefined;
     /** 中心数据（显示在中心水晶球内） */
     accessor centerDataSource: DataItem | undefined;
     /**
      * 左上角指标数据列表
      */
-    accessor cornerDataSource: cornerDataItem[] | undefined;
+    accessor cornerDataSource: CornerDataItem[] | undefined;
     /**
      * 最大缩放比例
      *

package/dist-types/gear-background/index.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { ReactNextElement } from "@next-core/react-element";
-interface GearBackgroundProps {
+export interface GearBackgroundProps {
     color?: React.CSSProperties["color"];
 }
 /**

package/dist-types/globe-with-gear-indicator/index.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+import "../fonts/ALiBaBaPuHuiTi.css";
+import "../fonts/HarmonyOSSans.css";
+export interface GlobeWithGearIndicatorProps {
+    dataSource?: DataItem[];
+    centerDataSource?: DataItem;
+    cornerDataSource?: CornerDataItem[];
+    maxScale?: number;
+}
+export interface DataItem {
+    label: string;
+    value: string | number;
+}
+export interface CornerDataItem extends DataItem {
+    color?: string;
+}
+/**
+ * 地球加轮盘的数据展示构件。
+ */
+export declare class GlobeWithGearIndicator extends ReactNextElement implements GlobeWithGearIndicatorProps {
+    /** 指标数据列表（显示在环上）
+     *
+     * 注意：最多显示12项数据
+     */
+    accessor dataSource: DataItem[] | undefined;
+    /** 中心数据（显示在中心水晶球内） */
+    accessor centerDataSource: DataItem | undefined;
+    /**
+     * 左上角指标数据列表
+     */
+    accessor cornerDataSource: CornerDataItem[] | undefined;
+    /**
+     * 最大缩放比例
+     *
+     * @default 1
+     */
+    accessor maxScale: number | undefined;
+    render(): React.JSX.Element;
+}
+export interface GlobeWithGearIndicatorComponentProps extends GlobeWithGearIndicatorProps {
+    root: GlobeWithGearIndicator;
+}
+export declare function GlobeWithGearIndicatorComponent({ root, dataSource, centerDataSource, cornerDataSource, maxScale, }: GlobeWithGearIndicatorComponentProps): React.JSX.Element;

package/dist-types/globe-with-gear-indicator/index.spec.d.ts

@@ -0,0 +1 @@
+import "./";

package/dist-types/globe-with-halo-indicator/RotatingArc.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function RotatingArc(): React.JSX.Element;

package/dist-types/globe-with-halo-indicator/RotatingArc.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist-types/globe-with-halo-indicator/SatelliteRing.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function SatelliteRing(): React.JSX.Element;

package/dist-types/globe-with-halo-indicator/index.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { ReactNextElement } from "@next-core/react-element";
+import "@next-core/theme";
+import "../fonts/ALiBaBaPuHuiTi.css";
+export interface GlobeWithHaloIndicatorProps {
+    dataSource?: DataItem[];
+    centerDataSource?: DataItem;
+    cornerDataSource?: CornerDataItem[];
+    maxScale?: number;
+}
+export interface DataItem {
+    label: string;
+    value: string | number;
+}
+export interface CornerDataItem extends DataItem {
+    color?: string;
+}
+/**
+ * 地球加光环的数据展示构件。
+ */
+export declare class GlobeWithHaloIndicator extends ReactNextElement implements GlobeWithHaloIndicatorProps {
+    /**
+     * 指标数据列表（显示在环上）
+     *
+     * 注意：最多显示8项数据
+     */
+    accessor dataSource: DataItem[] | undefined;
+    /** 中心数据（显示在中心地球内） */
+    accessor centerDataSource: DataItem | undefined;
+    /**
+     * 左上角指标数据列表
+     */
+    accessor cornerDataSource: CornerDataItem[] | undefined;
+    /**
+     * 最大缩放比例
+     *
+     * @default 1
+     */
+    accessor maxScale: number | undefined;
+    render(): React.JSX.Element;
+}
+export interface GlobeWithHaloIndicatorComponentProps extends GlobeWithHaloIndicatorProps {
+    root: GlobeWithHaloIndicator;
+}
+export declare function GlobeWithHaloIndicatorComponent({ root, dataSource, centerDataSource, cornerDataSource, maxScale, }: GlobeWithHaloIndicatorComponentProps): React.JSX.Element;

package/dist-types/globe-with-halo-indicator/index.spec.d.ts

@@ -0,0 +1 @@
+import "./";

package/docs/bubbles-indicator.md

@@ -0,0 +1,42 @@
+构件 `data-view.bubbles-indicator`
+
+## Examples
+
+### Basic
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.bubbles-indicator
+    properties:
+      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
+    # Currently this brick only works within dark theme
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```

package/docs/china-map-chart.md

@@ -1,34 +1,62 @@
-构件 `data-view.china-map-chart`
+中国地图图表构件，可以显示省级指标数据
 
 ## Examples
 
 ### Basic
 
 ```yaml preview
-- brick: data-view.china-map-chart
-  slots:
-    detail:
-      bricks:
-        - brick: div
-          properties:
-            textContent: 内容区
-  events:
-    detail.open.change:
-      - action: console.log
-  properties:
-    detailContentStyle:
-      background: "yellow"
-    dataSource:
-      - text: "西藏 12311"
-        detailDisplayLocation: "textBottom"
-        city: 西藏
-      - text: "四川 89781169"
-        detailDisplayLocation: "textBottom"
-        city: 四川
-      - text: "台湾 234181"
-        detailDisplayLocation: "pageCenter"
-        city: 台湾
-      - text: "江西 21348"
-        detailDisplayLocation: "pageCenter"
-        city: 江西
+brick: data-view.china-map-chart
+properties:
+  dataSource:
+    - text: "西藏 12311"
+      city: 西藏
+    - text: "四川 89781169"
+      city: 四川
+    - text: "台湾 234181"
+      city: 台湾
+    - text: "江西 21348"
+      city: 江西
+# Currently this brick only looks well within dark theme
+lifeCycle:
+  onPageLoad:
+    action: theme.setTheme
+    args:
+      - dark-v2
+```
+
+### With detail
+
+```yaml preview
+brick: data-view.china-map-chart
+properties:
+  detailContentStyle:
+    background: "yellow"
+  dataSource:
+    - text: "西藏 12311"
+      detailDisplayLocation: "textBottom"
+      city: 西藏
+    - text: "四川 89781169"
+      detailDisplayLocation: "textBottom"
+      city: 四川
+    - text: "台湾 234181"
+      detailDisplayLocation: "pageCenter"
+      city: 台湾
+    - text: "江西 21348"
+      detailDisplayLocation: "pageCenter"
+      city: 江西
+events:
+  detail.open.change:
+    - action: console.log
+slots:
+  detail:
+    bricks:
+      - brick: div
+        properties:
+          textContent: 内容区
+# Currently this brick only looks well within dark theme
+lifeCycle:
+  onPageLoad:
+    action: theme.setTheme
+    args:
+      - dark-v2
 ```

package/docs/crystal-ball-indicator.md

@@ -4,34 +4,39 @@
 
 ### Basic
 
-```yaml preview minHeight="660px"
-brick: data-view.crystal-ball-indicator
+```yaml preview height="660px"
+brick: div
 properties:
-  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
-# Currently this brick only works within dark theme
-lifeCycle:
-  onPageLoad:
-    action: theme.setTheme
-    args:
-      - dark-v2
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.crystal-ball-indicator
+    properties:
+      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
+    # Currently this brick only works within dark theme
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
 ```

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

@@ -0,0 +1,42 @@
+地球加轮盘的数据展示构件。
+
+## Examples
+
+### Basic
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.globe-with-gear-indicator
+    properties:
+      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
+    # Currently this brick only works within dark theme
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```

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

@@ -0,0 +1,42 @@
+地球加光环的数据展示构件。
+
+## Examples
+
+### Basic
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.globe-with-halo-indicator
+    properties:
+      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
+    # Currently this brick only works within dark theme
+    lifeCycle:
+      onPageLoad:
+        action: theme.setTheme
+        args:
+          - dark-v2
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@next-bricks/data-view",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "homepage": "https://github.com/easyops-cn/next-bricks/tree/master/bricks/data-view",
   "repository": {
     "type": "git",
@@ -41,5 +41,5 @@
   "peerDependencies": {
     "@next-bricks/icons": "*"
   },
-  "gitHead": "0d9124e467a82ea9b22c719b74a1552dc3191e00"
+  "gitHead": "e02ad0bd2d9a38c2a756cbdc49ccb17586eb0db0"
 }