@dexteel/mesf-core 7.10.0 → 7.10.1

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "7.10.0"
+  ".": "7.10.1"
 }

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [7.10.1](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.10.0...@dexteel/mesf-core-v7.10.1) (2025-12-30)
+
+
+### Bug Fixes
+
+* **trendings-v2:** anchor zoom to mouse cursor position ([d3b959a](https://github.com/dexteel/mesf-core-frontend/commit/d3b959ae547ef6c0db0faa3e5f35c706844617e7))
+
 ## [7.10.0](https://github.com/dexteel/mesf-core-frontend/compare/@dexteel/mesf-core-v7.9.0...@dexteel/mesf-core-v7.10.0) (2025-12-29)
 
 

package/dist/index.esm.js

@@ -15908,7 +15908,7 @@ var TrendingChartV2 = function (_a) {
                 }); }), true);
             })(),
             dataZoom: __spreadArray([
-                __assign({ type: "inside", xAxisIndex: useSeparateGrids ? [0, 1] : [0], zoomOnMouseWheel: true, moveOnMouseMove: true, moveOnMouseWheel: true, preventDefaultMouseMove: false }, (zoomState ? { start: zoomState.start, end: zoomState.end } : {}))
+                __assign({ type: "inside", xAxisIndex: useSeparateGrids ? [0, 1] : [0], zoomOnMouseWheel: false, moveOnMouseMove: true, moveOnMouseWheel: false, preventDefaultMouseMove: false }, (zoomState ? { start: zoomState.start, end: zoomState.end } : {}))
             ], ([
                     __assign({ type: "slider", xAxisIndex: useSeparateGrids ? [0, 1] : [0], bottom: 3, height: 19, handleSize: "80%", showDetail: true, filterMode: "none" }, (zoomState
                         ? { start: zoomState.start, end: zoomState.end }
@@ -16164,8 +16164,8 @@ var TrendingChartV2 = function (_a) {
             return;
         var handleKeyDown = function (e) {
             var range = timeScopeEnd.getTime() - timeScopeStart.getTime();
-            var smallStep = range * 0.01; // 1% of range
-            var largeStep = range * 0.05; // 5% of range
+            var smallStep = range * 0.01;
+            var largeStep = range * 0.05;
             var step = e.shiftKey ? largeStep : smallStep;
             switch (e.key) {
                 case "ArrowLeft":
@@ -16192,7 +16192,6 @@ var TrendingChartV2 = function (_a) {
                     break;
                 case "Tab":
                     e.preventDefault();
-                    // Switch between cursors
                     setSelectedCursor(selectedCursor === "cursor1" ? "cursor2" : "cursor1");
                     break;
             }
@@ -16209,6 +16208,66 @@ var TrendingChartV2 = function (_a) {
         updateCursor2Time,
         setSelectedCursor,
     ]);
+    // Custom wheel zoom handler to correctly anchor zoom to mouse cursor position
+    // ECharts' built-in zoom has a bug with multiple grids - it always uses the first grid's coordinates
+    useEffect(function () {
+        var _a;
+        var echartsInstance = (_a = chartRef.current) === null || _a === void 0 ? void 0 : _a.getEchartsInstance();
+        if (!echartsInstance || !chartArea)
+            return;
+        var zr = echartsInstance.getZr();
+        if (!zr)
+            return;
+        var handleWheel = function (e) {
+            var _a, _b;
+            var wheelEvent = e.event;
+            var mouseX = e.offsetX;
+            if (mouseX < chartArea.left || mouseX > chartArea.right)
+                return;
+            wheelEvent.preventDefault();
+            wheelEvent.stopPropagation();
+            var option = echartsInstance.getOption();
+            var dataZoomArray = option.dataZoom;
+            if (!dataZoomArray || dataZoomArray.length === 0)
+                return;
+            var currentStart = (_a = dataZoomArray[0].start) !== null && _a !== void 0 ? _a : 0;
+            var currentEnd = (_b = dataZoomArray[0].end) !== null && _b !== void 0 ? _b : 100;
+            var fullRangeStart = timeScopeStart.getTime();
+            var fullRangeEnd = timeScopeEnd.getTime();
+            var fullRange = fullRangeEnd - fullRangeStart;
+            var visibleStart = fullRangeStart + (fullRange * currentStart) / 100;
+            var visibleEnd = fullRangeStart + (fullRange * currentEnd) / 100;
+            var visibleRange = visibleEnd - visibleStart;
+            var chartWidth = chartArea.right - chartArea.left;
+            var mouseProgress = (mouseX - chartArea.left) / chartWidth;
+            var mouseTimestamp = visibleStart + visibleRange * mouseProgress;
+            var zoomFactor = wheelEvent.deltaY > 0 ? 1.2 : 1 / 1.2;
+            var newVisibleRange = visibleRange * zoomFactor;
+            var newVisibleStart = mouseTimestamp - newVisibleRange * mouseProgress;
+            var newVisibleEnd = mouseTimestamp + newVisibleRange * (1 - mouseProgress);
+            var newStart = ((newVisibleStart - fullRangeStart) / fullRange) * 100;
+            var newEnd = ((newVisibleEnd - fullRangeStart) / fullRange) * 100;
+            if (newStart < 0) {
+                newEnd -= newStart;
+                newStart = 0;
+            }
+            if (newEnd > 100) {
+                newStart -= newEnd - 100;
+                newEnd = 100;
+            }
+            newStart = Math.max(0, newStart);
+            newEnd = Math.min(100, newEnd);
+            echartsInstance.dispatchAction({
+                type: "dataZoom",
+                start: newStart,
+                end: newEnd,
+            });
+        };
+        zr.on("mousewheel", handleWheel);
+        return function () {
+            zr.off("mousewheel", handleWheel);
+        };
+    }, [chartArea, timeScopeStart, timeScopeEnd, chartInstance]);
     return (React__default.createElement(Paper, { sx: { height: "100%", p: 1, position: "relative" } },
         isLoading && (React__default.createElement("div", { style: {
                 position: "absolute",