@easyv/charts 1.5.13 → 1.5.15

package/lib/components/Axis.js

@@ -183,6 +183,10 @@ var Label = function Label(_ref5) {
       _ref5$orientation = _ref5.orientation,
       orientation = _ref5$orientation === void 0 ? defaultOrientation : _ref5$orientation,
       label = _ref5.label,
+      _ref5$iosTrans = _ref5.iosTrans,
+      isIOS = _ref5$iosTrans.isIOS,
+      iosX = _ref5$iosTrans.x,
+      iosY = _ref5$iosTrans.y,
       coordinate = _ref5.coordinate,
       _ref5$formatter = _ref5.formatter,
       formatter = _ref5$formatter === void 0 ? defaultFormatter : _ref5$formatter,
@@ -223,9 +227,9 @@ var Label = function Label(_ref5) {
 
   return /*#__PURE__*/_react["default"].createElement("foreignObject", {
     width: "1",
-    height: "1",
-    x: x,
-    y: y,
+    height: "1" // x={x}
+    // y={y}
+    ,
     style: {
       overflow: "visible"
     }
@@ -237,7 +241,9 @@ var Label = function Label(_ref5) {
     }),
     style: _objectSpread(_objectSpread(_objectSpread({}, _style), (0, _utils.getFontStyle)(font)), {}, {
       /** Safari Bug **/
-      position: "fixed"
+      position: "absolute",
+      left: x + (isIOS ? iosX : 0),
+      top: y + (isIOS ? iosY : 0)
     })
   }, /*#__PURE__*/_react["default"].createElement(_TextOverflow["default"], {
     type: textOverflow,
@@ -268,6 +274,9 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       tickLine = _ref6$config.tickLine,
       gridLine = _ref6$config.gridLine,
       unit = _ref6$config.unit,
+      _ref6$margin = _ref6.margin,
+      marginLeft = _ref6$margin.marginLeft,
+      marginTop = _ref6$margin.marginTop,
       positions = _ref6.positions,
       xLineRange = _ref6.xLineRange,
       range = _ref6.range,
@@ -282,7 +291,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
       width = _useContext.width,
-      height = _useContext.height;
+      height = _useContext.height,
+      isIOS = _useContext.isIOS;
 
   var cHeight = controlInfo.cHeight,
       isC = controlInfo.isC,
@@ -349,6 +359,11 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
           className: "__easyv-label",
           orientation: orientation,
           coordinate: coordinate,
+          iosTrans: {
+            isIOS: isIOS,
+            x: marginLeft + x,
+            y: marginTop + y
+          },
           config: label,
           label: tick,
           tickSize: _tickSize,

package/lib/components/CartesianChart.js

@@ -89,7 +89,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       isHover = _useState2[0],
       setIsHover = _useState2[1];
 
-  var chartWidth = context.width,
+  var isIOS = context.isIOS,
+      chartWidth = context.width,
       chartHeight = context.height,
       triggerOnRelative = context.triggerOnRelative,
       onEmit = context.onEmit;
@@ -407,8 +408,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var controlChartTooltipData = ctlXName && originData.filter(function (d) {
     return d.x === ctlXName;
   });
+  var bodyWidth = isVertical ? xLineRange + 100 + marginRight + marginLeft : xLineRange,
+      bodyHeight = isVertical ? yLineRange : yLineRange + marginTop + marginBottom;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.ChartContainer, {
-    style: style,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      position: "relative"
+    }),
     width: width,
     height: height,
     marginLeft: marginLeft,
@@ -444,19 +449,19 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       triggerClick: onInteraction,
       xLineRange: xLineRange,
       yLineRange: yLineRange,
-      controlInfo: controlInfo
+      controlInfo: controlInfo,
+      margin: {
+        marginLeft: marginLeft,
+        marginTop: marginTop
+      }
     }, config, {
       key: index
     }));
   }), showTooltip && !control && /*#__PURE__*/_react["default"].createElement(_.Indicator, (0, _extends2["default"])({}, indicator, indicatorAttr)), /*#__PURE__*/_react["default"].createElement("foreignObject", {
-    style: isVertical ? {
-      width: xLineRange + 100 + marginRight + marginLeft,
-      height: yLineRange,
-      transform: "translateX(".concat(-marginRight, "px)")
-    } : {
-      width: xLineRange,
-      height: yLineRange + marginTop + marginBottom,
-      transform: "translateY(".concat(-marginTop, "px)")
+    style: {
+      width: bodyWidth,
+      height: bodyHeight,
+      transform: isVertical ? "translateX(".concat(-marginRight, "px)") : "translateY(".concat(-marginTop, "px)")
     }
   }, /*#__PURE__*/_react["default"].createElement("svg", {
     width: "100%",
@@ -464,8 +469,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     ref: seriesEl,
     style: {
       overflow: "visible",
-      position: "fixed",
-      transform: isVertical ? "translateX(".concat(marginRight, "px)") : "translateY(".concat(marginTop, "px)")
+      position: "absolute",
+      transform: isVertical ? "translate(".concat(marginRight, "px,").concat(isIOS ? marginTop : 0, "px)") : "translate(".concat(isIOS ? marginLeft : 0, "px,").concat(marginTop, "px)")
     }
   }, /*#__PURE__*/_react["default"].createElement("g", null, control && ctlIndicatorList.map(function (item, index) {
     var x = axisX.scaler(item.tick);

package/lib/components/Chart.js

@@ -68,6 +68,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 svg = /*#__PURE__*/(0, _react.createRef)();
   var chartWidth = width - marginLeft - marginRight;
   var chartHeight = height - marginTop - marginBottom;
@@ -106,6 +107,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var context = (0, _react.useMemo)(function () {
     return {
       id: id,
+      isIOS: isIOS.current,
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative: triggerOnRelative,

package/package.json

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

package/src/components/Axis.tsx

@@ -174,6 +174,7 @@ type appearance = {
 type LabelType = {
   className: string;
   orientation: Orientation;
+  iosTrans: any;
   label: string;
   coordinate: number;
   formatter: Function;
@@ -196,6 +197,7 @@ const Label: (
   className,
   orientation = defaultOrientation,
   label,
+  iosTrans:{ isIOS, x:iosX, y:iosY },
   coordinate,
   formatter = defaultFormatter,
   tickSize,
@@ -222,39 +224,41 @@ const Label: (
     (isVertical ? coordinate : tickSize * directionY) + translateY * directionY;
 
   const _style = style && (typeof style == "object" ? style : style(_label));
-
+ 
   return (
-    <foreignObject
-      width="1"
-      height="1"
-      x={x}
-      y={y}
-      style={{ overflow: "visible" }}
-    >
-      <div
-        className={className}
-        onClick={onClick}
-        data-data={JSON.stringify({ x: label })}
-        style={{
-          ..._style,
-          ...getFontStyle(font),
-          /** Safari Bug **/
-          position:"fixed"
-        }}
+      <foreignObject
+        width="1"
+        height="1"
+        // x={x}
+        // y={y}
+        style={{ overflow: "visible" }}
       >
-        <TextOverflow
-          type={textOverflow}
-          speed={speed}
-          value={_label}
+        <div
+          className={className}
+          onClick={onClick}
+          data-data={JSON.stringify({ x: label })}
           style={{
-            width,
-            transform,
-            textAlign,
-            justifyContent: textAlign=="left"?"flex-start":textAlign=="right"?"flex-end":"center",
+            ..._style,
+            ...getFontStyle(font),
+            /** Safari Bug **/
+            position:"absolute",
+            left:x+(isIOS?iosX:0),
+            top:y+(isIOS?iosY:0)
           }}
-        ></TextOverflow>
-      </div>
-    </foreignObject>
+        >
+          <TextOverflow
+            type={textOverflow}
+            speed={speed}
+            value={_label}
+            style={{
+              width,
+              transform,
+              textAlign,
+              justifyContent: textAlign=="left"?"flex-start":textAlign=="right"?"flex-end":"center",
+            }}
+          ></TextOverflow>
+        </div>
+      </foreignObject>
   );
 };
 
@@ -270,6 +274,7 @@ export default memo(
         rotate,
         triggerClick,
         config: { on, label, axisLine, tickLine, gridLine, unit },
+        margin:{ marginLeft, marginTop },
         positions,
         xLineRange,
         range,
@@ -285,7 +290,7 @@ export default memo(
       ref
     ) => {
       if (!(on && ticks.length > 0)) return null;
-      const { width, height } = useContext(chartContext);
+      const { width, height, isIOS } = useContext(chartContext);
       const { cHeight, isC, cPercent } = controlInfo;
       const x = orientation == "right" ? width : 0;
       const y = orientation == "bottom" ? height-cHeight : 0;
@@ -371,6 +376,7 @@ export default memo(
                       className="__easyv-label"
                       orientation={orientation}
                       coordinate={coordinate}
+                      iosTrans = {{ isIOS, x:marginLeft+x ,y:marginTop+y }}
                       config={label}
                       label={tick}
                       tickSize={_tickSize}

package/src/components/CartesianChart.js

@@ -69,6 +69,7 @@ const Chart = memo(
     const context = useContext(chartContext);
     const [isHover, setIsHover] = useState(false);
     const {
+      isIOS,
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative,
@@ -337,11 +338,13 @@ const Chart = memo(
     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,
+    bodyHeight = isVertical?yLineRange:yLineRange + marginTop + marginBottom;
     
     return (
       <>
         <ChartContainer
-          style={style}
+          style={{...style,position:"relative"}}
           width={width}
           height={height}
           marginLeft={marginLeft}
@@ -373,6 +376,7 @@ const Chart = memo(
               </svg>
             </foreignObject>
           )}
+          {/* 坐标轴 */}
           {[...axes.values()].reverse().map((item, index) => {
             const config = item.axisType == "x" ? axisX : item;
             return (
@@ -384,6 +388,7 @@ const Chart = memo(
                 xLineRange={xLineRange}
                 yLineRange={yLineRange}
                 controlInfo={controlInfo}
+                margin={{marginLeft,marginTop}}
                 {...config}
                 key={index}
               />
@@ -395,17 +400,11 @@ const Chart = memo(
 
           <foreignObject
             style={
-              isVertical
-                ? {
-                    width: xLineRange + 100 + marginRight + marginLeft,
-                    height: yLineRange,
-                    transform: `translateX(${-marginRight}px)`,
-                  }
-                : {
-                    width: xLineRange,
-                    height: yLineRange + marginTop + marginBottom,
-                    transform: `translateY(${-marginTop}px)`,
-                  }
+              {
+                width:bodyWidth,
+                height:bodyHeight,
+                transform:isVertical?`translateX(${-marginRight}px)`:`translateY(${-marginTop}px)`
+              }
             }
           >
             <svg
@@ -414,10 +413,10 @@ const Chart = memo(
               ref={seriesEl}
               style={{
                 overflow: "visible",
-                position: "fixed",
+                position: "absolute",
                 transform: isVertical
-                  ? `translateX(${marginRight}px)`
-                  : `translateY(${marginTop}px)`,
+                  ? `translate(${marginRight}px,${isIOS?marginTop:0}px)`
+                  : `translate(${isIOS?marginLeft:0}px,${marginTop}px)`,
               }}
             >
               {/* 控制图指示器部分 */}

package/src/components/Chart.js

@@ -1,7 +1,7 @@
 /**
  * 总入口，通过外面传进来的type来确定渲染哪种图表，饼环图表为“pie”，否则为轴类图表
  */
-import React, { memo, useMemo, createRef, useState, useEffect, useCallback } from 'react';
+import React, { memo, useMemo, useRef, createRef, useState, useEffect, useCallback } from 'react';
 import { chartContext } from '../context';
 import { PieChart, CartesianChart } from '.';
 import { group } from 'd3v7';
@@ -39,10 +39,10 @@ const Chart = memo(
     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 triggerOnRelative = useCallback(
@@ -81,6 +81,7 @@ const Chart = memo(
     const context = useMemo(
       () => ({
         id,
+        isIOS:isIOS.current,
         width: chartWidth,
         height: chartHeight,
         triggerOnRelative,