@easyv/charts 1.8.24 → 1.8.25

package/src/components/Chart.js

@@ -1,18 +1,26 @@
 /**
  * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
  */
-import React, { memo, useMemo, useRef, createRef, useState, useEffect, useCallback } from 'react';
-import { chartContext } from '../context';
-import { PieChart, CartesianChart } from '.';
-import { group } from 'd3v7';
+import React, {
+  memo,
+  useMemo,
+  useRef,
+  createRef,
+  useState,
+  useEffect,
+  useCallback,
+} from "react";
+import { chartContext } from "../context";
+import { PieChart, CartesianChart } from ".";
+import { group } from "d3v7";
 
-const getCallbackData = (action,callbacks, data) => {
-  const callbackData={};
+const getCallbackData = (action, callbacks, data) => {
+  const callbackData = {};
   if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
-    callbacks.forEach(({ origin, target, actions:_action }) => {
-			if(action === _action){
-				callbackData[target] = data[origin];
-			}
+    callbacks.forEach(({ origin, target, actions: _action }) => {
+      if (action === _action) {
+        callbackData[target] = origin ? data[origin] : data;
+      }
     });
   }
   return callbackData;
@@ -30,7 +38,7 @@ const Chart = memo(
       },
       interaction,
     },
-    data:originData,
+    data: originData,
     onRelative,
     emit,
     emitEvent,
@@ -46,13 +54,14 @@ const Chart = memo(
     const chartWidth = width - marginLeft - marginRight;
     const chartHeight = height - marginTop - marginBottom;
     const [active, setActive] = useState(true);
-    const scaleRef = useRef([1,1]);
+    const scaleRef = useRef([1, 1]);
+    const screenPosRef = useRef({ left: 0, top: 0 });
     const triggerOnRelative = useCallback(
-      (action,data) => {
+      (action, data) => {
         if (!interaction) return;
         const { callbacks, remoteControls } = interaction;
         const callbackData = getCallbackData(action, callbacks, data);
-        if (JSON.stringify(callbackData)!="{}") {
+        if (Object.keys(callbackData).length > 0) {
           onRelative && onRelative(id, callbackData);
           remoteControls &&
             emitEvent &&
@@ -61,30 +70,31 @@ const Chart = memo(
               if (
                 control.screen &&
                 control.type &&
-                control.type === 'callback'
+                control.type === "callback"
               ) {
                 emitEvent({
                   screen: control.screen,
-                  type: 'callback',
+                  type: "callback",
                   callbackData,
                 });
               }
             });
         }
       },
-      [ JSON.stringify(interaction)]
+      [JSON.stringify(interaction)]
     );
 
     const onEmit = useCallback(
-      (type = 'click', data) => emit && emit(type, data),
+      (type = "click", data) => emit && emit(type, data),
       [emit]
     );
 
     const context = useMemo(
       () => ({
         id,
-        isIOS:isIOS.current,    //是否为IOS设备
-        scale:scaleRef, //大屏的缩放比
+        isIOS: isIOS.current, //是否为IOS设备
+        scale: scaleRef, //大屏的缩放比
+        screenPos: screenPosRef, //大屏的偏移位置
         width: chartWidth,
         height: chartHeight,
         triggerOnRelative,
@@ -93,62 +103,86 @@ const Chart = memo(
       }),
       [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
     );
-    
-    useEffect(()=>{
-      let isAnimation = window.screenConfig?window.screenConfig.isAnimation:true; //大屏的全局设置是否允许开启动画，false为不允许
-      if(!isAnimation) setActive(false);
-      const activeHandler=(e)=>{
+
+    useEffect(() => {
+      let isAnimation = window.screenConfig
+        ? window.screenConfig.isAnimation
+        : true; //大屏的全局设置是否允许开启动画，false为不允许
+      if (!isAnimation) setActive(false);
+      const activeHandler = (e) => {
         const { dynamicData = true } = e;
         isAnimation && setActive(dynamicData);
-      }
+      };
       getScreenScale();
-      document.addEventListener(`switchActive_${id}`,activeHandler);
-      document.addEventListener("resize",getScreenScale);
-      return ()=>{
-        document.removeEventListener(`switchActive_${id}`,activeHandler);
-        document.removeEventListener("resize",getScreenScale);
-      }
-    },[]);
-    
+      document.addEventListener(`switchActive_${id}`, activeHandler);
+      document.addEventListener("resize", getScreenScale);
+      return () => {
+        document.removeEventListener(`switchActive_${id}`, activeHandler);
+        document.removeEventListener("resize", getScreenScale);
+      };
+    }, []);
+
     let data = checkData(originData);
-    
+
     return (
       <chartContext.Provider value={context}>
-        {type == 'pie' ? (
-          <PieChart id={id} config={config} data={data} active={active} {...props} />
+        {type == "pie" ? (
+          <PieChart
+            id={id}
+            config={config}
+            data={data}
+            active={active}
+            {...props}
+          />
         ) : (
-          <CartesianChart id={id} config={config} data={data} active={active} {...props} />
-         )}
+          <CartesianChart
+            id={id}
+            config={config}
+            data={data}
+            active={active}
+            {...props}
+          />
+        )}
       </chartContext.Provider>
-      
     );
     //获取大屏缩放系数
-    function getScreenScale(){
-      setTimeout(()=>{
-          //获取大屏缩放系数
-          let dom = document.getElementById("bigscreen-container") || document.getElementById("m-simulator");
-          if(dom){
-            const transform = dom.style.transform;
-            const scale = transform?transform.match(/^scale\((.+)\)$/)[1]:"1,1";
-            const arr = scale.split(",");
-            scaleRef.current = [1/arr[0],1/(arr.length===1?arr[0]:arr[1])];   //这里做一次除法，后面就可以用乘法计算值了
-          }
-      },50);
+    function getScreenScale() {
+      setTimeout(() => {
+        //获取大屏缩放系数
+        let dom =
+          document.getElementById("bigscreen-container") ||
+          document.getElementById("m-simulator");
+        if (dom) {
+          const transform = dom.style.transform;
+          const scale = transform
+            ? transform.match(/^scale\((.+)\)$/)[1]
+            : "1,1";
+          const arr = scale.split(",");
+          scaleRef.current = [
+            1 / arr[0],
+            1 / (arr.length === 1 ? arr[0] : arr[1]),
+          ]; //这里做一次除法，后面就可以用乘法计算值了
+          screenPosRef.current = {
+            left: parseFloat(dom.style.left),
+            top: parseFloat(dom.style.top),
+          };
+        }
+      }, 100);
     }
     //预检数据格式是否规范
-    function checkData(data){
-      try{
-        const hasS = data.some(d=>d.s);
-        if(!hasS){
-          return data.map(d=>{
+    function checkData(data) {
+      try {
+        const hasS = data.some((d) => d.s);
+        if (!hasS) {
+          return data.map((d) => {
             return {
               ...d,
-              s:"系列一"
-            }
-          })
+              s: "系列一",
+            };
+          });
         }
         return data;
-      }catch(e){}
+      } catch (e) {}
       return [];
     }
   }

package/src/components/Label.js

@@ -3,7 +3,12 @@
  */
 import { memo, useContext } from "react";
 import { min, max } from "d3v7";
-import { getTranslate2d, getSeriesInfo, getFontStyle, formatFont } from "../utils";
+import {
+  getTranslate2d,
+  getSeriesInfo,
+  getFontStyle,
+  formatFont,
+} from "../utils";
 import { chartContext } from "../context";
 
 const getHighlightData = (data, extent) => {
@@ -31,8 +36,8 @@ export default memo(
     config: {
       seriesIntervalWidth: paddingInner = 0,
       paddingInner: paddingOuter = 0,
-      showType:seriesType = 'bar',
-      highlight: { show: showHighlight, extent, ...highlightStyle }={},//配置项不存在的处理
+      showType: seriesType = "bar",
+      highlight: { show: showHighlight, extent, ...highlightStyle } = {}, //配置项不存在的处理
       ...other
     },
     config,
@@ -42,25 +47,25 @@ export default memo(
     data,
     xAxis: { scaler: xScaler, step, direction },
     yAxis: { scaler: yScaler, isClipAxis, clipValue },
-    triggerClick
+    triggerEvents,
   }) => {
     let selectConfig = other;
-    if(selectStyle){
-      const { show, showType, icon, numlabel:label } = selectStyle;
-      if(show && seriesType==showType){
-        if(showType=="bar"){
+    if (selectStyle) {
+      const { show, showType, icon, numlabel: label } = selectStyle;
+      if (show && seriesType == showType) {
+        if (showType == "bar") {
           selectConfig = { label };
-        }else{
+        } else {
           selectConfig = { icon, label };
         }
       }
     }
     let highlightConfig = other;
-    if(highlightStyle){
-      highlightConfig = { ...other, label:highlightStyle.numlabel };
+    if (highlightStyle) {
+      highlightConfig = { ...other, label: highlightStyle.numlabel };
     }
     const lineType = config.hasOwnProperty("line"); //  堆叠处理
-    
+
     if (!data.length) return null;
     const { width, height } = useContext(chartContext);
 
@@ -72,19 +77,27 @@ export default memo(
     });
     const _data = showHighlight ? getHighlightData(data, extent) : data;
     const isVertical = direction === "vertical";
-    
+
     return (
       <g className="__easyv-label">
         {_data.map(
           (
-            { flag, index, bound: [start, end], data, data: { x, y, showY, s } },
+            {
+              flag,
+              index,
+              bound: [start, end],
+              data,
+              data: { x, y, showY, s },
+            },
             i
           ) => {
             let y1, y2;
-            const { icon, label } = x==curXLabel?selectConfig:flag?highlightConfig:other;
+            const { icon, label } =
+              x == curXLabel ? selectConfig : flag ? highlightConfig : other;
             const showIcon = icon && icon.show;
             const showLabel = label && label.show;
-            const { position:_position="outerStart", reverse=true } = label || {};
+            const { position: _position = "outerStart", reverse = true } =
+              label || {};
             if (isClipAxis) {
               if (end > +clipValue) {
                 y1 = yScaler[1](start);
@@ -108,7 +121,9 @@ export default memo(
               xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
             if (isNaN(positionX)) return null;
-            const position =isXRepeat?positionX + (config.line ? step : seriesWidth) / 2: xScaler(x);
+            const position = isXRepeat
+              ? positionX + (config.line ? step : seriesWidth) / 2
+              : xScaler(x);
             const labelPosition = isVertical
               ? getVerticalLabel({
                   position: _position,
@@ -116,7 +131,7 @@ export default memo(
                   y1,
                   y2,
                   width,
-                  reverse
+                  reverse,
                 })
               : getHorizontalLabel({
                   position: _position,
@@ -124,7 +139,7 @@ export default memo(
                   y1,
                   y2,
                   height,
-                  reverse
+                  reverse,
                 });
             const attr = isVertical
               ? {
@@ -140,14 +155,23 @@ export default memo(
             return (
               <g
                 key={i}
-                onClick={e=>triggerClick(e,"setCurrent")}
+                onClick={(e) => triggerEvents(e, "setCurrent")}
+                onMouseMove={(e) => triggerEvents(e, "mouseenter")}
+                onMouseLeave={(e) => triggerEvents(e, "mouseleave")}
                 style={{ cursor: "pointer" }}
                 data-data={JSON.stringify(data)}
               >
                 {showIcon && !isNaN(attr.y) && (
                   <Icon cx={attr.x} cy={y2} config={icon} />
                 )}
-                {showLabel && <Label value={showY} config={label} reverse={reverse} {...attr} />}
+                {showLabel && (
+                  <Label
+                    value={showY}
+                    config={label}
+                    reverse={reverse}
+                    {...attr}
+                  />
+                )}
               </g>
             );
           }
@@ -164,13 +188,15 @@ const Label = ({
   config: {
     font,
     translate: { x: translateX = 0, y: translateY = 0 },
-    suffix:{
-      content, font:suffixFont, translate:{ x:suffixX, y:suffixY }
-    }
+    suffix: {
+      content,
+      font: suffixFont,
+      translate: { x: suffixX, y: suffixY },
+    },
   },
   textAnchor = "middle",
   dominantBaseline = "middle",
-  reverse
+  reverse,
 }) => {
   return (
     <text
@@ -182,12 +208,18 @@ const Label = ({
       })}
       textAnchor={textAnchor}
       dominantBaseline={dominantBaseline}
-      style={{...formatFont(font,"svg")}}
+      style={{ ...formatFont(font, "svg") }}
     >
       <tspan>{value}</tspan>
-      <tspan dx={suffixX} dy={suffixY} style={{
-        ...getFontStyle(suffixFont,"svg")
-      }}>{content}</tspan>
+      <tspan
+        dx={suffixX}
+        dy={suffixY}
+        style={{
+          ...getFontStyle(suffixFont, "svg"),
+        }}
+      >
+        {content}
+      </tspan>
     </text>
   );
 };
@@ -227,13 +259,20 @@ const Circle = ({ cx, cy, color, radius }) => (
   <circle cx={cx} cy={cy} fill={color} r={radius} stroke="none" />
 );
 
-const getVerticalLabel = ({ position = "outerStart", width, y, y1, y2, reverse = true }) => {
-  const needReverse = reverse && y<0;
+const getVerticalLabel = ({
+  position = "outerStart",
+  width,
+  y,
+  y1,
+  y2,
+  reverse = true,
+}) => {
+  const needReverse = reverse && y < 0;
   switch (position) {
     case "start":
       return {
         x: y2,
-        textAnchor: needReverse?"end":"start",
+        textAnchor: needReverse ? "end" : "start",
       };
     case "middle":
       return {
@@ -243,12 +282,12 @@ const getVerticalLabel = ({ position = "outerStart", width, y, y1, y2, reverse =
     case "end":
       return {
         x: y1,
-        textAnchor: needReverse?"start":"end",
+        textAnchor: needReverse ? "start" : "end",
       };
     case "outerStart":
       return {
         x: y1,
-        textAnchor: needReverse?"end":"start",
+        textAnchor: needReverse ? "end" : "start",
       };
     case "chartStart":
       return {
@@ -257,13 +296,20 @@ const getVerticalLabel = ({ position = "outerStart", width, y, y1, y2, reverse =
       };
   }
 };
-const getHorizontalLabel = ({ position = "outerStart", height, y, y1, y2, reverse = true }) => {
-  const needReverse = reverse && y<0;
+const getHorizontalLabel = ({
+  position = "outerStart",
+  height,
+  y,
+  y1,
+  y2,
+  reverse = true,
+}) => {
+  const needReverse = reverse && y < 0;
   switch (position) {
     case "start":
       return {
         y: y1,
-        dominantBaseline: needReverse?"text-before-edge":"text-after-edge",
+        dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge",
       };
     case "middle":
       return {
@@ -273,12 +319,12 @@ const getHorizontalLabel = ({ position = "outerStart", height, y, y1, y2, revers
     case "end":
       return {
         y: y2,
-        dominantBaseline: needReverse?"text-after-edge":"text-before-edge",
+        dominantBaseline: needReverse ? "text-after-edge" : "text-before-edge",
       };
     case "outerStart":
       return {
         y: y2,
-        dominantBaseline: needReverse?"text-before-edge":"text-after-edge",
+        dominantBaseline: needReverse ? "text-before-edge" : "text-after-edge",
       };
     case "chartStart":
       return {