@easyv/charts 1.1.7 → 1.2.1

package/src/hooks/useTooltip.ts

@@ -1,96 +1,96 @@
-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 轮播动画参数
- * @returns {Object} 返回被选中的名称，坐标，选中方法
- */
-type Props = {
-  svg: any;
-  marginLeft: number;
-  marginTop: number;
-  width: number;
-  height: number;
-  axisX: AxisX;
-  config: { auto?: boolean; interval?: number; manual?: boolean };
-};
-
-export default ({
-  svg,
-  marginLeft,
-  marginTop,
-  width,
-  height,
-  axisX,
-  config: { auto, interval = 0, manual } = {},
-}: Props) => {
-  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
-
-  const tickLength = axisX.allTicks.length;
-  const setIndex = useCallback(
-    (e) => {
-      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 {
-          setCurrentIndex(null);
-        }
-      }
-    },
-    [svg, marginLeft, axisX]
-  );
-  useEffect(() => {
-    const on = auto && tickLength;
-    if (!!on) setCurrentIndex(0);
-    const intervalHandler = on
-      ? setInterval(() => {
-          setCurrentIndex((index) => {
-            const tmp = index == null ? 0 : index;
-            const currentIndex = tmp + 1;
-            if (currentIndex >= tickLength) {
-              return 0;
-            }
-            return currentIndex;
-          });
-        }, interval * 1000)
-      : null;
-    return () => {
-      intervalHandler && clearInterval(intervalHandler);
-    };
-  }, [auto, tickLength, interval]);
-  const name = currentIndex === null ? 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 轮播动画参数
+ * @returns {Object} 返回被选中的名称，坐标，选中方法
+ */
+type Props = {
+  svg: any;
+  marginLeft: number;
+  marginTop: number;
+  width: number;
+  height: number;
+  axisX: AxisX;
+  config: { auto?: boolean; interval?: number; manual?: boolean };
+};
+
+export default ({
+  svg,
+  marginLeft,
+  marginTop,
+  width,
+  height,
+  axisX,
+  config: { auto, interval = 0, manual } = {},
+}: Props) => {
+  const [currentIndex, setCurrentIndex] = useState<number | null>(null);
+
+  const tickLength = axisX.allTicks.length;
+  const setIndex = useCallback(
+    (e) => {
+      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 {
+          setCurrentIndex(null);
+        }
+      }
+    },
+    [svg, marginLeft, axisX]
+  );
+  useEffect(() => {
+    const on = auto && tickLength;
+    if (!!on) setCurrentIndex(0);
+    const intervalHandler = on
+      ? setInterval(() => {
+        setCurrentIndex((index) => {
+          const tmp = index == null ? 0 : index;
+          const currentIndex = tmp + 1;
+          if (currentIndex >= tickLength) {
+            return 0;
+          }
+          return currentIndex;
+        });
+      }, interval * 1000)
+      : null;
+    return () => {
+      intervalHandler && clearInterval(intervalHandler);
+    };
+  }, [auto, tickLength, interval]);
+  const name = currentIndex === null ? 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,62 +1,67 @@
-declare module 'd3v7' {
-  export * from 'd3-timer';
-  export * from 'd3-array';
-}
-
-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 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 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';
+};