@easyv/charts 1.8.24 → 1.8.25

package/src/components/Band.tsx

@@ -37,29 +37,34 @@ const getAttr = ({
   x: number;
   y: number;
 }) => {
-  const len = length?length:0.1;  //柱子长度
-  if (isVertical){
-    return { width: len, height: seriesWidth, x: y, y: x, bgAttr:{
-      x:0,
-      y:x,
-      width: len+x,
+  const len = length ? length : 0.1; //柱子长度
+  if (isVertical) {
+    return {
+      width: len,
       height: seriesWidth,
-    } };
-  }else{
+      x: y,
+      y: x,
+      bgAttr: {
+        x: 0,
+        y: x,
+        width: len + x,
+        height: seriesWidth,
+      },
+    };
+  } else {
     return {
       x,
       y,
       width: seriesWidth,
       height: len,
-      bgAttr:{
+      bgAttr: {
         x,
-        y:0,
+        y: 0,
         width: seriesWidth,
-        height: y+len,
-      }
+        height: y + len,
+      },
     };
   }
-  
 };
 
 const getBorderRadius = ({
@@ -83,7 +88,7 @@ const getBorderRadius = ({
 export default memo(
   ({
     //控制图部分，主要是为了控制图的指示器，在悬浮的时候显示
-    triggerClick,
+    triggerEvents,
     indicatorWidth,
     isControlChart = false,
     setCtlTip,
@@ -100,23 +105,29 @@ export default memo(
     bandLength = 0,
     auto = false,
     data,
-    xAxis: { scaler: normalScaler, step:normalStep, controlStep, direction, controlDragScaler },
+    xAxis: {
+      scaler: normalScaler,
+      step: normalStep,
+      controlStep,
+      direction,
+      controlDragScaler,
+    },
     yAxis: { scaler: yScaler, isClipAxis, clipValue, reverse },
   }: any) => {
     if (!data.length) return null;
     let selectConfig = other;
-    if(selectStyle){
+    if (selectStyle) {
       const { show, showType, barStyle, headDecorate } = selectStyle;
-      if(show && showType=="bar"){
+      if (show && showType == "bar") {
         selectConfig = { ...barStyle, headDecorate };
       }
     }
     let highlightConfig = other;
-    if(highlightStyle){
+    if (highlightStyle) {
       highlightConfig = { ...other, ...highlightStyle };
     }
-    const step = isControlChart?controlStep:normalStep;
-    const xScaler = isControlChart?controlDragScaler:normalScaler;
+    const step = isControlChart ? controlStep : normalStep;
+    const xScaler = isControlChart ? controlDragScaler : normalScaler;
     const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
       step,
       bandLength,
@@ -153,32 +164,41 @@ export default memo(
               y1 = yScaler(isVertical ? end : start);
               y2 = yScaler(isVertical ? start : end);
             }
-            const { 
+            const {
               style,
               fillType,
-              fillMode="tile",
+              fillMode = "tile",
               url,
               size,
               fill,
               border,
               opacity,
-              headDecorate
-            } = x==curXLabel?selectConfig:flag?highlightConfig:other;
-            const { borderColor:{
-              type="pure", pure="transparent", linear
-            }, borderWidth=0 } = border || {};
+              headDecorate,
+            } = x == curXLabel ? selectConfig : flag ? highlightConfig : other;
+            const {
+              borderColor: { type = "pure", pure = "transparent", linear },
+              borderWidth = 0,
+            } = border || {};
             const borderStr = `${pure} solid ${borderWidth}px`;
             const borderImageSource = getMultiColorStr(linear);
-            const positionX =isXRepeat? xScaler(x) - step / 2 + seriesStart + index * seriesStep: xScaler(x) -seriesWidth/2;
-            let showHead, headType, headUrl, headVideo, headWidth, headHeight, headTranslate;
+            const positionX = isXRepeat
+              ? xScaler(x) - step / 2 + seriesStart + index * seriesStep
+              : xScaler(x) - seriesWidth / 2;
+            let showHead,
+              headType,
+              headUrl,
+              headVideo,
+              headWidth,
+              headHeight,
+              headTranslate;
             if (headDecorate) {
               (showHead = headDecorate.show),
-              (headType = headDecorate.type),
-              (headUrl = headDecorate.url),
-              (headVideo = headDecorate.video),
-              (headWidth = headDecorate.size.width),
-              (headHeight = headDecorate.size.height),
-              (headTranslate = headDecorate.translate);
+                (headType = headDecorate.type),
+                (headUrl = headDecorate.url),
+                (headVideo = headDecorate.video),
+                (headWidth = headDecorate.size.width),
+                (headHeight = headDecorate.size.height),
+                (headTranslate = headDecorate.translate);
             }
             //断轴图相关，将柱形在断轴处切开
             const setClipPath = () => {
@@ -195,9 +215,7 @@ export default memo(
               }
             };
             if (isNaN(positionX)) return null;
-            const positionY = reverse? 
-              y > 0 ? y1 : y2:
-              y < 0 ? y1 : y2;
+            const positionY = reverse ? (y > 0 ? y1 : y2) : y < 0 ? y1 : y2;
             const { bgAttr, ...attr } = getAttr({
               isVertical,
               x: positionX,
@@ -207,79 +225,92 @@ export default memo(
             });
             return (
               <Fragment key={i}>
-                <foreignObject style={{overflow: "visible",position: "relative",cursor: "pointer",}}
+                <foreignObject
+                  style={{
+                    overflow: "visible",
+                    position: "relative",
+                    cursor: "pointer",
+                  }}
                   {...bgAttr}
-                  onClick={e=>triggerClick(e,"setCurrent")}
+                  onClick={(e) => triggerEvents(e, "setCurrent")}
+                  onMouseMove={(e) => triggerEvents(e, "mouseenter")}
                   onMouseEnter={() => {
-                    if(isControlChart){
-                      setCtlTip((pre:any)=>({
-                        show:true,
-                        x:xScaler(x),
-                        xName:data.x,
-                        indicatorList:pre.indicatorList.map((item:any)=>{
+                    if (isControlChart) {
+                      setCtlTip((pre: any) => ({
+                        show: true,
+                        x: xScaler(x),
+                        xName: data.x,
+                        indicatorList: pre.indicatorList.map((item: any) => {
                           if (item.tick === data.x) {
                             return { ...item, isShow: true };
                           } else {
                             return item;
                           }
-                        })
-                      }))
+                        }),
+                      }));
                     }
                   }}
-                  onMouseLeave={() => {
-                    if(isControlChart && !auto){
-                      setCtlTip((pre:any)=>({
-                        show:false,
-                        x:undefined,
-                        xName:undefined,
-                        indicatorList:pre.indicatorList.map((item:any)=>{
-                          return { ...item, isShow:false }
-                        })
-                      }))
+                  onMouseLeave={(e) => {
+                    triggerEvents(e, "mouseleave");
+                    if (isControlChart && !auto) {
+                      setCtlTip((pre: any) => ({
+                        show: false,
+                        x: undefined,
+                        xName: undefined,
+                        indicatorList: pre.indicatorList.map((item: any) => {
+                          return { ...item, isShow: false };
+                        }),
+                      }));
                     }
                   }}
-                  data-mobile={JSON.stringify({x:xScaler(x),xName:data.x})}
-                  data-data={JSON.stringify(data)}></foreignObject>
+                  data-mobile={JSON.stringify({ x: xScaler(x), xName: data.x })}
+                  data-data={JSON.stringify(data)}
+                ></foreignObject>
                 <foreignObject
                   style={{
                     overflow: "visible",
                     position: "relative",
-                    pointerEvents:"none"
+                    pointerEvents: "none",
                   }}
                   {...attr}
                 >
-                  {(headUrl || headVideo) && showHead && (
-                    headType=="image"?<div
-                      style={{
-                        position: "absolute",
-                        background: `url(${
-                          //@ts-ignore
-                          window.appConfig.ASSETS_URL + headUrl
-                        }) 0 0/100% 100%`,
-                        width: headWidth,
-                        height: headHeight,
-                        left: isVertical ? (y<0?"0%":"100%") : "50%",
-                        top: isVertical ? "50%" :(y<0?"100%":"0%"),
-                        zIndex: 1,
-                        transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
-                      }}
-                    ></div>:<video
-                      width={headWidth} height={headHeight} 
-                      //@ts-ignore
-                      src={window.appConfig.ASSETS_URL + headVideo}
-                      // controls={true}
-                      loop={true}
-                      muted={true}
-                      autoPlay={true}
-                      style={{
-                        position: "absolute",
-                        left: isVertical ? "100%" : "50%",
-                        top: isVertical ? "50%" : "0",
-                        zIndex: 1,
-                        transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
-                      }}
-                    ></video>
-                  )}
+                  {(headUrl || headVideo) &&
+                    showHead &&
+                    (headType == "image" ? (
+                      <div
+                        style={{
+                          position: "absolute",
+                          background: `url(${
+                            //@ts-ignore
+                            window.appConfig.ASSETS_URL + headUrl
+                          }) 0 0/100% 100%`,
+                          width: headWidth,
+                          height: headHeight,
+                          left: isVertical ? (y < 0 ? "0%" : "100%") : "50%",
+                          top: isVertical ? "50%" : y < 0 ? "100%" : "0%",
+                          zIndex: 1,
+                          transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
+                        }}
+                      ></div>
+                    ) : (
+                      <video
+                        width={headWidth}
+                        height={headHeight}
+                        //@ts-ignore
+                        src={window.appConfig.ASSETS_URL + headVideo}
+                        // controls={true}
+                        loop={true}
+                        muted={true}
+                        autoPlay={true}
+                        style={{
+                          position: "absolute",
+                          left: isVertical ? "100%" : "50%",
+                          top: isVertical ? "50%" : "0",
+                          zIndex: 1,
+                          transform: `translate(calc(-50% + ${headTranslate.x}px), calc(-50% + ${headTranslate.y}px))`,
+                        }}
+                      ></video>
+                    ))}
                   <div
                     style={{
                       width: "100%",
@@ -290,15 +321,22 @@ export default memo(
                       opacity: fillType == "pattern" ? opacity : 1,
                       background:
                         fillType == "pattern"
-                          ? `${isVertical?y<0?"100%":"0%":"50%"} ${isVertical?"50%":y<0?"0%":"100%"} / ${ fillMode=="tile"?size.width+"px "+size.height+"px":"100% 100%" } repeat ` +
+                          ? `${isVertical ? (y < 0 ? "100%" : "0%") : "50%"} ${
+                              isVertical ? "50%" : y < 0 ? "0%" : "100%"
+                            } / ${
+                              fillMode == "tile"
+                                ? size.width + "px " + size.height + "px"
+                                : "100% 100%"
+                            } repeat ` +
                             "url(" +
                             //@ts-ignore
-                            window.appConfig.ASSETS_URL + url +
+                            window.appConfig.ASSETS_URL +
+                            url +
                             ")"
                           : getBandBackground(
                               pattern,
                               fill,
-                              y//是否小于0
+                              y //是否小于0
                             ),
                       borderRadius:
                         style == "square"
@@ -308,28 +346,30 @@ export default memo(
                               positive: y > 0,
                               seriesWidth,
                             }),
-                      ...type=="pure" && (isVertical
-                        ? {
-                            borderTop: borderStr,
-                            borderRight: borderStr,
-                            borderBottom: borderStr,
-                          }
-                        : {
-                            borderTop: borderStr,
-                            borderRight: borderStr,
-                            borderLeft: borderStr,
-                          }),
-                      ...type=="linear" && {
+                      ...(type == "pure" &&
+                        (isVertical
+                          ? {
+                              borderTop: borderStr,
+                              borderRight: borderStr,
+                              borderBottom: borderStr,
+                            }
+                          : {
+                              borderTop: borderStr,
+                              borderRight: borderStr,
+                              borderLeft: borderStr,
+                            })),
+                      ...(type == "linear" && {
                         borderImageSource,
-                        borderImageSlice:1,
-                        borderWidth:isVertical?`${borderWidth}px ${borderWidth}px ${borderWidth}px 0`:`${borderWidth}px ${borderWidth}px 0 ${borderWidth}px`,
-                        borderStyle:"solid"
-                      }
+                        borderImageSlice: 1,
+                        borderWidth: isVertical
+                          ? `${borderWidth}px ${borderWidth}px ${borderWidth}px 0`
+                          : `${borderWidth}px ${borderWidth}px 0 ${borderWidth}px`,
+                        borderStyle: "solid",
+                      }),
                     }}
                   />
                 </foreignObject>
               </Fragment>
-              
             );
           }
         )}