@easyv/charts 1.4.14 → 1.4.16

package/src/components/Band.tsx

@@ -1,23 +1,23 @@
 /**
  * （柱状/条形）图柱子
  */
-import React, { memo } from 'react';
-import { min, max } from 'd3v7';
-import { getBandBackground, getSeriesInfo } from '../utils';
+import React, { memo } from "react";
+import { min, max } from "d3v7";
+import { getBandBackground, getSeriesInfo } from "../utils";
 
 const getHighlightData = (data: Array<DataWithBoundType>, extent: string) => {
   switch (extent) {
-    case 'min':
+    case "min":
       const minData = min(data, (d: DataWithBoundType) => d.data.y);
       return data.map((item) => ({
         ...item,
-        flag: minData == item.data.y ? 'min' : '',
+        flag: minData == item.data.y ? "min" : "",
       }));
-    case 'max':
+    case "max":
       const maxData = max(data, (d: DataWithBoundType) => d.data.y);
       return data.map((item) => ({
         ...item,
-        flag: maxData == item.data.y ? 'max' : '',
+        flag: maxData == item.data.y ? "max" : "",
       }));
     default:
       return data;
@@ -57,11 +57,11 @@ const getBorderRadius = ({
 }) => {
   return isVertical
     ? positive
-      ? '0px ' + seriesWidth + 'px ' + seriesWidth + 'px 0'
-      : seriesWidth + 'px 0 0 ' + seriesWidth + 'px'
+      ? "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';
+    ? seriesWidth / 2 + "px " + seriesWidth / 2 + "px 0 0"
+    : "0 0 " + seriesWidth / 2 + "px " + seriesWidth / 2 + "px";
 };
 
 export default memo(
@@ -79,12 +79,12 @@ export default memo(
       border,
       opacity,
       highlight: { show: showHighlight, extent, fill: highlightFill },
-      headDecorate
+      headDecorate,
     },
     bandLength = 0,
     data,
     xAxis: { scaler: xScaler, step, direction },
-    yAxis: { scaler: yScaler },
+    yAxis: { scaler: yScaler, isClipAxis, clipValue },
   }: any) => {
     if (!data.length) return null;
 
@@ -97,10 +97,10 @@ export default memo(
 
     const _data = showHighlight ? getHighlightData(data, extent) : data;
 
-    const isVertical = direction === 'vertical';
+    const isVertical = direction === "vertical";
     const borderStr = `${border.borderColor} solid ${border.borderWidth}px`;
     return (
-      <g className='__easyv-band'>
+      <g className="__easyv-band">
         {_data.map(
           (
             {
@@ -112,21 +112,47 @@ export default memo(
             }: DataWithBoundType,
             i: number
           ) => {
-            const y1 = yScaler(isVertical ? end : start);
-            const y2 = yScaler(isVertical ? start : end);
+            //todo 柱状中空设置
+            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 positionX =
               xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
-            let showHead , headUrl, headWidth, headHeight, headTranslate;
-            if(headDecorate){
-              showHead = headDecorate.show,
-              headUrl = headDecorate.url,
-              headWidth = headDecorate.size.width,
-              headHeight = headDecorate.size.height,
-              headTranslate = headDecorate.translate;
+            let showHead, headUrl, headWidth, headHeight, headTranslate;
+            if (headDecorate) {
+              (showHead = headDecorate.show),
+                (headUrl = headDecorate.url),
+                (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 = y < 0 ? y1 : y2;
             const attr = getAttr({
@@ -140,58 +166,67 @@ export default memo(
               <foreignObject
                 key={i}
                 style={{
-                  overflow:"visible",
-                  position:"relative",
-                  cursor:"pointer"
+                  overflow: "visible",
+                  position: "relative",
+                  cursor: "pointer",
                 }}
                 {...attr}
                 onClick={triggerClick}
                 data-data={JSON.stringify(data)}
               >
-                {headUrl && showHead && <div style={{
-                  position:"absolute",
-                  background:`url(${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>}
+                {headUrl && showHead && (
+                  <div
+                    style={{
+                      position: "absolute",
+                      background: `url(${
+                        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>
+                )}
                 <div
                   style={{
-                    width: '100%',
-                    height: '100%',
+                    width: "100%",
+                    height: "100%",
                     /** Safari Bug **/
-                    position: 'fixed',
-                    opacity: fillType == 'pattern' ? opacity : 1,
+                    position: "fixed",
+                    clipPath: setClipPath(),
+                    opacity: fillType == "pattern" ? opacity : 1,
                     background:
-                      fillType == 'pattern'
+                      fillType == "pattern"
                         ? `50% 50% / ${size.width}px ${size.height}px repeat ` +
-                          'url(' +
+                          "url(" +
                           url +
-                          ')'
+                          ")"
                         : getBandBackground(
                             pattern,
                             extent === flag ? highlightFill : fill
                           ),
                     borderRadius:
-                      style == 'square'
-                        ? '0 0 0 0'
+                      style == "square"
+                        ? "0 0 0 0"
                         : getBorderRadius({
                             isVertical,
                             positive: y > 0,
                             seriesWidth,
                           }),
-                    ...(isVertical?{
-                      borderTop:borderStr,
-                      borderRight:borderStr,
-                      borderBottom:borderStr
-                    }:{
-                      borderTop:borderStr,
-                      borderRight:borderStr,
-                      borderLeft:borderStr
-                    })
+                    ...(isVertical
+                      ? {
+                          borderTop: borderStr,
+                          borderRight: borderStr,
+                          borderBottom: borderStr,
+                        }
+                      : {
+                          borderTop: borderStr,
+                          borderRight: borderStr,
+                          borderLeft: borderStr,
+                        }),
                   }}
                 />
               </foreignObject>

package/src/components/BaseLine.js

@@ -34,14 +34,31 @@ export default memo(
         strokeDasharray,
       },
     },
-    yAxis: { scaler: yScaler },
+    yAxis: { scaler: yScaler,clipValue,isClipAxis },
     data
   }) => {
     try{
-      const x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
-      x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
-      y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
-      y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+
+      let x1,x2,y1,y2
+      if (isClipAxis) {
+        if (data.value > +clipValue) {
+          x1 = orientation == 'left' ? yScaler[0](data.value) : marginLeft,
+          x2 = orientation == 'left' ? yScaler[0](data.value) : width - marginRight,
+          y1 = orientation == 'left' ? marginLeft : yScaler[0](data.value),
+          y2 = orientation == 'left' ? height - marginRight : yScaler[0](data.value);
+        } else {
+          x1 = orientation == 'left' ? yScaler[1](data.value) : marginLeft,
+          x2 = orientation == 'left' ? yScaler[1](data.value) : width - marginRight,
+          y1 = orientation == 'left' ? marginLeft : yScaler[1](data.value),
+          y2 = orientation == 'left' ? height - marginRight : yScaler[1](data.value);
+        }
+      } else {
+        x1 = orientation == 'left' ? yScaler(data.value) : marginLeft,
+        x2 = orientation == 'left' ? yScaler(data.value) : width - marginRight,
+        y1 = orientation == 'left' ? marginLeft : yScaler(data.value),
+        y2 = orientation == 'left' ? height - marginRight : yScaler(data.value);
+      }
+     
       return (
         <>
           <g className='__easyv-baseLine' >

package/src/components/CartesianChart.js

@@ -70,6 +70,7 @@ const Chart = memo(
     } = useContext(chartContext);
     const svg = useRef();
     const axes = useAxes({ axes: axesConfig, context });
+
     const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
     const xLineRange = width-marginLeft-marginRight;
     const yLineRange = height-marginTop-marginBottom;

package/src/components/Label.js

@@ -1,9 +1,9 @@
 /**
  * 轴类图表标签
  */
-import { memo, useContext } from 'react';
-import { getTranslate2d, getSeriesInfo } from '../utils';
-import { chartContext } from '../context';
+import { memo, useContext } from "react";
+import { getTranslate2d, getSeriesInfo } from "../utils";
+import { chartContext } from "../context";
 
 export default memo(
   ({
@@ -17,10 +17,10 @@ export default memo(
     bandLength = 0,
     data,
     xAxis: { scaler: xScaler, step, direction },
-    yAxis: { scaler: yScaler },
+    yAxis: { scaler: yScaler, isClipAxis, clipValue },
     triggerClick,
   }) => {
-    const lineType = config.hasOwnProperty('line'); //  堆叠处理
+    const lineType = config.hasOwnProperty("line"); //  堆叠处理
     const showIcon = icon && icon.show;
     const showLabel = label && label.show;
 
@@ -33,30 +33,40 @@ export default memo(
       paddingInner,
       paddingOuter,
     });
-    const isVertical = direction === 'vertical';
+    const isVertical = direction === "vertical";
     const _position = label.position;
     return (
-      <g className='__easyv-label'>
+      <g className="__easyv-label">
         {data.map(
           (
             { index, bound: [start, end], data, data: { x, y, showY, s } },
             i
           ) => {
-            const y1 = yScaler(isVertical ? end : start);
-
-            //  处理z型折线图和堆叠柱图的逻辑冲突
-            const y2 = lineType
-              ? start
-                ? yScaler(isVertical ? start : end - start)
-                : yScaler(isVertical ? start : end)
-              : yScaler(isVertical ? start : end);
+            let y1, y2;
+            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);
+              //  处理z型折线图和堆叠柱图的逻辑冲突
+              y2 = lineType
+                ? start
+                  ? yScaler(isVertical ? start : end - start)
+                  : yScaler(isVertical ? start : end)
+                : yScaler(isVertical ? start : end);
+            }
 
             // const y2 =  yScaler(isVertical ? start : end);
             const positionX =
               xScaler(x) - step / 2 + seriesStart + index * seriesStep;
 
             if (isNaN(positionX)) return null;
-            const position = positionX + (config.line?step:seriesWidth) / 2;
+            const position = positionX + (config.line ? step : seriesWidth) / 2;
             const labelPosition = isVertical
               ? getVerticalLabel({
                   position: _position,
@@ -76,18 +86,18 @@ export default memo(
               ? {
                   ...labelPosition,
                   y: position,
-                  dominantBaseline: 'middle',
+                  dominantBaseline: "middle",
                 }
               : {
                   ...labelPosition,
                   x: position,
-                  textAnchor: 'middle',
+                  textAnchor: "middle",
                 };
             return (
               <g
                 key={i}
                 onClick={triggerClick}
-                style={{cursor:"pointer"}}
+                style={{ cursor: "pointer" }}
                 data-data={JSON.stringify(data)}
               >
                 {showIcon && !isNaN(attr.y) && (
@@ -111,8 +121,8 @@ const Label = ({
     font,
     translate: { x: translateX = 0, y: translateY = 0 },
   },
-  textAnchor = 'middle',
-  dominantBaseline = 'middle',
+  textAnchor = "middle",
+  dominantBaseline = "middle",
 }) => {
   return (
     <text
@@ -143,9 +153,9 @@ const Icon = ({
     size: { width, height },
   },
 }) =>
-  mode == 'single' ? (
+  mode == "single" ? (
     <Circle cx={cx} cy={cy} color={color} radius={radius} />
-  ) : mode == 'double' ? (
+  ) : mode == "double" ? (
     <>
       <Circle cx={cx} cy={cy} {...outer} />
       <Circle cx={cx} cy={cy} {...inner} />
@@ -163,64 +173,64 @@ const Icon = ({
   );
 
 const Circle = ({ cx, cy, color, radius }) => (
-  <circle cx={cx} cy={cy} fill={color} r={radius} stroke='none' />
+  <circle cx={cx} cy={cy} fill={color} r={radius} stroke="none" />
 );
 
-const getVerticalLabel = ({ position = 'outerStart', width, y, y1, y2 }) => {
+const getVerticalLabel = ({ position = "outerStart", width, y, y1, y2 }) => {
   switch (position) {
-    case 'start':
+    case "start":
       return {
         x: y > 0 ? y2 : y1,
-        textAnchor: 'start',
+        textAnchor: "start",
       };
-    case 'middle':
+    case "middle":
       return {
         x: (y1 + y2) / 2,
-        textAnchor: 'middle',
+        textAnchor: "middle",
       };
-    case 'end':
+    case "end":
       return {
         x: y > 0 ? y1 : y2,
-        textAnchor: 'end',
+        textAnchor: "end",
       };
-    case 'outerStart':
+    case "outerStart":
       return {
         x: y1,
-        textAnchor: y > 0 ? 'start' : 'end',
+        textAnchor: y > 0 ? "start" : "end",
       };
-    case 'chartStart':
+    case "chartStart":
       return {
         x: y > 0 ? width : 0,
-        textAnchor: y > 0 ? 'start' : 'end',
+        textAnchor: y > 0 ? "start" : "end",
       };
   }
 };
-const getHorizontalLabel = ({ position = 'outerStart', height, y, y1, y2 }) => {
+const getHorizontalLabel = ({ position = "outerStart", height, y, y1, y2 }) => {
   switch (position) {
-    case 'start':
+    case "start":
       return {
         y: y > 0 ? y1 : y2,
-        dominantBaseline: 'text-after-edge',
+        dominantBaseline: "text-after-edge",
       };
-    case 'middle':
+    case "middle":
       return {
         y: (y1 + y2) / 2,
-        dominantBaseline: 'middle',
+        dominantBaseline: "middle",
       };
-    case 'end':
+    case "end":
       return {
         y: y > 0 ? y2 : y1,
-        dominantBaseline: 'text-before-edge',
+        dominantBaseline: "text-before-edge",
       };
-    case 'outerStart':
+    case "outerStart":
       return {
         y: y2,
-        dominantBaseline: y >= 0 ? 'text-after-edge' : 'text-before-edge',
+        dominantBaseline: y >= 0 ? "text-after-edge" : "text-before-edge",
       };
-    case 'chartStart':
+    case "chartStart":
       return {
         y: y > 0 ? 0 : height,
-        dominantBaseline: y > 0 ? 'text-after-edge' : 'text-before-edge',
+        dominantBaseline: y > 0 ? "text-after-edge" : "text-before-edge",
       };
   }
 };

package/src/components/TextOverflow.tsx

@@ -47,7 +47,6 @@ export default memo(forwardRef((props:flowText, ref:any) => {
     ...getTextOverflow(type),
     ...style
   }
-
   return type == 'marquee' ? (
     <Marquee
       value={value}
@@ -55,6 +54,6 @@ export default memo(forwardRef((props:flowText, ref:any) => {
       style={styles}
       ref={ref} />
   ) : (
-    <div style={styles} ref={ref} title={type=="ellipsis"?value || undefined:undefined} dangerouslySetInnerHTML={{__html:value}}></div>
+    <div style={styles} ref={ref} title={type=="ellipsis"?value.replace(/<\/?.+?>/g,"") || undefined:undefined} dangerouslySetInnerHTML={{__html:value}}></div>
   );
 }));