@easyv/charts 1.3.26 → 1.3.28

package/src/components/Lighter.jsx

@@ -1,173 +1,173 @@
-/**
- * 区域图发光跟踪路径
- */
-import React, {
-  useState,
-  useEffect,
-  useRef,
-  useCallback,
-  useMemo,
-} from 'react';
-import { scaleLinear } from 'd3v7';
-import { getColorList } from '../utils';
-import { svgPathProperties } from 'svg-path-properties';
-
-export default ({
-  path: d,
-  config,
-  config: { length: curveLength, width, fill, unitStep },
-}) => {
-  const pointIndexRef = useRef(0);
-  const raf = useRef(null);
-  const [points, setPoints] = useState([]);
-  const [lighter, setLighter] = useState(null);
-  const pointLength = points.length;
-  const totalLength = getLength(pointLength, curveLength);
-  const easingFunc = easing.linear;
-
-  const interpolateList = useMemo(
-    () => getColorsInterpolate(getColorList(fill)),
-    [fill]
-  );
-
-  const drawLigher = useCallback(() => {
-    const STEP = 2;
-    const LOOP = false;
-    if (lighter && lighter.children) {
-      const currentPointLength = pointIndexRef.current;
-      const pointIndex =
-        currentPointLength >= totalLength
-          ? LOOP
-            ? curveLength
-            : 0
-          : currentPointLength +
-            unitStep +
-            Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
-
-      const overstep = pointIndex - pointLength;
-      const startIndex = getPointIndex(pointIndex, pointLength, curveLength);
-      const endIndex = getPointIndex(
-        pointIndex + curveLength,
-        pointLength,
-        curveLength
-      );
-      const overstepPoints =
-        LOOP && overstep > 0 ? points.slice(0, overstep) : [];
-      drawCircle(
-        Array.from(lighter.children),
-        [...points.slice(startIndex, endIndex), ...overstepPoints],
-        interpolateList
-      );
-
-      pointIndexRef.current = pointIndex;
-    }
-
-    raf.current = requestAnimationFrame(drawLigher);
-  }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
-  useEffect(() => {
-    const path = new svgPathProperties(d);
-    const totalLength = path.getTotalLength();
-    const points = [];
-    for (let i = 0; i < totalLength; i++) {
-      const { x, y } = path.getPointAtLength(i);
-      points.push({
-        index: i,
-        x,
-        y,
-      });
-    }
-    setPoints(points);
-  }, [d, config]);
-
-  useEffect(() => {
-    raf.current = requestAnimationFrame(drawLigher);
-    return () => {
-      cancelAnimationFrame(raf.current);
-    };
-  }, [drawLigher]);
-  return (
-    <g ref={setLighter}>
-      {points.map(({ x, y }, index) => (
-        <circle cx={x} cy={y} key={index} r={width} fill='none' />
-      ))}
-    </g>
-  );
-};
-
-const drawCircle = (children, points, interpolateList) => {
-  const pointLength = points.length;
-  // const [startPoint] = points;
-  // const startIndex = startPoint ? startPoint.index : 0;
-  children.forEach((child, index) => {
-    const pointIndex = points.findIndex(({ index: i }) => i == index);
-    child.setAttribute(
-      'fill',
-      pointIndex > -1
-        ? getColor(
-            pointIndex / pointLength, //TODO: 颜色插值尚需完善
-            interpolateList
-          )
-        : 'none'
-    );
-  });
-};
-const getColor = (x, interpolateList) => {
-  return interpolateList(x);
-};
-const getLength = (pointLength, length) => {
-  if (length > pointLength) {
-    return pointLength * 2;
-  }
-
-  return pointLength + length;
-};
-
-const getColorsInterpolate = (colors) => {
-  const length = colors.length;
-  if (!!(length < 2))
-    return scaleLinear()
-      .domain([0, 1])
-      .range([colors[0].color || '#000', colors[0].color || '#000']);
-  const linear = scaleLinear()
-    .domain(colors.map((d) => d.offset))
-    .range(colors.map((d) => d.color));
-  return linear;
-};
-const easing = {
-  linear() {
-    return 0;
-  },
-
-  easeIn(k) {
-    return Math.pow(k, 3);
-  },
-
-  easeOut(k) {
-    return 1 - easing.easeIn(1 - k);
-  },
-
-  easeInOut(k) {
-    return k < 0.5
-      ? easing.easeIn(k * 2) / 2
-      : 1 - easing.easeIn(2 - 2 * k) / 2;
-  },
-
-  easeOutIn(k) {
-    return k < 0.5
-      ? 0.5 * (1 - easing.easeIn(1 - 2 * k))
-      : 0.5 * easing.easeIn(k * 2 - 1) + 0.5;
-  },
-};
-const getPointIndex = (pointIndex, pointLength, curveLength) => {
-  let index = pointIndex - curveLength;
-
-  if (index < 0) {
-    return 0;
-  }
-
-  if (index >= pointLength) {
-    return pointLength - 1;
-  }
-
-  return index;
-};
+/**
+ * 区域图发光跟踪路径
+ */
+import React, {
+  useState,
+  useEffect,
+  useRef,
+  useCallback,
+  useMemo,
+} from 'react';
+import { scaleLinear } from 'd3v7';
+import { getColorList } from '../utils';
+import { svgPathProperties } from 'svg-path-properties';
+
+export default ({
+  path: d,
+  config,
+  config: { length: curveLength, width, fill, unitStep },
+}) => {
+  const pointIndexRef = useRef(0);
+  const raf = useRef(null);
+  const [points, setPoints] = useState([]);
+  const [lighter, setLighter] = useState(null);
+  const pointLength = points.length;
+  const totalLength = getLength(pointLength, curveLength);
+  const easingFunc = easing.linear;
+
+  const interpolateList = useMemo(
+    () => getColorsInterpolate(getColorList(fill)),
+    [fill]
+  );
+
+  const drawLigher = useCallback(() => {
+    const STEP = 2;
+    const LOOP = false;
+    if (lighter && lighter.children) {
+      const currentPointLength = pointIndexRef.current;
+      const pointIndex =
+        currentPointLength >= totalLength
+          ? LOOP
+            ? curveLength
+            : 0
+          : currentPointLength +
+            unitStep +
+            Math.floor(easingFunc(pointIndexRef.current / totalLength) * STEP);
+
+      const overstep = pointIndex - pointLength;
+      const startIndex = getPointIndex(pointIndex, pointLength, curveLength);
+      const endIndex = getPointIndex(
+        pointIndex + curveLength,
+        pointLength,
+        curveLength
+      );
+      const overstepPoints =
+        LOOP && overstep > 0 ? points.slice(0, overstep) : [];
+      drawCircle(
+        Array.from(lighter.children),
+        [...points.slice(startIndex, endIndex), ...overstepPoints],
+        interpolateList
+      );
+
+      pointIndexRef.current = pointIndex;
+    }
+
+    raf.current = requestAnimationFrame(drawLigher);
+  }, [lighter, totalLength, curveLength, unitStep, points, interpolateList]);
+  useEffect(() => {
+    const path = new svgPathProperties(d);
+    const totalLength = path.getTotalLength();
+    const points = [];
+    for (let i = 0; i < totalLength; i++) {
+      const { x, y } = path.getPointAtLength(i);
+      points.push({
+        index: i,
+        x,
+        y,
+      });
+    }
+    setPoints(points);
+  }, [d, config]);
+
+  useEffect(() => {
+    raf.current = requestAnimationFrame(drawLigher);
+    return () => {
+      cancelAnimationFrame(raf.current);
+    };
+  }, [drawLigher]);
+  return (
+    <g ref={setLighter}>
+      {points.map(({ x, y }, index) => (
+        <circle cx={x} cy={y} key={index} r={width} fill='none' />
+      ))}
+    </g>
+  );
+};
+
+const drawCircle = (children, points, interpolateList) => {
+  const pointLength = points.length;
+  // const [startPoint] = points;
+  // const startIndex = startPoint ? startPoint.index : 0;
+  children.forEach((child, index) => {
+    const pointIndex = points.findIndex(({ index: i }) => i == index);
+    child.setAttribute(
+      'fill',
+      pointIndex > -1
+        ? getColor(
+            pointIndex / pointLength, //TODO: 颜色插值尚需完善
+            interpolateList
+          )
+        : 'none'
+    );
+  });
+};
+const getColor = (x, interpolateList) => {
+  return interpolateList(x);
+};
+const getLength = (pointLength, length) => {
+  if (length > pointLength) {
+    return pointLength * 2;
+  }
+
+  return pointLength + length;
+};
+
+const getColorsInterpolate = (colors) => {
+  const length = colors.length;
+  if (!!(length < 2))
+    return scaleLinear()
+      .domain([0, 1])
+      .range([colors[0].color || '#000', colors[0].color || '#000']);
+  const linear = scaleLinear()
+    .domain(colors.map((d) => d.offset))
+    .range(colors.map((d) => d.color));
+  return linear;
+};
+const easing = {
+  linear() {
+    return 0;
+  },
+
+  easeIn(k) {
+    return Math.pow(k, 3);
+  },
+
+  easeOut(k) {
+    return 1 - easing.easeIn(1 - k);
+  },
+
+  easeInOut(k) {
+    return k < 0.5
+      ? easing.easeIn(k * 2) / 2
+      : 1 - easing.easeIn(2 - 2 * k) / 2;
+  },
+
+  easeOutIn(k) {
+    return k < 0.5
+      ? 0.5 * (1 - easing.easeIn(1 - 2 * k))
+      : 0.5 * easing.easeIn(k * 2 - 1) + 0.5;
+  },
+};
+const getPointIndex = (pointIndex, pointLength, curveLength) => {
+  let index = pointIndex - curveLength;
+
+  if (index < 0) {
+    return 0;
+  }
+
+  if (index >= pointLength) {
+    return pointLength - 1;
+  }
+
+  return index;
+};

package/src/components/Line.js

@@ -1,150 +1,150 @@
-/**
- * 折线图
- */
-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) =>
-  connectNulls
-    ? data.map(({ data, ...item }) => ({
-      ...item,
-      data: { ...data, y: +data.y },
-    }))
-    : data;
-
-const Area = ({
-  data,
-  config,
-  config: {
-    id,
-    fill,
-    type,
-    url,
-    opacity,
-    size: { width: patternW, height: patternH },
-    curve,
-    tension
-  },
-  xScaler,
-  yScaler,
-}) => {
-  const [height] = yScaler.range();
-  const area = useMemo(() => getColorList(fill), [fill]);
-
-  const areaGen = useMemo(() => {
-    const areaGen = d3Area()
-      .x(({ data: { x } }) => xScaler(x))
-      .y1(({ data: { y } }) => yScaler(y))
-      // .y0(height)
-      .y0(({})=>yScaler(0))
-      .defined(defined);
-    curve && areaGen.curve(curveCatmullRom.alpha(tension));
-    curve && areaGen.curve(curveMonotoneX);
-    return areaGen;
-  }, [xScaler, yScaler, curve, tension]);
-
-  return (
-    <>
-      <path d={areaGen(data)} 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} />}
-          </pattern>
-        ) : (
-          <LinearGradient id={id} colors={area} rotate={0} />
-        )}
-      </defs>
-    </>
-  );
-};
-
-export default memo(
-  ({
-    type,
-    config: {
-      line: {
-        type: lineType,
-        lineWidth,
-        curve,
-        tension,
-        connectNulls,
-        lineShadow,
-        lighter,
-      },
-      // icon,
-      // label,
-    },
-    line: { id: lineId, stroke },
-    area,
-    data,
-    xAxis: { scaler: xScaler, direction },
-    yAxis: { scaler: yScaler },
-  }) => {
-    if (!data.length) return null;
-    const ticks = xScaler.domain();
-
-    const sortData = useMemo(() => {
-      const usefulData = data.filter(
-        ({ data: { x } }) => ticks.indexOf(x) > -1
-      );
-      return usefulData.sort(
-        ({ data: { x: a } }, { data: { x: b } }) =>
-          ticks.indexOf(a) - ticks.indexOf(b)
-      );
-    }, [data, ticks]);
-
-    const _data = useMemo(
-      () => getLineData(sortData, connectNulls),
-      [sortData, connectNulls]
-    );
-
-    const lineGen = useMemo(() => {
-      const isVertical = direction === 'vertical';
-
-      let lineGen = (
-        isVertical
-          ? d3Line()
-            .y(({ data: { x } }) => xScaler(x))
-            .x(({ data: { y } }) => yScaler(y))
-          : d3Line()
-            .x(({ data: { x } }) => xScaler(x))
-            .y(({ data: { y } }) => yScaler(y))
-      ).defined(defined);
-      curve && lineGen.curve(curveCatmullRom.alpha(tension));
-      curve && lineGen.curve(curveMonotoneX);
-      return lineGen;
-    }, [direction, xScaler, yScaler, tension, curve]);
-
-    const path = lineGen(_data);
-    const showLighter = lighter && lighter.show;
-    const show = lineShadow && lineShadow.show;
-    const shadow = lineShadow && lineShadow.shadow;
-    return (
-      <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"
-          }}
-          fill='none'
-          strokeDasharray={lineType === 'dash' ? '3 3' : null}
-          strokeWidth={lineWidth}
-        />
-        {type == 'area' && (
-          <Area
-            data={_data}
-            config={{ ...area, curve, tension }}
-            xScaler={xScaler}
-            yScaler={yScaler}
-          />
-        )}
-        {showLighter && <Lighter path={path} config={lighter} />}
-      </g>
-    );
-  }
-);
+/**
+ * 折线图
+ */
+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) =>
+  connectNulls
+    ? data.map(({ data, ...item }) => ({
+      ...item,
+      data: { ...data, y: +data.y },
+    }))
+    : data;
+
+const Area = ({
+  data,
+  config,
+  config: {
+    id,
+    fill,
+    type,
+    url,
+    opacity,
+    size: { width: patternW, height: patternH },
+    curve,
+    tension
+  },
+  xScaler,
+  yScaler,
+}) => {
+  const [height] = yScaler.range();
+  const area = useMemo(() => getColorList(fill), [fill]);
+
+  const areaGen = useMemo(() => {
+    const areaGen = d3Area()
+      .x(({ data: { x } }) => xScaler(x))
+      .y1(({ data: { y } }) => yScaler(y))
+      // .y0(height)
+      .y0(({})=>yScaler(0))
+      .defined(defined);
+    curve && areaGen.curve(curveCatmullRom.alpha(tension));
+    curve && areaGen.curve(curveMonotoneX);
+    return areaGen;
+  }, [xScaler, yScaler, curve, tension]);
+
+  return (
+    <>
+      <path d={areaGen(data)} 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} />}
+          </pattern>
+        ) : (
+          <LinearGradient id={id} colors={area} rotate={0} />
+        )}
+      </defs>
+    </>
+  );
+};
+
+export default memo(
+  ({
+    type,
+    config: {
+      line: {
+        type: lineType,
+        lineWidth,
+        curve,
+        tension,
+        connectNulls,
+        lineShadow,
+        lighter,
+      },
+      // icon,
+      // label,
+    },
+    line: { id: lineId, stroke },
+    area,
+    data,
+    xAxis: { scaler: xScaler, direction },
+    yAxis: { scaler: yScaler },
+  }) => {
+    if (!data.length) return null;
+    const ticks = xScaler.domain();
+
+    const sortData = useMemo(() => {
+      const usefulData = data.filter(
+        ({ data: { x } }) => ticks.indexOf(x) > -1
+      );
+      return usefulData.sort(
+        ({ data: { x: a } }, { data: { x: b } }) =>
+          ticks.indexOf(a) - ticks.indexOf(b)
+      );
+    }, [data, ticks]);
+
+    const _data = useMemo(
+      () => getLineData(sortData, connectNulls),
+      [sortData, connectNulls]
+    );
+
+    const lineGen = useMemo(() => {
+      const isVertical = direction === 'vertical';
+
+      let lineGen = (
+        isVertical
+          ? d3Line()
+            .y(({ data: { x } }) => xScaler(x))
+            .x(({ data: { y } }) => yScaler(y))
+          : d3Line()
+            .x(({ data: { x } }) => xScaler(x))
+            .y(({ data: { y } }) => yScaler(y))
+      ).defined(defined);
+      curve && lineGen.curve(curveCatmullRom.alpha(tension));
+      curve && lineGen.curve(curveMonotoneX);
+      return lineGen;
+    }, [direction, xScaler, yScaler, tension, curve]);
+
+    const path = lineGen(_data);
+    const showLighter = lighter && lighter.show;
+    const show = lineShadow && lineShadow.show;
+    const shadow = lineShadow && lineShadow.shadow;
+    return (
+      <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"
+          }}
+          fill='none'
+          strokeDasharray={lineType === 'dash' ? '3 3' : null}
+          strokeWidth={lineWidth}
+        />
+        {type == 'area' && (
+          <Area
+            data={_data}
+            config={{ ...area, curve, tension }}
+            xScaler={xScaler}
+            yScaler={yScaler}
+          />
+        )}
+        {showLighter && <Lighter path={path} config={lighter} />}
+      </g>
+    );
+  }
+);