evui 3.4.107 → 3.4.109

package/dist/evui.umd.js

@@ -11173,7 +11173,7 @@ module.exports = exports;
 /***/ "9224":
 /***/ (function(module) {
 
-module.exports = JSON.parse("{\"a\":\"3.4.107\"}");
+module.exports = JSON.parse("{\"a\":\"3.4.109\"}");
 
 /***/ }),
 
@@ -38860,6 +38860,8 @@ var modules = {
     };
 
     for (var x = 0; x < keys.length; x++) {
+      var _this$dataSet$key$dat, _this$dataSet$key$dat2, _this$dataSet$key$dat3;
+
       var key = keys[x];
       var data = datas[key];
       var storeLength = data === null || data === void 0 ? void 0 : data.length;
@@ -38878,9 +38880,6 @@ var modules = {
       }
 
       this.dataSet[key].length = this.options.realTimeScatter.range || 300;
-      this.dataSet[key].toTime = Math.floor(Date.now() / 1000) * 1000;
-      this.dataSet[key].fromTime = this.dataSet[key].toTime - this.dataSet[key].length * 1000;
-      this.dataSet[key].endIndex = this.dataSet[key].length - 1;
 
       for (var i = 0; i < storeLength; i++) {
         var item = data[i];
@@ -38891,6 +38890,10 @@ var modules = {
       }
 
       lastTime = Math.floor(lastTime / 1000) * 1000;
+      var dataGroupLastTime = ((_this$dataSet$key$dat = this.dataSet[key].dataGroup.at(-1)) === null || _this$dataSet$key$dat === void 0 ? void 0 : (_this$dataSet$key$dat2 = _this$dataSet$key$dat.data) === null || _this$dataSet$key$dat2 === void 0 ? void 0 : (_this$dataSet$key$dat3 = _this$dataSet$key$dat2.at(-1)) === null || _this$dataSet$key$dat3 === void 0 ? void 0 : _this$dataSet$key$dat3.x) || Date.now();
+      this.dataSet[key].toTime = lastTime || (dataGroupLastTime ? Math.floor(dataGroupLastTime / 1000) * 1000 : 0);
+      this.dataSet[key].fromTime = this.dataSet[key].toTime - this.dataSet[key].length * 1000;
+      this.dataSet[key].endIndex = this.dataSet[key].length - 1;
 
       if ((this.dataSet[key].toTime - lastTime) / 1000 > this.dataSet[key].length && key === '') {
         return;
@@ -42598,8 +42601,6 @@ var element_bar_Bar = /*#__PURE__*/function () {
   _createClass(Bar, [{
     key: "draw",
     value: function draw(param) {
-      var _this2 = this;
-
       if (!this.show) {
         return;
       }
@@ -42629,7 +42630,8 @@ var element_bar_Bar = /*#__PURE__*/function () {
         var _ref2 = [minmaxX.minIndex, minmaxX.maxIndex];
         minIndex = _ref2[0];
         maxIndex = _ref2[1];
-      }
+      } // minIndex, maxIndex가 유효하면 실제 그릴 데이터 개수로 보정
+
 
       if (truthyNumber(minIndex) && truthyNumber(maxIndex)) {
         totalCount = maxIndex - minIndex + 1;
@@ -42684,119 +42686,128 @@ var element_bar_Bar = /*#__PURE__*/function () {
       this.labelOffset = labelOffset;
       this.borderRadius = param.borderRadius;
       this.filteredCount = totalCount;
-      var categoryPoint = null;
-      this.data.forEach(function (dataItem, index) {
-        var _param$selectLabel, _param$selectItem, _param$selectLabel$se, _param$selectLabel2, _param$selectLabel2$s, _param$selectItem$sel, _param$selectItem2;
+      var startIndex = truthyNumber(minIndex) ? minIndex : 0;
+      var endIndex = truthyNumber(maxIndex) ? maxIndex : this.data.length - 1; // 스크롤 범위 내에서만 루프 돌림
 
-        ctx.beginPath();
-        var item = dataItem;
+      for (var i = startIndex; i <= endIndex; i++) {
+        var screenIndex = i - startIndex; // 현재 화면상의 위치 인덱스
 
-        if (truthyNumber(minIndex) && index < minIndex) {
-          return;
-        } else if (truthyNumber(minIndex) && index > maxIndex) {
-          return;
-        }
+        var item = this.data[i]; // 실제 데이터 인덱스에 해당하는 항목
 
-        if (isHorizontal) {
-          categoryPoint = ysp - cArea * (index - (minIndex || 0)) - cPad;
-        } else {
-          categoryPoint = xsp + cArea * (index - (minIndex || 0)) + cPad;
-        }
+        if (item) {
+          var _param$selectLabel, _param$selectItem, _param$selectLabel$se, _param$selectLabel2, _param$selectLabel2$s, _param$selectItem$sel, _param$selectItem2;
 
-        if (isHorizontal) {
-          x = xsp;
-          y = Math.round(categoryPoint - (bArea * barSeriesX - (h + bPad)));
-        } else {
-          x = Math.round(categoryPoint + (bArea * barSeriesX - (w + bPad)));
-          y = ysp;
-        }
+          // 스크롤 offset(minIndex)만큼 보정해서 그리기
+          var categoryPoint = void 0;
 
-        if (isHorizontal) {
-          if (item.b) {
-            w = helpers_canvas.calculateX(item.x - item.b, minmaxX.graphMin, minmaxX.graphMax, xArea);
-            x = helpers_canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
+          if (isHorizontal) {
+            categoryPoint = ysp - cArea * screenIndex - cPad;
           } else {
-            w = helpers_canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea);
+            categoryPoint = xsp + cArea * screenIndex + cPad;
           }
-        } else if (item.b) {
-          // vertical stack bar chart
-          h = helpers_canvas.calculateY(item.y - item.b, minmaxY.graphMin, minmaxY.graphMax, yArea);
-          y = helpers_canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-        } else {
-          // vertical bar chart
-          h = helpers_canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
-        }
 
-        var barColor = item.dataColor || _this2.color;
-        var legendHitInfo = param === null || param === void 0 ? void 0 : param.legendHitInfo;
-        var selectLabelOption = param === null || param === void 0 ? void 0 : (_param$selectLabel = param.selectLabel) === null || _param$selectLabel === void 0 ? void 0 : _param$selectLabel.option;
-        var selectItemOption = param === null || param === void 0 ? void 0 : (_param$selectItem = param.selectItem) === null || _param$selectItem === void 0 ? void 0 : _param$selectItem.option;
-        var selectedLabelList = (_param$selectLabel$se = param === null || param === void 0 ? void 0 : (_param$selectLabel2 = param.selectLabel) === null || _param$selectLabel2 === void 0 ? void 0 : (_param$selectLabel2$s = _param$selectLabel2.selected) === null || _param$selectLabel2$s === void 0 ? void 0 : _param$selectLabel2$s.dataIndex) !== null && _param$selectLabel$se !== void 0 ? _param$selectLabel$se : [];
-
-        var _ref3 = (_param$selectItem$sel = param === null || param === void 0 ? void 0 : (_param$selectItem2 = param.selectItem) === null || _param$selectItem2 === void 0 ? void 0 : _param$selectItem2.selected) !== null && _param$selectItem$sel !== void 0 ? _param$selectItem$sel : {},
-            selectedItemDataIndex = _ref3.dataIndex,
-            selectedItemSeriesId = _ref3.seriesID;
-
-        var isDownplay = false;
+          if (isHorizontal) {
+            x = xsp;
+            y = Math.round(categoryPoint - (bArea * barSeriesX - (h + bPad)));
+          } else {
+            x = Math.round(categoryPoint + (bArea * barSeriesX - (w + bPad)));
+            y = ysp;
+          }
 
-        if (legendHitInfo) {
-          isDownplay = (legendHitInfo === null || legendHitInfo === void 0 ? void 0 : legendHitInfo.sId) !== _this2.sId;
-        } else if (selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.use && selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.useSeriesOpacity) {
-          isDownplay = selectedLabelList.length && !selectedLabelList.includes(index);
-        } else if (truthy(selectedItemDataIndex) && selectItemOption !== null && selectItemOption !== void 0 && selectItemOption.useSeriesOpacity) {
-          if (_this2.isExistGrp) {
-            isDownplay = selectedItemDataIndex !== index;
+          if (isHorizontal) {
+            if (item.b) {
+              w = helpers_canvas.calculateX(item.x - item.b, minmaxX.graphMin, minmaxX.graphMax, xArea);
+              x = helpers_canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
+            } else {
+              w = helpers_canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea);
+            }
+          } else if (item.b) {
+            // vertical stack bar chart
+            h = helpers_canvas.calculateY(item.y - item.b, minmaxY.graphMin, minmaxY.graphMax, yArea);
+            y = helpers_canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
           } else {
-            isDownplay = selectedItemDataIndex !== index || selectedItemSeriesId !== _this2.sId;
+            // vertical bar chart
+            h = helpers_canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
           }
-        }
 
-        if (typeof barColor !== 'string') {
-          ctx.fillStyle = helpers_canvas.createGradient(ctx, isHorizontal, {
-            x: x,
-            y: y,
-            w: w,
-            h: h
-          }, barColor, isDownplay);
-        } else {
-          var noneDownplayOpacity = barColor.includes('rgba') ? helpers_util.getOpacity(barColor) : 1;
-          var opacity = isDownplay ? 0.1 : noneDownplayOpacity;
-          ctx.fillStyle = helpers_util.colorStringToRgba(barColor, opacity);
-        }
+          var barColor = item.dataColor || this.color;
+          var legendHitInfo = param === null || param === void 0 ? void 0 : param.legendHitInfo;
+          var selectLabelOption = param === null || param === void 0 ? void 0 : (_param$selectLabel = param.selectLabel) === null || _param$selectLabel === void 0 ? void 0 : _param$selectLabel.option;
+          var selectItemOption = param === null || param === void 0 ? void 0 : (_param$selectItem = param.selectItem) === null || _param$selectItem === void 0 ? void 0 : _param$selectItem.option;
+          var selectedLabelList = (_param$selectLabel$se = param === null || param === void 0 ? void 0 : (_param$selectLabel2 = param.selectLabel) === null || _param$selectLabel2 === void 0 ? void 0 : (_param$selectLabel2$s = _param$selectLabel2.selected) === null || _param$selectLabel2$s === void 0 ? void 0 : _param$selectLabel2$s.dataIndex) !== null && _param$selectLabel$se !== void 0 ? _param$selectLabel$se : [];
+
+          var _ref3 = (_param$selectItem$sel = param === null || param === void 0 ? void 0 : (_param$selectItem2 = param.selectItem) === null || _param$selectItem2 === void 0 ? void 0 : _param$selectItem2.selected) !== null && _param$selectItem$sel !== void 0 ? _param$selectItem$sel : {},
+              selectedItemDataIndex = _ref3.dataIndex,
+              selectedItemSeriesId = _ref3.seriesID;
+
+          var isDownplay = false;
+
+          if (legendHitInfo) {
+            isDownplay = (legendHitInfo === null || legendHitInfo === void 0 ? void 0 : legendHitInfo.sId) !== this.sId;
+          } else if (selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.use && selectLabelOption !== null && selectLabelOption !== void 0 && selectLabelOption.useSeriesOpacity) {
+            isDownplay = selectedLabelList.length && !selectedLabelList.includes(i);
+          } else if (truthy(selectedItemDataIndex) && selectItemOption !== null && selectItemOption !== void 0 && selectItemOption.useSeriesOpacity) {
+            if (this.isExistGrp) {
+              isDownplay = selectedItemDataIndex !== i;
+            } else {
+              isDownplay = selectedItemDataIndex !== i || selectedItemSeriesId !== this.sId;
+            }
+          }
 
-        _this2.drawBar({
-          ctx: ctx,
-          positions: {
-            x: x,
-            y: y,
-            w: w,
-            h: h
+          if (typeof barColor !== 'string') {
+            ctx.fillStyle = helpers_canvas.createGradient(ctx, isHorizontal, {
+              x: x,
+              y: y,
+              w: w,
+              h: h
+            }, barColor, isDownplay);
+          } else {
+            var noneDownplayOpacity = barColor.includes('rgba') ? helpers_util.getOpacity(barColor) : 1;
+            var opacity = isDownplay ? 0.1 : noneDownplayOpacity;
+            ctx.fillStyle = helpers_util.colorStringToRgba(barColor, opacity);
           }
-        });
 
-        if (showValue.use) {
-          _this2.drawValueLabels({
-            context: ctx,
-            data: item,
+          this.drawBar({
+            ctx: ctx,
             positions: {
               x: x,
               y: y,
-              h: h,
-              w: w
-            },
-            isHighlight: false,
-            textColor: item.dataTextColor
+              w: w,
+              h: h
+            }
           });
-        }
 
-        item.xp = x; // eslint-disable-line
+          if (showValue.use) {
+            this.drawValueLabels({
+              context: ctx,
+              data: item,
+              positions: {
+                x: x,
+                y: y,
+                h: h,
+                w: w
+              },
+              isHighlight: false,
+              textColor: item.dataTextColor
+            });
+          } // 좌표 및 인덱스 정보 세팅 (툴팁/hover용)
 
-        item.yp = y; // eslint-disable-line
 
-        item.w = w; // eslint-disable-line
+          item.xp = x; // eslint-disable-line
 
-        item.h = isHorizontal ? -h : h; // eslint-disable-line
-      });
+          item.yp = y; // eslint-disable-line
+
+          item.w = w; // eslint-disable-line
+
+          item.h = isHorizontal ? -h : h; // eslint-disable-line
+
+          item.index = i; // 실제 데이터 인덱스 (스크롤 offset 포함)
+          // 검색(hitInfo) 로직은 this.data[0..filteredCount-1] 범위만 검사하므로,
+          // 현재 화면에 그린 항목을 배열 앞쪽으로 매핑해준다.
+
+          this.data[screenIndex] = item;
+        }
+      }
     }
     /**
      * Draw item highlight
@@ -43126,6 +43137,8 @@ var element_bar_Bar = /*#__PURE__*/function () {
         return;
       }
 
+      ctx.save();
+
       if (isBorderRadius && !isStackBar) {
         try {
           this.drawRoundedRect(ctx, positions);
@@ -43135,6 +43148,8 @@ var element_bar_Bar = /*#__PURE__*/function () {
       } else {
         ctx.fillRect(x, y, w, h);
       }
+
+      ctx.restore();
     }
   }, {
     key: "drawRoundedRect",
@@ -43150,6 +43165,7 @@ var element_bar_Bar = /*#__PURE__*/function () {
       var squarePath = new Path2D();
       squarePath.rect(chartRect.x1 + labelOffset.left, chartRect.y1, chartRect.chartWidth - labelOffset.right, chartRect.chartHeight - labelOffset.bottom);
       ctx.clip(squarePath);
+      ctx.beginPath();
       ctx.moveTo(x, y);
 
       if (isHorizontal) {
@@ -49040,8 +49056,24 @@ var plugins_scrollbar_module = {
           limitMax = +minMax.max;
         }
 
-        scrollbarOpt.range[0] = +min < limitMin ? limitMin : +min;
-        scrollbarOpt.range[1] = +max > limitMax ? limitMax : +max;
+        var originalWidth = max - min;
+        var availableWidth = limitMax - limitMin;
+
+        if (originalWidth >= availableWidth) {
+          scrollbarOpt.range[0] = limitMin;
+          scrollbarOpt.range[1] = limitMax;
+        } else {
+          scrollbarOpt.range[0] = +min < limitMin ? limitMin : +min;
+          scrollbarOpt.range[1] = +max > limitMax ? limitMax : +max;
+
+          if (scrollbarOpt.range[1] - scrollbarOpt.range[0] < originalWidth) {
+            scrollbarOpt.range[0] = scrollbarOpt.range[1] - originalWidth;
+
+            if (scrollbarOpt.range[0] < limitMin) {
+              scrollbarOpt.range[0] = limitMin;
+            }
+          }
+        }
       }
     }
   },
@@ -49079,9 +49111,22 @@ var plugins_scrollbar_module = {
     var isUpdateAxesRange = !lodash_es_isEqual(newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$4 = newOpt[0]) === null || _newOpt$4 === void 0 ? void 0 : _newOpt$4.range, axisOpt === null || axisOpt === void 0 ? void 0 : (_axisOpt$5 = axisOpt[0]) === null || _axisOpt$5 === void 0 ? void 0 : _axisOpt$5.range);
 
     if (isUpdateAxesRange || updateData) {
-      var _newOpt$5, _newOpt$5$range, _newOpt$6;
+      var _this$options$axesX2, _this$options$axesX2$, _this$options$axesX2$2, _this$options$axesY2, _this$options$axesY2$, _this$options$axesY2$2;
+
+      var isResetPosition = dir === 'x' ? (_this$options$axesX2 = this.options.axesX) === null || _this$options$axesX2 === void 0 ? void 0 : (_this$options$axesX2$ = _this$options$axesX2[0]) === null || _this$options$axesX2$ === void 0 ? void 0 : (_this$options$axesX2$2 = _this$options$axesX2$.scrollbar) === null || _this$options$axesX2$2 === void 0 ? void 0 : _this$options$axesX2$2.resetPosition : (_this$options$axesY2 = this.options.axesY) === null || _this$options$axesY2 === void 0 ? void 0 : (_this$options$axesY2$ = _this$options$axesY2[0]) === null || _this$options$axesY2$ === void 0 ? void 0 : (_this$options$axesY2$2 = _this$options$axesY2$.scrollbar) === null || _this$options$axesY2$2 === void 0 ? void 0 : _this$options$axesY2$2.resetPosition;
+
+      if (isUpdateAxesRange || isResetPosition) {
+        var _newOpt$5, _newOpt$5$range, _newOpt$6;
+
+        this.scrollbar[dir].range = newOpt !== null && newOpt !== void 0 && (_newOpt$5 = newOpt[0]) !== null && _newOpt$5 !== void 0 && (_newOpt$5$range = _newOpt$5.range) !== null && _newOpt$5$range !== void 0 && _newOpt$5$range.length ? _toConsumableArray(newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$6 = newOpt[0]) === null || _newOpt$6 === void 0 ? void 0 : _newOpt$6.range) : null; // range가 업데이트되면 저장된 스크롤 위치를 초기화
+
+        delete this.scrollbar[dir].savedPosition;
+      } else if (updateData) {
+        // 데이터가 업데이트되면 저장된 픽셀 위치는 더 이상 유효하지 않으므로 삭제하여
+        // 논리적 범위에 따라 다시 계산하도록 합니다.
+        delete this.scrollbar[dir].savedPosition;
+      }
 
-      this.scrollbar[dir].range = newOpt !== null && newOpt !== void 0 && (_newOpt$5 = newOpt[0]) !== null && _newOpt$5 !== void 0 && (_newOpt$5$range = _newOpt$5.range) !== null && _newOpt$5$range !== void 0 && _newOpt$5$range.length ? _toConsumableArray(newOpt === null || newOpt === void 0 ? void 0 : (_newOpt$6 = newOpt[0]) === null || _newOpt$6 === void 0 ? void 0 : _newOpt$6.range) : null;
       this.initScrollbarRange(dir);
     }
 
@@ -49095,11 +49140,20 @@ var plugins_scrollbar_module = {
     var _this$scrollbar$x, _this$scrollbar$x2, _this$scrollbar$y, _this$scrollbar$y2;
 
     if ((_this$scrollbar$x = this.scrollbar.x) !== null && _this$scrollbar$x !== void 0 && _this$scrollbar$x.use && (_this$scrollbar$x2 = this.scrollbar.x) !== null && _this$scrollbar$x2 !== void 0 && _this$scrollbar$x2.isInit) {
-      this.setScrollbarPosition('x');
+      var _this$options$axesX3, _this$options$axesX3$, _this$options$axesX3$2;
+
+      // resetPosition 옵션에 따라 preservePosition 결정
+      var preservePosition = !((_this$options$axesX3 = this.options.axesX) !== null && _this$options$axesX3 !== void 0 && (_this$options$axesX3$ = _this$options$axesX3[0]) !== null && _this$options$axesX3$ !== void 0 && (_this$options$axesX3$2 = _this$options$axesX3$.scrollbar) !== null && _this$options$axesX3$2 !== void 0 && _this$options$axesX3$2.resetPosition);
+      this.setScrollbarPosition('x', preservePosition);
     }
 
     if ((_this$scrollbar$y = this.scrollbar.y) !== null && _this$scrollbar$y !== void 0 && _this$scrollbar$y.use && (_this$scrollbar$y2 = this.scrollbar.y) !== null && _this$scrollbar$y2 !== void 0 && _this$scrollbar$y2.isInit) {
-      this.setScrollbarPosition('y');
+      var _this$options$axesY3, _this$options$axesY3$, _this$options$axesY3$2;
+
+      // resetPosition 옵션에 따라 preservePosition 결정
+      var _preservePosition = !((_this$options$axesY3 = this.options.axesY) !== null && _this$options$axesY3 !== void 0 && (_this$options$axesY3$ = _this$options$axesY3[0]) !== null && _this$options$axesY3$ !== void 0 && (_this$options$axesY3$2 = _this$options$axesY3$.scrollbar) !== null && _this$options$axesY3$2 !== void 0 && _this$options$axesY3$2.resetPosition);
+
+      this.setScrollbarPosition('y', _preservePosition);
     }
   },
 
@@ -49182,10 +49236,12 @@ var plugins_scrollbar_module = {
   /**
    * set scrollbar position
    * @param dir axis direction ('x' | 'y')
+   * @param preservePosition 기존 위치를 유지할지 여부
    */
   setScrollbarPosition: function setScrollbarPosition(dir) {
     var _this$options$title, _this$options$title2;
 
+    var preservePosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var scrollbarOpt = this.scrollbar[dir];
 
     if (!scrollbarOpt.use || !scrollbarOpt.range) {
@@ -49206,8 +49262,17 @@ var plugins_scrollbar_module = {
     var scrollHeight = isXScroll ? scrollbarOpt.height : scrollbarOpt.width;
     var fullSize = isXScroll ? aPos.x2 - aPos.x1 : aPos.y2 - aPos.y1;
     var buttonSize = scrollbarOpt.showButton ? scrollHeight : 0;
-    var trackSize = fullSize - buttonSize * 2;
-    var thumbSize = this.getScrollbarThumbSize(dir, trackSize);
+    var trackSize = fullSize - buttonSize * 2; // 현재 위치를 보존해야 하는 경우 기존 위치를 저장
+
+    var savedThumbPosition = null;
+
+    if (preservePosition && scrollbarOpt.savedPosition !== undefined) {
+      savedThumbPosition = scrollbarOpt.savedPosition;
+    }
+
+    var thumbSize = this.getScrollbarThumbSize(dir, trackSize, savedThumbPosition); // 새로 계산된 위치를 저장
+
+    scrollbarOpt.savedPosition = thumbSize.position;
     var scrollbarStyle = 'display: block;';
     var scrollbarTrackStyle;
     var scrollbarThumbStyle;
@@ -49274,8 +49339,9 @@ var plugins_scrollbar_module = {
    * get scrollbar thumb size
    * @param dir axis direction ('x' | 'y')
    * @param trackSize scrollbar track size
+   * @param savedThumbPosition 기존 위치를 보존해야 하는 경우 저장된 위치
    */
-  getScrollbarThumbSize: function getScrollbarThumbSize(dir, trackSize) {
+  getScrollbarThumbSize: function getScrollbarThumbSize(dir, trackSize, savedThumbPosition) {
     var scrollbarOpt = this.scrollbar[dir];
 
     var _scrollbarOpt$range3 = _slicedToArray(scrollbarOpt.range, 2),
@@ -49328,7 +49394,12 @@ var plugins_scrollbar_module = {
 
     scrollbarOpt.startValue = startValue;
     scrollbarOpt.steps = steps;
-    scrollbarOpt.interval = interval;
+    scrollbarOpt.interval = interval; // 기존 위치를 보존해야 하는 경우 저장된 위치를 사용
+
+    if (savedThumbPosition !== null) {
+      thumbPosition = savedThumbPosition;
+    }
+
     return {
       size: thumbSize,
       position: thumbPosition
@@ -49393,7 +49464,9 @@ var plugins_scrollbar_module = {
     }
 
     if (!isOutOfRange) {
-      scrollbarOpt.range = [minValue, maxValue];
+      scrollbarOpt.range = [minValue, maxValue]; // 사용자가 스크롤할 때는 저장된 위치를 초기화
+
+      delete scrollbarOpt.savedPosition;
       this.update({
         updateSeries: false,
         updateSelTip: {
@@ -49408,7 +49481,9 @@ var plugins_scrollbar_module = {
    * create scroll event
    */
   createScrollEvent: function createScrollEvent() {
-    var _this = this;
+    var _this = this,
+        _this$scrollbar$x6,
+        _this$scrollbar$y5;
 
     this.onScrollbarClick = function (e) {
       e.preventDefault();
@@ -49500,9 +49575,65 @@ var plugins_scrollbar_module = {
     };
 
     this.onScrollbarWheel = function (e) {
+      var _this$tooltipDOM, _this$tooltipDOM$styl, _this$tooltipDOM2, _this$scrollbar$x3, _this$scrollbar$x5, _this$scrollbar$y4;
+
+      var isTooltipVisible = ((_this$tooltipDOM = _this.tooltipDOM) === null || _this$tooltipDOM === void 0 ? void 0 : (_this$tooltipDOM$styl = _this$tooltipDOM.style) === null || _this$tooltipDOM$styl === void 0 ? void 0 : _this$tooltipDOM$styl.display) === 'block';
+      var tooltipBodyDOM = _this.tooltipBodyDOM || ((_this$tooltipDOM2 = _this.tooltipDOM) === null || _this$tooltipDOM2 === void 0 ? void 0 : _this$tooltipDOM2.querySelector(_this.options.tooltip.htmlScrollTarget));
+
+      if (isTooltipVisible && tooltipBodyDOM) {
+        var scrollTop = tooltipBodyDOM.scrollTop,
+            scrollHeight = tooltipBodyDOM.scrollHeight,
+            clientHeight = tooltipBodyDOM.clientHeight;
+        var isAtTop = scrollTop <= 0;
+        var isAtBottom = scrollTop + clientHeight >= scrollHeight;
+        var isScrollingUp = e.deltaY < 0;
+        var isScrollingDown = e.deltaY > 0;
+
+        if (isAtTop && isScrollingUp || isAtBottom && isScrollingDown) {// 툴팁의 스크롤이 맨 위나 맨 아래에 닿았는데 스크롤 하면 차트 스크롤 허용
+        } else {
+          // 툴팁 내부 스크롤만 수행
+          return;
+        }
+      }
+
       e.preventDefault();
+      var threshold = 1; // 최소 스크롤 임계값
+      // Shift + 휠: 가로 스크롤 (일반 마우스 휠 지원)
+
+      if ((_this$scrollbar$x3 = _this.scrollbar.x) !== null && _this$scrollbar$x3 !== void 0 && _this$scrollbar$x3.use && e.shiftKey && Math.abs(e.deltaY) > threshold) {
+        _this.updateScrollbarRange('x', e.deltaY > 0);
+
+        return;
+      } // 대각선 스크롤 처리: 더 큰 방향을 우선으로 처리
+
+
+      var absX = Math.abs(e.deltaX);
+      var absY = Math.abs(e.deltaY);
+
+      if (absX > threshold && absY > threshold) {
+        var _this$scrollbar$x4, _this$scrollbar$y3;
+
+        // 두 방향 모두 임계값 이상일 때: 더 큰 방향을 우선 처리
+        if (absX > absY && (_this$scrollbar$x4 = _this.scrollbar.x) !== null && _this$scrollbar$x4 !== void 0 && _this$scrollbar$x4.use) {
+          _this.updateScrollbarRange('x', e.deltaX > 0);
+        } else if (absY > absX && (_this$scrollbar$y3 = _this.scrollbar.y) !== null && _this$scrollbar$y3 !== void 0 && _this$scrollbar$y3.use) {
+          _this.updateScrollbarRange('y', e.deltaY < 0);
+        }
+
+        return;
+      } // 가로 스크롤 처리 (deltaX - 트랙패드 좌우 스크롤)
+
+
+      if ((_this$scrollbar$x5 = _this.scrollbar.x) !== null && _this$scrollbar$x5 !== void 0 && _this$scrollbar$x5.use && absX > threshold) {
+        _this.updateScrollbarRange('x', e.deltaX > 0);
 
-      _this.updateScrollbarRange('y', e.deltaY < 0);
+        return;
+      } // 세로 스크롤 처리 (deltaY)
+
+
+      if ((_this$scrollbar$y4 = _this.scrollbar.y) !== null && _this$scrollbar$y4 !== void 0 && _this$scrollbar$y4.use && absY > threshold) {
+        _this.updateScrollbarRange('y', e.deltaY < 0);
+      }
     };
 
     if (this.scrollbar.x.use && !this.scrollbar.x.isInit) {
@@ -49513,12 +49644,16 @@ var plugins_scrollbar_module = {
     }
 
     if (this.scrollbar.y.use && !this.scrollbar.y.isInit) {
-      var _this$overlayCanvas;
-
       var scrollbarYDOM = this.scrollbar.y.dom;
       scrollbarYDOM.addEventListener('click', this.onScrollbarClick);
       scrollbarYDOM.addEventListener('mousedown', this.onScrollbarDown);
       scrollbarYDOM.addEventListener('mouseleave', this.onScrollbarLeave);
+    } // 가로 또는 세로 스크롤바가 있으면 휠 이벤트 등록
+
+
+    if ((_this$scrollbar$x6 = this.scrollbar.x) !== null && _this$scrollbar$x6 !== void 0 && _this$scrollbar$x6.use || (_this$scrollbar$y5 = this.scrollbar.y) !== null && _this$scrollbar$y5 !== void 0 && _this$scrollbar$y5.use) {
+      var _this$overlayCanvas;
+
       (_this$overlayCanvas = this.overlayCanvas) === null || _this$overlayCanvas === void 0 ? void 0 : _this$overlayCanvas.addEventListener('wheel', this.onScrollbarWheel, {
         passive: false
       });
@@ -49594,7 +49729,9 @@ var plugins_scrollbar_module = {
       return;
     }
 
-    this.scrollbar[dir].range = [movedMin, movedMax];
+    this.scrollbar[dir].range = [movedMin, movedMax]; // 사용자가 드래그로 스크롤할 때는 저장된 위치를 초기화
+
+    delete this.scrollbar[dir].savedPosition;
     this.update({
       updateSeries: false,
       updateSelTip: {
@@ -49643,15 +49780,17 @@ var plugins_scrollbar_module = {
    * @param dir axis direction ('x' | 'y')
    */
   destroyScrollbar: function destroyScrollbar(dir) {
-    var scrollbarXDOM = this.scrollbar[dir].dom;
+    var scrollbarDOM = this.scrollbar[dir].dom;
+
+    if (scrollbarDOM) {
+      var _this$scrollbar$x7, _this$scrollbar$y6;
 
-    if (scrollbarXDOM) {
-      scrollbarXDOM.remove();
+      scrollbarDOM.remove();
       this.scrollbar[dir] = {
         isInit: false
-      };
+      }; // 가로, 세로 스크롤바 모두 없어지면 휠 이벤트 제거
 
-      if (dir === 'y') {
+      if (!((_this$scrollbar$x7 = this.scrollbar.x) !== null && _this$scrollbar$x7 !== void 0 && _this$scrollbar$x7.use) && !((_this$scrollbar$y6 = this.scrollbar.y) !== null && _this$scrollbar$y6 !== void 0 && _this$scrollbar$y6.use)) {
         var _this$overlayCanvas2;
 
         (_this$overlayCanvas2 = this.overlayCanvas) === null || _this$overlayCanvas2 === void 0 ? void 0 : _this$overlayCanvas2.removeEventListener('wheel', this.onScrollbarWheel, {
@@ -54824,6 +54963,18 @@ var chart_core_EvChart = /*#__PURE__*/function () {
   }, {
     key: "resize",
     value: function resize(promiseRes) {
+      var _this$scrollbar3, _this$scrollbar4;
+
+      // 차트 크기가 변경될 때 저장된 스크롤 픽셀 위치를 초기화하여
+      // 새로운 크기에 맞춰 스크롤바 크기/위치를 재계산하도록 함
+      if ((_this$scrollbar3 = this.scrollbar) !== null && _this$scrollbar3 !== void 0 && _this$scrollbar3.x) {
+        delete this.scrollbar.x.savedPosition;
+      }
+
+      if ((_this$scrollbar4 = this.scrollbar) !== null && _this$scrollbar4 !== void 0 && _this$scrollbar4.y) {
+        delete this.scrollbar.y.savedPosition;
+      }
+
       this.clear();
       this.bufferCtx.restore();
       this.bufferCtx.save();