@easyv/charts 1.2.3 → 1.2.6

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/Carousel.tsx

@@ -1,144 +1,144 @@
-import React, {
-  ComponentType,
-  memo,
-  useEffect,
-  useState,
-  useCallback,
-  useRef,
-} from 'react';
-import { interval as d3Interval, Timer } from 'd3v7';
-type State = {
-  currentIndex: number | null;
-  trigger: string;
-};
-
-const initialState = {
-  currentIndex: null,
-  trigger: '',
-};
-
-const carouselState = {
-  currentIndex: 0,
-  trigger: 'carousel',
-};
-
-const defaultAnimation = {
-  on: false,
-  interval: 0,
-  interactive: '',
-  current: { heighten: 0, opacity: 100 },
-};
-/**
- * 饼图类图表轮播逻辑，用来管理currentIndex，及回调逻辑（HOC）
- */
-export default (Component: ComponentType<any>) =>
-  memo(
-    ({
-      config: { animation, ...config },
-      data = [],
-      ...rest
-    }: {
-      data: DataType[];
-      config: { dataAnimation: boolean; [key: string]: any };
-      [key: string]: any;
-    }) => {
-      const dataLength = data.length;
-      const _animation = Object.assign({}, defaultAnimation, animation);
-      const { on, interval, interactive } = _animation;
-
-      const [state, setState] = useState<State>(
-        on ? carouselState : initialState
-      );
-      const timer: { current: Timer | null } = useRef(null);
-
-      const animationOn = on && interval && dataLength;
-
-      const carousel = useCallback(() => {
-        if (animationOn) {
-          timer.current = d3Interval(() => {
-            setState(({ currentIndex }) => {
-              const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
-              return {
-                currentIndex: tmp >= dataLength ? 0 : tmp,
-                trigger: 'carousel',
-              };
-            });
-          }, interval * 1000);
-        } else {
-          timer.current = null;
-          setState({
-            currentIndex: null,
-            trigger: '',
-          });
-        }
-      }, [animationOn, interval, dataLength]);
-
-      useEffect(() => {
-        carousel && carousel();
-        return () => {
-          timer.current && timer.current.stop();
-        };
-      }, [carousel]);
-
-      const onEvent = useCallback(
-        ({ currentIndex, type }) => {
-          switch (interactive) {
-            case true:
-            case 'click':
-              if (type == 'onClick') {
-                timer.current && timer.current.stop();
-                animationOn && carousel();
-                setState({
-                  trigger: type,
-                  currentIndex,
-                });
-              }
-              break;
-            case 'hover':
-              if (type == 'onMouseEnter') {
-                setState({
-                  trigger: type,
-                  currentIndex,
-                });
-                timer.current && timer.current.stop();
-              } else if (type == 'onMouseLeave') {
-                animationOn && carousel();
-              }
-              break;
-            case false:
-            case '':
-              break;
-            case 'carousel':
-            default:
-              setState({
-                trigger: type,
-                currentIndex,
-              });
-              break;
-          }
-        },
-        [interactive, animationOn, carousel]
-      );
-
-      if (!animationOn) {
-        return (
-          <Component
-            {...rest}
-            state={state}
-            onEvent={onEvent}
-            config={{ ...config, animation: _animation }}
-            data={data}
-          />
-        );
-      }
-      return (
-        <Component
-          {...rest}
-          state={state}
-          onEvent={onEvent}
-          config={{ ...config, animation: _animation }}
-          data={data}
-        />
-      );
-    }
-  );
+import React, {
+  ComponentType,
+  memo,
+  useEffect,
+  useState,
+  useCallback,
+  useRef,
+} from 'react';
+import { interval as d3Interval, Timer } from 'd3v7';
+type State = {
+  currentIndex: number | null;
+  trigger: string;
+};
+
+const initialState = {
+  currentIndex: null,
+  trigger: '',
+};
+
+const carouselState = {
+  currentIndex: 0,
+  trigger: 'carousel',
+};
+
+const defaultAnimation = {
+  on: false,
+  interval: 0,
+  interactive: '',
+  current: { heighten: 0, opacity: 100 },
+};
+/**
+ * 饼图类图表轮播逻辑，用来管理currentIndex，及回调逻辑（HOC）
+ */
+export default (Component: ComponentType<any>) =>
+  memo(
+    ({
+      config: { animation, ...config },
+      data = [],
+      ...rest
+    }: {
+      data: DataType[];
+      config: { dataAnimation: boolean; [key: string]: any };
+      [key: string]: any;
+    }) => {
+      const dataLength = data.length;
+      const _animation = Object.assign({}, defaultAnimation, animation);
+      const { on, interval, interactive } = _animation;
+
+      const [state, setState] = useState<State>(
+        on ? carouselState : initialState
+      );
+      const timer: { current: Timer | null } = useRef(null);
+
+      const animationOn = on && interval && dataLength;
+
+      const carousel = useCallback(() => {
+        if (animationOn) {
+          timer.current = d3Interval(() => {
+            setState(({ currentIndex }) => {
+              const tmp = (currentIndex == null ? 0 : +currentIndex) + 1;
+              return {
+                currentIndex: tmp >= dataLength ? 0 : tmp,
+                trigger: 'carousel',
+              };
+            });
+          }, interval * 1000);
+        } else {
+          timer.current = null;
+          setState({
+            currentIndex: null,
+            trigger: '',
+          });
+        }
+      }, [animationOn, interval, dataLength]);
+
+      useEffect(() => {
+        carousel && carousel();
+        return () => {
+          timer.current && timer.current.stop();
+        };
+      }, [carousel]);
+
+      const onEvent = useCallback(
+        ({ currentIndex, type }) => {
+          switch (interactive) {
+            case true:
+            case 'click':
+              if (type == 'onClick') {
+                timer.current && timer.current.stop();
+                animationOn && carousel();
+                setState({
+                  trigger: type,
+                  currentIndex,
+                });
+              }
+              break;
+            case 'hover':
+              if (type == 'onMouseEnter') {
+                setState({
+                  trigger: type,
+                  currentIndex,
+                });
+                timer.current && timer.current.stop();
+              } else if (type == 'onMouseLeave') {
+                animationOn && carousel();
+              }
+              break;
+            case false:
+            case '':
+              break;
+            case 'carousel':
+            default:
+              setState({
+                trigger: type,
+                currentIndex,
+              });
+              break;
+          }
+        },
+        [interactive, animationOn, carousel]
+      );
+
+      if (!animationOn) {
+        return (
+          <Component
+            {...rest}
+            state={state}
+            onEvent={onEvent}
+            config={{ ...config, animation: _animation }}
+            data={data}
+          />
+        );
+      }
+      return (
+        <Component
+          {...rest}
+          state={state}
+          onEvent={onEvent}
+          config={{ ...config, animation: _animation }}
+          data={data}
+        />
+      );
+    }
+  );

package/src/components/CartesianChart.js

@@ -24,6 +24,7 @@ import {
   Brush,
   Label,
   Mapping,
+  BaseLine
 } from '.';
 
 const Chart = memo(
@@ -41,6 +42,10 @@ const Chart = memo(
       },
       series,
       tooltip,
+      baseLine: {
+        config: baseLineConfig = {},
+        data: baseLineData = []
+      },
       tooltip: {
         config: tooltipConfig = {},
         config: { auto, manual, indicator = {} } = {},
@@ -49,7 +54,7 @@ const Chart = memo(
     },
     style,
     data,
-    filterData,
+    filterData
   }) => {
     const context = useContext(chartContext);
     const {
@@ -95,10 +100,10 @@ const Chart = memo(
     const indicatorAttr = isVertical
       ? { width: chartWidth, height: indicatorWidth, y: position }
       : {
-          height: chartHeight,
-          width: indicatorWidth,
-          x: position,
-        };
+        height: chartHeight,
+        width: indicatorWidth,
+        x: position,
+      };
 
     const onInteraction = useCallback(
       (e) => {
@@ -167,6 +172,18 @@ const Chart = memo(
               )
             );
           })}
+          {baseLineData && baseLineData.length > 0 && baseLineData.map((item, index) => {
+            const { line: { yOrZ } } = baseLineConfig[index];
+            const yAxis = axes.get(yOrZ);
+            return (
+              yAxis && (<BaseLine
+                width={width}
+                key={index}
+                config={baseLineConfig[index]}
+                yAxis={yAxis}
+                data={item} />)
+            )
+          })}
         </ChartContainer>
         <Legend {...legend} filterData={filterData} series={series} />
         {showTooltip && (