@easyv/charts 1.3.27 → 1.3.29

package/src/components/Brush.js

@@ -1,159 +1,159 @@
-/**
- * 实现中
- */
-import { memo, useState, useCallback, useEffect, useRef } from 'react';
-
-const left = {
-  position: 'relative',
-  width: 5,
-  height: '100%',
-  cursor: 'col-resize',
-  backgroundClip: 'content-box',
-};
-const center = {
-  flex: '1 1 0%',
-  height: '100%',
-  cursor: 'move',
-};
-const right = {
-  position: 'relative',
-  width: 5,
-  height: '100%',
-  cursor: 'col-resize',
-  backgroundClip: 'content-box',
-};
-const initialPosition = {
-  start: 0,
-  end: 0,
-  status: '',
-};
-const getValue = (x, min, max) => Math.max(min, Math.min(x, max));
-export default ({
-  width,
-  config: {
-    height,
-    background,
-    margin: { marginLeft, marginRight },
-    detail: { width: blockWidth, color },
-  },
-}) => {
-  const [state, setState] = useState({ translateX: 0, width: blockWidth });
-  const availableWidth = width - marginLeft - marginRight;
-  const cache = useRef(state);
-
-  const move = useCallback(
-    ({ delta, status, name }) => {
-      let { width, translateX } = cache.current;
-      const minWidth = 40;
-      const minX = 0;
-      switch (name) {
-        case 'center':
-          translateX = getValue(
-            translateX + delta,
-            minX,
-            availableWidth - width
-          );
-          break;
-        case 'left':
-          let tempWidth = width;
-          width = getValue(width + delta * -1, minWidth, translateX + width);
-          translateX = getValue(
-            translateX + delta,
-            minX,
-            translateX + tempWidth - width
-          );
-          break;
-        case 'right':
-          width = getValue(
-            width + delta,
-            minWidth,
-            availableWidth - translateX
-          );
-          break;
-      }
-
-      if (status === 'up') {
-        cache.current = { width, translateX };
-      }
-
-      setState({ width, translateX });
-    },
-    [availableWidth]
-  );
-  useEffect(() => {}, [state]);
-  return (
-    <div
-      style={{
-        marginLeft,
-        marginRight,
-        height,
-        background,
-        position: 'absolute',
-        bottom: 0,
-        width: availableWidth,
-      }}
-    >
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          position: 'absolute',
-          top: 0,
-          left: 0,
-          transform: 'translate3d(' + state.translateX + 'px, 0, 0)',
-          height: '100%',
-          width: state.width + 'px',
-          backgroundColor: color,
-        }}
-      >
-        <Move style={left} move={move} name='left' />
-        <Move style={center} move={move} name='center' />
-        <Move style={right} move={move} name='right' />
-      </div>
-    </div>
-  );
-};
-const Move = memo(({ style, move, name }) => {
-  const [position, setPosition] = useState(initialPosition);
-
-  const documentOnMouseMove = useCallback((e) => {
-    // console.log('documentOnMouseMove');
-    setPosition((position) => {
-      return {
-        ...position,
-        end: e.clientX,
-        status: 'move',
-      };
-    });
-  }, []);
-
-  const documentOnMouseUp = useCallback((e) => {
-    // console.log('documentOnMouseUp');
-    setPosition((position) => {
-      return {
-        ...position,
-        end: e.clientX,
-        status: 'up',
-      };
-    });
-    document.removeEventListener('mousemove', documentOnMouseMove);
-    document.removeEventListener('mouseup', documentOnMouseUp);
-  }, []);
-
-  const onMouseDown = useCallback((e) => {
-    // console.log('onMouseDown');
-    setPosition({
-      end: e.clientX,
-      start: e.clientX,
-      status: 'down',
-    });
-    document.addEventListener('mousemove', documentOnMouseMove);
-    document.addEventListener('mouseup', documentOnMouseUp);
-  }, []);
-
-  useEffect(() => {
-    const { start, end, status } = position;
-    move({ delta: end - start, status, name });
-  }, [position, move, name]);
-  return <div style={style} onMouseDown={onMouseDown} />;
-});
+/**
+ * 实现中
+ */
+import { memo, useState, useCallback, useEffect, useRef } from 'react';
+
+const left = {
+  position: 'relative',
+  width: 5,
+  height: '100%',
+  cursor: 'col-resize',
+  backgroundClip: 'content-box',
+};
+const center = {
+  flex: '1 1 0%',
+  height: '100%',
+  cursor: 'move',
+};
+const right = {
+  position: 'relative',
+  width: 5,
+  height: '100%',
+  cursor: 'col-resize',
+  backgroundClip: 'content-box',
+};
+const initialPosition = {
+  start: 0,
+  end: 0,
+  status: '',
+};
+const getValue = (x, min, max) => Math.max(min, Math.min(x, max));
+export default ({
+  width,
+  config: {
+    height,
+    background,
+    margin: { marginLeft, marginRight },
+    detail: { width: blockWidth, color },
+  },
+}) => {
+  const [state, setState] = useState({ translateX: 0, width: blockWidth });
+  const availableWidth = width - marginLeft - marginRight;
+  const cache = useRef(state);
+
+  const move = useCallback(
+    ({ delta, status, name }) => {
+      let { width, translateX } = cache.current;
+      const minWidth = 40;
+      const minX = 0;
+      switch (name) {
+        case 'center':
+          translateX = getValue(
+            translateX + delta,
+            minX,
+            availableWidth - width
+          );
+          break;
+        case 'left':
+          let tempWidth = width;
+          width = getValue(width + delta * -1, minWidth, translateX + width);
+          translateX = getValue(
+            translateX + delta,
+            minX,
+            translateX + tempWidth - width
+          );
+          break;
+        case 'right':
+          width = getValue(
+            width + delta,
+            minWidth,
+            availableWidth - translateX
+          );
+          break;
+      }
+
+      if (status === 'up') {
+        cache.current = { width, translateX };
+      }
+
+      setState({ width, translateX });
+    },
+    [availableWidth]
+  );
+  useEffect(() => {}, [state]);
+  return (
+    <div
+      style={{
+        marginLeft,
+        marginRight,
+        height,
+        background,
+        position: 'absolute',
+        bottom: 0,
+        width: availableWidth,
+      }}
+    >
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          transform: 'translate3d(' + state.translateX + 'px, 0, 0)',
+          height: '100%',
+          width: state.width + 'px',
+          backgroundColor: color,
+        }}
+      >
+        <Move style={left} move={move} name='left' />
+        <Move style={center} move={move} name='center' />
+        <Move style={right} move={move} name='right' />
+      </div>
+    </div>
+  );
+};
+const Move = memo(({ style, move, name }) => {
+  const [position, setPosition] = useState(initialPosition);
+
+  const documentOnMouseMove = useCallback((e) => {
+    // console.log('documentOnMouseMove');
+    setPosition((position) => {
+      return {
+        ...position,
+        end: e.clientX,
+        status: 'move',
+      };
+    });
+  }, []);
+
+  const documentOnMouseUp = useCallback((e) => {
+    // console.log('documentOnMouseUp');
+    setPosition((position) => {
+      return {
+        ...position,
+        end: e.clientX,
+        status: 'up',
+      };
+    });
+    document.removeEventListener('mousemove', documentOnMouseMove);
+    document.removeEventListener('mouseup', documentOnMouseUp);
+  }, []);
+
+  const onMouseDown = useCallback((e) => {
+    // console.log('onMouseDown');
+    setPosition({
+      end: e.clientX,
+      start: e.clientX,
+      status: 'down',
+    });
+    document.addEventListener('mousemove', documentOnMouseMove);
+    document.addEventListener('mouseup', documentOnMouseUp);
+  }, []);
+
+  useEffect(() => {
+    const { start, end, status } = position;
+    move({ delta: end - start, status, name });
+  }, [position, move, name]);
+  return <div style={style} onMouseDown={onMouseDown} />;
+});

package/src/components/CartesianChart.js

@@ -4,6 +4,7 @@
 import React, {
   memo,
   useMemo,
+  useState,
   createRef,
   useContext,
   useCallback,
@@ -60,6 +61,7 @@ const Chart = memo(
     filterData,
   }) => {
     const context = useContext(chartContext);
+    const [isHover, setIsHover] = useState(false);
     const {
       width: chartWidth,
       height: chartHeight,
@@ -68,7 +70,7 @@ const Chart = memo(
     } = useContext(chartContext);
     const svg = createRef();
     const axes = useAxes({ axes: axesConfig, context });
-    const axisX = useCarouselAxisX(axes.get('x'), animation);
+    const axisX = useCarouselAxisX(axes.get('x'), animation, isHover);
 
     const {
       x: tooltipX,
@@ -125,8 +127,9 @@ const Chart = memo(
           height={height}
           marginLeft={marginLeft}
           marginTop={marginTop}
+          onMouseEnter={()=>{setIsHover(true)}}
           onMouseMove={setIndex}
-          onMouseLeave={setIndex}
+          onMouseLeave={(e)=>{setIsHover(false);setIndex(e)}}
           ref={svg}
         >
           {background && (

package/src/components/Chart.js

@@ -1,99 +1,99 @@
-/**
- * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
- */
-import React, { memo, useMemo, createRef, useCallback } from 'react';
-import { chartContext } from '../context';
-import { PieChart, CartesianChart } from '.';
-
-const getCallbackData = (callbacks, data) => {
-  let callbackData;
-  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
-    callbackData = {};
-    callbacks.forEach(({ origin, target }) => {
-      callbackData[target] = data[origin];
-    });
-  }
-  return callbackData;
-};
-
-const Chart = memo(
-  ({
-    id,
-    type,
-    config,
-    config: {
-      chart: {
-        dimension: {
-          chartDimension: { height, width },
-        },
-        margin: { marginRight, marginLeft, marginBottom, marginTop },
-      },
-      interaction,
-    },
-    data,
-    onRelative,
-    emit,
-    emitEvent,
-    ...props
-  }) => {
-    const svg = createRef();
-    const chartWidth = width - marginLeft - marginRight;
-    const chartHeight = height - marginTop - marginBottom;
-
-    const triggerOnRelative = useCallback(
-      (data) => {
-        if (!interaction) return;
-        const { callbacks, remoteControls } = interaction;
-        const callbackData = getCallbackData(callbacks, data);
-        if (callbackData) {
-          onRelative && onRelative(id, callbackData);
-          remoteControls &&
-            emitEvent &&
-            remoteControls.forEach((o) => {
-              const control = JSON.parse(o.control);
-              if (
-                control.screen &&
-                control.type &&
-                control.type === 'callback'
-              ) {
-                emitEvent({
-                  screen: control.screen,
-                  type: 'callback',
-                  callbackData,
-                });
-              }
-            });
-        }
-      },
-      [ JSON.stringify(interaction)]
-    );
-
-    const onEmit = useCallback(
-      (type = 'click', data) => emit && emit(type, data),
-      [emit]
-    );
-
-    const context = useMemo(
-      () => ({
-        id,
-        width: chartWidth,
-        height: chartHeight,
-        triggerOnRelative,
-        svg,
-        onEmit,
-      }),
-      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
-    );
-    return (
-      <chartContext.Provider value={context}>
-        {type == 'pie' ? (
-          <PieChart id={id} config={config} data={data} {...props} />
-        ) : (
-          <CartesianChart id={id} config={config} data={data} {...props} />
-        )}
-      </chartContext.Provider>
-    );
-  }
-);
-
-export default Chart;
+/**
+ * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
+ */
+import React, { memo, useMemo, createRef, useCallback } from 'react';
+import { chartContext } from '../context';
+import { PieChart, CartesianChart } from '.';
+
+const getCallbackData = (callbacks, data) => {
+  let callbackData;
+  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
+    callbackData = {};
+    callbacks.forEach(({ origin, target }) => {
+      callbackData[target] = data[origin];
+    });
+  }
+  return callbackData;
+};
+
+const Chart = memo(
+  ({
+    id,
+    type,
+    config,
+    config: {
+      chart: {
+        dimension: {
+          chartDimension: { height, width },
+        },
+        margin: { marginRight, marginLeft, marginBottom, marginTop },
+      },
+      interaction,
+    },
+    data,
+    onRelative,
+    emit,
+    emitEvent,
+    ...props
+  }) => {
+    const svg = createRef();
+    const chartWidth = width - marginLeft - marginRight;
+    const chartHeight = height - marginTop - marginBottom;
+
+    const triggerOnRelative = useCallback(
+      (data) => {
+        if (!interaction) return;
+        const { callbacks, remoteControls } = interaction;
+        const callbackData = getCallbackData(callbacks, data);
+        if (callbackData) {
+          onRelative && onRelative(id, callbackData);
+          remoteControls &&
+            emitEvent &&
+            remoteControls.forEach((o) => {
+              const control = JSON.parse(o.control);
+              if (
+                control.screen &&
+                control.type &&
+                control.type === 'callback'
+              ) {
+                emitEvent({
+                  screen: control.screen,
+                  type: 'callback',
+                  callbackData,
+                });
+              }
+            });
+        }
+      },
+      [ JSON.stringify(interaction)]
+    );
+
+    const onEmit = useCallback(
+      (type = 'click', data) => emit && emit(type, data),
+      [emit]
+    );
+
+    const context = useMemo(
+      () => ({
+        id,
+        width: chartWidth,
+        height: chartHeight,
+        triggerOnRelative,
+        svg,
+        onEmit,
+      }),
+      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
+    );
+    return (
+      <chartContext.Provider value={context}>
+        {type == 'pie' ? (
+          <PieChart id={id} config={config} data={data} {...props} />
+        ) : (
+          <CartesianChart id={id} config={config} data={data} {...props} />
+        )}
+      </chartContext.Provider>
+    );
+  }
+);
+
+export default Chart;

package/src/components/ChartContainer.tsx

@@ -1,63 +1,63 @@
-/**
- * svg外框
- */
-import React, {
-  memo,
-  forwardRef,
-  ReactChild,
-  ReactEventHandler,
-  LegacyRef,
-} from 'react';
-const event = () => {};
-
-type Props = {
-  width: number;
-  height: number;
-  marginLeft: number;
-  marginTop: number;
-  style: Object;
-  children: ReactChild;
-  onMouseEnter: ReactEventHandler;
-  onMouseLeave: ReactEventHandler;
-  onClick: ReactEventHandler;
-  onMouseMove: ReactEventHandler;
-  onMouseOut: ReactEventHandler;
-};
-
-export default memo(
-  forwardRef(
-    (
-      {
-        width,
-        height,
-        marginLeft,
-        marginTop,
-        style,
-        children,
-        onMouseEnter = event,
-        onMouseLeave = event,
-        onClick = event,
-        onMouseMove = event,
-        onMouseOut = event,
-      }: Props,
-      ref: LegacyRef<SVGSVGElement>
-    ) => (
-      <svg
-        className='__easyv-svg'
-        width={width}
-        height={height}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        onMouseOut={onMouseOut}
-        onClick={onClick}
-        onMouseMove={onMouseMove}
-        ref={ref}
-        style={{ position: 'absolute', width, height, ...style }}
-      >
-        <g transform={'translate(' + marginLeft + ', ' + marginTop + ')'}>
-          {children}
-        </g>
-      </svg>
-    )
-  )
-);
+/**
+ * svg外框
+ */
+import React, {
+  memo,
+  forwardRef,
+  ReactChild,
+  ReactEventHandler,
+  LegacyRef,
+} from 'react';
+const event = () => {};
+
+type Props = {
+  width: number;
+  height: number;
+  marginLeft: number;
+  marginTop: number;
+  style: Object;
+  children: ReactChild;
+  onMouseEnter: ReactEventHandler;
+  onMouseLeave: ReactEventHandler;
+  onClick: ReactEventHandler;
+  onMouseMove: ReactEventHandler;
+  onMouseOut: ReactEventHandler;
+};
+
+export default memo(
+  forwardRef(
+    (
+      {
+        width,
+        height,
+        marginLeft,
+        marginTop,
+        style,
+        children,
+        onMouseEnter = event,
+        onMouseLeave = event,
+        onClick = event,
+        onMouseMove = event,
+        onMouseOut = event,
+      }: Props,
+      ref: LegacyRef<SVGSVGElement>
+    ) => (
+      <svg
+        className='__easyv-svg'
+        width={width}
+        height={height}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onMouseOut={onMouseOut}
+        onClick={onClick}
+        onMouseMove={onMouseMove}
+        ref={ref}
+        style={{ position: 'absolute', width, height, ...style }}
+      >
+        <g transform={'translate(' + marginLeft + ', ' + marginTop + ')'}>
+          {children}
+        </g>
+      </svg>
+    )
+  )
+);