@easyv/charts 1.5.28 → 1.6.1

package/lib/components/Chart.js

@@ -78,6 +78,7 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       active = _useState2[0],
       setActive = _useState2[1];
 
+  var scaleRef = (0, _react.useRef)([1, 1]);
   var triggerOnRelative = (0, _react.useCallback)(function (action, data) {
     if (!interaction) return;
     var callbacks = interaction.callbacks,
@@ -108,6 +109,9 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     return {
       id: id,
       isIOS: isIOS.current,
+      //是否为IOS设备
+      scale: scaleRef,
+      //大屏的缩放比
       width: chartWidth,
       height: chartHeight,
       triggerOnRelative: triggerOnRelative,
@@ -127,9 +131,12 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
       isAnimation && setActive(dynamicData);
     };
 
+    getScreenScale();
     document.addEventListener("switchActive_".concat(id), activeHandler);
+    document.addEventListener("resize", getScreenScale);
     return function () {
       document.removeEventListener("switchActive_".concat(id), activeHandler);
+      document.removeEventListener("resize", getScreenScale);
     };
   }, []);
   var data = originData; //对轴类图表进行自动排序
@@ -146,7 +153,13 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   //   }
   // }
 
-  return /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    id: "bigscreen-container",
+    style: {
+      transform: "scale(1.3)",
+      transformOrigin: "left top"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_context.chartContext.Provider, {
     value: context
   }, type == 'pie' ? /*#__PURE__*/_react["default"].createElement(_.PieChart, (0, _extends2["default"])({
     id: id,
@@ -158,7 +171,21 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
     config: config,
     data: data,
     active: active
-  }, props)));
+  }, props)))); //获取大屏缩放系数
+
+  function getScreenScale() {
+    setTimeout(function () {
+      //获取大屏缩放系数
+      var dom = document.getElementById("bigscreen-container") || document.getElementById("m-simulator");
+
+      if (dom) {
+        var transform = dom.style.transform;
+        var scale = transform ? transform.match(/^scale\((.+)\)$/)[1] : "1,1";
+        var arr = scale.split(",");
+        scaleRef.current = [1 / arr[0], 1 / (arr.length === 1 ? arr[0] : arr[1])]; //这里做一次除法，后面就可以用乘法计算值了
+      }
+    }, 50);
+  }
 });
 var _default = Chart;
 exports["default"] = _default;

package/lib/components/Control.js

@@ -17,6 +17,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _context = require("../context");
+
 var _d3Scale = require("d3-scale");
 
 var _utils = require("../utils");
@@ -50,6 +52,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
       series = _props$props.series,
       top = _props$props.top,
       bandLength = _props$props.bandLength;
+  var context = (0, _react.useContext)(_context.chartContext);
+  var scale = context.scale;
   var xAxis = axes.get("x");
   var barRef = (0, _react.useRef)();
   var barStyle = {
@@ -82,7 +86,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     var rightX = rawTranslateX + cBarWidth;
 
     var move = function move(e) {
-      var movementX = e.movementX;
+      var ex = e.movementX;
+      var movementX = ex * scale.current[0];
       initX = (0, _utils.mathR)(initX + movementX, [-rawTranslateX, rightX - rawTranslateX]);
       setControlWidth(function (pre) {
         var cWidth = pre.cWidth,
@@ -152,7 +157,7 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
 
     var mouseMoveHandle = function mouseMoveHandle(e) {
       //当前位移的距离
-      movementX += e.movementX;
+      movementX += e.movementX * scale.current[0];
       setX(movementX + rawTranslateX, true);
     };
 
@@ -202,7 +207,8 @@ var _default = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef
     var rawTranslateX = parseFloat(transform ? transform.match(/\d+\.*\d*/)[0] : 0);
 
     var move = function move(e) {
-      var movementX = e.movementX;
+      var ex = e.movementX;
+      var movementX = ex * scale.current[0];
       setControlWidth(function (pre) {
         var cWidth = pre.cWidth,
             cBarWidth = pre.cBarWidth;

package/lib/components/PieChart.js

@@ -286,8 +286,9 @@ var Component = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
       _ref5$config$chart$le2 = _ref5$config$chart$le.formatter,
       formatter = _ref5$config$chart$le2 === void 0 ? _formatter.pieLegendFormatter : _ref5$config$chart$le2,
       legend = (0, _objectWithoutProperties2["default"])(_ref5$config$chart$le, _excluded3),
-      _ref5$config$chart$an = _ref5$config$chart.animation,
-      ringDuration = _ref5$config$chart$an.ringDuration,
+      _ref5$config$chart$an = _ref5$config$chart.animation;
+  _ref5$config$chart$an = _ref5$config$chart$an === void 0 ? {} : _ref5$config$chart$an;
+  var ringDuration = _ref5$config$chart$an.ringDuration,
       labelDuration = _ref5$config$chart$an.labelDuration,
       _ref5$config$chart$ma = _ref5$config$chart.margin,
       marginLeft = _ref5$config$chart$ma.marginLeft,

package/package.json

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

package/src/components/Chart.js

@@ -44,6 +44,7 @@ const Chart = memo(
     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) => {
@@ -81,7 +82,8 @@ const Chart = memo(
     const context = useMemo(
       () => ({
         id,
-        isIOS:isIOS.current,
+        isIOS:isIOS.current,    //是否为IOS设备
+        scale:scaleRef, //大屏的缩放比
         width: chartWidth,
         height: chartHeight,
         triggerOnRelative,
@@ -99,9 +101,12 @@ const Chart = memo(
         // 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);
       }
     },[]);
     
@@ -121,14 +126,30 @@ const Chart = memo(
     // }
 
     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>
+      <div id="bigscreen-container" style={{transform:"scale(1.3)",transformOrigin:"left top"}}>
+        <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>
+      </div>
+      
     );
+    //获取大屏缩放系数
+    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);
+    }
   }
 );
 

package/src/components/Control.jsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, memo, useRef } from "react";
+import React, { forwardRef, memo, useRef, useContext } from "react";
+import { chartContext } from "../context";
 import { scaleLinear } from "d3-scale";
 import { mathR } from "../utils";
 
@@ -11,6 +12,8 @@ export default memo(forwardRef((props, ref) => {
       axes, series, top, bandLength 
     }
   } = props;
+  const context = useContext(chartContext);
+  const scale = context.scale;
   const xAxis = axes.get("x");
   const barRef = useRef();
 
@@ -44,7 +47,8 @@ export default memo(forwardRef((props, ref) => {
     let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
     const rightX = rawTranslateX+cBarWidth;
     const move=(e)=>{
-      const { movementX } = e;
+      const { movementX:ex } = e;
+      const movementX = ex * scale.current[0];
       initX = mathR(initX+movementX,[-rawTranslateX, rightX-rawTranslateX]);
       setControlWidth((pre)=>{
         const { cWidth, cBarWidth } = pre;
@@ -104,7 +108,7 @@ export default memo(forwardRef((props, ref) => {
     let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
     const mouseMoveHandle = (e) => {
       //当前位移的距离
-      movementX += e.movementX;
+      movementX += e.movementX * scale.current[0];
       setX(movementX + rawTranslateX,true);
     };
     const mouseUpHandle = (e) => {
@@ -144,7 +148,8 @@ export default memo(forwardRef((props, ref) => {
     const transform = ref.current.style.transform;
     let rawTranslateX = parseFloat(transform?transform.match(/\d+\.*\d*/)[0]:0);
     const move=(e)=>{
-      const { movementX } = e;
+      const { movementX:ex } = e;
+      const movementX = ex * scale.current[0];
       setControlWidth((pre)=>{
         const { cWidth, cBarWidth } = pre;
         const maxWidth = cWidth-rawTranslateX;

package/src/components/PieChart.js

@@ -254,7 +254,7 @@ const Component = memo(
         },
         label,
         legend: { formatter = legendFormatter, ...legend },
-        animation: { ringDuration, labelDuration },
+        animation: { ringDuration, labelDuration } = {},
         margin: { marginLeft, marginTop },
       },
       fan: {