@easyv/charts 1.10.7 → 1.10.9

package/src/components/Line.js

@@ -1,23 +1,27 @@
 /**
  * 折线图
  */
-import React, { memo, useMemo } from 'react';
-import { line as d3Line, area as d3Area, curveCatmullRom, curveMonotoneX } from 'd3v7';
-import { getColorList } from '../utils';
-import { Lighter, LinearGradient } from '.';
+import React, { memo, useMemo } from "react";
+import {
+  line as d3Line,
+  area as d3Area,
+  curveCatmullRom,
+  curveMonotoneX,
+} from "d3v7";
+import { getColorList } from "../utils";
+import { Lighter, LinearGradient } from ".";
 
 const defined = (d) => d.data.y != null;
-const getLineData = (data, connectNulls) =>{
-  return data.flatMap(d=>{
+const getLineData = (data, connectNulls) => {
+  return data.flatMap((d) => {
     const y = d.data.y;
-    return isNaN(y)?
-      connectNulls?
-        []:
-        {...d,data:{...d.data,y:null}}:
-      d
+    return isNaN(y)
+      ? connectNulls
+        ? []
+        : { ...d, data: { ...d.data, y: null } }
+      : d;
   });
-}
-  
+};
 
 const Area = ({
   data,
@@ -30,11 +34,11 @@ const Area = ({
     opacity,
     size: { width: patternW, height: patternH },
     curve,
-    tension
+    tension,
   },
   xScaler,
   yScaler,
-  opacity:Areaopacity
+  opacity: Areaopacity,
 }) => {
   const [height] = yScaler.range();
   const area = useMemo(() => getColorList(fill), [fill]);
@@ -43,7 +47,7 @@ const Area = ({
     const areaGen = d3Area()
       .x(({ data: { x } }) => xScaler(x))
       .y1(({ data: { y } }) => yScaler(y))
-      .y0(({})=>yScaler(0))
+      .y0(({}) => yScaler(0))
       .defined(defined);
     curve && areaGen.curve(curveCatmullRom.alpha(tension));
     curve && areaGen.curve(curveMonotoneX);
@@ -52,11 +56,28 @@ const Area = ({
 
   return (
     <>
-      <path d={areaGen(data)} style={{pointerEvents:"none",opacity:Areaopacity}} stroke='none' fill={'url(#' + id + ')'} />
+      <path
+        d={areaGen(data)}
+        style={{ pointerEvents: "none", opacity: Areaopacity }}
+        stroke="none"
+        fill={"url(#" + id + ")"}
+      />
       <defs>
-        {type && type == 'pattern' ? (
-          <pattern id={id} patternUnits="userSpaceOnUse" width={patternW} height={patternH}>
-            {url && <image opacity={opacity} width={patternW} height={patternH} xlinkHref={window.appConfig.ASSETS_URL + url} />}
+        {type && type == "pattern" ? (
+          <pattern
+            id={id}
+            patternUnits="userSpaceOnUse"
+            width={patternW}
+            height={patternH}
+          >
+            {url && (
+              <image
+                opacity={opacity}
+                width={patternW}
+                height={patternH}
+                xlinkHref={window.appConfig.ASSETS_URL + url}
+              />
+            )}
           </pattern>
         ) : (
           <LinearGradient id={id} colors={area} rotate={0} />
@@ -91,32 +112,32 @@ export default memo(
   }) => {
     if (!data.length) return null;
     const ticks = xScaler.domain();
-    
+
     const sortData = useMemo(() => {
       const usefulData = data.filter(
-        ({ data: { x } }) => ticks.indexOf(x) > -1
+        ({ data: { x } }) => ticks.indexOf(x) > -1,
       );
       return usefulData.sort(
         ({ data: { x: a } }, { data: { x: b } }) =>
-          ticks.indexOf(a) - ticks.indexOf(b)
+          ticks.indexOf(a) - ticks.indexOf(b),
       );
     }, [data, ticks]);
-    
+
     const _data = useMemo(
       () => getLineData(sortData, connectNulls),
-      [sortData, connectNulls]
+      [sortData, connectNulls],
     );
     const lineGen = useMemo(() => {
-      const isVertical = direction === 'vertical';
+      const isVertical = direction === "vertical";
 
       let lineGen = (
         isVertical
           ? d3Line()
-            .y(({ data: { x } }) => xScaler(x))
-            .x(({ data: { y } }) => yScaler(y))
+              .y(({ data: { x } }) => xScaler(x))
+              .x(({ data: { y } }) => yScaler(y))
           : d3Line()
-            .x(({ data: { x } }) => xScaler(x))
-            .y(({ data: { y } }) => yScaler(y))
+              .x(({ data: { x } }) => xScaler(x))
+              .y(({ data: { y } }) => yScaler(y))
       ).defined(defined);
       curve && lineGen.curve(curveCatmullRom.alpha(tension));
       curve && lineGen.curve(curveMonotoneX);
@@ -128,29 +149,31 @@ export default memo(
     const show = lineShadow && lineShadow.show;
     const shadow = lineShadow && lineShadow.shadow;
     return (
-      <g className='__easyv-line'>
+      <g className="__easyv-line">
         <path
           d={path}
           stroke={stroke}
           style={{
-            filter:show?`drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`:"none",
-            pointerEvents:"none"
+            filter: show
+              ? `drop-shadow(${shadow.hShadow}px ${shadow.vShadow}px ${shadow.blur}px ${shadow.color})`
+              : "none",
+            pointerEvents: "none",
           }}
-          fill='none'
-          strokeDasharray={lineType === 'dash' ? '3 3' : null}
+          fill="none"
+          strokeDasharray={lineType === "dash" ? "3 3" : null}
           strokeWidth={lineWidth}
         />
-        {type == 'area' && (
+        {type == "area" && (
           <Area
             data={_data}
             config={{ ...area, curve, tension }}
             xScaler={xScaler}
             yScaler={yScaler}
-            opacity={areaColor?areaColor.linear.opacity:1}
+            opacity={areaColor ? areaColor.linear.opacity : 1}
           />
         )}
         {showLighter && <Lighter path={path} config={lighter} />}
       </g>
     );
-  }
+  },
 );

package/src/hooks/useAxes.js

@@ -372,8 +372,12 @@ export default ({
           clipAxisRange,
           lengthWithoutPaddingOuter,
           step: [
-            lengthWithoutPaddingOuter / clipAxisAllTicks[0].length,
-            lengthWithoutPaddingOuter / clipAxisAllTicks[1].length,
+            clipAxisAllTicks[0].length > 0
+              ? lengthWithoutPaddingOuter / clipAxisAllTicks[0].length
+              : 0,
+            clipAxisAllTicks[1].length > 0
+              ? lengthWithoutPaddingOuter / clipAxisAllTicks[1].length
+              : 0,
           ],
           allTicks: clipAxisAllTicks,
           ticks: clipAxisTicks,
@@ -454,16 +458,22 @@ export default ({
         //     }
         //   }
         // }
-        let step = lengthWithoutPaddingOuter / allTicks.length;
+        const tickLen = allTicks.length;
+        let step =
+          tickLen > 0 ? lengthWithoutPaddingOuter / tickLen : 0;
         const controlCfg = {
           controlStep: 0,
           controlDragScaler: null,
         };
         if (isC) {
-          controlCfg.controlStep = step / cPercent;
-          controlCfg.controlDragScaler = scaler
-            .copy()
-            .range([start / cPercent, end / cPercent]);
+          if (tickLen > 0 && cPercent > 0) {
+            controlCfg.controlStep = step / cPercent;
+            controlCfg.controlDragScaler = scaler
+              .copy()
+              .range([start / cPercent, end / cPercent]);
+          } else {
+            controlCfg.controlDragScaler = scaler.copy();
+          }
           const {
             start: start_,
             end: end_,
@@ -480,7 +490,7 @@ export default ({
           scaler = scales[type]().domain(newDomain).range(range);
           scaler.type = type;
           const controlOuter = len - outer;
-          step = controlOuter / allTicks.length;
+          step = tickLen > 0 ? controlOuter / tickLen : 0;
         }
         tmp.set(axisType, {
           ...item,