evui 3.4.107 → 3.4.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.4.107",
+  "version": "3.4.109",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

package/src/components/chart/chart.core.js

@@ -957,6 +957,15 @@ class EvChart {
    * @returns {undefined}
    */
   resize(promiseRes) {
+    // 차트 크기가 변경될 때 저장된 스크롤 픽셀 위치를 초기화하여
+    // 새로운 크기에 맞춰 스크롤바 크기/위치를 재계산하도록 함
+    if (this.scrollbar?.x) {
+      delete this.scrollbar.x.savedPosition;
+    }
+    if (this.scrollbar?.y) {
+      delete this.scrollbar.y.savedPosition;
+    }
+
     this.clear();
     this.bufferCtx.restore();
     this.bufferCtx.save();

package/src/components/chart/element/element.bar.js

@@ -46,7 +46,6 @@ class Bar {
     }
 
     const { isHorizontal, showValue } = this;
-
     const ctx = param.ctx;
     const chartRect = param.chartRect;
     const labelOffset = param.labelOffset;
@@ -70,6 +69,7 @@ class Bar {
       [minIndex, maxIndex] = [minmaxX.minIndex, minmaxX.maxIndex];
     }
 
+    // minIndex, maxIndex가 유효하면 실제 그릴 데이터 개수로 보정
     if (truthyNumber(minIndex) && truthyNumber(maxIndex)) {
       totalCount = (maxIndex - minIndex) + 1;
     }
@@ -126,112 +126,117 @@ class Bar {
     this.borderRadius = param.borderRadius;
     this.filteredCount = totalCount;
 
-    let categoryPoint = null;
-
-    this.data.forEach((dataItem, index) => {
-      ctx.beginPath();
+    const startIndex = truthyNumber(minIndex) ? minIndex : 0;
+    const endIndex = truthyNumber(maxIndex) ? maxIndex : this.data.length - 1;
 
-      const item = dataItem;
+    // 스크롤 범위 내에서만 루프 돌림
+    for (let i = startIndex; i <= endIndex; i++) {
+      const screenIndex = i - startIndex; // 현재 화면상의 위치 인덱스
+      const item = this.data[i]; // 실제 데이터 인덱스에 해당하는 항목
+      if (item) {
+        // 스크롤 offset(minIndex)만큼 보정해서 그리기
 
-      if (truthyNumber(minIndex) && index < minIndex) {
-        return;
-      } else if (truthyNumber(minIndex) && index > maxIndex) {
-        return;
-      }
+        let categoryPoint;
+        if (isHorizontal) {
+          categoryPoint = ysp - (cArea * (screenIndex)) - cPad;
+        } else {
+          categoryPoint = xsp + (cArea * (screenIndex)) + cPad;
+        }
 
-      if (isHorizontal) {
-        categoryPoint = ysp - (cArea * (index - (minIndex || 0))) - cPad;
-      } else {
-        categoryPoint = xsp + (cArea * (index - (minIndex || 0))) + cPad;
-      }
+        if (isHorizontal) {
+          x = xsp;
+          y = Math.round(categoryPoint - ((bArea * barSeriesX) - (h + bPad)));
+        } else {
+          x = Math.round(categoryPoint + ((bArea * barSeriesX) - (w + bPad)));
+          y = ysp;
+        }
 
-      if (isHorizontal) {
-        x = xsp;
-        y = Math.round(categoryPoint - ((bArea * barSeriesX) - (h + bPad)));
-      } else {
-        x = Math.round(categoryPoint + ((bArea * barSeriesX) - (w + bPad)));
-        y = ysp;
-      }
+        if (isHorizontal) {
+          if (item.b) {
+            w = Canvas.calculateX(item.x - item.b, minmaxX.graphMin, minmaxX.graphMax, xArea);
+            x = Canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
+          } else {
+            w = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea);
+          }
+        } else if (item.b) { // vertical stack bar chart
+          h = Canvas.calculateY(item.y - item.b, minmaxY.graphMin, minmaxY.graphMax, yArea);
+          y = Canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
+        } else { // vertical bar chart
+          h = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
+        }
 
-      if (isHorizontal) {
-        if (item.b) {
-          w = Canvas.calculateX(item.x - item.b, minmaxX.graphMin, minmaxX.graphMax, xArea);
-          x = Canvas.calculateX(item.b, minmaxX.graphMin, minmaxX.graphMax, xArea, xsp);
-        } else {
-          w = Canvas.calculateX(item.x, minmaxX.graphMin, minmaxX.graphMax, xArea);
+        const barColor = item.dataColor || this.color;
+
+        const legendHitInfo = param?.legendHitInfo;
+        const selectLabelOption = param?.selectLabel?.option;
+        const selectItemOption = param?.selectItem?.option;
+        const selectedLabelList = param?.selectLabel?.selected?.dataIndex ?? [];
+        const {
+          dataIndex: selectedItemDataIndex,
+          seriesID: selectedItemSeriesId,
+        } = param?.selectItem?.selected ?? {};
+
+        let isDownplay = false;
+
+        if (legendHitInfo) {
+          isDownplay = legendHitInfo?.sId !== this.sId;
+        } else if (selectLabelOption?.use && selectLabelOption?.useSeriesOpacity) {
+          isDownplay = selectedLabelList.length && !selectedLabelList.includes(i);
+        } else if (truthy(selectedItemDataIndex) && selectItemOption?.useSeriesOpacity) {
+          if (this.isExistGrp) {
+            isDownplay = selectedItemDataIndex !== i;
+          } else {
+            isDownplay = selectedItemDataIndex !== i || selectedItemSeriesId !== this.sId;
+          }
         }
-      } else if (item.b) { // vertical stack bar chart
-        h = Canvas.calculateY(item.y - item.b, minmaxY.graphMin, minmaxY.graphMax, yArea);
-        y = Canvas.calculateY(item.b, minmaxY.graphMin, minmaxY.graphMax, yArea, ysp);
-      } else { // vertical bar chart
-        h = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
-      }
 
-      const barColor = item.dataColor || this.color;
-
-      const legendHitInfo = param?.legendHitInfo;
-      const selectLabelOption = param?.selectLabel?.option;
-      const selectItemOption = param?.selectItem?.option;
-      const selectedLabelList = param?.selectLabel?.selected?.dataIndex ?? [];
-      const {
-        dataIndex: selectedItemDataIndex,
-        seriesID: selectedItemSeriesId,
-      } = param?.selectItem?.selected ?? {};
-
-      let isDownplay = false;
-
-      if (legendHitInfo) {
-        isDownplay = legendHitInfo?.sId !== this.sId;
-      } else if (selectLabelOption?.use && selectLabelOption?.useSeriesOpacity) {
-        isDownplay = selectedLabelList.length && !selectedLabelList.includes(index);
-      } else if (truthy(selectedItemDataIndex) && selectItemOption?.useSeriesOpacity) {
-        if (this.isExistGrp) {
-          isDownplay = selectedItemDataIndex !== index;
+        if (typeof barColor !== 'string') {
+          ctx.fillStyle = Canvas.createGradient(
+            ctx,
+            isHorizontal,
+            { x, y, w, h },
+            barColor,
+            isDownplay,
+          );
         } else {
-          isDownplay = selectedItemDataIndex !== index || selectedItemSeriesId !== this.sId;
+          const noneDownplayOpacity = barColor.includes('rgba') ? Util.getOpacity(barColor) : 1;
+          const opacity = isDownplay ? 0.1 : noneDownplayOpacity;
+
+          ctx.fillStyle = Util.colorStringToRgba(barColor, opacity);
         }
-      }
 
-      if (typeof barColor !== 'string') {
-        ctx.fillStyle = Canvas.createGradient(
+        this.drawBar({
           ctx,
-          isHorizontal,
-          { x, y, w, h },
-          barColor,
-          isDownplay,
-        );
-      } else {
-        const noneDownplayOpacity = barColor.includes('rgba') ? Util.getOpacity(barColor) : 1;
-        const opacity = isDownplay ? 0.1 : noneDownplayOpacity;
+          positions: { x, y, w, h },
+        });
 
-        ctx.fillStyle = Util.colorStringToRgba(barColor, opacity);
-      }
+        if (showValue.use) {
+          this.drawValueLabels({
+            context: ctx,
+            data: item,
+            positions: {
+              x,
+              y,
+              h,
+              w,
+            },
+            isHighlight: false,
+            textColor: item.dataTextColor,
+          });
+        }
 
-      this.drawBar({
-        ctx,
-        positions: { x, y, w, h },
-      });
+        // 좌표 및 인덱스 정보 세팅 (툴팁/hover용)
+        item.xp = x; // 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 포함)
 
-      if (showValue.use) {
-        this.drawValueLabels({
-          context: ctx,
-          data: item,
-          positions: {
-            x,
-            y,
-            h,
-            w,
-          },
-          isHighlight: false,
-          textColor: item.dataTextColor,
-        });
+        // 검색(hitInfo) 로직은 this.data[0..filteredCount-1] 범위만 검사하므로,
+        // 현재 화면에 그린 항목을 배열 앞쪽으로 매핑해준다.
+        this.data[screenIndex] = item;
       }
-
-      item.xp = x; // eslint-disable-line
-      item.yp = y; // eslint-disable-line
-      item.w = w; // eslint-disable-line
-      item.h = isHorizontal ? -h : h; // eslint-disable-line
-    });
+    }
   }
 
   /**
@@ -511,6 +516,8 @@ class Bar {
       return;
     }
 
+    ctx.save();
+
     if (isBorderRadius && !isStackBar) {
       try {
         this.drawRoundedRect(ctx, positions);
@@ -520,6 +527,8 @@ class Bar {
     } else {
       ctx.fillRect(x, y, w, h);
     }
+
+    ctx.restore();
   }
 
   drawRoundedRect(ctx, positions) {
@@ -540,6 +549,7 @@ class Bar {
 
     ctx.clip(squarePath);
 
+    ctx.beginPath();
     ctx.moveTo(x, y);
 
     if (isHorizontal) {

package/src/components/chart/model/model.store.js

@@ -101,9 +101,6 @@ const 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 (let i = 0; i < storeLength; i++) {
         const item = data[i];
@@ -114,6 +111,14 @@ const modules = {
       }
 
       lastTime = Math.floor(lastTime / 1000) * 1000;
+
+      const dataGroupLastTime = this.dataSet[key].dataGroup.at(-1)?.data?.at(-1)?.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 === ''

package/src/components/chart/plugins/plugins.scrollbar.js

@@ -60,8 +60,25 @@ const module = {
           limitMin = +minMax.min;
           limitMax = +minMax.max;
         }
-        scrollbarOpt.range[0] = +min < limitMin ? limitMin : +min;
-        scrollbarOpt.range[1] = +max > limitMax ? limitMax : +max;
+
+        const originalWidth = max - min;
+        const 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;
+            }
+          }
+        }
       }
     }
   },
@@ -93,7 +110,16 @@ const module = {
     const axisOpt = dir === 'x' ? this.axesX : this.axesY;
     const isUpdateAxesRange = !isEqual(newOpt?.[0]?.range, axisOpt?.[0]?.range);
     if (isUpdateAxesRange || updateData) {
-      this.scrollbar[dir].range = newOpt?.[0]?.range?.length ? [...newOpt?.[0]?.range] : null;
+      const isResetPosition = dir === 'x' ? this.options.axesX?.[0]?.scrollbar?.resetPosition : this.options.axesY?.[0]?.scrollbar?.resetPosition;
+      if (isUpdateAxesRange || isResetPosition) {
+        this.scrollbar[dir].range = newOpt?.[0]?.range?.length ? [...newOpt?.[0]?.range] : null;
+        // range가 업데이트되면 저장된 스크롤 위치를 초기화
+        delete this.scrollbar[dir].savedPosition;
+      } else if (updateData) {
+        // 데이터가 업데이트되면 저장된 픽셀 위치는 더 이상 유효하지 않으므로 삭제하여
+        // 논리적 범위에 따라 다시 계산하도록 합니다.
+        delete this.scrollbar[dir].savedPosition;
+      }
       this.initScrollbarRange(dir);
     }
     this.scrollbar[dir].use = !!newOpt?.[0].scrollbar?.use;
@@ -104,11 +130,15 @@ const module = {
    */
   updateScrollbarPosition() {
     if (this.scrollbar.x?.use && this.scrollbar.x?.isInit) {
-      this.setScrollbarPosition('x');
+      // resetPosition 옵션에 따라 preservePosition 결정
+      const preservePosition = !this.options.axesX?.[0]?.scrollbar?.resetPosition;
+      this.setScrollbarPosition('x', preservePosition);
     }
 
     if (this.scrollbar.y?.use && this.scrollbar.y?.isInit) {
-      this.setScrollbarPosition('y');
+      // resetPosition 옵션에 따라 preservePosition 결정
+      const preservePosition = !this.options.axesY?.[0]?.scrollbar?.resetPosition;
+      this.setScrollbarPosition('y', preservePosition);
     }
   },
 
@@ -195,8 +225,9 @@ const module = {
   /**
    * set scrollbar position
    * @param dir axis direction ('x' | 'y')
+   * @param preservePosition 기존 위치를 유지할지 여부
    */
-  setScrollbarPosition(dir) {
+  setScrollbarPosition(dir, preservePosition = false) {
     const scrollbarOpt = this.scrollbar[dir];
     if (!scrollbarOpt.use || !scrollbarOpt.range) {
       return;
@@ -218,7 +249,17 @@ const module = {
     const fullSize = isXScroll ? (aPos.x2 - aPos.x1) : (aPos.y2 - aPos.y1);
     const buttonSize = scrollbarOpt.showButton ? scrollHeight : 0;
     const trackSize = fullSize - (buttonSize * 2);
-    const thumbSize = this.getScrollbarThumbSize(dir, trackSize);
+
+    // 현재 위치를 보존해야 하는 경우 기존 위치를 저장
+    let savedThumbPosition = null;
+    if (preservePosition && scrollbarOpt.savedPosition !== undefined) {
+      savedThumbPosition = scrollbarOpt.savedPosition;
+    }
+
+    const thumbSize = this.getScrollbarThumbSize(dir, trackSize, savedThumbPosition);
+
+    // 새로 계산된 위치를 저장
+    scrollbarOpt.savedPosition = thumbSize.position;
 
     let scrollbarStyle = 'display: block;';
     let scrollbarTrackStyle;
@@ -293,8 +334,9 @@ const module = {
    * get scrollbar thumb size
    * @param dir axis direction ('x' | 'y')
    * @param trackSize scrollbar track size
+   * @param savedThumbPosition 기존 위치를 보존해야 하는 경우 저장된 위치
    */
-  getScrollbarThumbSize(dir, trackSize) {
+  getScrollbarThumbSize(dir, trackSize, savedThumbPosition) {
     const scrollbarOpt = this.scrollbar[dir];
     const [min, max] = scrollbarOpt.range;
     const axesType = scrollbarOpt.type;
@@ -338,6 +380,11 @@ const module = {
     scrollbarOpt.steps = steps;
     scrollbarOpt.interval = interval;
 
+    // 기존 위치를 보존해야 하는 경우 저장된 위치를 사용
+    if (savedThumbPosition !== null) {
+      thumbPosition = savedThumbPosition;
+    }
+
     return {
       size: thumbSize,
       position: thumbPosition,
@@ -396,6 +443,9 @@ const module = {
     if (!isOutOfRange) {
       scrollbarOpt.range = [minValue, maxValue];
 
+      // 사용자가 스크롤할 때는 저장된 위치를 초기화
+      delete scrollbarOpt.savedPosition;
+
       this.update({
         updateSeries: false,
         updateSelTip: { update: false, keepDomain: false },
@@ -481,9 +531,60 @@ const module = {
     };
 
     this.onScrollbarWheel = (e) => {
+      const isTooltipVisible = this.tooltipDOM?.style?.display === 'block';
+      const tooltipBodyDOM = this.tooltipBodyDOM
+      || this.tooltipDOM?.querySelector(this.options.tooltip.htmlScrollTarget);
+
+      if (isTooltipVisible && tooltipBodyDOM) {
+        const { scrollTop, scrollHeight, clientHeight } = tooltipBodyDOM;
+        const isAtTop = scrollTop <= 0;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight;
+
+        const isScrollingUp = e.deltaY < 0;
+        const isScrollingDown = e.deltaY > 0;
+
+        if ((isAtTop && isScrollingUp) || (isAtBottom && isScrollingDown)) {
+          // 툴팁의 스크롤이 맨 위나 맨 아래에 닿았는데 스크롤 하면 차트 스크롤 허용
+        } else {
+          // 툴팁 내부 스크롤만 수행
+          return;
+        }
+      }
+
       e.preventDefault();
 
-      this.updateScrollbarRange('y', e.deltaY < 0);
+      const threshold = 1; // 최소 스크롤 임계값
+
+      // Shift + 휠: 가로 스크롤 (일반 마우스 휠 지원)
+      if (this.scrollbar.x?.use && e.shiftKey && Math.abs(e.deltaY) > threshold) {
+        this.updateScrollbarRange('x', e.deltaY > 0);
+        return;
+      }
+
+      // 대각선 스크롤 처리: 더 큰 방향을 우선으로 처리
+      const absX = Math.abs(e.deltaX);
+      const absY = Math.abs(e.deltaY);
+
+      if (absX > threshold && absY > threshold) {
+        // 두 방향 모두 임계값 이상일 때: 더 큰 방향을 우선 처리
+        if (absX > absY && this.scrollbar.x?.use) {
+          this.updateScrollbarRange('x', e.deltaX > 0);
+        } else if (absY > absX && this.scrollbar.y?.use) {
+          this.updateScrollbarRange('y', e.deltaY < 0);
+        }
+        return;
+      }
+
+      // 가로 스크롤 처리 (deltaX - 트랙패드 좌우 스크롤)
+      if (this.scrollbar.x?.use && absX > threshold) {
+        this.updateScrollbarRange('x', e.deltaX > 0);
+        return;
+      }
+
+      // 세로 스크롤 처리 (deltaY)
+      if (this.scrollbar.y?.use && absY > threshold) {
+        this.updateScrollbarRange('y', e.deltaY < 0);
+      }
     };
 
     if (this.scrollbar.x.use && !this.scrollbar.x.isInit) {
@@ -498,6 +599,10 @@ const module = {
       scrollbarYDOM.addEventListener('click', this.onScrollbarClick);
       scrollbarYDOM.addEventListener('mousedown', this.onScrollbarDown);
       scrollbarYDOM.addEventListener('mouseleave', this.onScrollbarLeave);
+    }
+
+    // 가로 또는 세로 스크롤바가 있으면 휠 이벤트 등록
+    if (this.scrollbar.x?.use || this.scrollbar.y?.use) {
       this.overlayCanvas?.addEventListener('wheel', this.onScrollbarWheel, { passive: false });
     }
   },
@@ -560,6 +665,10 @@ const module = {
     }
 
     this.scrollbar[dir].range = [movedMin, movedMax];
+
+    // 사용자가 드래그로 스크롤할 때는 저장된 위치를 초기화
+    delete this.scrollbar[dir].savedPosition;
+
     this.update({
       updateSeries: false,
       updateSelTip: { update: false, keepDomain: false },
@@ -606,13 +715,14 @@ const module = {
    * @param dir axis direction ('x' | 'y')
    */
   destroyScrollbar(dir) {
-    const scrollbarXDOM = this.scrollbar[dir].dom;
+    const scrollbarDOM = this.scrollbar[dir].dom;
 
-    if (scrollbarXDOM) {
-      scrollbarXDOM.remove();
+    if (scrollbarDOM) {
+      scrollbarDOM.remove();
       this.scrollbar[dir] = { isInit: false };
 
-      if (dir === 'y') {
+      // 가로, 세로 스크롤바 모두 없어지면 휠 이벤트 제거
+      if (!this.scrollbar.x?.use && !this.scrollbar.y?.use) {
         this.overlayCanvas?.removeEventListener('wheel', this.onScrollbarWheel, { passive: false });
       }
     }