@easyv/charts 1.5.16 → 1.5.18

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

@@ -116,11 +116,15 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     };
   }, [id, chartWidth, chartHeight, triggerOnRelative, svg, onEmit]);
   (0, _react.useEffect)(function () {
+    var isAnimation = window.screenConfig ? window.screenConfig.isAnimation : true; //大屏的全局设置是否允许开启动画，false为不允许
+
+    if (!isAnimation) setActive(false);
+
     var activeHandler = function activeHandler(e) {
       var _e$dynamicData = e.dynamicData,
           dynamicData = _e$dynamicData === void 0 ? true : _e$dynamicData; // console.log("当前组件（id="+id+"）状态：",dynamicData?"唤醒":"休眠");
 
-      setActive(dynamicData);
+      isAnimation && setActive(dynamicData);
     };
 
     document.addEventListener("switchActive_".concat(id), activeHandler);

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.16",
+  "version": "1.5.18",
   "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/Chart.js

@@ -92,10 +92,12 @@ const Chart = memo(
     );
 
     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?"唤醒":"休眠");
-        setActive(dynamicData);
+        isAnimation && setActive(dynamicData);
       }
       document.addEventListener(`switchActive_${id}`,activeHandler);
       return ()=>{

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;
   }