Merge pull request #1440 from easyops-cn/steve/indictors

Steve/indictors

Author: panzekun

bricks/data-view/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
+```

bricks/data-view/src/bootstrap.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";

bricks/data-view/src/bubbles-indicator/assets/other-bubble.png

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import {
   forceSimulation,
   forceCollide,
@@ -11,16 +11,19 @@ import {
   type SimulationLinkDatum,
 } from "d3-force";
 import { createDecorators } from "@next-core/element";
-import { ReactNextElement, wrapBrick } from "@next-core/react-element";
+import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
-import ResizeObserver from "resize-observer-polyfill";
-import type { Tag, TagProps } from "@next-bricks/basic/tag";
+import { formatValue } from "../shared/formatValue";
+import { CornerIndicator } from "../shared/CornerIndicator";
+import { useContainerScale } from "../shared/useContainerScale";
+import { useCenterScale } from "../shared/useCenterScale";
 import "../fonts/ALiBaBaPuHuiTi.css";
 import "../fonts/PangMenZhengDaoBiaoTiTi.css";
 import styleText from "./styles.shadow.css";
+import cornerStyleText from "../shared/CornerIndicator.shadow.css";
 
-const BASE_WIDTH = 800;
-const BASE_HEIGHT = 640;
+const BASE_WIDTH = 900;
+const BASE_HEIGHT = 700;
 const CENTER_BUBBLE_RADIUS = 196;
 const OTHER_BUBBLE_MAX_RADIUS = 81;
 const OTHER_BUBBLE_MIN_RADIUS = 40;
@@ -29,12 +32,6 @@ const RANDOM_BUBBLE_MIN_RADIUS = 10;
 const RANDOM_BUBBLE_MAX_RADIUS = 22;
 const TOTAL_BUBBLE_COUNT = 18;
 
-const numberFormatter = new Intl.NumberFormat("zh-CN", {
-  useGrouping: true,
-});
-
-const WrappedTag = wrapBrick<Tag, TagProps>("eo-tag");
-
 const { defineElement, property } = createDecorators();
 
 export interface BubblesIndicatorProps {
@@ -47,6 +44,10 @@ export interface BubblesIndicatorProps {
 export interface DataItem {
   label: string;
   value: string | number;
+  /**
+   * 用于计算气泡相对大小的数值。
+   */
+  numberValue?: number;
 }
 
 export interface CornerDataItem extends DataItem {
@@ -74,7 +75,7 @@ interface NumberedDataItem extends DataItem {
  */
 export
 @defineElement("data-view.bubbles-indicator", {
-  styleTexts: [styleText],
+  styleTexts: [styleText, cornerStyleText],
 })
 class BubblesIndicator
   extends ReactNextElement
@@ -129,32 +130,24 @@ export function BubblesIndicatorComponent({
   cornerDataSource,
   maxScale,
 }: BubblesIndicatorComponentProps) {
-  const [scale, setScale] = useState<number | null>(null);
-
-  useEffect(() => {
-    // 当容器宽高低于预设值时，图形会自动缩小
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === root) {
-          const { width, height } = entry.contentRect;
-          // 宽度大于高度，因为有水平方向排列的标签文字
-          setScale(
-            Math.min(maxScale ?? 1, width / BASE_WIDTH, height / BASE_HEIGHT)
-          );
-        }
-      }
-    });
-    observer.observe(root);
-    return () => observer.disconnect();
-  }, [maxScale, root]);
+  const scale = useContainerScale({
+    width: BASE_WIDTH,
+    height: BASE_HEIGHT,
+    root,
+    maxScale,
+  });
+  const [centerValueScale, centerValueRef] = useCenterScale(280);
 
   // 使用 d3 力学布局计算气泡位置，将普通数据排列在中心数据周围，并填充一些小的气泡
   const labels = useMemo(() => {
     const numberedDataSource: NumberedDataItem[] =
       dataSource?.slice(0, 12)?.map((item) => ({
         ...item,
         positiveNumberValue: Math.abs(
-          typeof item.value === "number" ? item.value : parseFloat(item.value)
+          item.numberValue ??
+            (typeof item.value === "number"
+              ? item.value
+              : parseFloat(item.value))
         ),
       })) ?? [];
     const positiveNumberValues = numberedDataSource.map(
@@ -249,7 +242,14 @@ export function BubblesIndicatorComponent({
         <div className="inner-ring"></div>
         <div className="center">
           <div className="center-label">{centerDataSource?.label}</div>
-          <div className="center-value">
+          <div
+            className="center-value"
+            ref={centerValueRef}
+            style={{
+              visibility: centerValueScale === null ? "hidden" : "visible",
+              transform: `scale(${centerValueScale ?? 1})`,
+            }}
+          >
             {formatValue(centerDataSource?.value)}
           </div>
         </div>
@@ -277,32 +277,11 @@ export function BubblesIndicatorComponent({
           ))}
         </div>
       </div>
-      <div className="corner">
-        {cornerDataSource?.map((item, index) => (
-          <div key={index} className="corner-item">
-            <div className="corner-label">{item.label}</div>
-            <WrappedTag
-              className="corner-value"
-              outline
-              color={item.color}
-              tagStyle={{
-                fontSize: 18,
-                padding: "2px 16px",
-              }}
-            >
-              {formatValue(item.value)}
-            </WrappedTag>
-          </div>
-        ))}
-      </div>
+      <CornerIndicator cornerDataSource={cornerDataSource} />
     </>
   );
 }
 
-function formatValue(value: string | number): string {
-  return typeof value === "number" ? numberFormatter.format(value) : value;
-}
-
 function manuallyTickToTheEnd(
   simulation: Simulation<ForceNode, SimulationLinkDatum<ForceNode>>
 ): void {

bricks/data-view/src/bubbles-indicator/index.tsx

@@ -86,6 +86,7 @@
   background: url(./assets/light.png) no-repeat;
   background-size: 338px 478px;
   animation: moving-light 3s linear infinite;
+  pointer-events: none;
 }
 
 .bubbles {

bricks/data-view/src/bubbles-indicator/styles.shadow.css

@@ -1,23 +1,20 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { createDecorators } from "@next-core/element";
-import { ReactNextElement, wrapBrick } from "@next-core/react-element";
+import { ReactNextElement } from "@next-core/react-element";
 import "@next-core/theme";
-import ResizeObserver from "resize-observer-polyfill";
-import type { Tag, TagProps } from "@next-bricks/basic/tag";
+import { formatValue } from "../shared/formatValue";
+import { CornerIndicator } from "../shared/CornerIndicator";
+import { useContainerScale } from "../shared/useContainerScale";
+import { useCenterScale } from "../shared/useCenterScale";
 import crystalBallVideo from "./assets/crystal-ball.mp4";
 import "../fonts/ALiBaBaPuHuiTi.css";
 import "../fonts/PangMenZhengDaoBiaoTiTi.css";
 import styleText from "./styles.shadow.css";
+import cornerStyleText from "../shared/CornerIndicator.shadow.css";
 
 const RING_SIZE = 572;
 const RING_OFFSET = 16;
 
-const numberFormatter = new Intl.NumberFormat("zh-CN", {
-  useGrouping: true,
-});
-
-const WrappedTag = wrapBrick<Tag, TagProps>("eo-tag");
-
 const { defineElement, property } = createDecorators();
 
 export interface CrystalBallIndicatorProps {
@@ -46,7 +43,7 @@ interface DataItemWithPosition extends DataItem {
  */
 export
 @defineElement("data-view.crystal-ball-indicator", {
-  styleTexts: [styleText],
+  styleTexts: [styleText, cornerStyleText],
 })
 class CrystalBallIndicator
   extends ReactNextElement
@@ -102,22 +99,8 @@ export function CrystalBallIndicatorComponent({
   cornerDataSource,
   maxScale,
 }: CrystalBallIndicatorComponentProps) {
-  const [scale, setScale] = useState<number | null>(null);
-
-  useEffect(() => {
-    // 当容器宽高低于预设值时，图形会自动缩小
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === root) {
-          const { width, height } = entry.contentRect;
-          // 宽度大于高度，因为有水平方向排列的标签文字
-          setScale(Math.min(maxScale ?? 1, width / 810, height / 604));
-        }
-      }
-    });
-    observer.observe(root);
-    return () => observer.disconnect();
-  }, [maxScale, root]);
+  const scale = useContainerScale({ width: 810, height: 604, root, maxScale });
+  const [centerValueScale, centerValueRef] = useCenterScale(280);
 
   // 计算环上标签的位置
   // 1. 将数据分为两组，分别在环的两侧
@@ -204,33 +187,19 @@ export function CrystalBallIndicatorComponent({
         </div>
         <div className="center">
           <div className="center-label">{centerDataSource?.label}</div>
-          <div className="center-value">
+          <div
+            className="center-value"
+            ref={centerValueRef}
+            style={{
+              visibility: centerValueScale === null ? "hidden" : "visible",
+              transform: `scale(${centerValueScale ?? 1})`,
+            }}
+          >
             {formatValue(centerDataSource?.value)}
           </div>
         </div>
       </div>
-      <div className="corner">
-        {cornerDataSource?.map((item, index) => (
-          <div key={index} className="corner-item">
-            <div className="corner-label">{item.label}</div>
-            <WrappedTag
-              className="corner-value"
-              outline
-              color={item.color}
-              tagStyle={{
-                fontSize: 18,
-                padding: "2px 16px",
-              }}
-            >
-              {formatValue(item.value)}
-            </WrappedTag>
-          </div>
-        ))}
-      </div>
+      <CornerIndicator cornerDataSource={cornerDataSource} />
     </>
   );
 }
-
-function formatValue(value: string | number): string {
-  return typeof value === "number" ? numberFormatter.format(value) : value;
-}

bricks/data-view/src/crystal-ball-indicator/index.tsx

@@ -84,7 +84,7 @@
 }
 
 .ring-label {
-  color: #c8e2ff;
+  color: rgba(200, 226, 255, 0.8);
   font-size: 18px;
 }
 
@@ -96,8 +96,11 @@
 
 .center {
   position: absolute;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 292px;
+  height: 292px;
   flex-direction: column;
   text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
 }
@@ -142,28 +145,6 @@
   animation: ring-rotate 5s linear infinite;
 }
 
-.corner {
-  position: absolute;
-  top: 13px;
-  left: 31px;
-  font-size: 18px;
-}
-
-.corner-item {
-  display: flex;
-  margin-bottom: 15px;
-}
-
-.corner-label {
-  font-weight: 500;
-  line-height: 25px;
-}
-
-.corner-value {
-  display: block;
-  margin-left: 19px;
-}
-
 @keyframes ring-rotate {
   from {
     transform: rotate(0deg);