@easyv/charts 1.3.4 → 1.3.5

package/src/components/Line.js

@@ -1,145 +1,145 @@
-/**
- * 折线图
- */
-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,
-        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;
-    return (
-      <g className='__easyv-line'>
-        <path
-          d={path}
-          stroke={stroke}
-          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,
+        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;
+    return (
+      <g className='__easyv-line'>
+        <path
+          d={path}
+          stroke={stroke}
+          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>
+    );
+  }
+);

package/src/components/LinearGradient.js

@@ -1,29 +1,29 @@
-/**
- * svg渐变滤镜
- */
-export default ({
-  id,
-  colors,
-  rotate = 0,
-  gradientUnits,
-  position: [x1, y1, x2, y2] = [0, 0, 0, 1],
-}) => (
-  <linearGradient
-    x1={x1}
-    y1={y1}
-    x2={x2}
-    y2={y2}
-    id={id}
-    gradientUnits={gradientUnits}
-    gradientTransform={'rotate(' + rotate + ', .5, .5)'}
-  >
-    {colors.map(({ offset, color, stopOpacity = 1 }, index) => (
-      <stop
-        key={index}
-        offset={offset}
-        stopColor={color}
-        stopOpacity={stopOpacity}
-      />
-    ))}
-  </linearGradient>
-);
+/**
+ * svg渐变滤镜
+ */
+export default ({
+  id,
+  colors,
+  rotate = 0,
+  gradientUnits,
+  position: [x1, y1, x2, y2] = [0, 0, 0, 1],
+}) => (
+  <linearGradient
+    x1={x1}
+    y1={y1}
+    x2={x2}
+    y2={y2}
+    id={id}
+    gradientUnits={gradientUnits}
+    gradientTransform={'rotate(' + rotate + ', .5, .5)'}
+  >
+    {colors.map(({ offset, color, stopOpacity = 1 }, index) => (
+      <stop
+        key={index}
+        offset={offset}
+        stopColor={color}
+        stopOpacity={stopOpacity}
+      />
+    ))}
+  </linearGradient>
+);

package/src/components/Mapping.js

@@ -1,71 +1,71 @@
-import { memo, useMemo } from 'react';
-import { group } from 'd3v7';
-
-const groupBySeriesData = (data) => {
-  const groupBySeries = group(data, (d) => d.s);
-  const tmp = [];
-  for (let [key, value] of groupBySeries.entries()) {
-    tmp.push({ key, value });
-  }
-  return tmp;
-};
-
-const isValidData = (data) =>
-  !!(
-    Array.isArray(data) &&
-    data.filter(
-      (obj) =>
-        Object.prototype.toString.call(obj) === '[object Object]' &&
-        Object.keys(obj).length !== 0
-    ).length > 0
-  );
-
-export default (Component) =>
-  memo(({ config: { series, ...config }, data: originData, ...rest }) => {
-    const data = useMemo(() => {
-      if (!isValidData(originData)) return [];
-      return groupBySeriesData(originData);
-    }, [originData]);
-
-    const _series = useMemo(() => {
-      if (!!data.length) {
-        const seriesLength = series.length;
-        const noName = series.every(({ fieldName }) => !fieldName);
-        const tmp = new Map();
-        if (!!noName) {
-          data.forEach(({ key }, index) => {
-            const current = series[index % seriesLength];
-            const name = key || '';
-            tmp.set(name, {
-              ...current,
-              name,
-            });
-          });
-          return tmp;
-        }
-        const lastSeries = series[seriesLength - 1];
-        data.forEach(({ key }) => {
-          const current = series.find(({ fieldName }) => fieldName == key);
-          const result = current || lastSeries;
-          const name =
-            (current ? current.fieldName || current.displayName : key) || '';
-          tmp.set(name, {
-            ...result,
-            name,
-            displayName: current ? current.displayName : '',
-            fieldName: current ? current.fieldName : '',
-          });
-        });
-        return tmp;
-      }
-    }, [series, data]);
-    return (
-      !!data.length && (
-        <Component
-          {...rest}
-          data={originData}
-          config={{ ...config, series: _series }}
-        />
-      )
-    );
-  });
+import { memo, useMemo } from 'react';
+import { group } from 'd3v7';
+
+const groupBySeriesData = (data) => {
+  const groupBySeries = group(data, (d) => d.s);
+  const tmp = [];
+  for (let [key, value] of groupBySeries.entries()) {
+    tmp.push({ key, value });
+  }
+  return tmp;
+};
+
+const isValidData = (data) =>
+  !!(
+    Array.isArray(data) &&
+    data.filter(
+      (obj) =>
+        Object.prototype.toString.call(obj) === '[object Object]' &&
+        Object.keys(obj).length !== 0
+    ).length > 0
+  );
+
+export default (Component) =>
+  memo(({ config: { series, ...config }, data: originData, ...rest }) => {
+    const data = useMemo(() => {
+      if (!isValidData(originData)) return [];
+      return groupBySeriesData(originData);
+    }, [originData]);
+
+    const _series = useMemo(() => {
+      if (!!data.length) {
+        const seriesLength = series.length;
+        const noName = series.every(({ fieldName }) => !fieldName);
+        const tmp = new Map();
+        if (!!noName) {
+          data.forEach(({ key }, index) => {
+            const current = series[index % seriesLength];
+            const name = key || '';
+            tmp.set(name, {
+              ...current,
+              name,
+            });
+          });
+          return tmp;
+        }
+        const lastSeries = series[seriesLength - 1];
+        data.forEach(({ key }) => {
+          const current = series.find(({ fieldName }) => fieldName == key);
+          const result = current || lastSeries;
+          const name =
+            (current ? current.fieldName || current.displayName : key) || '';
+          tmp.set(name, {
+            ...result,
+            name,
+            displayName: current ? current.displayName : '',
+            fieldName: current ? current.fieldName : '',
+          });
+        });
+        return tmp;
+      }
+    }, [series, data]);
+    return (
+      !!data.length && (
+        <Component
+          {...rest}
+          data={originData}
+          config={{ ...config, series: _series }}
+        />
+      )
+    );
+  });

package/src/components/Marquee.js

@@ -1,88 +1,92 @@
-import { useEffect, memo, useRef, useState } from 'react';
-
-/**
- * 文字跑马灯组件
- * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
- */
-
-export default memo((props) => {
-  const {
-    value, // 文本
-    style, // 样式
-    speed = 5, // 动画速度
-  } = props;
-
-  const dom = useRef(null);
-  const content = useRef(null);
-
-  const [fresh,setFresh] = useState(false);
-  let textList = useRef([value]);
-  let duration = useRef(10/speed);
-
-  useEffect(() => {
-    if(dom.current && content.current){
-      let domRectWidth =  dom.current.getBoundingClientRect().width;
-      let contentRectWidth = content.current.getBoundingClientRect().width;
-      if (domRectWidth < contentRectWidth) {
-        textList.current = [value,value];
-        duration.current = contentRectWidth / domRectWidth / speed * 10;
-        setFresh(!fresh);
-      }
-    }
-  }, [value,speed]);
- 
-  //在head标签中注入keyframes动画
-  useEffect(() => {
-    let md_marquee = document.getElementById('md_marquee'); //先查找是否已经存在md_marquee
-    if (!md_marquee) {
-      //不存在时再注入style标签
-      const keyframes = `@keyframes md_marquee {0%{
-                transform: translate(0,0);
-            }
-            100%{
-                transform: translate(-100%,0);
-            }}`;
-      const style = document.createElement('style');
-      style.id = 'md_marquee';
-      style.innerHTML = keyframes;
-      // 将style样式存放到head标签
-      document.getElementsByTagName('head')[0].appendChild(style);
-    }
-  }, []);
-  let overflow = textList.current.length==2;
-  return (
-    <span
-      style={{
-        width: '100%',
-        ...style,
-        display: 'flex',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        justifyContent:overflow?"start":(style.justifyContent || "")
-      }}
-      ref={dom}
-    >
-      {textList.current.map((item, itemIndex) => {
-        return (
-          <span
-            key={itemIndex}
-            style={
-              overflow
-                ? {
-                    //如果文本数量为2，则需要滚动
-                    animationName: 'md_marquee',
-                    animationTimingFunction: 'linear',
-                    animationIterationCount: 'infinite',
-                    animationDuration: duration.current + 's',
-                  }
-                : {}
-            }
-            ref={itemIndex == 0 ? content : null}
-          >
-            &nbsp;{item}
-          </span>
-        );
-      })}
-    </span>
-  );
-});
+import { useEffect, memo, useRef, useState, useCallback } from "react";
+
+/**
+ * 文字跑马灯组件
+ * eg: <Marquee value={文本内容} speed={跑马灯速度} style={额外样式}></Marquee>
+ */
+
+export default memo((props) => {
+  const {
+    value, // 文本
+    style, // 样式
+    speed = 5, // 动画速度
+  } = props;
+
+  const dom = useRef(null);
+  const target = useRef(null);
+  const observe = useRef(null);
+  const speed_ = useRef(0); //这里必须用一个ref绑定speed，否则animation中获取不到最新的speed
+  const timer = useRef();
+  const [overflow, setOverflow] = useState(false);
+  speed_.current = speed;
+
+  const animation = (timestamp) => {
+    let frame = (Math.floor(timestamp * speed_.current) % 10000) / 100;
+    target.current.style.transform = `translate(-${frame}%,0px)`;
+    target.current.nextSibling.style.transform = `translate(-${frame}%,0px)`;
+    timer.current = requestAnimationFrame(animation);
+  };
+
+  useEffect(() => {
+    //初始化观察器，利用观察器来监视组件可视区域变化
+    observe.current = new IntersectionObserver(
+      function (entries) {
+        let entrie = entries[0];
+
+        if (entrie.boundingClientRect.width < entrie.rootBounds.width >= 1) {
+          //表示文字全部可视
+          cancelAnimationFrame(timer.current);
+          target.current.style.transform = "translate(0px,0px)"; //重置偏移
+          setOverflow(false);
+          return;
+        } else {
+          //否则文本溢出
+          if (!overflow) {
+            cancelAnimationFrame(timer.current);
+            timer.current = requestAnimationFrame(animation);
+            setOverflow(true);
+          }
+        }
+      },
+      {
+        root: dom.current,
+        rootMargin: "0px 0px 0px 0px",
+        threshold: new Array(101).fill(0).map((d, i) => i / 100), //这里设置了[0-1]之间所有的阈值，保证每一帧的变化都能被观察到
+      }
+    );
+    // start observing
+    observe.current.observe(target.current);
+    return () => {
+      cancelAnimationFrame(timer.current);
+      observe.current.unobserve(target.current);
+      observe.current.disconnect();
+    };
+  }, []);
+
+  let textList = [value, value];
+  return (
+    <div
+      style={{
+        width: "100%",
+        ...style,
+        display: "flex",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        justifyContent: overflow ? "start" : style.justifyContent || "",
+      }}
+      ref={dom}
+    >
+      {textList.map((item, i) => {
+        return (
+          <span
+            key={i}
+            ref={i == 0 ? target : null}
+            style={{ display: i == 1 && !overflow ? "none" : "inline" }}
+          >
+            {item}&nbsp;
+          </span>
+        );
+      })}
+    </div>
+  );
+});