@easyv/charts 1.8.5 → 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,10 +232,9 @@ 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,
-    left = _ref5.left,
-    top = _ref5.top,
     _ref5$config = _ref5.config,
     _ref5$config$chart = _ref5$config.chart,
     label = _ref5$config$chart.label,
@@ -301,12 +300,6 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     hoverEvent = _ref5.hoverEvent,
     _ref5$data = _ref5.data,
     originData = _ref5$data === void 0 ? [] : _ref5$data;
-  var attribute = {
-    width: width,
-    height: height,
-    top: top,
-    left: left
-  };
   var data = originData.map(function (d) {
     return _objectSpread(_objectSpread({}, d), {}, {
       y: d.y < 0 ? 0 : d.y
@@ -622,8 +615,8 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       x: halfChartWidth,
       y: maxRadius + marginTop
     },
-    attribute: attribute,
-    mousePos: mousePos
+    mousePos: mousePos,
+    domRef: domRef
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {
@@ -788,7 +781,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       y: maxRadius + marginTop
     },
     mousePos: mousePos,
-    attribute: attribute
+    domRef: domRef
   })), /*#__PURE__*/_react["default"].createElement(_.Legend, (0, _extends2["default"])({}, legend, {
     height: chartHeight,
     series: _arcs.map(function (arc) {

package/lib/components/pieTooltip.js

@@ -17,7 +17,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (props) {
   var mousePos = props.mousePos,
-    attribute = props.attribute,
+    domRef = props.domRef,
     pieCenter = props.pieCenter,
     _props$config$tip = props.config.tip,
     _props$config$tip$dat = _props$config$tip.data,
@@ -43,6 +43,7 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     translateTip = _props$config$tip.translate,
     data = props.data,
     series = props.series;
+  var screenRef = domRef.current.getBoundingClientRect();
   var Item = function Item() {
     var _data$data = data.data,
       s = _data$data.s,
@@ -166,10 +167,10 @@ var PieTooltip = exports.PieTooltip = /*#__PURE__*/(0, _react.memo)(function (pr
     // const _mouseX = mouseX / scaleX
     // const _mouseY = mouseY / scaleY
     var tipPosMap = {
-      rightTop: "translate(".concat((attribute.left + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n\t\t\t").concat((attribute.top - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
-      leftTop: "translate(".concat((attribute.left - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n\t\t\t").concat((attribute.top - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
-      leftBottom: "translate(".concat((attribute.left - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n\t\t\t").concat((attribute.top + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)"),
-      rightBottom: "translate(".concat((attribute.left + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n\t\t\t").concat((attribute.top + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)")
+      rightTop: "translate(".concat((screenRef.x + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n      ").concat((screenRef.y - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
+      leftTop: "translate(".concat((screenRef.x - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n      ").concat((screenRef.y - tipHeight) / scaleY + mouseY - screenTop + translateTip.y < 0 ? mouseY + translateTip.y : mouseY - tipHeight - translateTip.y, "px)"),
+      leftBottom: "translate(".concat((screenRef.x - tipWidth) / scaleX + mouseX - screenLeft + translateTip.x < 0 ? mouseX + translateTip.x : mouseX - tipWidth - translateTip.x, "px,\n      ").concat((screenRef.y + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)"),
+      rightBottom: "translate(".concat((screenRef.x + tipWidth) / scaleX + mouseX - screenLeft + translateTip.x > screenWidth ? mouseX - tipWidth - translateTip.x : mouseX + translateTip.x, "px,\n      ").concat((screenRef.y + tipHeight) / scaleY + mouseY - screenTop + translateTip.y > screenHeight ? mouseY - tipHeight - translateTip.y : mouseY + translateTip.y, "px)")
     };
     if (mouseX < centerX && mouseY < centerY) {
       return tipPosMap.leftTop;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.8.5",
+  "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,10 +247,9 @@ const getCircleScale = ({ count, color, width, length } = tick, radius) => {
 
 const Component = memo(
   ({
+    domRef,
     width,
     height,
-    left,
-    top,
     config: {
       chart: {
         label,
@@ -292,7 +291,6 @@ const Component = memo(
     hoverEvent,
     data: originData = [],
   }) => {
-    const attribute={width,height,top,left}
     const data = originData.map((d) => ({ ...d, y: d.y < 0 ? 0 : d.y }));
     const prevIndex = useRef(null);
     const { precision: legendPrecision } = legend.config.percent;
@@ -637,8 +635,8 @@ const Component = memo(
                   x: halfChartWidth,
                   y: maxRadius + marginTop,
                 }}
-                attribute={attribute}
                 mousePos={mousePos}
+                domRef={domRef}
               />
             </div>
           )}
@@ -900,7 +898,7 @@ const Component = memo(
                   y: maxRadius + marginTop,
                 }}
                 mousePos={mousePos}
-                attribute={attribute}
+                domRef={domRef}
               />
             </div>
           )}

package/src/components/PieTooltip.jsx

@@ -3,7 +3,7 @@ import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from
 
 
 export const PieTooltip = memo((props) => {
-	const { mousePos,attribute,
+	const { mousePos,domRef,
 		pieCenter,
 		config: {
 			tip: {
@@ -19,7 +19,7 @@ export const PieTooltip = memo((props) => {
 		},
 		data,
 		series } = props
-
+		const screenRef = domRef.current.getBoundingClientRect();
 	const Item = () => {
 		const { data: { s, y }, percent } = data
 		const { type, icon, displayName } = [...series.values()].find(
@@ -87,92 +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);
-  }
+		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;
+		  };
 
-  // 最终返回值（确保不会有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(${(attribute.left+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:  mouseX + translateTip.x}px,
-			${(attribute.top-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
-			leftTop: `translate(${(attribute.left-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
-			${(attribute.top-tipHeight)/scaleY+mouseY-screenTop+translateTip.y<0?mouseY + translateTip.y: mouseY - tipHeight - translateTip.y}px)`,
-			leftBottom: `translate(${(attribute.left-tipWidth)/scaleX+mouseX-screenLeft+translateTip.x<0?mouseX+translateTip.x: mouseX - tipWidth - translateTip.x}px,
-			${(attribute.top+tipHeight)/scaleY+mouseY-screenTop+translateTip.y>screenHeight? mouseY- tipHeight- translateTip.y: mouseY + translateTip.y}px)`,
-			rightBottom: `translate(${(attribute.left+tipWidth)/scaleX+mouseX-screenLeft+translateTip.x>screenWidth?mouseX -tipWidth- translateTip.x:mouseX + translateTip.x}px,
-			${(attribute.top+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