@easyv/charts 1.8.23 → 1.8.24

package/src/components/PieTooltip.jsx

@@ -1,205 +1,286 @@
-import React, { memo } from 'react'
-import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from '../utils';
-
+import React, { memo } from "react";
+import {
+  getFontStyle,
+  getMargin,
+  getTranslate3d,
+  getTranslate2d,
+  getIcon,
+} from "../utils";
 
 export const PieTooltip = memo((props) => {
-	const { mousePos,domRef,
-		pieCenter,
-		config: {
-			tip: {
-				data: { lineHeight, iconSize, name,
-					value: { show: valueIsShow, fontStyle: valueFont, suffix: valueSuffix, suffix: { show: valueSuffixIsShow } },
-					percentage: { show: percentageIsShow, fontStyle: percentageFont, suffix: percentageSuffix, suffix: { show: percentageSuffixIsShow }, precision },
-				},
-				image,
-				margin,
-				size: { width: tipWidth, height: tipHeight },
-				translate: translateTip,
-			},
-		},
-		data,
-		series } = props
-		const screenRef = domRef.current.getBoundingClientRect();
-	const Item = () => {
-		const { data: { s, y }, percent } = data
-		const { type, icon, displayName } = [...series.values()].find(
-			(series) => series.name == s
-		);
+  const {
+    mousePos,
+    domRef,
+    pieCenter,
+    config: {
+      tip: {
+        data: {
+          lineHeight,
+          iconSize,
+          name,
+          value: {
+            show: valueIsShow,
+            fontStyle: valueFont,
+            suffix: valueSuffix,
+            suffix: { show: valueSuffixIsShow },
+          },
+          percentage: {
+            show: percentageIsShow,
+            fontStyle: percentageFont,
+            suffix: percentageSuffix,
+            suffix: { show: percentageSuffixIsShow },
+            precision,
+          },
+        },
+        image,
+        margin,
+        size: { width: tipWidth, height: tipHeight },
+        translate: translateTip,
+      },
+    },
+    data,
+    series,
+  } = props;
+  const screenRef = domRef.current.getBoundingClientRect();
+  const Item = () => {
+    const {
+      data: { s, y },
+      percent,
+    } = data;
+    const { type, icon, displayName } = [...series.values()].find(
+      (series) => series.name == s
+    );
+
+    const renderSuffix = (suffix) => {
+      const { content, font: suffiixFont, translate: suffixTranslate } = suffix;
+      return (
+        <span
+          style={{
+            ...getFontStyle(suffiixFont),
+            display: "inline-block",
+            transform: getTranslate3d(suffixTranslate),
+          }}
+        >
+          {content}
+        </span>
+      );
+    };
+
+    const _icon = getIcon(type, icon);
+    return (
+      <dd
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          lineHeight: lineHeight + "px",
+        }}
+      >
+        <span
+          style={{
+            // border: '1px solid red',
+            display: "flex",
+            alignItems: "center",
+            gap: icon.iconGap,
+          }}
+        >
+          <span
+            style={{
+              ..._icon,
+              width: iconSize + "px",
+              height: iconSize + "px",
+            }}
+          />
+          <span style={getFontStyle(name)}>{displayName || s}</span>
+        </span>
+        {valueIsShow && (
+          <span style={getFontStyle(valueFont)}>
+            {y}
+            {valueSuffixIsShow && renderSuffix(valueSuffix)}
+          </span>
+        )}
+        {percentageIsShow && (
+          <span style={getFontStyle(percentageFont)}>
+            {Number(percent).toFixed(precision)}
+            {percentageSuffixIsShow && renderSuffix(percentageSuffix)}
+          </span>
+        )}
+      </dd>
+    );
+  };
+  const getBigScreenScale = () => {
+    // 优先使用全局提供的方法
+    if (typeof window.getScreenScale === "function") {
+      try {
+        const result = window.getScreenScale();
+        if (Array.isArray(result) && result.length >= 6) {
+          return result;
+        }
+      } catch (e) {
+        console.error("调用全局 getScreenScale 出错:", e);
+      }
+    }
+
+    // 获取容器元素
+    const bigscreenDom = document.getElementById("bigscreen-container");
+
+    // 元素不存在时的处理
+    if (!bigscreenDom) {
+      return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
+    }
+
+    // 确保元素可见（未被隐藏）
+    const isVisible =
+      window.getComputedStyle(bigscreenDom).display !== "none" &&
+      window.getComputedStyle(bigscreenDom).visibility !== "hidden";
+    if (!isVisible) {
+      return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
+    }
+
+    // 获取元素的布局矩形（最可靠的尺寸获取方式）
+    const rect = bigscreenDom.getBoundingClientRect();
+
+    // 提取基础尺寸（从布局矩形获取，不受样式影响）
+    const screenWidth = rect.width || window.innerWidth;
+    const screenHeight = rect.height || window.innerHeight;
+    const screenLeft = rect.left || 0;
+    const screenTop = rect.top || 0;
 
-		const renderSuffix = (suffix) => {
-			const {
-				content,
-				font: suffiixFont,
-				translate: suffixTranslate,
-			} = suffix;
-			return (
-				<span
-					style={{
-						...getFontStyle(suffiixFont),
-						display: "inline-block",
-						transform: getTranslate3d(suffixTranslate),
-					}}
-				>
-					{content}
-				</span>
-			)
-		}
+    // 处理缩放
+    let scaleX = 1;
+    let scaleY = 1;
 
-		const _icon = getIcon(type, icon);
-		return (
-			<dd
-				style={{
-					display: 'flex',
-					justifyContent: 'space-between',
-					lineHeight: lineHeight + 'px',
-				}}
+    try {
+      const computedStyle = window.getComputedStyle(bigscreenDom);
+      const transform = computedStyle.transform;
 
-			>
-				<span
-					style={{
-						// border: '1px solid red',
-						display: 'flex',
-						alignItems: 'center',
-						gap: icon.iconGap,
-					}}
-				>
-					<span
-						style={{
-							..._icon,
-							width: iconSize + 'px',
-							height: iconSize + 'px',
-						}}
-					/>
-					<span style={getFontStyle(name)}>{displayName || s}</span>
-				</span>
-				{valueIsShow && <span style={getFontStyle(valueFont)}>
-					{y}
-					{valueSuffixIsShow && renderSuffix(valueSuffix)}
-				</span>}
-				{percentageIsShow && <span style={getFontStyle(percentageFont)}>
-					{Number(percent).toFixed(precision)}
-					{percentageSuffixIsShow && renderSuffix(percentageSuffix)}
-				</span>}
-			</dd>
-		);
-	}
-	const getBigScreenScale = () => {
-		// 优先使用全局提供的方法
-		if (typeof window.getScreenScale === 'function') {
-		  try {
-			const result = window.getScreenScale();
-			if (Array.isArray(result) && result.length >= 6) {
-			  return result;
-			}
-		  } catch (e) {
-			console.error('调用全局 getScreenScale 出错:', e);
-		  }
-		}
-	  
-		// 获取容器元素
-		const bigscreenDom = document.getElementById('bigscreen-container');
-	  
-		// 元素不存在时的处理
-		if (!bigscreenDom) {
-		  console.warn('未找到 bigscreen-container 元素，使用视口尺寸');
-		  return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
-		}
-	  
-		// 确保元素可见（未被隐藏）
-		const isVisible = window.getComputedStyle(bigscreenDom).display !== 'none' 
-		  && window.getComputedStyle(bigscreenDom).visibility !== 'hidden';
-		if (!isVisible) {
-		  console.warn('bigscreen-container 元素不可见，使用视口尺寸');
-		  return [1, 1, window.innerWidth, window.innerHeight, 0, 0];
-		}
-	  
-		// 获取元素的布局矩形（最可靠的尺寸获取方式）
-		const rect = bigscreenDom.getBoundingClientRect();
-	  
-		// 提取基础尺寸（从布局矩形获取，不受样式影响）
-		const screenWidth = rect.width || window.innerWidth;
-		const screenHeight = rect.height || window.innerHeight;
-		const screenLeft = rect.left || 0;
-		const screenTop = rect.top || 0;
-	  
-		// 处理缩放
-		let scaleX = 1;
-		let scaleY = 1;
-		
-		try {
-		  const computedStyle = window.getComputedStyle(bigscreenDom);
-		  const transform = computedStyle.transform;
-		  
-		  if (transform && transform !== 'none') {
-			// 解析 transform matrix
-			const matrix = new DOMMatrix(transform);
-			scaleX = matrix.a; // 缩放X因子
-			scaleY = matrix.d; // 缩放Y因子
-		  }
-		} catch (e) {
-		  console.error('解析缩放样式出错:', e);
-		}
-	  
-		// 最终返回值（确保不会有undefined）
-		const result = [
-		  isNaN(scaleX) ? 1 : scaleX,
-		  isNaN(scaleY) ? 1 : scaleY,
-		  isNaN(screenWidth) ? window.innerWidth : screenWidth,
-		  isNaN(screenHeight) ? window.innerHeight : screenHeight,
-		  isNaN(screenLeft) ? 0 : screenLeft,
-		  isNaN(screenTop) ? 0 : screenTop
-		];
-		return result;
-	  };
-	const [scaleX, scaleY,screenWidth,screenHeight,screenLeft,screenTop] = getBigScreenScale()
-	const { x, y } = mousePos
-    const mouseX=x/scaleX
-    const mouseY=y/scaleY
-	const { x: centerX, y: centerY } = pieCenter
-	const getTipPos = () => {
-		const tipPosMap = {
-			rightTop: `translate(${(screenRef.x+translateTip.x+tipWidth)/scaleX+ mouseX-screenLeft/scaleX>(screenWidth/scaleX)?mouseX - tipWidth - translateTip.x:mouseX  + translateTip.x}px,${(screenRef.y-translateTip.y-tipHeight)/scaleY+ mouseY-screenTop/scaleY<0?mouseY + translateTip.y:mouseY - tipHeight - translateTip.y}px)`,
-			leftTop: `translate(${(screenRef.x-translateTip.x-tipWidth)/scaleX+ mouseX-screenLeft/scaleX<0?mouseX + translateTip.x:mouseX - translateTip.x-tipWidth}px,${(screenRef.y-translateTip.y-tipHeight)/scaleY+ mouseY-screenTop/scaleY<0?mouseY + translateTip.y:mouseY - tipHeight - translateTip.y}px)`,
-			leftBottom: `translate(${(screenRef.x-translateTip.x-tipWidth)/scaleX+ mouseX-screenLeft/scaleX<0?mouseX + translateTip.x:mouseX - translateTip.x-tipWidth}px,${(screenRef.y+translateTip.y+tipHeight)/scaleY+ mouseY-screenTop/scaleY>(screenHeight/scaleY)?mouseY - translateTip.y-tipHeight:mouseY + translateTip.y}px)`,
-			rightBottom: `translate(${(screenRef.x+translateTip.x+tipWidth)/scaleX+ mouseX-screenLeft/scaleX>(screenWidth/scaleX)?mouseX - tipWidth - translateTip.x:mouseX  + translateTip.x}px,${(screenRef.y+translateTip.y+tipHeight)/scaleY+ mouseY-screenTop/scaleY>(screenHeight/scaleY)?mouseY - translateTip.y-tipHeight:mouseY + translateTip.y}px)`,
-		  }
-		if (mouseX < centerX && mouseY < centerY) {
-			return tipPosMap.leftTop
-		} else if (mouseX > centerX && mouseY < centerY) {
-			return tipPosMap.rightTop
-		} else if (mouseX >= centerX && mouseY >= centerY) {
-			return tipPosMap.rightBottom
-		} else {
-			return tipPosMap.leftBottom
-		}
-	}
+      if (transform && transform !== "none") {
+        // 解析 transform matrix
+        const matrix = new DOMMatrix(transform);
+        scaleX = matrix.a; // 缩放X因子
+        scaleY = matrix.d; // 缩放Y因子
+      }
+    } catch (e) {
+      console.error("解析缩放样式出错:", e);
+    }
 
-	return <div
-		className='__easyv-tooltip'
-		style={{
-			pointerEvents: 'none',
-			transform: getTipPos(mousePos, pieCenter),
-			width: tipWidth,
-			height: tipHeight,
-			padding: getMargin(margin),
-			background: image
-				? '50% 50% / 100% 100% no-repeat url(' +
-				window.appConfig.ASSETS_URL +
-				image +
-				')'
-				: 'rgba(48, 55, 66, 0.85)',
-		}}
-	>
-		<dl
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				justifyContent: 'space-between',
-				height: '100%',
-			}}
-		>
-			{Item()}
-		</dl>
+    // 最终返回值（确保不会有undefined）
+    const result = [
+      isNaN(scaleX) ? 1 : scaleX,
+      isNaN(scaleY) ? 1 : scaleY,
+      isNaN(screenWidth) ? window.innerWidth : screenWidth,
+      isNaN(screenHeight) ? window.innerHeight : screenHeight,
+      isNaN(screenLeft) ? 0 : screenLeft,
+      isNaN(screenTop) ? 0 : screenTop,
+    ];
+    return result;
+  };
+  const [scaleX, scaleY, screenWidth, screenHeight, screenLeft, screenTop] =
+    getBigScreenScale();
+  const { x, y } = mousePos;
+  const mouseX = x / scaleX;
+  const mouseY = y / scaleY;
+  const { x: centerX, y: centerY } = pieCenter;
+  const getTipPos = () => {
+    const tipPosMap = {
+      rightTop: `translate(${
+        (screenRef.x + translateTip.x + tipWidth) / scaleX +
+          mouseX -
+          screenLeft / scaleX >
+        screenWidth / scaleX
+          ? mouseX - tipWidth - translateTip.x
+          : mouseX + translateTip.x
+      }px,${
+        (screenRef.y - translateTip.y - tipHeight) / scaleY +
+          mouseY -
+          screenTop / scaleY <
+        0
+          ? mouseY + translateTip.y
+          : mouseY - tipHeight - translateTip.y
+      }px)`,
+      leftTop: `translate(${
+        (screenRef.x - translateTip.x - tipWidth) / scaleX +
+          mouseX -
+          screenLeft / scaleX <
+        0
+          ? mouseX + translateTip.x
+          : mouseX - translateTip.x - tipWidth
+      }px,${
+        (screenRef.y - translateTip.y - tipHeight) / scaleY +
+          mouseY -
+          screenTop / scaleY <
+        0
+          ? mouseY + translateTip.y
+          : mouseY - tipHeight - translateTip.y
+      }px)`,
+      leftBottom: `translate(${
+        (screenRef.x - translateTip.x - tipWidth) / scaleX +
+          mouseX -
+          screenLeft / scaleX <
+        0
+          ? mouseX + translateTip.x
+          : mouseX - translateTip.x - tipWidth
+      }px,${
+        (screenRef.y + translateTip.y + tipHeight) / scaleY +
+          mouseY -
+          screenTop / scaleY >
+        screenHeight / scaleY
+          ? mouseY - translateTip.y - tipHeight
+          : mouseY + translateTip.y
+      }px)`,
+      rightBottom: `translate(${
+        (screenRef.x + translateTip.x + tipWidth) / scaleX +
+          mouseX -
+          screenLeft / scaleX >
+        screenWidth / scaleX
+          ? mouseX - tipWidth - translateTip.x
+          : mouseX + translateTip.x
+      }px,${
+        (screenRef.y + translateTip.y + tipHeight) / scaleY +
+          mouseY -
+          screenTop / scaleY >
+        screenHeight / scaleY
+          ? mouseY - translateTip.y - tipHeight
+          : mouseY + translateTip.y
+      }px)`,
+    };
+    if (mouseX < centerX && mouseY < centerY) {
+      return tipPosMap.leftTop;
+    } else if (mouseX > centerX && mouseY < centerY) {
+      return tipPosMap.rightTop;
+    } else if (mouseX >= centerX && mouseY >= centerY) {
+      return tipPosMap.rightBottom;
+    } else {
+      return tipPosMap.leftBottom;
+    }
+  };
 
-	</div>
-})
+  return (
+    <div
+      className="__easyv-tooltip"
+      style={{
+        pointerEvents: "none",
+        transform: getTipPos(mousePos, pieCenter),
+        width: tipWidth,
+        height: tipHeight,
+        padding: getMargin(margin),
+        background: image
+          ? "50% 50% / 100% 100% no-repeat url(" +
+            window.appConfig.ASSETS_URL +
+            image +
+            ")"
+          : "rgba(48, 55, 66, 0.85)",
+      }}
+    >
+      <dl
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          height: "100%",
+        }}
+      >
+        {Item()}
+      </dl>
+    </div>
+  );
+});