@easyv/charts 1.0.75 → 1.1.0

package/src/components/Legend.js

@@ -1,158 +1,158 @@
-/**
- * 图例
- */
-import React, { memo, useCallback } from 'react';
-import { getIcon, sortPie } from '../utils';
-
-const defaultFont = {
-  fontStyle: 'normal',
-  fontWeight: 'normal',
-};
-
-export default memo(
-  ({
-    series,
-    config,
-    config: {
-      show,
-      order = '',
-      interactive,
-      layout: {
-        alignment = 'right center',
-        gridTemplateColumns,
-        gridGap: { gridColumnGap, gridRowGap },
-        translate: { x, y },
-      },
-      font: { italic, bold, ...font } = defaultFont,
-      unselect: { opacity = 1 } = {},
-    },
-    filterData,
-    formatter,
-  }) => {
-    if (!show) return null;
-
-    const _series = sortPie(series, order);
-
-    const [_alignment, position] = alignment.split(' ');
-    const length = _series.length;
-
-    const onClick = useCallback(
-      (e) => {
-        const { dataset } = e.currentTarget;
-        const { name } = dataset;
-        filterData && interactive && filterData(name);
-      },
-      [interactive, filterData]
-    );
-
-    return (
-      <div
-        className='__easyv-legend-wrapper'
-        style={{
-          position: 'absolute',
-          height: 'auto',
-          display: 'flex',
-          transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
-          ...getPosition(position, _alignment),
-        }}
-      >
-        <ul
-          style={{
-            display: 'grid',
-            gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
-            gridTemplateColumns:
-              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',
-          }}
-        >
-          {_series.map((series, index) => {
-            const { type, name, displayName, icon, selected } = series;
-            const _icon = getIcon(type, icon);
-            return (
-              <li
-                key={index}
-                onClick={onClick}
-                data-name={name}
-                style={{
-                  display: 'flex',
-                  opacity: selected === false ? opacity / 100 : 1,
-                  alignItems: 'center',
-                  gap: _icon.gap,
-                }}
-              >
-                {formatter ? (
-                  formatter(series, config)
-                ) : (
-                  <>
-                    <span style={_icon} />
-                    <span
-                      style={{
-                        ...font,
-                        fontStyle: italic ? 'italic' : 'normal',
-                        fontWeight: bold ? 'bold' : 'normal',
-                      }}
-                    >
-                      {displayName || name}
-                    </span>
-                  </>
-                )}
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    );
-  }
-);
-
-const getPosition = (position, alignment) => {
-  switch (position) {
-    case 'top':
-      return {
-        left: 0,
-        right: 0,
-        top: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    case 'right':
-      return {
-        top: 0,
-        bottom: 0,
-        right: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    case 'left':
-      return {
-        top: 0,
-        bottom: 0,
-        left: 10,
-        alignItems:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-    default:
-      return {
-        left: 0,
-        right: 0,
-        bottom: 5,
-        justifyContent:
-          alignment === 'center'
-            ? 'center'
-            : alignment === 'left'
-            ? 'flex-start'
-            : 'flex-end',
-      };
-  }
-};
+/**
+ * 图例
+ */
+import React, { memo, useCallback } from 'react';
+import { getIcon, sortPie } from '../utils';
+
+const defaultFont = {
+  fontStyle: 'normal',
+  fontWeight: 'normal',
+};
+
+export default memo(
+  ({
+    series,
+    config,
+    config: {
+      show,
+      order = '',
+      interactive,
+      layout: {
+        alignment = 'right center',
+        gridTemplateColumns,
+        gridGap: { gridColumnGap, gridRowGap },
+        translate: { x, y },
+      },
+      font: { italic, bold, ...font } = defaultFont,
+      unselect: { opacity = 1 } = {},
+    },
+    filterData,
+    formatter,
+  }) => {
+    if (!show) return null;
+
+    const _series = sortPie(series, order);
+
+    const [_alignment, position] = alignment.split(' ');
+    const length = _series.length;
+
+    const onClick = useCallback(
+      (e) => {
+        const { dataset } = e.currentTarget;
+        const { name } = dataset;
+        filterData && interactive && filterData(name);
+      },
+      [interactive, filterData]
+    );
+
+    return (
+      <div
+        className='__easyv-legend-wrapper'
+        style={{
+          position: 'absolute',
+          height: 'auto',
+          display: 'flex',
+          transform: 'translate3d(' + x + 'px, ' + y + 'px, 0px)',
+          ...getPosition(position, _alignment),
+        }}
+      >
+        <ul
+          style={{
+            display: 'grid',
+            gridGap: gridRowGap + 'px ' + gridColumnGap + 'px',
+            gridTemplateColumns:
+              'repeat(' + Math.min(gridTemplateColumns, length) + ', 1fr)',
+          }}
+        >
+          {_series.map((series, index) => {
+            const { type, name, displayName, icon, selected } = series;
+            const _icon = getIcon(type, icon);
+            return (
+              <li
+                key={index}
+                onClick={onClick}
+                data-name={name}
+                style={{
+                  display: 'flex',
+                  opacity: selected === false ? opacity / 100 : 1,
+                  alignItems: 'center',
+                  gap: _icon.gap,
+                }}
+              >
+                {formatter ? (
+                  formatter(series, config)
+                ) : (
+                  <>
+                    <span style={_icon} />
+                    <span
+                      style={{
+                        ...font,
+                        fontStyle: italic ? 'italic' : 'normal',
+                        fontWeight: bold ? 'bold' : 'normal',
+                      }}
+                    >
+                      {displayName || name}
+                    </span>
+                  </>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    );
+  }
+);
+
+const getPosition = (position, alignment) => {
+  switch (position) {
+    case 'top':
+      return {
+        left: 0,
+        right: 0,
+        top: 5,
+        justifyContent:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+    case 'right':
+      return {
+        top: 0,
+        bottom: 0,
+        right: 10,
+        alignItems:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+    case 'left':
+      return {
+        top: 0,
+        bottom: 0,
+        left: 10,
+        alignItems:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+    default:
+      return {
+        left: 0,
+        right: 0,
+        bottom: 5,
+        justifyContent:
+          alignment === 'center'
+            ? 'center'
+            : alignment === 'left'
+            ? 'flex-start'
+            : 'flex-end',
+      };
+  }
+};

package/src/components/Lighter.jsx

@@ -1,162 +1,173 @@
-/**
- * 区域图发光跟踪路径
- */
-import React, { useState, useEffect, useRef } from 'react';
-import { scaleLinear } from 'd3v7';
-import { getColorList } from '../utils';
-
-const accelerateStep = 2;
-const loop = false;
-
-export default ({
-  path: d,
-  config: { length: curveLength, width, fill, unitStep },
-}) => {
-  const pointIndexRef = useRef(0);
-  const raf = useRef(null);
-  const [points, setPoints] = useState([]);
-  const [lighter, setLighter] = useState(null);
-  const [path, setPath] = useState(null);
-  const pointLength = points.length;
-  const totalLength = getLength(pointLength, curveLength);
-  const easingFunc = easing.linear;
-  const interpolateList = getColorsInterpolate(getColorList(fill));
-
-  const drawLigher = () => {
-    const currentPointLength = pointIndexRef.current;
-    const pointIndex =
-      currentPointLength >= totalLength
-        ? loop
-          ? curveLength
-          : 0
-        : currentPointLength +
-          unitStep +
-          Math.floor(
-            easingFunc(pointIndexRef.current / totalLength) * accelerateStep
-          );
-
-    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);
-  };
-
-  useEffect(() => {
-    if (path) {
-      const totalLength = path.getTotalLength();
-      const points = [];
-      for (let i = 0; i < totalLength; i++) {
-        const { x, y } = path.getPointAtLength(i);
-        points.push({
-          x,
-          y,
-        });
-      }
-      setPoints(points);
-    }
-  }, [d, path]);
-
-  useEffect(() => {
-    raf.current = requestAnimationFrame(drawLigher);
-    return () => {
-      cancelAnimationFrame(raf.current);
-    };
-  }, [drawLigher]);
-
-  return (
-    <>
-      <path ref={setPath} d={d} fill='none' stroke='none' />
-      <g ref={setLighter}>
-        {points.map((item, index) => (
-          <circle key={index} r={width} fill='none' />
-        ))}
-      </g>
-    </>
-  );
-};
-
-const drawCircle = (children, points, interpolateList) => {
-  const pointLength = points.length;
-  points.forEach(({ x, y }, index) => {
-    children[index].setAttribute('cx', x);
-    children[index].setAttribute('cy', y);
-    children[index].setAttribute(
-      'fill',
-      getColor(index / pointLength, interpolateList)
-    );
-  });
-};
-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;
+};