@easyv/charts 1.4.28 → 1.4.29

package/lib/components/CartesianChart.js

@@ -138,7 +138,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     e.stopPropagation();
     var data = e.currentTarget.dataset.data;
     var _data = JSON.parse(data);
-    triggerOnRelative(_data);
+    triggerOnRelative('click', _data);
     onEmit("click", _data);
   }, [triggerOnRelative, onEmit]);
 

package/lib/components/Chart.js

@@ -17,14 +17,17 @@ var _excluded = ["id", "type", "config", "config", "data", "onRelative", "emit",
  */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var getCallbackData = function getCallbackData(callbacks, data) {
+var getCallbackData = function getCallbackData(action, callbacks, data) {
   var callbackData;
   if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
-    callbackData = {};
     callbacks.forEach(function (_ref) {
       var origin = _ref.origin,
-        target = _ref.target;
-      callbackData[target] = data[origin];
+        target = _ref.target,
+        _action = _ref.actions;
+      if (action === _action) {
+        callbackData = {};
+        callbackData[target] = data[origin];
+      }
     });
   }
   return callbackData;
@@ -52,11 +55,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var svg = /*#__PURE__*/(0, _react.createRef)();
   var chartWidth = width - marginLeft - marginRight;
   var chartHeight = height - marginTop - marginBottom;
-  var triggerOnRelative = (0, _react.useCallback)(function (data) {
+  var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
       remoteControls = interaction.remoteControls;
-    var callbackData = getCallbackData(callbacks, data);
+    var callbackData = getCallbackData(action, callbacks, data);
     if (callbackData) {
       onRelative && onRelative(id, callbackData);
       remoteControls && emitEvent && remoteControls.forEach(function (o) {

package/lib/components/PieChart.js

@@ -418,15 +418,15 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     });
   }, [series, arcs, radius]);
   var onClick = (0, _react.useCallback)(function (e) {
-    return onEvent({
+    onEvent({
       currentIndex: +e.currentTarget.dataset.index,
       type: "onClick"
     });
   }, [onEvent]);
   var onMouseEnter = (0, _react.useCallback)(function (e) {
-    var _data = arcs[+currentIndex].data;
-    triggerOnRelative(_data);
-    onEmit("onMouseEnter", _data);
+    var _data = arcs[+e.currentTarget.dataset.index].data;
+    triggerOnRelative('mousehover', _data);
+    onEmit("mousehover", _data);
     onEvent({
       currentIndex: +e.currentTarget.dataset.index,
       type: "onMouseEnter"
@@ -456,15 +456,15 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
         },
         onComplete: function onComplete() {
           var _data = arcs[+currentIndex].data;
-          triggerOnRelative(_data);
+          triggerOnRelative("carousel", _data);
           onEmit("carousel", _data);
         }
       });
     } else {
       if (currentIndex !== null && trigger === "onClick") {
         var _data = arcs[+currentIndex].data;
-        triggerOnRelative(_data);
-        onEmit(trigger, _data);
+        triggerOnRelative('click', _data);
+        onEmit('click', _data);
       }
     }
     return function () {

package/lib/components/pieTooltip.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PieTooltip = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -95,17 +96,46 @@ var PieTooltip = /*#__PURE__*/(0, _react.memo)(function (props) {
   var centerX = pieCenter.x,
     centerY = pieCenter.y;
   var getTipPos = function getTipPos() {
+    var getBigscreenScale = function getBigscreenScale() {
+      if (window.getScreenScale) {
+        return window.getScreenScale();
+      } else {
+        var bigscreenDom = document.getElementById('bigscreen-container');
+        if (!bigscreenDom) return [1, 1];
+        var transform = bigscreenDom.style.transform;
+        if (!transform) return [1, 1];
+        var match = transform.match(/scale\(([^)]+)\)/);
+        if (match) {
+          var scaleMatch = match[1].split(',');
+          var _scaleX = scaleMatch[0];
+          var _scaleY = scaleMatch[1];
+          if (_scaleY) {
+            return [Number(_scaleX), Number(_scaleY)];
+          } else {
+            return [Number(_scaleX), Number(_scaleX)];
+          }
+        } else {
+          return [1, 1];
+        }
+      }
+    };
+    var _getBigscreenScale = getBigscreenScale(),
+      _getBigscreenScale2 = (0, _slicedToArray2["default"])(_getBigscreenScale, 2),
+      scaleX = _getBigscreenScale2[0],
+      scaleY = _getBigscreenScale2[1];
+    var _mouseX = mouseX / scaleX;
+    var _mouseY = mouseY / scaleY;
     var tipPosMap = {
-      rightTop: "translate(".concat(mouseX + translateTip.x, "px,").concat(mouseY - tipHeight - translateTip.y, "px)"),
-      leftTop: "translate(".concat(mouseX - tipWidth - translateTip.x, "px,").concat(mouseY - tipHeight - translateTip.y, "px)"),
-      leftBottom: "translate(".concat(mouseX - tipWidth - translateTip.x, "px,").concat(mouseY + translateTip.y, "px)"),
-      rightBottom: "translate(".concat(mouseX + translateTip.x, "px,").concat(mouseY + translateTip.y, "px)")
+      rightTop: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
+      leftTop: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY - tipHeight - translateTip.y, "px)"),
+      leftBottom: "translate(".concat(_mouseX - tipWidth - translateTip.x, "px,").concat(_mouseY + translateTip.y, "px)"),
+      rightBottom: "translate(".concat(_mouseX + translateTip.x, "px,").concat(_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;

package/package.json

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

package/src/components/CartesianChart.js

@@ -152,7 +152,7 @@ const Chart = memo(
         e.stopPropagation();
         const { data } = e.currentTarget.dataset;
         const _data = JSON.parse(data);
-        triggerOnRelative(_data);
+        triggerOnRelative('click',_data);
         onEmit("click", _data);
       },
       [triggerOnRelative, onEmit]

package/src/components/Chart.js

@@ -5,12 +5,14 @@ import React, { memo, useMemo, createRef, useCallback } from 'react';
 import { chartContext } from '../context';
 import { PieChart, CartesianChart } from '.';
 
-const getCallbackData = (callbacks, data) => {
+const getCallbackData = (action,callbacks, data) => {
   let callbackData;
   if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
-    callbackData = {};
-    callbacks.forEach(({ origin, target }) => {
-      callbackData[target] = data[origin];
+    callbacks.forEach(({ origin, target, actions:_action }) => {
+			if(action === _action){
+				callbackData = {};
+				callbackData[target] = data[origin];
+			}
     });
   }
   return callbackData;
@@ -41,10 +43,10 @@ const Chart = memo(
     const chartHeight = height - marginTop - marginBottom;
 
     const triggerOnRelative = useCallback(
-      (data) => {
+      (action,data) => {
         if (!interaction) return;
         const { callbacks, remoteControls } = interaction;
-        const callbackData = getCallbackData(callbacks, data);
+        const callbackData = getCallbackData(action,callbacks, data);
         if (callbackData) {
           onRelative && onRelative(id, callbackData);
           remoteControls &&

package/src/components/PieChart.js

@@ -34,7 +34,7 @@ import { pieLegendFormatter as legendFormatter } from "../formatter";
 import ringCss from "../css/piechart.module.css";
 import { useAiDataOfPie } from "../hooks";
 import { PieTooltip } from "./PieTooltip";
-import { toFixed } from '@easyv/utils/lib/common/utils';
+import { toFixed } from "@easyv/utils/lib/common/utils";
 
 const PI = Math.PI;
 
@@ -399,19 +399,20 @@ const Component = memo(
     }, [series, arcs, radius]);
 
     const onClick = useCallback(
-      (e) =>
+      (e) => {
         onEvent({
           currentIndex: +e.currentTarget.dataset.index,
           type: "onClick",
-        }),
+        });
+      },
       [onEvent]
     );
 
     const onMouseEnter = useCallback(
       (e) => {
-        const _data = arcs[+currentIndex].data;
-        triggerOnRelative(_data);
-        onEmit("onMouseEnter", _data);
+        const _data = arcs[+e.currentTarget.dataset.index].data;
+        triggerOnRelative('mousehover',_data);
+        onEmit("mousehover", _data);
         onEvent({
           currentIndex: +e.currentTarget.dataset.index,
           type: "onMouseEnter",
@@ -448,15 +449,15 @@ const Component = memo(
           },
           onComplete: () => {
             const _data = arcs[+currentIndex].data;
-            triggerOnRelative(_data);
+            triggerOnRelative("carousel",_data);
             onEmit("carousel", _data);
           },
         });
       } else {
         if (currentIndex !== null && trigger === "onClick") {
           const _data = arcs[+currentIndex].data;
-          triggerOnRelative(_data);
-          onEmit(trigger, _data);
+          triggerOnRelative('click',_data);
+          onEmit('click', _data);
         }
       }
       return () => {
@@ -564,7 +565,7 @@ const Component = memo(
                       onClick={onClick}
                       onMouseEnter={onMouseEnter}
                       onMouseLeave={onMouseLeave}
-                      onMouseMove={(e)=>{
+                      onMouseMove={(e) => {
                         const _data = arcs[+e.currentTarget.dataset.index];
                         const warpBoxPos = {
                           x: pieWarpEl.current.getBoundingClientRect().x,
@@ -620,7 +621,10 @@ const Component = memo(
           )}
         <Legend
           {...legend}
-          series={_arcs.map((arc)=>({...arc,percent:arc.percent.toFixed(legendPrecision)}))}
+          series={_arcs.map((arc) => ({
+            ...arc,
+            percent: arc.percent.toFixed(legendPrecision),
+          }))}
           formatter={formatter}
           judge={judgeData}
         />
@@ -856,7 +860,10 @@ const Component = memo(
           )}
         <Legend
           {...legend}
-          series={_arcs.map((arc)=>({...arc,percent:arc.percent.toFixed(legendPrecision)}))}
+          series={_arcs.map((arc) => ({
+            ...arc,
+            percent: arc.percent.toFixed(legendPrecision),
+          }))}
           formatter={formatter}
           judge={judgeData}
         />

package/src/components/PieTooltip.jsx

@@ -3,132 +3,159 @@ import { getFontStyle, getMargin, getTranslate3d, getTranslate2d, getIcon } from
 
 
 export const PieTooltip = memo((props) => {
-  const { mousePos,
-    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 { mousePos,
+		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 Item = () => {
-    const { data: { s, y }, percent } = data
-    const { type, icon, displayName } = [...series.values()].find(
-      (series) => series.name == s
-    );
+	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 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',
-        }}
+		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 { x: mouseX, y: mouseY } = mousePos
-  const { x: centerX, y: centerY } = pieCenter
-  const getTipPos = () => {
-    const tipPosMap = {
-      rightTop: `translate(${mouseX + translateTip.x}px,${mouseY - tipHeight - translateTip.y}px)`,
-      leftTop: `translate(${mouseX - tipWidth - translateTip.x}px,${mouseY - tipHeight - translateTip.y}px)`,
-      leftBottom: `translate(${mouseX - tipWidth - translateTip.x}px,${mouseY + translateTip.y}px)`,
-      rightBottom: `translate(${mouseX + translateTip.x}px,${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
-    }
-  }
+			>
+				<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 { x: mouseX, y: mouseY } = mousePos
+	const { x: centerX, y: centerY } = pieCenter
+	const getTipPos = () => {
 
-  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>
+		const getBigscreenScale = () => {
+			if (window.getScreenScale) {
+				return window.getScreenScale()
+			} else {
+				const bigscreenDom = document.getElementById('bigscreen-container')
+				if (!bigscreenDom) return [1, 1]
+				const transform = bigscreenDom.style.transform
+				if (!transform) return [1, 1]
+				let match = transform.match(/scale\(([^)]+)\)/)
+				if (match) {
+					const scaleMatch = match[1].split(',')
+					let scaleX = scaleMatch[0];
+					let scaleY = scaleMatch[1];
+					if (scaleY) {
+						return [Number(scaleX), Number(scaleY)]
+					} else {
+						return [Number(scaleX), Number(scaleX)]
+					}
+				} else {
+					return [1, 1]
+				}
+			}
+		}
+		const [scaleX, scaleY] = getBigscreenScale()
+		const _mouseX = mouseX / scaleX
+		const _mouseY = mouseY / scaleY
+		const tipPosMap = {
+			rightTop: `translate(${_mouseX + translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
+			leftTop: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY - tipHeight - translateTip.y}px)`,
+			leftBottom: `translate(${_mouseX - tipWidth - translateTip.x}px,${_mouseY + translateTip.y}px)`,
+			rightBottom: `translate(${_mouseX + translateTip.x}px,${(_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>
 })