evui 3.4.156 → 3.4.157

package/package.json

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

package/src/components/chart/helpers/helpers.util.js

@@ -424,4 +424,27 @@ export default {
 
     return `${color}80`;
   },
+
+  /**
+   * 클릭 좌표(cx, cy)에서 데이터 포인트까지의 거리²를 반환한다.
+   * w/h 가 있으면 박스 외벽까지의 거리(내부면 0), 없으면 포인트까지의 유클리드 거리².
+   * @param {object} data - 데이터 포인트 (xp, yp, w?, h?)
+   * @param {number} cx - 클릭 x 좌표
+   * @param {number} cy - 클릭 y 좌표
+   * @returns {number}
+   */
+  calcBoxDistance(data, cx, cy) {
+    if (data.w !== null && data.w !== undefined && data.h !== null && data.h !== undefined) {
+      const sx = data.xp;
+      const sy = data.yp;
+      const xMin = Math.min(sx, sx + data.w);
+      const xMax = Math.max(sx, sx + data.w);
+      const yMin = Math.min(sy, sy + data.h);
+      const yMax = Math.max(sy, sy + data.h);
+      const dx = Math.max(0, xMin - cx, cx - xMax);
+      const dy = Math.max(0, yMin - cy, cy - yMax);
+      return dx * dx + dy * dy;
+    }
+    return (data.xp - cx) ** 2 + (data.yp - cy) ** 2;
+  },
 };

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

@@ -865,23 +865,68 @@ const modules = {
    * 선택 우선순위:
    *   1. directHit (bar 박스 내부 클릭) — 가장 가까운 것
    *   2. hit (line 포인트 근접 등) — 가장 가까운 것
-   *   3. hit이 전혀 없으면 데이터가 있는 첫 시리즈로 fallback (기존 동작 호환)
-   *
-   * 과거에는 "같은 라벨 위에서 값이 가장 큰 시리즈"를 돌려주는 max-value 덮어쓰기 방식이었으나,
-   * bar + line combo 차트에서 작은 bar를 클릭해도 큰 값의 line이 선택되는 버그의 원인이었다.
-   * 이번 수정으로 사용자가 실제로 가리킨 시리즈(hit)가 선택되도록 바뀐다.
+   *   3. hit 없으면 클릭 좌표에 가장 가까운 시리즈로 fallback (distance 기반)
    *
    * @param {array}   offset          position x and y
    * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
    * @param {number} dataIndex        selected data index
    * @param {boolean}  useSelectLabelOrItem   used to display select label/item at tooltip location
+   * @param {boolean}  disableNullLabelSnap   true 이면 all-null 라벨도 그대로 반환 (click/dblclick 용)
    *
    * @returns {object} hit item information
    */
-  getHitItemByPosition(offset, useApproximate = false, dataIndex, useSelectLabelOrItem = false) {
+  getHitItemByPosition(
+    offset,
+    useApproximate = false,
+    dataIndex,
+    useSelectLabelOrItem = false,
+    disableNullLabelSnap = false,
+  ) {
     const seriesIDs = Object.keys(this.seriesList);
     const isHorizontal = !!this.options.horizontal;
 
+    const [cx, cy] = offset;
+
+    // dataIndex 미지정 시 클릭 좌표에 가장 가까운 valid 라벨 인덱스 결정.
+    // disableNullLabelSnap=true 이면 all-null 라벨도 후보로 인정.
+    let resolvedDataIndex = dataIndex;
+    if (resolvedDataIndex === undefined && !useApproximate) {
+      const refSeriesID = seriesIDs.find((sId) => {
+        const s = this.seriesList[sId];
+        return s?.show && s?.data?.length > 0;
+      });
+      if (refSeriesID) {
+        const refData = this.seriesList[refSeriesID].data;
+        const clickPos = isHorizontal ? offset[1] : offset[0];
+        let nearestDistance = Infinity;
+        let nearestIndex = -1;
+        for (let i = 0; i < refData.length; i++) {
+          const hasValidData = disableNullLabelSnap || seriesIDs.some((sId) => {
+            const s = this.seriesList[sId];
+            return s?.show && s.data?.[i]?.o !== null && s.data?.[i]?.o !== undefined;
+          });
+
+          const p = refData[i];
+          if (hasValidData && p) {
+            let labelPos;
+            if (isHorizontal) {
+              labelPos = p.h ? p.yp + (p.h / 2) : p.yp;
+            } else {
+              labelPos = p.w ? p.xp + (p.w / 2) : p.xp;
+            }
+            if (labelPos !== null && labelPos !== undefined) {
+              const d = Math.abs(clickPos - labelPos);
+              if (d < nearestDistance) {
+                nearestDistance = d;
+                nearestIndex = i;
+              }
+            }
+          }
+        }
+        if (nearestIndex !== -1) resolvedDataIndex = nearestIndex;
+      }
+    }
+
     // hit 기반 결과 (최우선)
     let hitType = null;
     let hitLabel = null;
@@ -892,13 +937,14 @@ const modules = {
     let hitDistance = Infinity;
     let hasDirectHit = false;
 
-    // fallback: hit이 전혀 없을 때 사용할 "데이터 있는 첫 시리즈" 정보
+    // hit 없을 때 쓸 fallback — 값이 있는 시리즈 중 클릭 좌표에 가장 가까운 것.
     let fallbackType = null;
     let fallbackLabel = null;
     let fallbackValuePos = null;
     let fallbackValue = null;
     let fallbackSeriesID = '';
     let fallbackDataIndex = null;
+    let fallbackDistance = Infinity;
 
     let acc = 0;
     let useStack = false;
@@ -913,7 +959,7 @@ const modules = {
           series,
           offset,
           isHorizontal,
-          dataIndex,
+          resolvedDataIndex,
           useSelectLabelOrItem,
         );
         const data = item.data;
@@ -942,8 +988,24 @@ const modules = {
                 acc += data.y;
               }
 
-              // fallback 기록: 데이터가 있는 첫 시리즈를 저장
-              if (fallbackSeriesID === '') {
+              // fallback 후보: 값이 있는 시리즈 중 거리가 가장 가까운 쪽.
+              // 값이 null 인 시리즈는 제외.
+              const hasMeaningfulValue = g !== null && g !== undefined && !Number.isNaN(g);
+              const hasCoords = data.xp !== null && data.xp !== undefined
+                && data.yp !== null && data.yp !== undefined;
+              if (hasMeaningfulValue && hasCoords) {
+                const distance = Util.calcBoxDistance(data, cx, cy);
+                if (fallbackSeriesID === '' || distance < fallbackDistance) {
+                  fallbackDistance = distance;
+                  fallbackType = series.type;
+                  fallbackLabel = ldata;
+                  fallbackValuePos = lp;
+                  fallbackValue = g;
+                  fallbackSeriesID = seriesID;
+                  fallbackDataIndex = index;
+                }
+              } else if (hasMeaningfulValue && fallbackSeriesID === '') {
+                // 좌표 없는 예외 케이스 — 첫 후보로만 등록
                 fallbackType = series.type;
                 fallbackLabel = ldata;
                 fallbackValuePos = lp;
@@ -988,6 +1050,27 @@ const modules = {
       }
     }
 
+    // all-null 라벨인 경우 label/dataIndex 만 채워 반환 (sId='', value=0).
+    if (
+      disableNullLabelSnap
+      && hitSeriesID === ''
+      && fallbackSeriesID === ''
+      && resolvedDataIndex !== undefined
+      && resolvedDataIndex >= 0
+    ) {
+      const refSeriesID = seriesIDs.find((sId) => {
+        const s = this.seriesList[sId];
+        return s?.show && s?.data?.length > 0;
+      });
+      const refPoint = refSeriesID
+        ? this.seriesList[refSeriesID].data?.[resolvedDataIndex]
+        : null;
+      if (refPoint) {
+        fallbackLabel = isHorizontal ? refPoint.y : refPoint.x;
+        fallbackDataIndex = resolvedDataIndex;
+      }
+    }
+
     const hasHit = hitSeriesID !== '';
 
     return {

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

@@ -2,6 +2,7 @@ import { numberWithComma } from '@/common/utils';
 import throttle from '@/common/utils.throttle';
 import { cloneDeep, defaultsDeep, inRange, isEqual } from 'lodash-es';
 import dayjs from 'dayjs';
+import Util from '../helpers/helpers.util';
 
 const modules = {
   /**
@@ -180,10 +181,10 @@ const modules = {
       }
 
       const setSelectedItemInfo = () => {
-        const hitInfo = this.findHitItem(offset);
+        const hitInfo = this.findHitItem(offset, true);
 
         // 실제 클릭된 아이템의 정보 추출 (hitId가 있으면 해당 아이템, 없으면 첫 번째 아이템)
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         if (hitItem) {
@@ -196,8 +197,8 @@ const modules = {
       };
 
       const setSelectedLabelInfo = (targetAxis) => {
-        const hitInfo = this.findHitItem(offset);
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitInfo = this.findHitItem(offset, true);
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         const {
@@ -220,8 +221,8 @@ const modules = {
       };
 
       const setSelectedSeriesInfo = () => {
-        const hitInfo = this.findHitItem(offset);
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitInfo = this.findHitItem(offset, true);
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         if (hitItemId !== null) {
@@ -294,7 +295,7 @@ const modules = {
       const useSelectSeries = selectSeriesOpt?.use && selectSeriesOpt?.useClick;
 
       const setSelectedItemInfo = () => {
-        const hitInfo = this.getHitItemByPosition(offset, false);
+        const hitInfo = this.getHitItemByPosition(offset, false, undefined, false, true);
 
         ({
           label: args.label,
@@ -337,8 +338,8 @@ const modules = {
       };
 
       const setSelectedSeriesInfo = () => {
-        const hitInfo = this.findHitItem(offset);
-        const hitItemId = hitInfo.hitId || Object.keys(hitInfo.items)[0];
+        const hitInfo = this.findHitItem(offset, true);
+        const hitItemId = hitInfo.hitId ?? Object.keys(hitInfo.items)[0];
         const hitItem = hitInfo.items[hitItemId];
 
         if (hitItemId !== null) {
@@ -904,12 +905,14 @@ const modules = {
    *   maxHighlight: [string, number] | null,
    * }} hit item information
    */
-  findHitItem(offset) {
+  findHitItem(offset, disableNullLabelSnap = false) {
     const sIds = Object.keys(this.seriesList);
     const items = {};
     const isHorizontal = !!this.options.horizontal;
     const ctx = this.tooltipCtx;
 
+    const [cx, cy] = offset;
+
     let hitId = null;
     let maxs = '';
     let maxsw = 0;
@@ -917,12 +920,14 @@ const modules = {
     let maxg = null;
     let maxSID = null;
     let minDistance = Infinity;
-    // directHit(bar 박스 내부 클릭/hover) 시리즈가 발견되었는지 추적.
-    // 한 번이라도 directHit가 있으면 line의 근접 포인트 히트는 hitId 후보에서 배제된다.
+    // directHit 가 하나라도 있으면 일반 hit 는 hitId 후보에서 배제.
     let hasDirectHit = false;
+    // hit 이 없을 때 거리 기반으로 선택할 fallback (기존 "첫 시리즈 고정" 대체).
+    let fallbackId = null;
+    let fallbackDistance = Infinity;
 
     // 1. 먼저 공통으로 사용할 데이터 인덱스 결정
-    const targetDataIndex = this.findClosestDataIndex(offset, sIds);
+    const targetDataIndex = this.findClosestDataIndex(offset, sIds, disableNullLabelSnap);
 
     if (targetDataIndex === -1 && !this.isNotUseIndicator()) {
       return { items, hitId, maxTip: [maxs, maxv], maxHighlight: null };
@@ -989,35 +994,69 @@ const modules = {
               maxSID = sId;
             }
 
-            // 마우스 위치와의 거리 계산하여 가장 가까운 시리즈 선택.
-            // directHit(bar 박스 내부)가 하나라도 있으면 그중에서만 선택하고,
-            // 라인의 근접 포인트 히트(item.hit=true, directHit=false)는 hitId 후보에서 배제한다.
-            // bar + line combo 차트에서 작은 bar 클릭 시 큰 값의 line이 잡히던 버그 방지.
+            // hit 기반 선택: directHit 최우선, 그 외 일반 hit 는 directHit 없을 때만.
             if (item.hit && item.data.xp !== undefined && item.data.yp !== undefined) {
               const distance = (item.data.xp - offset[0]) ** 2
                 + (item.data.yp - offset[1]) ** 2;
 
               if (item.directHit) {
-                // directHit는 최우선. 여러 directHit 중에서는 가장 가까운 것 선택.
                 if (!hasDirectHit || distance < minDistance) {
                   minDistance = distance;
                   hitId = sId;
                 }
                 hasDirectHit = true;
               } else if (!hasDirectHit && distance < minDistance) {
-                // directHit가 없을 때만 일반 hit 거리 비교
                 minDistance = distance;
                 hitId = sId;
               }
             }
+
+            // fallback 후보: hit 여부와 무관하게 거리가 가장 가까운 시리즈.
+            // 참고: 이 블록은 outer `if (gdata !== null && gdata !== undefined)` 안에 있어서
+            // 값이 null 인 시리즈는 items 수집 단계에서 이미 걸러진 상태. 별도 null 값 가드 불필요.
+            if (item.data.xp !== undefined && item.data.yp !== undefined
+                && item.data.xp !== null && item.data.yp !== null) {
+              const fbDistance = Util.calcBoxDistance(item.data, cx, cy);
+              if (fbDistance < fallbackDistance) {
+                fallbackDistance = fbDistance;
+                fallbackId = sId;
+              }
+            }
           }
         }
       }
     }
 
-    hitId = hitId === null ? Object.keys(items)[0] : hitId;
+    // hit 없으면 거리 기반 fallback, 그것도 없으면 items 첫 키(항상 비어있을 가능성 방어).
+    if (hitId === null) {
+      hitId = fallbackId !== null ? fallbackId : Object.keys(items)[0];
+    }
     const maxHighlight = maxg !== null ? [maxSID, maxg] : null;
 
+    // all-null 라벨인 경우 synthetic items[''] 로 label/index 만 채워 전달.
+    if (disableNullLabelSnap
+        && Object.keys(items).length === 0
+        && targetDataIndex !== -1) {
+      const refSeriesID = sIds.find((sId) => {
+        const s = this.seriesList[sId];
+        return s?.show && s?.data?.length > 0;
+      });
+      const refPoint = refSeriesID
+        ? this.seriesList[refSeriesID].data?.[targetDataIndex]
+        : null;
+      if (refPoint) {
+        items[''] = {
+          id: '',
+          name: '',
+          label: isHorizontal ? refPoint.y : refPoint.x,
+          index: targetDataIndex,
+          axis: { x: 0, y: 0 },
+          data: { o: undefined, x: refPoint.x, y: refPoint.y },
+        };
+        hitId = '';
+      }
+    }
+
     return { items, hitId, maxTip: [maxs, maxv], maxHighlight };
   },
 
@@ -1027,7 +1066,7 @@ const modules = {
    * @param {array} sIds series IDs
    * @returns {number} closest data index
    */
-  findClosestDataIndex(offset, sIds) {
+  findClosestDataIndex(offset, sIds, disableNullLabelSnap = false) {
     const [xp, yp] = offset;
     const isHorizontal = !!this.options.horizontal;
     const mousePos = isHorizontal ? yp : xp;
@@ -1075,10 +1114,9 @@ const modules = {
     let closestDistance = Infinity;
     let closestIndex = -1;
 
-    // 각 라벨에서 가장 가까운 것 찾기
+    // 각 라벨에서 가장 가까운 것 찾기 (disableNullLabelSnap=true 면 all-null 라벨도 후보)
     for (let i = 0; i < referenceData.length; i++) {
-      // 이 라벨에 유효한 데이터가 있는 시리즈가 하나 이상 있는지 확인
-      const hasValidData = sIds.some((sId) => {
+      const hasValidData = disableNullLabelSnap || sIds.some((sId) => {
         const series = this.seriesList[sId];
         return series?.show && series.data?.[i]?.o !== null && series.data?.[i]?.o !== undefined;
       });

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

@@ -113,7 +113,15 @@ const module = {
         : this.options.axesY?.[0]?.scrollbar?.resetPosition;
 
       if (isUpdateAxesRange) {
-        this.scrollbar[dir].range = newOpt?.[0]?.range?.length ? [...newOpt?.[0]?.range] : null;
+        const newOptRange = newOpt?.[0]?.range;
+        const currentRange = this.scrollbar[dir].range;
+        if (!isResetPosition && newOptRange?.length && currentRange?.length) {
+          // 리사이즈 등으로 range 크기만 변경된 경우, 현재 스크롤 위치(min)를 유지하고 크기만 조정
+          const newSize = newOptRange[1] - newOptRange[0];
+          this.scrollbar[dir].range = [currentRange[0], currentRange[0] + newSize];
+        } else {
+          this.scrollbar[dir].range = newOptRange?.length ? [...newOptRange] : null;
+        }
       }
 
       if (isResetPosition || updateData) {

package/src/components/chart/scale/scale.step.js

@@ -5,12 +5,37 @@ import { truthyNumber } from '@/common/utils';
 import Scale from './scale';
 import Util from '../helpers/helpers.util';
 
+/**
+ * scrollbar 사용 시 스크롤마다 labels 전체를 재순회하지 않도록 결과를 캐시
+ */
+const stringMinMaxByLabels = new WeakMap();
+
 class StepScale extends Scale {
   constructor(type, axisOpt, ctx, labels, options) {
     super(type, axisOpt, ctx, options);
     this.labels = labels;
   }
 
+  /**
+   * labels 배열의 문자열 min/max를 반환
+   * - alignToGridLine: 전달받은 minMax 그대로 사용
+   * - scrollbar 사용: WeakMap 캐시를 통해 O(n) → O(1)로 단축
+   * - 일반: 매번 getStringMinMax 계산
+   * @param {object} minMax       축 min/max 정보 (alignToGridLine 시 사용)
+   * @param {object} scrollbarOpt 스크롤바 옵션
+   * @returns {{ min: string, max: string }}
+   */
+  getStepMinMax(minMax, scrollbarOpt) {
+    if (this.labelStyle.alignToGridLine) return minMax;
+
+    if (!scrollbarOpt?.use) return Util.getStringMinMax(this.labels);
+
+    if (!stringMinMaxByLabels.has(this.labels)) {
+      stringMinMaxByLabels.set(this.labels, Util.getStringMinMax(this.labels));
+    }
+    return stringMinMaxByLabels.get(this.labels);
+  }
+
   /**
    * Calculate min/max value, label and size information for step scale
    * @param {object} minMax       min/max information (unused on step scale)
@@ -20,8 +45,7 @@ class StepScale extends Scale {
    * @returns {object} min/max value and label
    */
   calculateScaleRange(minMax, scrollbarOpt, chartRect) {
-    const stepMinMax = this.labelStyle.alignToGridLine
-      ? minMax : Util.getStringMinMax(this.labels);
+    const stepMinMax = this.getStepMinMax(minMax, scrollbarOpt);
     let maxValue = stepMinMax.max;
     let minValue = stepMinMax.min;