@easyv/charts 1.5.17 → 1.5.19

package/lib/components/AnimateData.js

@@ -18,7 +18,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
 
 var _excluded = ["dataAnimation"],
-    _excluded2 = ["data", "config"];
+    _excluded2 = ["data", "config", "active"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -30,11 +30,13 @@ var _default = function _default(Component) {
         _ref$config = _ref.config,
         dataAnimation = _ref$config.dataAnimation,
         config = (0, _objectWithoutProperties2["default"])(_ref$config, _excluded),
+        active = _ref.active,
         rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
     return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, rest, {
       config: config,
       originData: data,
-      data: (0, _hooks.useAnimateData)(data, dataAnimation)
+      active: active,
+      data: (0, _hooks.useAnimateData)(data, dataAnimation, active)
     }));
   });
 };

package/lib/components/PieChart.js

@@ -350,6 +350,7 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
 
   var _useContext = (0, _react.useContext)(_context.chartContext),
       id = _useContext.id,
+      isIOS = _useContext.isIOS,
       chartWidth = _useContext.width,
       chartHeight = _useContext.height,
       triggerOnRelative = _useContext.triggerOnRelative,
@@ -796,8 +797,13 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
     }
   }, /*#__PURE__*/_react["default"].createElement(Current, {
     config: current,
-    width: width,
-    height: height,
+    width: chartWidth,
+    height: chartHeight,
+    iosStyle: {
+      marginLeft: marginLeft,
+      marginTop: marginTop,
+      isIOS: isIOS
+    },
     data: _arcs,
     judge: judgeData,
     currentIndex: +currentIndex
@@ -867,6 +873,10 @@ var Current = function Current(_ref9) {
       _ref9$config$value$su2 = _ref9$config$value$su.translate,
       translateSuffixX = _ref9$config$value$su2.x,
       translateSuffixY = _ref9$config$value$su2.y,
+      _ref9$iosStyle = _ref9.iosStyle,
+      isIOS = _ref9$iosStyle.isIOS,
+      marginLeft = _ref9$iosStyle.marginLeft,
+      marginTop = _ref9$iosStyle.marginTop,
       width = _ref9.width,
       height = _ref9.height,
       data = _ref9.data,
@@ -897,17 +907,20 @@ var Current = function Current(_ref9) {
     //foreignObject标签样式，
     width: width,
     height: height,
-    transform: "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)"),
+    position: "relative",
+    overflow: "visible",
     pointerEvents: "none"
   },
       boxStyle = {
     //弹性盒子样式，用于当前值的上下居中对齐等
     width: width,
     height: height,
+    position: "absolute",
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    transform: isIOS ? "translate(".concat(marginLeft, "px,").concat(marginTop, "px)") : "translate(-".concat(width / 2, "px,-").concat(height / 2, "px)")
   };
   var seriesColor = currentData.series.color;
   seriesColor = seriesColor.type == "pure" ? seriesColor.pure : seriesColor.linear.stops[0].color;

package/lib/hooks/useAnimateData.js

@@ -23,9 +23,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * 图表数据动画
  * @param {Array} data data列表
  * @param {boolean} dataAnimation 是否开启数据增长动画
+ * @param {boolean} active 是否处于活跃状态，false为休眠
  * @returns 改变后的数据
  */
-var _default = function _default(data, dataAnimation) {
+var _default = function _default(data, dataAnimation, active) {
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       animateData = _useState2[0],
@@ -34,7 +35,7 @@ var _default = function _default(data, dataAnimation) {
   (0, _react.useEffect)(function () {
     var animateRef = null;
 
-    if (dataAnimation && dataAnimation.show && dataAnimation.duration && data.length) {
+    if (dataAnimation && dataAnimation.show && dataAnimation.duration && data.length && active) {
       animateRef = (0, _popmotion.animate)({
         autoplay: true,
         repeat: 0,
@@ -82,7 +83,7 @@ var _default = function _default(data, dataAnimation) {
     return function () {
       animateRef && animateRef.stop();
     };
-  }, [data, dataAnimation]);
+  }, [data, dataAnimation, active]);
   return animateData;
 };
 

package/lib/utils/index.js

@@ -32,15 +32,11 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var defaultSize = 10;
 var defaultBackground = '#000000';
 var defaultIcon = {
-  minWidth: defaultSize,
-  height: defaultSize,
   background: defaultBackground
 };
 var defaultLineIcon = {
-  minWidth: defaultSize,
   height: 2,
   background: defaultBackground
 };
@@ -131,11 +127,14 @@ var getIcon = function getIcon(type, icon) {
     case 'line':
       var color = icon.background;
       return icon ? _objectSpread(_objectSpread(_objectSpread({}, defaultLineIcon), icon), {}, {
+        minWidth: icon.width,
         background: lineType == "solid" ? color : "linear-gradient(90deg, ".concat(color, ", ").concat(color, " 66%, transparent 66%) 0 0/33% 100% repeat")
       }) : defaultLineIcon;
 
     default:
-      return icon ? _objectSpread(_objectSpread({}, defaultIcon), icon) : defaultIcon;
+      return icon ? _objectSpread(_objectSpread(_objectSpread({}, defaultIcon), icon), {}, {
+        minWidth: icon.width
+      }) : defaultIcon;
   }
 };
 

package/package.json

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

package/src/components/AnimateData.tsx

@@ -9,6 +9,7 @@ export default (Component: ComponentType<any>) =>
     ({
       data,
       config: { dataAnimation, ...config },
+      active,
       ...rest
     }: {
       data: DataType[];
@@ -19,7 +20,8 @@ export default (Component: ComponentType<any>) =>
         {...rest}
         config={config}
         originData={data}
-        data={useAnimateData(data, dataAnimation)}
+        active={active}
+        data={useAnimateData(data, dataAnimation, active)}
       />
     }
   );

package/src/components/PieChart.js

@@ -295,6 +295,7 @@ const Component = memo(
     const { precision: legendPrecision } = legend.config.percent;
     const {
       id,
+      isIOS,
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative,
@@ -826,8 +827,11 @@ const Component = memo(
               >
                 <Current
                   config={current}
-                  width={width}
-                  height={height}
+                  width={chartWidth}
+                  height={chartHeight}
+                  iosStyle={{
+                    marginLeft, marginTop, isIOS
+                  }}
                   data={_arcs}
                   judge={judgeData}
                   currentIndex={+currentIndex}
@@ -910,6 +914,9 @@ const Current = ({
       },
     },
   },
+  iosStyle:{
+    isIOS, marginLeft, marginTop
+  },
   width,
   height,
   data,
@@ -939,17 +946,20 @@ const Current = ({
       //foreignObject标签样式，
       width,
       height,
-      transform: `translate(-${width / 2}px,-${height / 2}px)`,
+      position:"relative",
+      overflow:"visible",
       pointerEvents: "none",
     },
     boxStyle = {
       //弹性盒子样式，用于当前值的上下居中对齐等
       width,
       height,
+      position:"absolute",
       display: "flex",
       flexDirection: "column",
       justifyContent: "center",
       alignItems: "center",
+      transform: isIOS?`translate(${marginLeft}px,${marginTop}px)`:`translate(-${width / 2}px,-${height / 2}px)`,
     };
   let seriesColor = currentData.series.color;
   seriesColor =

package/src/hooks/useAnimateData.ts

@@ -5,19 +5,20 @@ import { animate, easeIn, easeOut, linear } from 'popmotion';
  * 图表数据动画
  * @param {Array} data data列表
  * @param {boolean} dataAnimation 是否开启数据增长动画
+ * @param {boolean} active 是否处于活跃状态，false为休眠
  * @returns 改变后的数据
  */
 
-export default (data: DataType[], dataAnimation: DataAnimation) => {
+export default (data: DataType[], dataAnimation: DataAnimation, active:boolean) => {
   const [animateData, setAnimateData] = useState<DataType[]>([]);
-
   useEffect(() => {
     let animateRef: any = null;
     if (
       dataAnimation &&
       dataAnimation.show &&
       dataAnimation.duration &&
-      data.length
+      data.length &&
+      active
     ) {
       animateRef = animate({
         autoplay: true,
@@ -61,7 +62,7 @@ export default (data: DataType[], dataAnimation: DataAnimation) => {
     return () => {
       animateRef && animateRef.stop();
     };
-  }, [data, dataAnimation]);
+  }, [data, dataAnimation, active]);
 
   return animateData;
 };

package/src/utils/index.js

@@ -10,15 +10,11 @@ import {
 import { renderToStaticMarkup } from 'react-dom/server';
 import { toPath } from 'svg-points';
 
-const defaultSize = 10;
 const defaultBackground = '#000000';
 const defaultIcon = {
-  minWidth: defaultSize,
-  height: defaultSize,
   background: defaultBackground,
 };
 const defaultLineIcon = {
-  minWidth: defaultSize,
   height: 2,
   background: defaultBackground,
 };
@@ -89,6 +85,7 @@ const getIcon = (type, icon, lineType="solid") => {
         ? {
             ...defaultLineIcon,
             ...icon,
+            minWidth: icon.width,
             background:lineType=="solid"?color:`linear-gradient(90deg, ${color}, ${color} 66%, transparent 66%) 0 0/33% 100% repeat`
           }
         : defaultLineIcon;
@@ -97,6 +94,7 @@ const getIcon = (type, icon, lineType="solid") => {
         ? {
             ...defaultIcon,
             ...icon,
+            minWidth: icon.width,
           }
         : defaultIcon;
   }