@easyv/charts 1.7.37 → 1.8.0

package/src/components/Band.tsx

@@ -1,334 +1,334 @@
-/**
- * （柱状/条形）图柱子
- */
-import React, { memo, Fragment } from "react";
-import { min, max } from "d3v7";
-import { getBandBackground, getMultiColorStr, getSeriesInfo } from "../utils";
-
-const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
-  switch (extent) {
-    case "min":
-      const minData = min(data, (d: DataWithBoundType) => d.data.y);
-      return data.map((item) => ({
-        ...item,
-        flag: minData == item.data.y ? "min" : "",
-      }));
-    case "max":
-      const maxData = max(data, (d: DataWithBoundType) => d.data.y);
-      return data.map((item) => ({
-        ...item,
-        flag: maxData == item.data.y ? "max" : "",
-      }));
-    default:
-      return data;
-  }
-};
-
-const getAttr = ({
-  isVertical,
-  seriesWidth,
-  length,
-  x,
-  y,
-}: {
-  isVertical: boolean;
-  seriesWidth: number;
-  length: number;
-  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,
-      height: seriesWidth,
-    } };
-  }else{
-    return {
-      x,
-      y,
-      width: seriesWidth,
-      height: len,
-      bgAttr:{
-        x,
-        y:0,
-        width: seriesWidth,
-        height: y+len,
-      }
-    };
-  }
-  
-};
-
-const getBorderRadius = ({
-  isVertical,
-  positive,
-  seriesWidth,
-}: {
-  isVertical: boolean;
-  positive: boolean;
-  seriesWidth: number;
-}) => {
-  return isVertical
-    ? positive
-      ? "0px " + seriesWidth + "px " + seriesWidth + "px 0"
-      : seriesWidth + "px 0 0 " + seriesWidth + "px"
-    : positive
-    ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0"
-    : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
-};
-
-export default memo(
-  ({
-    //控制图部分，主要是为了控制图的指示器，在悬浮的时候显示
-    triggerClick,
-    indicatorWidth,
-    isControlChart = false,
-    setCtlTip,
-    config: {
-      pattern = {},
-      seriesIntervalWidth: paddingInner = 0,
-      paddingInner: paddingOuter = 0,
-      highlight: { show: showHighlight, extent, fill: highlightFill },
-      ...other
-    },
-    curXLabel,
-    selectStyle,
-    bandLength = 0,
-    auto = false,
-    data,
-    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){
-      const { show, showType, barStyle, headDecorate } = selectStyle;
-      if(show && showType=="bar"){
-        selectConfig = { ...barStyle, headDecorate };
-      }
-    }
-    const step = isControlChart?controlStep:normalStep;
-    const xScaler = isControlChart?controlDragScaler:normalScaler;
-    const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
-      step,
-      bandLength,
-      paddingInner,
-      paddingOuter,
-    });
-    const _data = showHighlight ? getHighlightData(data, extent) : data;
-    const isVertical = direction === "vertical";
-
-    return (
-      <g className="__easyv-band">
-        {_data.map(
-          (
-            {
-              flag,
-              index,
-              bound: [start, end],
-              data,
-              data: { x, y, s },
-            }: DataWithBoundType,
-            i: number
-          ) => {
-            let y1: number, y2: number;
-            //断轴图相关，断轴图的scaler是一个数组，内含上断轴下断轴的scaler
-            if (isClipAxis) {
-              if (end > +clipValue) {
-                y1 = yScaler[1](start);
-                y2 = yScaler[0](end);
-              } else {
-                y1 = yScaler[1](start);
-                y2 = yScaler[1](end);
-              }
-            } else {
-              y1 = yScaler(isVertical ? end : start);
-              y2 = yScaler(isVertical ? start : end);
-            }
-            const { 
-              style,
-              fillType,
-              fillMode="tile",
-              url,
-              size,
-              fill,
-              border,
-              opacity,
-              headDecorate
-            } = x==curXLabel?selectConfig:other;
-            const { borderColor:{
-              type="pure", pure="transparent", linear
-            }, borderWidth=0 } = border || {};
-            const borderStr = `${pure} solid ${borderWidth}px`;
-            const borderImageSource = getMultiColorStr(linear);
-            const positionX =_data.length==1? xScaler(x) -seriesStart/2 :xScaler(x) - step / 2 + seriesStart + index * seriesStep;
-            
-            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);
-            }
-            //断轴图相关，将柱形在断轴处切开
-            const setClipPath = () => {
-              if (isClipAxis && end > +clipValue) {
-                let clipValueY2 = yScaler[0](clipValue); //上方
-                let clipValueY1 = yScaler[1](clipValue); //下方
-                let top = Math.abs((y2 - clipValueY2) / (y1 - y2)) * 100;
-                let bottom = Math.abs((y2 - clipValueY1) / (y1 - y2)) * 100;
-
-                //clip path属性
-                return `polygon(0% 0%, 0% 100%, 0 100%, 0 ${top}%, 100% ${top}%, 100% ${bottom}%, 0 ${bottom}%, 0 100%, 100% 100%, 100% 0%)`;
-              } else {
-                return "none";
-              }
-            };
-            if (isNaN(positionX)) return null;
-            const positionY = reverse? 
-              y > 0 ? y1 : y2:
-              y < 0 ? y1 : y2;
-            const { bgAttr, ...attr } = getAttr({
-              isVertical,
-              x: positionX,
-              y: positionY,
-              length: Math.abs(y1 - y2),
-              seriesWidth,
-            });
-            return (
-              <Fragment key={i}>
-                <foreignObject style={{overflow: "visible",position: "relative",cursor: "pointer",}}
-                  {...bgAttr}
-                  onClick={e=>triggerClick(e,"setCurrent")}
-                  onMouseEnter={() => {
-                    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 }
-                        })
-                      }))
-                    }
-                  }}
-                  data-mobile={JSON.stringify({x:xScaler(x),xName:data.x})}
-                  data-data={JSON.stringify(data)}></foreignObject>
-                <foreignObject
-                  style={{
-                    overflow: "visible",
-                    position: "relative",
-                    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 ? "100%" : "50%",
-                        top: isVertical ? "50%" : "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%",
-                      height: "100%",
-                      /** Safari Bug **/
-                      // position: "absolute",
-                      clipPath: setClipPath(),
-                      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 ` +
-                            "url(" +
-                            //@ts-ignore
-                            window.appConfig.ASSETS_URL + url +
-                            ")"
-                          : getBandBackground(
-                              pattern,
-                              extent === flag ? highlightFill : fill
-                            ),
-                      borderRadius:
-                        style == "square"
-                          ? "0 0 0 0"
-                          : getBorderRadius({
-                              isVertical,
-                              positive: y > 0,
-                              seriesWidth,
-                            }),
-                      ...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"
-                      }
-                    }}
-                  />
-                </foreignObject>
-              </Fragment>
-              
-            );
-          }
-        )}
-      </g>
-    );
-  }
-);
+/**
+ * （柱状/条形）图柱子
+ */
+import React, { memo, Fragment } from "react";
+import { min, max } from "d3v7";
+import { getBandBackground, getMultiColorStr, getSeriesInfo } from "../utils";
+
+const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
+  switch (extent) {
+    case "min":
+      const minData = min(data, (d: DataWithBoundType) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: minData == item.data.y ? "min" : "",
+      }));
+    case "max":
+      const maxData = max(data, (d: DataWithBoundType) => d.data.y);
+      return data.map((item) => ({
+        ...item,
+        flag: maxData == item.data.y ? "max" : "",
+      }));
+    default:
+      return data;
+  }
+};
+
+const getAttr = ({
+  isVertical,
+  seriesWidth,
+  length,
+  x,
+  y,
+}: {
+  isVertical: boolean;
+  seriesWidth: number;
+  length: number;
+  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,
+      height: seriesWidth,
+    } };
+  }else{
+    return {
+      x,
+      y,
+      width: seriesWidth,
+      height: len,
+      bgAttr:{
+        x,
+        y:0,
+        width: seriesWidth,
+        height: y+len,
+      }
+    };
+  }
+  
+};
+
+const getBorderRadius = ({
+  isVertical,
+  positive,
+  seriesWidth,
+}: {
+  isVertical: boolean;
+  positive: boolean;
+  seriesWidth: number;
+}) => {
+  return isVertical
+    ? positive
+      ? "0px " + seriesWidth + "px " + seriesWidth + "px 0"
+      : seriesWidth + "px 0 0 " + seriesWidth + "px"
+    : positive
+    ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0"
+    : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
+};
+
+export default memo(
+  ({
+    //控制图部分，主要是为了控制图的指示器，在悬浮的时候显示
+    triggerClick,
+    indicatorWidth,
+    isControlChart = false,
+    setCtlTip,
+    config: {
+      pattern = {},
+      seriesIntervalWidth: paddingInner = 0,
+      paddingInner: paddingOuter = 0,
+      highlight: { show: showHighlight, extent, fill: highlightFill },
+      ...other
+    },
+    curXLabel,
+    selectStyle,
+    bandLength = 0,
+    auto = false,
+    data,
+    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){
+      const { show, showType, barStyle, headDecorate } = selectStyle;
+      if(show && showType=="bar"){
+        selectConfig = { ...barStyle, headDecorate };
+      }
+    }
+    const step = isControlChart?controlStep:normalStep;
+    const xScaler = isControlChart?controlDragScaler:normalScaler;
+    const { seriesWidth, seriesStep, seriesStart } = getSeriesInfo({
+      step,
+      bandLength,
+      paddingInner,
+      paddingOuter,
+    });
+    const _data = showHighlight ? getHighlightData(data, extent) : data;
+    const isVertical = direction === "vertical";
+
+    return (
+      <g className="__easyv-band">
+        {_data.map(
+          (
+            {
+              flag,
+              index,
+              bound: [start, end],
+              data,
+              data: { x, y, s },
+            }: DataWithBoundType,
+            i: number
+          ) => {
+            let y1: number, y2: number;
+            //断轴图相关，断轴图的scaler是一个数组，内含上断轴下断轴的scaler
+            if (isClipAxis) {
+              if (end > +clipValue) {
+                y1 = yScaler[1](start);
+                y2 = yScaler[0](end);
+              } else {
+                y1 = yScaler[1](start);
+                y2 = yScaler[1](end);
+              }
+            } else {
+              y1 = yScaler(isVertical ? end : start);
+              y2 = yScaler(isVertical ? start : end);
+            }
+            const { 
+              style,
+              fillType,
+              fillMode="tile",
+              url,
+              size,
+              fill,
+              border,
+              opacity,
+              headDecorate
+            } = x==curXLabel?selectConfig:other;
+            const { borderColor:{
+              type="pure", pure="transparent", linear
+            }, borderWidth=0 } = border || {};
+            const borderStr = `${pure} solid ${borderWidth}px`;
+            const borderImageSource = getMultiColorStr(linear);
+            const positionX =_data.length==1? xScaler(x) -seriesStart/2 :xScaler(x) - step / 2 + seriesStart + index * seriesStep;
+            
+            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);
+            }
+            //断轴图相关，将柱形在断轴处切开
+            const setClipPath = () => {
+              if (isClipAxis && end > +clipValue) {
+                let clipValueY2 = yScaler[0](clipValue); //上方
+                let clipValueY1 = yScaler[1](clipValue); //下方
+                let top = Math.abs((y2 - clipValueY2) / (y1 - y2)) * 100;
+                let bottom = Math.abs((y2 - clipValueY1) / (y1 - y2)) * 100;
+
+                //clip path属性
+                return `polygon(0% 0%, 0% 100%, 0 100%, 0 ${top}%, 100% ${top}%, 100% ${bottom}%, 0 ${bottom}%, 0 100%, 100% 100%, 100% 0%)`;
+              } else {
+                return "none";
+              }
+            };
+            if (isNaN(positionX)) return null;
+            const positionY = reverse? 
+              y > 0 ? y1 : y2:
+              y < 0 ? y1 : y2;
+            const { bgAttr, ...attr } = getAttr({
+              isVertical,
+              x: positionX,
+              y: positionY,
+              length: Math.abs(y1 - y2),
+              seriesWidth,
+            });
+            return (
+              <Fragment key={i}>
+                <foreignObject style={{overflow: "visible",position: "relative",cursor: "pointer",}}
+                  {...bgAttr}
+                  onClick={e=>triggerClick(e,"setCurrent")}
+                  onMouseEnter={() => {
+                    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 }
+                        })
+                      }))
+                    }
+                  }}
+                  data-mobile={JSON.stringify({x:xScaler(x),xName:data.x})}
+                  data-data={JSON.stringify(data)}></foreignObject>
+                <foreignObject
+                  style={{
+                    overflow: "visible",
+                    position: "relative",
+                    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 ? "100%" : "50%",
+                        top: isVertical ? "50%" : "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%",
+                      height: "100%",
+                      /** Safari Bug **/
+                      // position: "absolute",
+                      clipPath: setClipPath(),
+                      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 ` +
+                            "url(" +
+                            //@ts-ignore
+                            window.appConfig.ASSETS_URL + url +
+                            ")"
+                          : getBandBackground(
+                              pattern,
+                              extent === flag ? highlightFill : fill
+                            ),
+                      borderRadius:
+                        style == "square"
+                          ? "0 0 0 0"
+                          : getBorderRadius({
+                              isVertical,
+                              positive: y > 0,
+                              seriesWidth,
+                            }),
+                      ...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"
+                      }
+                    }}
+                  />
+                </foreignObject>
+              </Fragment>
+              
+            );
+          }
+        )}
+      </g>
+    );
+  }
+);