@easyv/charts 1.8.6 → 1.8.7

package/lib/components/Chart.js

@@ -64,6 +64,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     active = _useState2[0],
     setActive = _useState2[1];
   var scaleRef = (0, _react.useRef)([1, 1]);
+  var domRef = (0, _react.useRef)();
   var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
@@ -121,12 +122,16 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var data = checkData(originData);
   return /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
     value: context
-  }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
+  }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement("div", {
+    ref: domRef
+  }, /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
     id: id,
     config: config,
     data: data,
     active: active
-  }, props)) : /*#__PURE__*/_react["default"].createElement(_.CartesianChart, (0, _extends2["default"])({
+  }, props, {
+    domRef: domRef
+  }))) : /*#__PURE__*/_react["default"].createElement(_.CartesianChart, (0, _extends2["default"])({
     id: id,
     config: config,
     data: data,

package/lib/components/PieChart.js

@@ -232,7 +232,8 @@ var getCircleScale = function getCircleScale() {
   }));
 };
 var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
-  var width = _ref5.width,
+  var domRef = _ref5.domRef,
+    width = _ref5.width,
     height = _ref5.height,
     _ref5$config = _ref5.config,
     _ref5$config$chart = _ref5$config.chart,
@@ -305,7 +306,6 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     });
   });
   var prevIndex = (0, _react.useRef)(null);
-  var domRef = (0, _react.useRef)();
   var legendPrecision = legend.config.percent.precision;
   var _useContext = (0, _react.useContext)(_context.chartContext),
     id = _useContext.id,
@@ -519,9 +519,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     hoverData = _useState6[0],
     setHoverData = _useState6[1];
   var pieWarpEl = (0, _react.useRef)(null);
-  return outerDecorate ? /*#__PURE__*/_react["default"].createElement("div", {
-    ref: domRef
-  }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
+  return outerDecorate ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
   , {
     width: width,
     height: height,
@@ -618,7 +616,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       y: maxRadius + marginTop
     },
     mousePos: mousePos,
-    domRef: domRef.current ? domRef : null
+    domRef: domRef
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {
@@ -628,9 +626,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }),
     formatter: formatter,
     judge: judgeData
-  }))) : /*#__PURE__*/_react["default"].createElement("div", {
-    ref: domRef
-  }, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
+  }))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     width: width,
     height: height,
     marginLeft: marginLeft,
@@ -785,7 +781,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       y: maxRadius + marginTop
     },
     mousePos: mousePos,
-    domRef: domRef.current ? domRef : null
+    domRef: domRef
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.8.6",
+  "version": "1.8.7",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Chart.js

@@ -47,6 +47,7 @@ const Chart = memo(
     const chartHeight = height - marginTop - marginBottom;
     const [active, setActive] = useState(true);
     const scaleRef = useRef([1,1]);
+    const domRef=useRef()
     const triggerOnRelative = useCallback(
       (action,data) => {
         if (!interaction) return;
@@ -115,7 +116,7 @@ const Chart = memo(
     return (
       <chartContext.Provider value={context}>
         {type == 'pie' ? (
-          <PieChart id={id} config={config} data={data} active={active} {...props} />
+          <div ref={domRef}><PieChart id={id} config={config} data={data} active={active} {...props} domRef={domRef} /></div>
         ) : (
           <CartesianChart id={id} config={config} data={data} active={active} {...props} />
          )}

package/src/components/PieChart.js

@@ -247,6 +247,7 @@ const getCircleScale = ({ count, color, width, length } = tick, radius) => {
 
 const Component = memo(
   ({
+    domRef,
     width,
     height,
     config: {
@@ -292,7 +293,6 @@ const Component = memo(
   }) => {
     const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
     const prevIndex = useRef(null);
-    const domRef=useRef()
     const { precision: legendPrecision } = legend.config.percent;
     const {
       id,
@@ -514,7 +514,7 @@ const Component = memo(
     const [hoverData, setHoverData] = useState(null);
     const pieWarpEl = useRef(null);
     return outerDecorate ? (
-      <div ref={domRef}>
+      <>
         <ChartContainer //用于生成甜甜圈图，判断依据是外环装饰这个配置项(outerDecorate)
           width={width}
           height={height}
@@ -636,7 +636,7 @@ const Component = memo(
                   y: maxRadius + marginTop,
                 }}
                 mousePos={mousePos}
-                domRef={domRef.current ? domRef : null}
+                domRef={domRef}
               />
             </div>
           )}
@@ -650,9 +650,9 @@ const Component = memo(
           formatter={formatter}
           judge={judgeData}
         />
-      </div>
+      </>
     ) : (
-      <div ref={domRef}>
+      <>
         <ChartContainer
           width={width}
           height={height}
@@ -898,7 +898,7 @@ const Component = memo(
                   y: maxRadius + marginTop,
                 }}
                 mousePos={mousePos}
-                domRef={domRef.current ? domRef : null}
+                domRef={domRef}
               />
             </div>
           )}
@@ -912,7 +912,7 @@ const Component = memo(
           formatter={formatter}
           judge={judgeData}
         />
-      </div>
+      </>
     );
   }
 );

package/src/components/PieTooltip.jsx

@@ -87,93 +87,93 @@ export const PieTooltip = memo((props) => {
 	const { x: centerX, y: centerY } = pieCenter
 	const getTipPos = () => {
 
-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 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 _mouseX = mouseX / scaleX
-		// const _mouseY = mouseY / scaleY
+		const _mouseX = mouseX / scaleX
+		const _mouseY = mouseY / scaleY
 		const tipPosMap = {
-	  rightTop: `translate(${(screenRef.x+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:  mouseX + translateTip.x}px,
-      ${(screenRef.y-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
-      leftTop: `translate(${(screenRef.x-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
-      ${(screenRef.y-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
-      leftBottom: `translate(${(screenRef.x-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
-      ${(screenRef.y+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
-      rightBottom: `translate(${(screenRef.x+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:mouseX + translateTip.x}px,
-      ${(screenRef.y+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
+	  rightTop: `translate(${(screenRef.x+tipWidth)/scaleX+_mouseX-screenLeft+translateTip.x>screenWidth?_mouseX -tipWidth- translateTip.x:  _mouseX + translateTip.x}px,
+      ${(screenRef.y-tipHeight)/scaleY+_mouseY-screenTop+translateTip.y<0?_mouseY + translateTip.y: _mouseY - tipHeight - translateTip.y}px)`,
+      leftTop: `translate(${(screenRef.x-tipWidth)/scaleX+_mouseX-screenLeft+translateTip.x<0?_mouseX+translateTip.x: _mouseX - tipWidth - translateTip.x}px,
+      ${(screenRef.y-tipHeight)/scaleY+_mouseY-screenTop+translateTip.y<0?_mouseY + translateTip.y: _mouseY - tipHeight - translateTip.y}px)`,
+      leftBottom: `translate(${(screenRef.x-tipWidth)/scaleX+_mouseX-screenLeft+translateTip.x<0?_mouseX+translateTip.x: _mouseX - tipWidth - translateTip.x}px,
+      ${(screenRef.y+tipHeight)/scaleY+_mouseY-screenTop+translateTip.y>screenHeight? _mouseY- tipHeight- translateTip.y: _mouseY + translateTip.y}px)`,
+      rightBottom: `translate(${(screenRef.x+tipWidth)/scaleX+_mouseX-screenLeft+translateTip.x>screenWidth?_mouseX -tipWidth- translateTip.x:_mouseX + translateTip.x}px,
+      ${(screenRef.y+tipHeight)/scaleY+_mouseY-screenTop+translateTip.y>screenHeight? _mouseY- tipHeight- translateTip.y: _mouseY + translateTip.y}px)`,
 		  }
-		if (mouseX < centerX && mouseY < centerY) {
+		  if (_mouseX < centerX && _mouseY < centerY) {
 			return tipPosMap.leftTop
-		} else if (mouseX > centerX && mouseY < centerY) {
+		} else if (_mouseX > centerX && _mouseY < centerY) {
 			return tipPosMap.rightTop
-		} else if (mouseX >= centerX && mouseY >= centerY) {
+		} else if (_mouseX >= centerX && _mouseY >= centerY) {
 			return tipPosMap.rightBottom
 		} else {
 			return tipPosMap.leftBottom