@easyv/charts 1.7.37 → 1.8.0

package/src/hooks/useStackData.js

@@ -1,140 +1,140 @@
-import { useMemo } from 'react';
-import { group } from 'd3v7';
-import {
-  dataYOrZ,
-  seriesYOrZ,
-  getCurrentStack,
-  getStacks,
-  resetStacks,
-} from '../utils';
-
-const getSeriesMap = (series) => {
-  const seriesMap = new Map();
-  series.forEach(({ name, ...rest }) => {
-    seriesMap.set(name, {
-      ...rest,
-      name,
-      data: [],
-    });
-  });
-  return seriesMap;
-};
-const resetStackData = (series) => {
-  series.forEach((series) => {
-    series.data = [];
-  });
-};
-
-const setStackData = (data, series, stacks) => {
-  const dataMap = group(data, (d) => d.x);
-  dataMap.forEach((value) => {
-    resetStacks(stacks);
-    for (let i = 0, j = value.length; i < j; i++) {
-      const d = value[i];
-      const currentSeries = series.get(d.s);
-      if(currentSeries){
-        const type = currentSeries.type;
-        const currentStack = getCurrentStack(currentSeries, stacks);
-        if (d && d.y !== undefined && (type!="band" || type=="band" && !isNaN(d.y))) {
-          if (currentStack) {
-            if (d.y >= 0) {
-              currentSeries.data.push({
-                data: d,
-                index: currentStack.index,
-                bound: [currentStack.positive, currentStack.positive + d.y],
-              });
-              currentStack.positive += d.y;
-            } else {
-              currentSeries.data.push({
-                data: d,
-                index: currentStack.index,
-                bound: [currentStack.negative, currentStack.negative + d.y],
-              });
-              currentStack.negative += d.y;
-            }
-          } else {
-            currentSeries.data.push({
-              data: d,
-              bound: [0, d.y],
-              index: 0,
-            });
-          }
-        }
-      }
-      
-    }
-  });
-  dataMap.clear();
-  return series;
-};
-const mergeDataAndSeries=(data, _series) =>{
-  // 创建一个映射，键为系列名称，值为数据点数组
-  const dataMap = new Map();
-  
-  // 遍历 data 数组，按系列名称分组数据点
-  data.forEach(item => {
-      const seriesName = item.s;
-      if (!dataMap.has(seriesName)) {
-          dataMap.set(seriesName, []);
-      }
-      // 构建符合目标格式的数据点对象
-      const dataPoint = {
-          data: {
-              s: item.s,
-              x: item.x,
-              y: item.y,
-              showY: item.showY
-          },
-          index: 0,
-          bound: [0, item.y]
-      };
-      dataMap.get(seriesName).push(dataPoint);
-  });
-  
-  // 遍历 _series 数组，为每个系列添加对应的数据
-  return _series.map(series => {
-      const seriesName = series.name || series.fieldName;
-      // 查找对应系列的数据
-      const seriesData = dataMap.get(seriesName) || [];
-      // 返回合并后完整的系列对象，包含原始配置和新添加的数据
-      return {
-          ...series,
-          data: seriesData
-      };
-  });
-}
-/**
- * 计算堆叠数据
- * @param {Array} data 数据
- * @param {Map} series 系列
- * @returns {Array} 返回堆叠后的数据，由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
- */
-
-export default ({ data, series }) => {
-  const _series = useMemo(() => {
-    const stacks = getStacks(series);
-    const _series = getSeriesMap(series);
-    return { stacks, series: seriesYOrZ(_series) };
-  }, [series]);
-  
-  const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
-  const tmp = useMemo(() => {
-    const seriesdata=mergeDataAndSeries(data,Array.from(series.values()))
-    const { y: dataY, z: dataZ } = _data;
-    const {
-      stacks,
-      series: { z: seriesZ,y: seriesY  },
-    } = _series;
-    resetStackData(seriesY);
-    resetStackData(seriesZ);
-    setStackData(dataY, seriesY, stacks);
-    setStackData(dataZ, seriesZ, stacks);
-    return {
-      bandLength: stacks.filter((item) => item.type == 'band').length,
-      // series: mergeDataAndSeries(data,Array.from(series.values())),
-      series: [...seriesY.values(), ...seriesZ.values()],
-      seriesdata:seriesdata
-    };
-  }, [_data, _series]);
-  return tmp;
-};
+import { useMemo } from 'react';
+import { group } from 'd3v7';
+import {
+  dataYOrZ,
+  seriesYOrZ,
+  getCurrentStack,
+  getStacks,
+  resetStacks,
+} from '../utils';
+
+const getSeriesMap = (series) => {
+  const seriesMap = new Map();
+  series.forEach(({ name, ...rest }) => {
+    seriesMap.set(name, {
+      ...rest,
+      name,
+      data: [],
+    });
+  });
+  return seriesMap;
+};
+const resetStackData = (series) => {
+  series.forEach((series) => {
+    series.data = [];
+  });
+};
+
+const setStackData = (data, series, stacks) => {
+  const dataMap = group(data, (d) => d.x);
+  dataMap.forEach((value) => {
+    resetStacks(stacks);
+    for (let i = 0, j = value.length; i < j; i++) {
+      const d = value[i];
+      const currentSeries = series.get(d.s);
+      if(currentSeries){
+        const type = currentSeries.type;
+        const currentStack = getCurrentStack(currentSeries, stacks);
+        if (d && d.y !== undefined && (type!="band" || type=="band" && !isNaN(d.y))) {
+          if (currentStack) {
+            if (d.y >= 0) {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.positive, currentStack.positive + d.y],
+              });
+              currentStack.positive += d.y;
+            } else {
+              currentSeries.data.push({
+                data: d,
+                index: currentStack.index,
+                bound: [currentStack.negative, currentStack.negative + d.y],
+              });
+              currentStack.negative += d.y;
+            }
+          } else {
+            currentSeries.data.push({
+              data: d,
+              bound: [0, d.y],
+              index: 0,
+            });
+          }
+        }
+      }
+      
+    }
+  });
+  dataMap.clear();
+  return series;
+};
+const mergeDataAndSeries=(data, _series) =>{
+  // 创建一个映射，键为系列名称，值为数据点数组
+  const dataMap = new Map();
+  
+  // 遍历 data 数组，按系列名称分组数据点
+  data.forEach(item => {
+      const seriesName = item.s;
+      if (!dataMap.has(seriesName)) {
+          dataMap.set(seriesName, []);
+      }
+      // 构建符合目标格式的数据点对象
+      const dataPoint = {
+          data: {
+              s: item.s,
+              x: item.x,
+              y: item.y,
+              showY: item.showY
+          },
+          index: 0,
+          bound: [0, item.y]
+      };
+      dataMap.get(seriesName).push(dataPoint);
+  });
+  
+  // 遍历 _series 数组，为每个系列添加对应的数据
+  return _series.map(series => {
+      const seriesName = series.name || series.fieldName;
+      // 查找对应系列的数据
+      const seriesData = dataMap.get(seriesName) || [];
+      // 返回合并后完整的系列对象，包含原始配置和新添加的数据
+      return {
+          ...series,
+          data: seriesData
+      };
+  });
+}
+/**
+ * 计算堆叠数据
+ * @param {Array} data 数据
+ * @param {Map} series 系列
+ * @returns {Array} 返回堆叠后的数据，由一开始的{x, y, s}变成{data: {x, y, s}, bound: [start, end], index}
+ */
+
+export default ({ data, series }) => {
+  const _series = useMemo(() => {
+    const stacks = getStacks(series);
+    const _series = getSeriesMap(series);
+    return { stacks, series: seriesYOrZ(_series) };
+  }, [series]);
+  
+  const _data = useMemo(() => dataYOrZ(data, _series.series), [data, _series]);
+  const tmp = useMemo(() => {
+    const seriesdata=mergeDataAndSeries(data,Array.from(series.values()))
+    const { y: dataY, z: dataZ } = _data;
+    const {
+      stacks,
+      series: { z: seriesZ,y: seriesY  },
+    } = _series;
+    resetStackData(seriesY);
+    resetStackData(seriesZ);
+    setStackData(dataY, seriesY, stacks);
+    setStackData(dataZ, seriesZ, stacks);
+    return {
+      bandLength: stacks.filter((item) => item.type == 'band').length,
+      // series: mergeDataAndSeries(data,Array.from(series.values())),
+      series: [...seriesY.values(), ...seriesZ.values()],
+      seriesdata:seriesdata
+    };
+  }, [_data, _series]);
+  return tmp;
+};

package/src/hooks/useTooltip.ts

@@ -1,103 +1,103 @@
-import { useCallback, useState, useEffect } from "react";
-import { getMousePos } from "../utils";
-const callback = () => {};
-
-/**
- * 主要用于轴类图表，返回当前选中的是哪一个x
- * @param {Array} svg svg的dom实例
- * @param {Number} marginLeft 左间距
- * @param {Number} marginTop 上间距
- * @param {Number} width 宽
- * @param {Number} height 高
- * @param {Number} axisX 类目轴
- * @param {Object} config 轮播动画参数
- * @param {Boolean} active 组件是否处于活跃状态
- * @returns {Object} 返回被选中的名称，坐标，选中方法
- */
-type Props = {
-  svg: any;
-  marginLeft: number;
-  marginTop: number;
-  width: number;
-  height: number;
-  axisX: any;
-  isHover: boolean;
-  config: { auto?: boolean; interval?: number; manual?: boolean };
-  active:boolean
-};
-
-export default ({
-  svg,
-  marginLeft,
-  marginTop,
-  width,
-  height,
-  axisX,
-  isHover,
-  config: { auto, interval = 0, manual } = {},
-  active
-}: Props) => {
-  const [currentIndex, setCurrentIndex] = useState<number>(-1);
-  const tickLength = axisX.allTicks.length;
-  const setIndex = useCallback(
-    (e: any) => {
-      if (svg) {
-        const {
-          x: mouseX,
-          y: mouseY,
-          w: boundWidth,
-          h: boundHeight,
-        } = getMousePos(e, svg.current);
-        const { carousel, allTicks, ticks, scaler, direction } = axisX;
-        const _ticks = carousel ? ticks : allTicks;
-        const ratioX = parseInt(svg.current.style.width) / boundWidth;
-        const ratioY = parseInt(svg.current.style.height) / boundHeight;
-        const resetX = mouseX * ratioX;
-        const resetY = mouseY * ratioY;
-        const x = resetX - marginLeft;
-        const y = resetY - marginTop;
-        if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
-          const position = direction === "vertical" ? y : x;
-          const name = _ticks.reduce((prev: string, current: string) =>
-            Math.abs(scaler(prev) - position) >
-            Math.abs(scaler(current) - position)
-              ? current
-              : prev
-          );
-          setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
-        } else {
-          // 鼠标划出后,如果开启了自动轮播，就不需要让提示框消失了
-          if (!auto) {
-            setCurrentIndex(-1);
-          }
-        }
-      }
-    },
-    [svg, marginLeft, axisX, auto]
-  );
-  useEffect(() => {
-    const on = auto && tickLength && !isHover && active;
-    // if (!!on) setCurrentIndex(0);
-    const intervalHandler = on
-      ? setInterval(() => {
-          setCurrentIndex((index) => {
-            const currentIndex = index + 1;
-            if (currentIndex >= tickLength) {
-              return 0;
-            }
-            return currentIndex;
-          });
-        }, interval * 1000)
-      : null;
-    return () => {
-      intervalHandler && clearInterval(intervalHandler);
-    };
-  }, [auto, tickLength, interval, isHover, active]);
-  const name = currentIndex === -1 ? null : axisX.allTicks[currentIndex];
-
-  return {
-    name,
-    x: axisX.scaler(name),
-    setIndex: manual ? setIndex : callback,
-  };
-};
+import { useCallback, useState, useEffect } from "react";
+import { getMousePos } from "../utils";
+const callback = () => {};
+
+/**
+ * 主要用于轴类图表，返回当前选中的是哪一个x
+ * @param {Array} svg svg的dom实例
+ * @param {Number} marginLeft 左间距
+ * @param {Number} marginTop 上间距
+ * @param {Number} width 宽
+ * @param {Number} height 高
+ * @param {Number} axisX 类目轴
+ * @param {Object} config 轮播动画参数
+ * @param {Boolean} active 组件是否处于活跃状态
+ * @returns {Object} 返回被选中的名称，坐标，选中方法
+ */
+type Props = {
+  svg: any;
+  marginLeft: number;
+  marginTop: number;
+  width: number;
+  height: number;
+  axisX: any;
+  isHover: boolean;
+  config: { auto?: boolean; interval?: number; manual?: boolean };
+  active:boolean
+};
+
+export default ({
+  svg,
+  marginLeft,
+  marginTop,
+  width,
+  height,
+  axisX,
+  isHover,
+  config: { auto, interval = 0, manual } = {},
+  active
+}: Props) => {
+  const [currentIndex, setCurrentIndex] = useState<number>(-1);
+  const tickLength = axisX.allTicks.length;
+  const setIndex = useCallback(
+    (e: any) => {
+      if (svg) {
+        const {
+          x: mouseX,
+          y: mouseY,
+          w: boundWidth,
+          h: boundHeight,
+        } = getMousePos(e, svg.current);
+        const { carousel, allTicks, ticks, scaler, direction } = axisX;
+        const _ticks = carousel ? ticks : allTicks;
+        const ratioX = parseInt(svg.current.style.width) / boundWidth;
+        const ratioY = parseInt(svg.current.style.height) / boundHeight;
+        const resetX = mouseX * ratioX;
+        const resetY = mouseY * ratioY;
+        const x = resetX - marginLeft;
+        const y = resetY - marginTop;
+        if (x > 0 && x < width && y > 0 && y < height && _ticks.length) {
+          const position = direction === "vertical" ? y : x;
+          const name = _ticks.reduce((prev: string, current: string) =>
+            Math.abs(scaler(prev) - position) >
+            Math.abs(scaler(current) - position)
+              ? current
+              : prev
+          );
+          setCurrentIndex(allTicks.findIndex((tick: string) => tick == name));
+        } else {
+          // 鼠标划出后,如果开启了自动轮播，就不需要让提示框消失了
+          if (!auto) {
+            setCurrentIndex(-1);
+          }
+        }
+      }
+    },
+    [svg, marginLeft, axisX, auto]
+  );
+  useEffect(() => {
+    const on = auto && tickLength && !isHover && active;
+    // if (!!on) setCurrentIndex(0);
+    const intervalHandler = on
+      ? setInterval(() => {
+          setCurrentIndex((index) => {
+            const currentIndex = index + 1;
+            if (currentIndex >= tickLength) {
+              return 0;
+            }
+            return currentIndex;
+          });
+        }, interval * 1000)
+      : null;
+    return () => {
+      intervalHandler && clearInterval(intervalHandler);
+    };
+  }, [auto, tickLength, interval, isHover, active]);
+  const name = currentIndex === -1 ? null : axisX.allTicks[currentIndex];
+
+  return {
+    name,
+    x: axisX.scaler(name),
+    setIndex: manual ? setIndex : callback,
+  };
+};

package/src/index.js

@@ -1,6 +1,6 @@
-export * from './components';
-export * from './hooks';
-export * from './context';
-export * from './formatter';
-export * as utils from './utils';
-export * from '@easyv/utils';
+export * from './components';
+export * from './hooks';
+export * from './context';
+export * from './formatter';
+export * as utils from './utils';
+export * from '@easyv/utils';

package/src/types/index.d.ts

@@ -1,68 +1,68 @@
-declare module 'd3v7' {
-  export * from 'd3-timer';
-  export * from 'd3-array';
-}
-
-type DataAnimation = {
-  show: boolean;
-  duration: number;
-};
-
-type DataType = {
-  x: string;
-  y: number;
-  s: string;
-};
-type DataWithBoundType = {
-  index: number;
-  data: DataType;
-  bound: Array<number>;
-  flag: boolean;
-};
-type Context = {
-  width: number;
-  height: number;
-  id: string;
-  triggerOnRelative: Function;
-  svg: Object;
-  onEmit: Function;
-};
-
-type ChartLine = {
-  show: boolean;
-  color: string;
-  lineWidth: number;
-  strokeDasharray?: string;
-};
-
-type Orientation = 'top' | 'bottom' | 'left' | 'right';
-type TextAlign = "left" | "center" | "right" | "justify";
-
-type Translate = {
-  x: number;
-  y: number;
-};
-type Size = {
-  width: number;
-  height: number;
-};
-type Font = {
-  bold: boolean;
-  color: string;
-  fontFamily: string;
-  fontSize: number;
-  italic: boolean;
-  letterSpacing: number;
-};
-
-type Align = { textAnchor: string; dominantBaseline: string };
-
-type Tick = { show: boolean; tick: string };
-
-type AxisX = {
-  carousel: boolean;
-  allTicks: Array<string>;
-  ticks: Array<string>;
-  scaler: Function;
-  direction: 'vertical' | 'horizontal';
-};
+declare module 'd3v7' {
+  export * from 'd3-timer';
+  export * from 'd3-array';
+}
+
+type DataAnimation = {
+  show: boolean;
+  duration: number;
+};
+
+type DataType = {
+  x: string;
+  y: number;
+  s: string;
+};
+type DataWithBoundType = {
+  index: number;
+  data: DataType;
+  bound: Array<number>;
+  flag: boolean;
+};
+type Context = {
+  width: number;
+  height: number;
+  id: string;
+  triggerOnRelative: Function;
+  svg: Object;
+  onEmit: Function;
+};
+
+type ChartLine = {
+  show: boolean;
+  color: string;
+  lineWidth: number;
+  strokeDasharray?: string;
+};
+
+type Orientation = 'top' | 'bottom' | 'left' | 'right';
+type TextAlign = "left" | "center" | "right" | "justify";
+
+type Translate = {
+  x: number;
+  y: number;
+};
+type Size = {
+  width: number;
+  height: number;
+};
+type Font = {
+  bold: boolean;
+  color: string;
+  fontFamily: string;
+  fontSize: number;
+  italic: boolean;
+  letterSpacing: number;
+};
+
+type Align = { textAnchor: string; dominantBaseline: string };
+
+type Tick = { show: boolean; tick: string };
+
+type AxisX = {
+  carousel: boolean;
+  allTicks: Array<string>;
+  ticks: Array<string>;
+  scaler: Function;
+  direction: 'vertical' | 'horizontal';
+};