@easyv/charts 1.6.25 → 1.6.26

package/lib/components/Band.js

@@ -273,6 +273,10 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
           });
         }
       },
+      "data-mobile": JSON.stringify({
+        x: xScaler(x),
+        xName: data.x
+      }),
       "data-data": JSON.stringify(data)
     })), /*#__PURE__*/_react["default"].createElement("foreignObject", (0, _extends2["default"])({
       style: {
@@ -316,7 +320,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(function (_ref
         width: "100%",
         height: "100%",
         /** Safari Bug **/
-        // position: "fixed",
+        // position: "absolute",
         clipPath: setClipPath(),
         opacity: fillType == "pattern" ? opacity : 1,
         background: fillType == "pattern" ? "".concat(isVertical ? y < 0 ? "100%" : "0%" : "50%", " ").concat(isVertical ? "50%" : y < 0 ? "0%" : "100%", " / ").concat(size.width, "px ").concat(size.height, "px repeat ") + "url(" +

package/lib/components/CartesianChart.js

@@ -144,6 +144,26 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   });
   var aiData = aiFormatter ? aiFormatter(originData, axes, series) : (0, _hooks.useAiData)(originData, axes, series);
   var axisX = (0, _hooks.useCarouselAxisX)(axes.get("x"), animation, isHover, controlInfo, active);
+
+  //初始化控制图提示框状态的函数
+  var initCtlTip = function initCtlTip() {
+    return {
+      show: false,
+      xName: "",
+      x: undefined,
+      indicatorList: axisX.ticks.map(function (tick) {
+        return {
+          tick: tick,
+          isShow: false
+        };
+      })
+    };
+  };
+  var _useState7 = (0, _react.useState)(initCtlTip),
+    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+    ctlTip = _useState8[0],
+    setCtlTip = _useState8[1]; //控制图的提示框
+
   (0, _react.useEffect)(function () {
     var handleAction = function handleAction(e) {
       var dynamicData = e.dynamicData;
@@ -186,6 +206,39 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     tooltipX = _useTooltip.x,
     tickName = _useTooltip.name,
     setIndex = _useTooltip.setIndex;
+  var setTouchIndex = function setTouchIndex(e) {
+    e.preventDefault();
+    var touch = e.touches[0];
+    if (isControl) {
+      var target = document.elementFromPoint(touch.clientX, touch.clientY);
+      var mobile = target.dataset.mobile;
+      if (mobile) {
+        var _JSON$parse = JSON.parse(mobile),
+          x = _JSON$parse.x,
+          xName = _JSON$parse.xName;
+        setCtlTip(function (pre) {
+          return {
+            show: true,
+            x: x,
+            xName: xName,
+            indicatorList: pre.indicatorList.map(function (item) {
+              if (item.tick === xName) {
+                return _objectSpread(_objectSpread({}, item), {}, {
+                  isShow: true
+                });
+              } else {
+                return item;
+              }
+            })
+          };
+        });
+      } else {
+        setCtlTip(initCtlTip);
+      }
+    } else {
+      setIndex(touch);
+    }
+  };
   var tooltipData = (0, _react.useMemo)(function () {
     return tickName !== undefined && originData.filter(function (d) {
       return d.x === tickName;
@@ -359,24 +412,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       };
     }
   }, [JSON.stringify(animation), control, cWidth, cHeight, cBarWidth, cPercent]);
-  //初始化控制图提示框状态的函数
-  var initCtlTip = function initCtlTip() {
-    return {
-      show: false,
-      xName: "",
-      x: undefined,
-      indicatorList: axisX.ticks.map(function (tick) {
-        return {
-          tick: tick,
-          isShow: false
-        };
-      })
-    };
-  };
-  var _useState7 = (0, _react.useState)(initCtlTip),
-    _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    ctlTip = _useState8[0],
-    setCtlTip = _useState8[1];
   var showCtl = ctlTip.show,
     ctlXName = ctlTip.xName,
     ctlX = ctlTip.x,
@@ -406,6 +441,14 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       };
     });
   }, [tooltipX, tickName]);
+  (0, _react.useEffect)(function () {
+    svg.current.addEventListener("touchmove", setTouchIndex, {
+      passive: false
+    });
+    return function () {
+      svg.current.removeEventListener("touchmove", setTouchIndex);
+    };
+  }, [control]);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
     style: _objectSpread(_objectSpread({}, style), {}, {
       position: "absolute"

package/lib/components/Chart.js

@@ -54,7 +54,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     emit = _ref2.emit,
     emitEvent = _ref2.emitEvent,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
-  var isIOS = (0, _react.useRef)(/iPad|iPhone|iPod|iOS|CriOS/i.test(navigator.userAgent));
+  var isIOS = (0, _react.useRef)(/iPad|iPhone|iPod|iOS|CriOS|Mac OS/i.test(navigator.userAgent));
   var svg = /*#__PURE__*/(0, _react.createRef)();
   var chartWidth = width - marginLeft - marginRight;
   var chartHeight = height - marginTop - marginBottom;
@@ -107,7 +107,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     var activeHandler = function activeHandler(e) {
       var _e$dynamicData = e.dynamicData,
         dynamicData = _e$dynamicData === void 0 ? true : _e$dynamicData;
-      // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
       isAnimation && setActive(dynamicData);
     };
     getScreenScale();
@@ -119,20 +118,6 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     };
   }, []);
   var 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 /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
     value: context
   }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({

package/lib/components/Indicator.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
  * 轴类图表移上去的指示框背景
  */
 var _default = exports["default"] = function _default(_ref) {
@@ -37,6 +37,10 @@ var _default = exports["default"] = function _default(_ref) {
     width: width,
     height: height,
     x: x,
+    "data-mobile": JSON.stringify({
+      x: x + width / 2,
+      xName: xName
+    }),
     onMouseEnter: function onMouseEnter() {
       if (isControlChart) {
         setCtlTip(function (pre) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.6.25",
+  "version": "1.6.26",
   "description": "",
   "main": "lib/index.js",
   "scripts": {

package/src/components/Axis.tsx

@@ -298,7 +298,7 @@ export default memo(
       const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height-cHeight : 0;
-
+      
       function drawAxisTickLine() {
         const draw = (ticks: any, scaler: any) => {
           return ticks.map((tick: string, index: number) => {

package/src/components/Band.tsx

@@ -233,6 +233,7 @@ export default memo(
                       }))
                     }
                   }}
+                  data-mobile={JSON.stringify({x:xScaler(x),xName:data.x})}
                   data-data={JSON.stringify(data)}></foreignObject>
                 <foreignObject
                   style={{
@@ -279,7 +280,7 @@ export default memo(
                       width: "100%",
                       height: "100%",
                       /** Safari Bug **/
-                      // position: "fixed",
+                      // position: "absolute",
                       clipPath: setClipPath(),
                       opacity: fillType == "pattern" ? opacity : 1,
                       background:

package/src/components/CartesianChart.js

@@ -70,6 +70,7 @@ const Chart = memo(
     const context = useContext(chartContext);
     const [isHover, setIsHover] = useState(false);
     const [curXLabel, setCurXLabel] = useState("");
+    
     const {
       isIOS,
       width: chartWidth,
@@ -99,6 +100,7 @@ const Chart = memo(
     }
     const [controlInfo, setControlInfo] = useState({ isC:isControl, cWidth:controlWidth, cHeight:controlHeight, cBarWidth:controlBarWidth, cPercent:dragPercent, cBarX:controlX });
     const { cWidth, cHeight, cBarWidth, cPercent, cBarX } = controlInfo;
+
     yLineRange -= cHeight;
     useEffect(()=>{
       setControlInfo({
@@ -125,6 +127,23 @@ const Chart = memo(
       controlInfo,
       active
     );
+
+    //初始化控制图提示框状态的函数
+    const initCtlTip = ()=>{
+      return {
+        show:false,
+        xName:"",
+        x:undefined,
+        indicatorList:axisX.ticks.map((tick) => {
+          return {
+            tick: tick,
+            isShow: false,
+          };
+        })
+      }
+    }
+    const [ctlTip, setCtlTip] = useState(initCtlTip);   //控制图的提示框
+
     useEffect(()=>{
       const handleAction=(e)=>{
         const { dynamicData } = e;
@@ -169,12 +188,37 @@ const Chart = memo(
       config: tooltipConfig,
       active
     });
+    const setTouchIndex = (e)=>{
+      e.preventDefault();
+      const touch = e.touches[0];
+      if(isControl){
+        const target = document.elementFromPoint(touch.clientX,touch.clientY);
+        const { mobile } = target.dataset;
+        if(mobile){
+          const { x, xName } = JSON.parse(mobile);
+          setCtlTip((pre)=>({
+            show:true, x, xName,
+            indicatorList:pre.indicatorList.map((item)=>{
+              if (item.tick === xName) {
+                return { ...item, isShow: true };
+              } else {
+                return item;
+              }
+            })
+          }))
+        }else{
+          setCtlTip(initCtlTip);
+        }
+      }else{
+        setIndex(touch);
+      }
+    }
     const tooltipData = useMemo(
       () =>
         tickName !== undefined && originData.filter((d) => d.x === tickName),
       [tickName, originData]
     );
-
+    
     const showTooltip = !!(
       tooltipData &&
       tooltipData.length &&
@@ -346,21 +390,7 @@ const Chart = memo(
         };
       }
     }, [JSON.stringify(animation), control, cWidth, cHeight, cBarWidth, cPercent]);
-    //初始化控制图提示框状态的函数
-    const initCtlTip = ()=>{
-      return {
-        show:false,
-        xName:"",
-        x:undefined,
-        indicatorList:axisX.ticks.map((tick) => {
-          return {
-            tick: tick,
-            isShow: false,
-          };
-        })
-      }
-    }
-    const [ctlTip, setCtlTip] = useState(initCtlTip);
+    
     const { show:showCtl, xName:ctlXName, x:ctlX, indicatorList:ctlIndicatorList } = ctlTip;
     const controlChartTooltipData = ctlXName && originData.filter((d) => d.x === ctlXName);
     const bodyWidth = isVertical?xLineRange + 100 + marginRight + marginLeft:xLineRange,
@@ -380,7 +410,12 @@ const Chart = memo(
         }
       })
     },[tooltipX, tickName]);
-    
+    useEffect(()=>{
+      svg.current.addEventListener("touchmove", setTouchIndex, {passive:false});
+      return ()=>{
+        svg.current.removeEventListener("touchmove", setTouchIndex);
+      }
+    },[control]);
 
     return (
       <>

package/src/components/Chart.js

@@ -39,7 +39,7 @@ const Chart = memo(
     emitEvent,
     ...props
   }) => {
-    const isIOS = useRef(/iPad|iPhone|iPod|iOS|CriOS/i.test(navigator.userAgent));
+    const isIOS = useRef(/iPad|iPhone|iPod|iOS|CriOS|Mac OS/i.test(navigator.userAgent));
     const svg = createRef();
     const chartWidth = width - marginLeft - marginRight;
     const chartHeight = height - marginTop - marginBottom;
@@ -49,7 +49,7 @@ const Chart = memo(
       (action,data) => {
         if (!interaction) return;
         const { callbacks, remoteControls } = interaction;
-        const callbackData = getCallbackData(action,callbacks, data);
+        const callbackData = getCallbackData(action, callbacks, data);
         if (JSON.stringify(callbackData)!="{}") {
           onRelative && onRelative(id, callbackData);
           remoteControls &&
@@ -97,7 +97,6 @@ const Chart = memo(
       if(!isAnimation) setActive(false);
       const activeHandler=(e)=>{
         const { dynamicData = true } = e;
-        // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
         isAnimation && setActive(dynamicData);
       }
       getScreenScale();
@@ -110,19 +109,6 @@ const Chart = memo(
     },[]);
     
     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}>

package/src/components/Indicator.js

@@ -1,7 +1,6 @@
 /**
  * 轴类图表移上去的指示框背景
  */
-import { useState } from "react";
 export default ({
   color,
   height,
@@ -15,17 +14,20 @@ export default ({
   manual,
   auto
 }) => {
+
   let isShow = true;
   if (isControlChart && ctlIndicatorList) {
     isShow = ctlIndicatorList.find(
       (item) => item.tick === xName
     ).isShow;
   }
+
   return manual?(
     <rect
       width={width}
       height={height}
       x={x}
+      data-mobile={JSON.stringify({x:x+width/2,xName})}
       onMouseEnter={() => {
         if (isControlChart) {
           setCtlTip((pre)=>({