@easyv/charts 1.10.29 → 1.10.31

package/lib/components/CartesianChart.js

@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("../hooks");
 var _context = require("../context");
+var _utils = require("../utils");
 var _ = require(".");
 var _excluded = ["Component", "yOrZ"],
   _excluded2 = ["Component", "yOrZ"];
@@ -327,7 +328,10 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var controlTimer = (0, _react.useRef)(); //控制条的动画计时器
   var ctlBarX = (0, _react.useRef)(0); //控制条的滑块偏移值
   var isWorking = (0, _react.useRef)(false); //控制条是否正在进行各种操作
-
+  var controlInfoRef = (0, _react.useRef)(controlInfo);
+  var axisXRef = (0, _react.useRef)(axisX);
+  controlInfoRef.current = controlInfo;
+  axisXRef.current = axisX;
   var range = function range(num, ignoreMax) {
     var _num = num;
     var min = 0;
@@ -344,9 +348,11 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     var moveLen = range(x);
     if (needSave) ctlBarX.current = moveLen;
     setControlInfo(function (pre) {
-      return _objectSpread(_objectSpread({}, pre), {}, {
+      var next = _objectSpread(_objectSpread({}, pre), {}, {
         cBarX: moveLen
       });
+      controlInfoRef.current = next;
+      return next;
     });
   };
   var setControlWidth = function setControlWidth(fn) {
@@ -355,9 +361,24 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       var x = pre.cBarX;
       var moveLen = range(x, ignoreMax);
       ctlBarX.current = moveLen;
-      return fn(pre);
+      var next = fn(pre);
+      controlInfoRef.current = next;
+      return next;
     });
   };
+  var emitControlRangeChange = (0, _react.useCallback)(function () {
+    if (!control) return;
+    var visibleData = (0, _utils.getControlVisibleData)(originData, axisXRef.current, controlInfoRef.current, chartWidth);
+    var eventData = {
+      data: visibleData
+    };
+    triggerOnRelative("controlChange", eventData);
+    onEmit("controlChange", eventData);
+  }, [control, originData, chartWidth, triggerOnRelative, onEmit]);
+  (0, _react.useEffect)(function () {
+    if (!control) return;
+    emitControlRangeChange();
+  }, [control, chartWidth, height, JSON.stringify(originData), JSON.stringify(control), emitControlRangeChange]);
   //设置控制条是否正在进行拖拽/缩放操作
   var setWorking = function setWorking(bool) {
     isWorking.current = bool;
@@ -745,7 +766,8 @@ var Chart = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     actions: {
       setX: setControlTranslate,
       setWorking: setWorking,
-      setControlWidth: setControlWidth
+      setControlWidth: setControlWidth,
+      onControlChange: emitControlRangeChange
     },
     props: {
       control: control,

package/lib/components/Control.js

@@ -23,6 +23,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     setX = _props$actions.setX,
     setWorking = _props$actions.setWorking,
     setControlWidth = _props$actions.setControlWidth,
+    onControlChange = _props$actions.onControlChange,
     _props$props = props.props,
     _props$props$control = _props$props.control,
     thumbnail = _props$props$control.thumbnail,
@@ -92,6 +93,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up = function up() {
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", _up);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", _up);
@@ -126,6 +128,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up2 = function up(e) {
       document.removeEventListener("touchmove", move);
       document.removeEventListener("touchend", _up2);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("touchmove", move, {
       passive: false
@@ -146,6 +149,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
       setWorking(false);
       document.removeEventListener("mousemove", mouseMoveHandle);
       document.removeEventListener("mouseup", _mouseUpHandle);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("mousemove", mouseMoveHandle);
     document.addEventListener("mouseup", _mouseUpHandle);
@@ -169,6 +173,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
       setWorking(false);
       document.removeEventListener("touchmove", mouseMoveHandle);
       document.removeEventListener("touchend", _mouseUpHandle2);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("touchmove", mouseMoveHandle, {
       passive: false
@@ -198,6 +203,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up3 = function up() {
       document.removeEventListener("mousemove", move);
       document.removeEventListener("mouseup", _up3);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("mousemove", move);
     document.addEventListener("mouseup", _up3);
@@ -229,6 +235,7 @@ var _default = exports["default"] = /*#__PURE__*/(0, _react.memo)(/*#__PURE__*/(
     var _up4 = function up(e) {
       document.removeEventListener("touchmove", move);
       document.removeEventListener("touchend", _up4);
+      onControlChange === null || onControlChange === void 0 || onControlChange();
     };
     document.addEventListener("touchmove", move, {
       passive: false

package/lib/components/PieChart.js

@@ -27,8 +27,8 @@ var _excluded = ["startAngle", "endAngle", "antiClockwise"],
   _excluded2 = ["padAngle", "innerRadius", "outerRadius", "cornerRadius", "startAngle", "endAngle"],
   _excluded3 = ["formatter"],
   _excluded4 = ["startAngle", "endAngle"];
-/**
- * 饼环图
+/**
+ * 饼环图
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/lib/utils/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SvgBackground = void 0;
 exports.band = band;
-exports.sortPie = exports.seriesYOrZ = exports.reverseGradientStops = exports.resetStacks = exports.renderCanvasBackground = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
+exports.sortPie = exports.seriesYOrZ = exports.reverseGradientStops = exports.resetStacks = exports.renderCanvasBackground = exports.reduceConfig = exports.mathR = exports.isValidHttpUrl = exports.identity = exports.getTranslate3d = exports.getTranslate2d = exports.getTicksOfAxis = exports.getTickCoord = exports.getStacks = exports.getSeriesInfo = exports.getMultiColorStr = exports.getMousePos = exports.getMargin = exports.getIcon = exports.getGridCoord = exports.getFontStyle = exports.getDomPath = exports.getDataWithPercent = exports.getCurrentStack = exports.getControlVisibleData = exports.getColorList = exports.getChildren = exports.getBreakWord = exports.getBandwidth = exports.getBandSeriesStepAndWidth = exports.getBandBackground = exports.formatFont = exports.filterChildren = exports.dateFormat = exports.dataYOrZ = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -910,4 +910,34 @@ var mathR = exports.mathR = function mathR(value, range) {
     min = _range[0],
     max = _range[1];
   return Math.max(min, Math.min(value, max));
+};
+
+/**
+ * 根据控制条位置计算当前图表视口内可见的原始数据
+ */
+var getControlVisibleData = exports.getControlVisibleData = function getControlVisibleData(originData, axisX, controlInfo, chartWidth) {
+  if (!(originData !== null && originData !== void 0 && originData.length) || !axisX || !controlInfo) return [];
+  var cBarX = controlInfo.cBarX,
+    cBarWidth = controlInfo.cBarWidth,
+    cWidth = controlInfo.cWidth,
+    cPercent = controlInfo.cPercent;
+  var controlEnd = axisX.controlEnd,
+    start = axisX.start,
+    scaler = axisX.scaler,
+    _axisX$step = axisX.step,
+    step = _axisX$step === void 0 ? 0 : _axisX$step;
+  var slideRange = cWidth - cBarWidth;
+  var percent = slideRange > 0 ? cBarX / slideRange : 0;
+  var safeCPercent = cPercent > 0 && Number.isFinite(cPercent) ? cPercent : 1;
+  var span = controlEnd + start / safeCPercent - chartWidth;
+  var translateX = Number.isFinite(span) ? -span * percent : 0;
+  var clipLeft = Number.isFinite(-translateX) ? -translateX : 0;
+  var clipRight = clipLeft + chartWidth;
+  var halfStep = Number.isFinite(step) ? step / 2 : 0;
+  return originData.filter(function (d) {
+    if ((d === null || d === void 0 ? void 0 : d.x) === undefined) return false;
+    var pos = scaler(d.x);
+    if (!Number.isFinite(pos)) return false;
+    return pos + halfStep >= clipLeft && pos - halfStep <= clipRight;
+  });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easyv/charts",
-  "version": "1.10.29",
+  "version": "1.10.31",
   "description": "",
   "main": "lib/index.js",
   "scripts": {
@@ -55,4 +55,4 @@
       "commit": true
     }
   }
-}
+}

package/src/components/CartesianChart.js

@@ -13,6 +13,7 @@ import React, {
 } from "react";
 import { useAxes, useTooltip, useCarouselAxisX, useAiData } from "../hooks";
 import { chartContext } from "../context";
+import { getControlVisibleData } from "../utils";
 import {
   ChartContainer,
   Legend,
@@ -313,6 +314,10 @@ const Chart = memo(
     const controlTimer = useRef(); //控制条的动画计时器
     const ctlBarX = useRef(0); //控制条的滑块偏移值
     const isWorking = useRef(false); //控制条是否正在进行各种操作
+    const controlInfoRef = useRef(controlInfo);
+    const axisXRef = useRef(axisX);
+    controlInfoRef.current = controlInfo;
+    axisXRef.current = axisX;
 
     const range = (num, ignoreMax) => {
       let _num = num;
@@ -330,10 +335,12 @@ const Chart = memo(
       const moveLen = range(x);
       if (needSave) ctlBarX.current = moveLen;
       setControlInfo((pre) => {
-        return {
+        const next = {
           ...pre,
           cBarX: moveLen,
         };
+        controlInfoRef.current = next;
+        return next;
       });
     };
     const setControlWidth = (fn, ignoreMax = false) => {
@@ -341,9 +348,34 @@ const Chart = memo(
         const x = pre.cBarX;
         const moveLen = range(x, ignoreMax);
         ctlBarX.current = moveLen;
-        return fn(pre);
+        const next = fn(pre);
+        controlInfoRef.current = next;
+        return next;
       });
     };
+    const emitControlRangeChange = useCallback(() => {
+      if (!control) return;
+      const visibleData = getControlVisibleData(
+        originData,
+        axisXRef.current,
+        controlInfoRef.current,
+        chartWidth,
+      );
+      const eventData = { data: visibleData };
+      triggerOnRelative("controlChange", eventData);
+      onEmit("controlChange", eventData);
+    }, [control, originData, chartWidth, triggerOnRelative, onEmit]);
+    useEffect(() => {
+      if (!control) return;
+      emitControlRangeChange();
+    }, [
+      control,
+      chartWidth,
+      height,
+      JSON.stringify(originData),
+      JSON.stringify(control),
+      emitControlRangeChange,
+    ]);
     //设置控制条是否正在进行拖拽/缩放操作
     const setWorking = (bool) => {
       isWorking.current = bool;
@@ -805,6 +837,7 @@ const Chart = memo(
               setX: setControlTranslate,
               setWorking,
               setControlWidth,
+              onControlChange: emitControlRangeChange,
             }}
             props={{
               control,

package/src/components/Control.jsx

@@ -6,7 +6,7 @@ import { mathR } from "../utils";
 export default memo(
   forwardRef((props, ref) => {
     const {
-      actions: { setX, setWorking, setControlWidth },
+      actions: { setX, setWorking, setControlWidth, onControlChange },
       props: {
         control: {
           thumbnail,
@@ -82,6 +82,7 @@ export default memo(
       const up = () => {
         document.removeEventListener("mousemove", move);
         document.removeEventListener("mouseup", up);
+        onControlChange?.();
       };
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", up);
@@ -122,6 +123,7 @@ export default memo(
       const up = (e) => {
         document.removeEventListener("touchmove", move);
         document.removeEventListener("touchend", up);
+        onControlChange?.();
       };
       document.addEventListener("touchmove", move, { passive: false });
       document.addEventListener("touchend", up);
@@ -142,6 +144,7 @@ export default memo(
         setWorking(false);
         document.removeEventListener("mousemove", mouseMoveHandle);
         document.removeEventListener("mouseup", mouseUpHandle);
+        onControlChange?.();
       };
       document.addEventListener("mousemove", mouseMoveHandle);
       document.addEventListener("mouseup", mouseUpHandle);
@@ -167,6 +170,7 @@ export default memo(
         setWorking(false);
         document.removeEventListener("touchmove", mouseMoveHandle);
         document.removeEventListener("touchend", mouseUpHandle);
+        onControlChange?.();
       };
       document.addEventListener("touchmove", mouseMoveHandle, {
         passive: false,
@@ -199,6 +203,7 @@ export default memo(
       const up = () => {
         document.removeEventListener("mousemove", move);
         document.removeEventListener("mouseup", up);
+        onControlChange?.();
       };
       document.addEventListener("mousemove", move);
       document.addEventListener("mouseup", up);
@@ -233,6 +238,7 @@ export default memo(
       const up = (e) => {
         document.removeEventListener("touchmove", move);
         document.removeEventListener("touchend", up);
+        onControlChange?.();
       };
       document.addEventListener("touchmove", move, { passive: false });
       document.addEventListener("touchend", up);