@next-bricks/data-view 1.6.2 → 1.8.0

package/dist-types/bootstrap.d.ts

@@ -43,3 +43,4 @@ 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";
+import "./globe-with-orbit-indicator/index.js";

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

@@ -12,6 +12,10 @@ export interface BubblesIndicatorProps {
 export interface DataItem {
     label: string;
     value: string | number;
+    /**
+     * 用于计算气泡相对大小的数值。
+     */
+    numberValue?: number;
 }
 export interface CornerDataItem extends DataItem {
     color?: string;

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

@@ -11,9 +11,15 @@ export declare class ChinaMapChart extends ReactNextElement {
      */
     accessor dataSource: DataSource[] | undefined;
     /**
-     * 数据源
+     * 描述内容样式
      */
     accessor detailContentStyle: CSSProperties | undefined;
+    /**
+     * 是否铺满容器
+     *
+     * 注意：该属性不同时兼容 detail 插槽
+     */
+    accessor fillContainer: boolean;
     render(): React.JSX.Element;
 }
 interface DataSource {
@@ -24,9 +30,11 @@ interface DataSource {
     [x: string]: any;
 }
 export interface ChinaMapChartProps {
+    root: HTMLElement;
     onDetailOpenChange: (open: boolean, data: Record<string, any>) => void;
     dataSource: DataSource[];
     detailContentStyle?: CSSProperties;
+    fillContainer?: boolean;
 }
 export declare function ChinaMapChartComponent(props: ChinaMapChartProps): React.JSX.Element;
 export {};

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

@@ -1,2 +1,8 @@
 import React from "react";
-export declare function RotatingArc(): React.JSX.Element;
+export interface RotatingArcProps {
+    cx: number;
+    cy: number;
+    rx: number;
+    ry: number;
+}
+export declare function RotatingArc({ cx, cy, rx, ry }: RotatingArcProps): React.JSX.Element;

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

@@ -0,0 +1,46 @@
+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 GlobeWithOrbitIndicatorProps {
+    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 GlobeWithOrbitIndicator extends ReactNextElement implements GlobeWithOrbitIndicatorProps {
+    /**
+     * 指标数据列表（显示在轨道上）
+     *
+     * 注意：最多显示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 GlobeWithOrbitIndicatorComponentProps extends GlobeWithOrbitIndicatorProps {
+    root: GlobeWithOrbitIndicator;
+}
+export declare function GlobeWithOrbitIndicatorComponent({ root, dataSource, centerDataSource, cornerDataSource, maxScale, }: GlobeWithOrbitIndicatorComponentProps): React.JSX.Element;

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

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

package/dist-types/shared/CornerIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+export interface CornerDataItem {
+    label: string;
+    value: string | number;
+    color?: string;
+}
+export interface CornerIndicatorProps {
+    cornerDataSource?: CornerDataItem[];
+}
+export declare function CornerIndicator({ cornerDataSource }: CornerIndicatorProps): React.JSX.Element;

package/dist-types/shared/formatValue.d.ts

@@ -0,0 +1,9 @@
+export declare function formatValue(value: string | number): string;
+/**
+ * 判断一个值是否是有意义的数字，包括数字和可以转换为数字的字符串。
+ *
+ * 但不包括 NaN、Infinity、-Infinity 等。
+ *
+ * Ref https://github.com/jonschlinkert/is-number/blob/master/index.js
+ */
+export declare function isMeaningfulNumber(value: unknown): value is number | string;

package/dist-types/shared/useCenterScale.d.ts

@@ -0,0 +1,4 @@
+/**
+ * 让中心数据值不要超过球体范围，但缩放值最低不小于 0.3
+ */
+export declare function useCenterScale(maxWidth: number): readonly [number, import("react").MutableRefObject<HTMLDivElement>];

package/dist-types/shared/useContainerScale.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 根据容器尺寸进行缩放
+ */
+export declare function useContainerScale({ width: baseWidth, height: baseHeight, root, maxScale, disabled, }: {
+    width: number;
+    height: number;
+    root: HTMLElement;
+    /** 最大缩放比例，默认为 1 */
+    maxScale?: number;
+    disabled?: boolean;
+}): number | null;

package/docs/china-map-chart.md

@@ -4,7 +4,7 @@
 
 ### Basic
 
-```yaml preview
+```yaml preview height="600px"
 brick: data-view.china-map-chart
 properties:
   dataSource:
@@ -24,9 +24,38 @@ lifeCycle:
       - dark-v2
 ```
 
+### Fill container
+
+```yaml preview height="600px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 4em)
+    position: relative
+children:
+  - brick: data-view.china-map-chart
+    properties:
+      fillContainer: true
+      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
+```yaml preview height="600px"
 brick: data-view.china-map-chart
 properties:
   detailContentStyle:

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

@@ -0,0 +1,44 @@
+地球加轨道的数据展示构件。
+
+## Examples
+
+### Basic
+
+```yaml preview height="660px"
+brick: div
+properties:
+  style:
+    height: calc(100vh - 2em)
+children:
+  - brick: data-view.globe-with-orbit-indicator
+    properties:
+      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
+    # 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.6.2",
+  "version": "1.8.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": "c355d4b25eff9c0f3168a306e9dae6ae1384b88a"
+  "gitHead": "6f101f9a1838aeae7c794b53e5403f74f297ddef"
 }