@easyv/charts 1.6.12 → 1.6.14

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/Chart.js

@@ -1,154 +1,154 @@
-/**
- * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
- */
-import React, { memo, useMemo, useRef, createRef, useState, useEffect, useCallback } from 'react';
-import { chartContext } from '../context';
-import { PieChart, CartesianChart } from '.';
-import { group } from 'd3v7';
-
-const getCallbackData = (action,callbacks, data) => {
-  const callbackData={};
-  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
-    callbacks.forEach(({ origin, target, actions:_action }) => {
-			if(action === _action){
-				callbackData[target] = data[origin];
-			}
-    });
-  }
-  return callbackData;
-};
-
-const Chart = memo(
-  ({
-    id,
-    type,
-    config,
-    config: {
-      axes,
-      chart: {
-        dimension: {
-          chartDimension: { height, width },
-        },
-        margin: { marginRight, marginLeft, marginBottom, marginTop },
-      },
-      interaction,
-    },
-    data:originData,
-    onRelative,
-    emit,
-    emitEvent,
-    ...props
-  }) => {
-    const isIOS = useRef(/iPad|iPhone|iPod|iOS|CriOS/i.test(navigator.userAgent));
-    const svg = createRef();
-    const chartWidth = width - marginLeft - marginRight;
-    const chartHeight = height - marginTop - marginBottom;
-    const [active, setActive] = useState(true);
-    const scaleRef = useRef([1,1]);
-
-    const triggerOnRelative = useCallback(
-      (action,data) => {
-        if (!interaction) return;
-        const { callbacks, remoteControls } = interaction;
-        const callbackData = getCallbackData(action,callbacks, data);
-        if (JSON.stringify(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,
-        isIOS:isIOS.current,    //是否为IOS设备
-        scale:scaleRef, //大屏的缩放比
-        width: chartWidth,
-        height: chartHeight,
-        triggerOnRelative,
-        svg,
-        onEmit,
-      }),
-      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
-    );
-
-    useEffect(()=>{
-      let isAnimation = window.screenConfig?window.screenConfig.isAnimation:true; //大屏的全局设置是否允许开启动画，false为不允许
-      if(!isAnimation) setActive(false);
-      const activeHandler=(e)=>{
-        const { dynamicData = true } = e;
-        // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
-        isAnimation && setActive(dynamicData);
-      }
-      getScreenScale();
-      document.addEventListener(`switchActive_${id}`,activeHandler);
-      document.addEventListener("resize",getScreenScale);
-      return ()=>{
-        document.removeEventListener(`switchActive_${id}`,activeHandler);
-        document.removeEventListener("resize",getScreenScale);
-      }
-    },[]);
-    
-    let data = originData;
-    //对轴类图表进行自动排序
-    // if(axes){
-    //   const xAxis = axes.find(d=>d.axisType=="x");
-    //   if(xAxis){
-    //     const { config:{ label:{ autoSort, format:{ type } } } } = xAxis;
-    //     if(type=="date" && autoSort){
-    //       const groupBySeries = group(data, (d) => d.s);
-    //       data=[...groupBySeries].flatMap(d=>{
-    //         return d[1].sort((a,b)=>a.x>b.x?1:-1)
-    //       });
-    //     }
-    //   }
-    // }
-
-    return (
-      <chartContext.Provider value={context}>
-        {type == 'pie' ? (
-          <PieChart id={id} config={config} data={data} active={active} {...props} />
-        ) : (
-          <CartesianChart id={id} config={config} data={data} active={active} {...props} />
-        )}
-      </chartContext.Provider>
-      
-    );
-    //获取大屏缩放系数
-    function getScreenScale(){
-      setTimeout(()=>{
-          //获取大屏缩放系数
-          let dom = document.getElementById("bigscreen-container") || document.getElementById("m-simulator");
-          if(dom){
-            const transform = dom.style.transform;
-            const scale = transform?transform.match(/^scale\((.+)\)$/)[1]:"1,1";
-            const arr = scale.split(",");
-            scaleRef.current = [1/arr[0],1/(arr.length===1?arr[0]:arr[1])];   //这里做一次除法，后面就可以用乘法计算值了
-          }
-      },50);
-    }
-  }
-);
-
-export default Chart;
+/**
+ * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
+ */
+import React, { memo, useMemo, useRef, createRef, useState, useEffect, useCallback } from 'react';
+import { chartContext } from '../context';
+import { PieChart, CartesianChart } from '.';
+import { group } from 'd3v7';
+
+const getCallbackData = (action,callbacks, data) => {
+  const callbackData={};
+  if (callbacks && Array.isArray(callbacks) && callbacks.length && data) {
+    callbacks.forEach(({ origin, target, actions:_action }) => {
+			if(action === _action){
+				callbackData[target] = data[origin];
+			}
+    });
+  }
+  return callbackData;
+};
+
+const Chart = memo(
+  ({
+    id,
+    type,
+    config,
+    config: {
+      axes,
+      chart: {
+        dimension: {
+          chartDimension: { height, width },
+        },
+        margin: { marginRight, marginLeft, marginBottom, marginTop },
+      },
+      interaction,
+    },
+    data:originData,
+    onRelative,
+    emit,
+    emitEvent,
+    ...props
+  }) => {
+    const isIOS = useRef(/iPad|iPhone|iPod|iOS|CriOS/i.test(navigator.userAgent));
+    const svg = createRef();
+    const chartWidth = width - marginLeft - marginRight;
+    const chartHeight = height - marginTop - marginBottom;
+    const [active, setActive] = useState(true);
+    const scaleRef = useRef([1,1]);
+
+    const triggerOnRelative = useCallback(
+      (action,data) => {
+        if (!interaction) return;
+        const { callbacks, remoteControls } = interaction;
+        const callbackData = getCallbackData(action,callbacks, data);
+        if (JSON.stringify(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,
+        isIOS:isIOS.current,    //是否为IOS设备
+        scale:scaleRef, //大屏的缩放比
+        width: chartWidth,
+        height: chartHeight,
+        triggerOnRelative,
+        svg,
+        onEmit,
+      }),
+      [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]
+    );
+
+    useEffect(()=>{
+      let isAnimation = window.screenConfig?window.screenConfig.isAnimation:true; //大屏的全局设置是否允许开启动画，false为不允许
+      if(!isAnimation) setActive(false);
+      const activeHandler=(e)=>{
+        const { dynamicData = true } = e;
+        // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
+        isAnimation && setActive(dynamicData);
+      }
+      getScreenScale();
+      document.addEventListener(`switchActive_${id}`,activeHandler);
+      document.addEventListener("resize",getScreenScale);
+      return ()=>{
+        document.removeEventListener(`switchActive_${id}`,activeHandler);
+        document.removeEventListener("resize",getScreenScale);
+      }
+    },[]);
+    
+    let data = originData;
+    //对轴类图表进行自动排序
+    // if(axes){
+    //   const xAxis = axes.find(d=>d.axisType=="x");
+    //   if(xAxis){
+    //     const { config:{ label:{ autoSort, format:{ type } } } } = xAxis;
+    //     if(type=="date" && autoSort){
+    //       const groupBySeries = group(data, (d) => d.s);
+    //       data=[...groupBySeries].flatMap(d=>{
+    //         return d[1].sort((a,b)=>a.x>b.x?1:-1)
+    //       });
+    //     }
+    //   }
+    // }
+
+    return (
+      <chartContext.Provider value={context}>
+        {type == 'pie' ? (
+          <PieChart id={id} config={config} data={data} active={active} {...props} />
+        ) : (
+          <CartesianChart id={id} config={config} data={data} active={active} {...props} />
+        )}
+      </chartContext.Provider>
+      
+    );
+    //获取大屏缩放系数
+    function getScreenScale(){
+      setTimeout(()=>{
+          //获取大屏缩放系数
+          let dom = document.getElementById("bigscreen-container") || document.getElementById("m-simulator");
+          if(dom){
+            const transform = dom.style.transform;
+            const scale = transform?transform.match(/^scale\((.+)\)$/)[1]:"1,1";
+            const arr = scale.split(",");
+            scaleRef.current = [1/arr[0],1/(arr.length===1?arr[0]:arr[1])];   //这里做一次除法，后面就可以用乘法计算值了
+          }
+      },50);
+    }
+  }
+);
+
+export default Chart;