evui 3.4.203 → 3.4.204

package/package.json

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

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

@@ -61,13 +61,9 @@ class Bar {
     const minmaxY = axesSteps.y[this.yAxisIndex];
 
     let totalCount = this.data.length;
-    let minIndex;
-    let maxIndex;
-    if (isHorizontal) {
-      [minIndex, maxIndex] = [minmaxY.minIndex, minmaxY.maxIndex];
-    } else {
-      [minIndex, maxIndex] = [minmaxX.minIndex, minmaxX.maxIndex];
-    }
+    const [minIndex, maxIndex] = isHorizontal
+      ? [minmaxY.minIndex, minmaxY.maxIndex]
+      : [minmaxX.minIndex, minmaxX.maxIndex];
 
     // minIndex, maxIndex가 유효하면 실제 그릴 데이터 개수로 보정
     if (truthyNumber(minIndex) && truthyNumber(maxIndex)) {
@@ -103,17 +99,7 @@ class Bar {
     bArea = cArea > (cPad * 2) ? (cArea - (cPad * 2)) : cArea;
     bArea = this.isExistGrp ? bArea : bArea / showSeriesCount;
 
-    const getSize = () => {
-      if (typeof thickness === 'string' && /[0-9]+px/.test(thickness)) {
-        return Math.min(bArea, Number(thickness.replace('px', '')));
-      }
-      if (typeof thickness === 'number' && thickness <= 1 && thickness >= 0) {
-        return Math.ceil(bArea * thickness);
-      }
-      return bArea;
-    };
-    const size = getSize();
-
+    const size = this.calculateBarSize(thickness, bArea);
     w = isHorizontal ? null : size;
     h = isHorizontal ? size : null;
 
@@ -141,12 +127,10 @@ class Bar {
       const item = this.data[i]; // 실제 데이터 인덱스에 해당하는 항목
       if (item) {
         // 스크롤 offset(minIndex)만큼 보정해서 그리기
-        let categoryPoint;
-        if (isHorizontal) {
-          categoryPoint = ysp - (cArea * (screenIndex)) - cPad;
-        } else {
-          categoryPoint = xsp + (cArea * (screenIndex)) + cPad;
-        }
+
+        const categoryPoint = isHorizontal
+          ? ysp - (cArea * screenIndex) - cPad
+          : xsp + (cArea * screenIndex) + cPad;
 
         // 기본 위치 설정
         if (isHorizontal) {
@@ -328,10 +312,25 @@ class Bar {
    * Find graph item
    * @param {array}    offset          mouse position
    * @param {boolean}  isHorizontal    determines if a horizontal option's value
+   * @param {number}   dataIndex       selected label data index
+   * @param {boolean}  useIndicatorOnLabel
    *
    * @returns {object} graph item
    */
-  findGraphData(offset, isHorizontal) {
+  findGraphData(offset, isHorizontal, dataIndex, useIndicatorOnLabel) {
+    if (typeof dataIndex === 'number' && this.show && useIndicatorOnLabel) {
+      const gdata = this.data;
+      const item = { data: null, hit: false, color: this.color };
+
+      if (gdata[dataIndex]) {
+        item.data = gdata[dataIndex];
+        item.index = dataIndex;
+        item.hit = this.isPointInBar(offset, gdata[dataIndex]);
+      }
+
+      return item;
+    }
+
     return isHorizontal ? this.findGraphRangeCount(offset) : this.findGraphRange(offset);
   }
 
@@ -341,12 +340,17 @@ class Bar {
    *
    * @returns {object} graph item
    */
-  findGraphRange(offset) {
-    const xp = offset[0];
-    const yp = offset[1];
+  /**
+   * Binary search for finding graph item
+   * @private
+   * @param {array} offset - mouse position
+   * @param {boolean} isHorizontal - search orientation
+   * @returns {object} graph item
+   */
+  binarySearchBar(offset, isHorizontal) {
+    const [xp, yp] = offset;
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data;
-
     const totalCount = this.filteredCount ?? gdata.length;
 
     let s = 0;
@@ -354,20 +358,27 @@ class Bar {
 
     while (s <= e) {
       const m = Math.floor((s + e) / 2);
-      const sx = gdata[m].xp;
-      const sy = gdata[m].yp;
-      const ex = sx + gdata[m].w;
-      const ey = sy + gdata[m].h;
+      const barData = gdata[m];
+      const { xp: sx, yp: sy, w, h } = barData;
+      const ex = sx + w;
+      const ey = sy + h;
+
+      const inRange = isHorizontal
+        ? ((ey <= yp) && (yp <= sy))
+        : ((sx <= xp) && (xp <= ex));
+
+      if (inRange) {
+        item.data = barData;
+        item.index = barData.index;
+        item.hit = this.isPointInBar(offset, barData);
+        return item;
+      }
 
-      if ((sx <= xp) && (xp <= ex)) {
-        item.data = gdata[m];
-        item.index = gdata[m].index; // 원본 데이터 인덱스 사용
+      const shouldGoRight = isHorizontal
+        ? (!(ey < yp))
+        : (sx + 4 < xp);
 
-        if ((ey <= yp) && (yp <= sy)) {
-          item.hit = true;
-        }
-        return item;
-      } else if (sx + 4 < xp) {
+      if (shouldGoRight) {
         s = m + 1;
       } else {
         e = m - 1;
@@ -377,6 +388,10 @@ class Bar {
     return item;
   }
 
+  findGraphRange(offset) {
+    return this.binarySearchBar(offset, false);
+  }
+
   /**
    * Find graph item (horizontal)
    * @param {array}    offset          mouse position
@@ -384,39 +399,7 @@ class Bar {
    * @returns {object} graph item
    */
   findGraphRangeCount(offset) {
-    const xp = offset[0];
-    const yp = offset[1];
-    const item = { data: null, hit: false, color: this.color };
-    const gdata = this.data;
-
-    const totalCount = this.filteredCount ?? gdata.length;
-
-    let s = 0;
-    let e = totalCount - 1;
-
-    while (s <= e) {
-      const m = Math.floor((s + e) / 2);
-      const sx = gdata[m].xp;
-      const sy = gdata[m].yp;
-      const ex = sx + gdata[m].w;
-      const ey = sy + gdata[m].h;
-
-      if ((ey <= yp) && (yp <= sy)) {
-        item.data = gdata[m];
-        item.index = gdata[m].index; // 원본 데이터 인덱스 사용
-
-        if ((sx <= xp) && (xp <= ex)) {
-          item.hit = true;
-        }
-        return item;
-      } else if (ey < yp) {
-        e = m - 1;
-      } else {
-        s = m + 1;
-      }
-    }
-
-    return item;
+    return this.binarySearchBar(offset, true);
   }
 
   /**
@@ -560,10 +543,27 @@ class Bar {
     ctx.restore();
   }
 
+  /**
+   * Calculate bar size based on thickness
+   * @private
+   * @param {string|number} thickness - thickness value
+   * @param {number} bArea - available bar area
+   * @returns {number} calculated size
+   */
+  calculateBarSize(thickness, bArea) {
+    if (typeof thickness === 'string' && /[0-9]+px/.test(thickness)) {
+      return Math.min(bArea, Number(thickness.replace('px', '')));
+    }
+    if (typeof thickness === 'number' && thickness <= 1 && thickness >= 0) {
+      return Math.ceil(bArea * thickness);
+    }
+    return bArea;
+  }
+
   drawBar({ ctx, positions }) {
-    const isHorizontal = this.isHorizontal;
+    const { isHorizontal, borderRadius } = this;
     const isStackBar = 'stackIndex' in this;
-    const isBorderRadius = this.borderRadius && this.borderRadius > 0;
+    const isBorderRadius = borderRadius && borderRadius > 0;
     const { x, y, w } = positions;
     const h = isHorizontal ? -positions.h : positions.h;
 
@@ -587,13 +587,26 @@ class Bar {
     ctx.restore();
   }
 
+  /**
+   * Check if point is within bar boundaries
+   * @param {array} offset - [x, y] mouse position
+   * @param {object} barData - bar data object with xp, yp, w, h properties
+   * @returns {boolean} true if point is within bar
+   */
+  isPointInBar(offset, barData) {
+    const [xp, yp] = offset;
+    const { xp: sx, yp: sy, w, h } = barData;
+    const ex = sx + w;
+    const ey = sy + h;
+
+    return (sx <= xp) && (xp <= ex) && (ey <= yp) && (yp <= sy);
+  }
+
   drawRoundedRect(ctx, positions) {
-    const chartRect = this.chartRect;
-    const labelOffset = this.labelOffset;
-    const isHorizontal = this.isHorizontal;
+    const { chartRect, labelOffset, isHorizontal, borderRadius } = this;
     const { x, y } = positions;
     let { w, h } = positions;
-    let r = this.borderRadius;
+    let r = borderRadius;
 
     const squarePath = new Path2D();
     squarePath.rect(

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

@@ -327,76 +327,149 @@ class Line {
     const yp = offset[1];
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data.filter(data => !Util.isNullOrUndefined(data.x));
-    const SPARE_XP = 0.5;
     const isLinearInterpolation = this.useLinearInterpolation();
 
     if (gdata?.length) {
       if (typeof dataIndex === 'number' && this.show) {
         item.data = gdata[dataIndex];
         item.index = dataIndex;
+        if (item.data) {
+          const point = gdata[dataIndex];
+          const yDist = Math.abs(yp - point.yp);
+          const directHitThreshold = 15; // 직접 히트 임계값
+
+          if (yDist <= directHitThreshold) {
+            item.hit = true;
+          }
+        }
       } else if (typeof this.beforeFindItemIndex === 'number' && this.show && useSelectLabelOrItem) {
         item.data = gdata[this.beforeFindItemIndex];
         item.index = this.beforeFindItemIndex;
       } else {
-        let s = 0;
-        let e = gdata.length - 1;
-        const xpInterval = gdata[1]?.xp - gdata[0].xp < 6 ? 1.5 : 6;
-
-        while (s <= e) {
-          const m = Math.floor((s + e) / 2);
-          const x = gdata[m].xp;
-          const y = gdata[m].yp;
-
-          if (x - xpInterval < xp && xp < x + xpInterval) {
-            const curXpInterval = gdata[m]?.xp - (gdata[m - 1]?.xp ?? 0);
-
-            if (gdata[m - 1]?.xp && gdata[m + 1]?.xp && curXpInterval > 0) {
-              const leftXp = xp - gdata[m - 1].xp;
-              const midXp = Math.abs(xp - gdata[m].xp);
-              const rightXp = gdata[m + 1].xp - xp;
-
-              if (
-                Math.abs(this.beforeMouseXp - xp) >= curXpInterval - SPARE_XP
-                && (this.beforeFindItemIndex === m || midXp === rightXp || midXp === leftXp)
-              ) {
-                if (this.beforeMouseXp - xp > 0) {
-                  item.data = gdata[this.beforeFindItemIndex - 1];
-                  item.index = this.beforeFindItemIndex - 1;
-                } else if (this.beforeMouseXp - xp < 0) {
-                  item.data = gdata[this.beforeFindItemIndex + 1];
-                  item.index = this.beforeFindItemIndex + 1;
-                } else if (this.beforeMouseYp !== yp) {
-                  item.data = gdata[this.beforeFindItemIndex];
-                  item.index = this.beforeFindItemIndex;
-                }
-              } else {
-                const closeXp = Math.min(leftXp, midXp, rightXp);
-
-                if (closeXp === leftXp) {
-                  item.data = gdata[m - 1];
-                  item.index = m - 1;
-                } else if (closeXp === rightXp) {
-                  item.data = gdata[m + 1];
-                  item.index = m + 1;
-                } else {
-                  item.data = gdata[m];
-                  item.index = m;
-                }
+        // Axis 트리거 방식: X축 위치에서 가장 가까운 데이터 포인트 찾기
+        let closestXDistance = Infinity;
+        let closestIndex = -1;
+
+        // null이 아닌 유효한 데이터만 필터링
+        const validData = [];
+        gdata.forEach((point, idx) => {
+          if (point.xp !== null && point.yp !== null && point.o !== null) {
+            validData.push({ ...point, originalIndex: idx });
+          }
+        });
+
+        if (validData.length === 0) {
+          return item;
+        }
+
+        // 이진 탐색으로 가장 가까운 포인트 찾기
+        let left = 0;
+        let right = validData.length - 1;
+
+        while (left <= right) {
+          const mid = Math.floor((left + right) / 2);
+          const point = validData[mid];
+          const xDistance = Math.abs(xp - point.xp);
+
+          if (xDistance < closestXDistance) {
+            closestXDistance = xDistance;
+            closestIndex = point.originalIndex;
+          }
+
+          if (point.xp < xp) {
+            left = mid + 1;
+            // 다음 포인트도 확인
+            if (left < validData.length) {
+              const nextDistance = Math.abs(xp - validData[left].xp);
+              if (nextDistance < closestXDistance) {
+                closestXDistance = nextDistance;
+                closestIndex = validData[left].originalIndex;
               }
-            } else {
-              item.data = gdata[m];
-              item.index = m;
             }
+          } else if (point.xp > xp) {
+            right = mid - 1;
+            // 이전 포인트도 확인
+            if (right >= 0) {
+              const prevDistance = Math.abs(xp - validData[right].xp);
+              if (prevDistance < closestXDistance) {
+                closestXDistance = prevDistance;
+                closestIndex = validData[right].originalIndex;
+              }
+            }
+          } else {
+            // 정확히 일치하는 경우
+            break;
+          }
+        }
 
-            if ((y - 6 <= yp) && (yp <= y + 6)) {
-              item.hit = true;
+        // 이진 탐색 후 주변 포인트 추가 확인 (정확도 향상)
+        const foundIdx = validData.findIndex(p => p.originalIndex === closestIndex);
+        if (foundIdx !== -1) {
+          // 앞뒤 2개씩 추가 확인
+          for (let i = Math.max(0, foundIdx - 2);
+            i <= Math.min(validData.length - 1, foundIdx + 2);
+            i++) {
+            const point = validData[i];
+            const xDistance = Math.abs(xp - point.xp);
+            if (xDistance < closestXDistance) {
+              closestXDistance = xDistance;
+              closestIndex = point.originalIndex;
             }
+          }
+        }
 
-            break;
-          } else if (x + xpInterval > xp) {
-            e = m - 1;
+        // 가장 가까운 포인트 설정
+        if (closestIndex !== -1) {
+          // 데이터 간격 계산 - 모든 데이터(null 포함)의 평균 간격 사용
+          let avgInterval = 50;
+          if (gdata.length > 1) {
+            const intervals = [];
+            for (let i = 1; i < gdata.length; i++) {
+              if (gdata[i].xp !== null && gdata[i - 1].xp !== null) {
+                intervals.push(Math.abs(gdata[i].xp - gdata[i - 1].xp));
+              }
+            }
+            if (intervals.length > 0) {
+              avgInterval = intervals.reduce((a, b) => a + b, 0) / intervals.length;
+            }
+          }
+
+          // 두 가지 임계값 설정
+          const strictThreshold = avgInterval * 0.3; // 엄격한 임계값: 데이터 간격의 30%
+          const relaxedThreshold = avgInterval; // 느슨한 임계값: 데이터 간격 전체
+
+          // 1. 먼저 엄격한 임계값으로 정확한 매치 확인
+          if (closestXDistance <= strictThreshold) {
+            // 정확히 일치하거나 매우 가까운 데이터가 있음
+            item.data = gdata[closestIndex];
+            item.index = closestIndex;
           } else {
-            s = m + 1;
+            // 2. 정확한 매치가 없을 때, 현재 X 위치 근처에 다른 유효 데이터가 있는지 확인
+            let hasNearbyValidData = false;
+            for (let i = 0; i < validData.length; i++) {
+              const xDist = Math.abs(xp - validData[i].xp);
+              if (xDist <= strictThreshold) {
+                hasNearbyValidData = true;
+                break;
+              }
+            }
+
+            // 3. 근처에 다른 유효 데이터가 없을 때만 느슨한 임계값 적용
+            if (!hasNearbyValidData && closestXDistance <= relaxedThreshold) {
+              item.data = gdata[closestIndex];
+              item.index = closestIndex;
+            }
+          }
+
+          // Y축 거리를 확인하여 직접 히트 판정
+          if (item.data) {
+            const point = gdata[closestIndex];
+            const yDist = Math.abs(yp - point.yp);
+            const directHitThreshold = 15; // 직접 히트 임계값
+
+            if (yDist <= directHitThreshold) {
+              item.hit = true;
+            }
           }
         }
       }
@@ -430,40 +503,90 @@ class Line {
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data.filter(data => !Util.isNullOrUndefined(data.x));
 
+    if (!gdata.length) {
+      return item;
+    }
+
+    // 동적 감지 범위 계산
+    const gap = gdata.length > 1 ? Math.abs(gdata[1]?.xp - gdata[0]?.xp) : 50;
+    const xpInterval = Math.max(gap * 0.4, 10); // 데이터 간격의 40% 또는 최소 10px
+
     let s = 0;
     let e = gdata.length - 1;
+    let closestIndex = -1;
+    let closestDistance = Infinity;
 
+    // 이진 탐색으로 근처 데이터 찾기
     while (s <= e) {
       const m = Math.floor((s + e) / 2);
       const x = gdata[m].xp;
-      const y = gdata[m].yp;
 
-      if ((x - 2 <= xp) && (xp <= x + 2)) {
-        item.data = gdata[m];
-        item.index = m;
+      // X 좌표가 감지 범위 내에 있는 경우
+      if ((x - xpInterval <= xp) && (xp <= x + xpInterval)) {
+        // 중간점 주변 데이터들과 거리 비교
+        const checkStart = Math.max(0, m - 2);
+        const checkEnd = Math.min(gdata.length - 1, m + 2);
+
+        for (let i = checkStart; i <= checkEnd; i++) {
+          if (gdata[i].xp !== null && gdata[i].yp !== null) {
+            const distance = Math.sqrt(
+              ((xp - gdata[i].xp) ** 2)
+              + ((yp - gdata[i].yp) ** 2),
+            );
+
+            if (distance < closestDistance) {
+              closestDistance = distance;
+              closestIndex = i;
+            }
+          }
+        }
+
+        if (closestIndex !== -1) {
+          item.data = gdata[closestIndex];
+          item.index = closestIndex;
 
-        if ((y - 2 <= yp) && (yp <= y + 2)) {
-          item.hit = true;
+          // 매우 가까운 경우 hit으로 표시
+          if (closestDistance < 5) {
+            item.hit = true;
+          }
         }
 
         return item;
-      } else if (x + 2 < xp) {
+      } else if (x + xpInterval < xp) {
+        // 마우스가 오른쪽에 있는 경우
         if (m < e && xp < gdata[m + 1].xp) {
           const curr = Math.abs(gdata[m].xp - xp);
           const next = Math.abs(gdata[m + 1].xp - xp);
 
           item.data = curr > next ? gdata[m + 1] : gdata[m];
           item.index = curr > next ? m + 1 : m;
+
+          // Y 거리도 확인하여 hit 판정
+          const selectedPoint = item.data;
+          const yDist = Math.abs(yp - selectedPoint.yp);
+          if (yDist < 10) {
+            item.hit = true;
+          }
+
           return item;
         }
         s = m + 1;
       } else {
+        // 마우스가 왼쪽에 있는 경우
         if (m > 0 && xp > gdata[m - 1].xp) {
           const prev = Math.abs(gdata[m - 1].xp - xp);
           const curr = Math.abs(gdata[m].xp - xp);
 
           item.data = prev > curr ? gdata[m] : gdata[m - 1];
           item.index = prev > curr ? m : m - 1;
+
+          // Y 거리도 확인하여 hit 판정
+          const selectedPoint = item.data;
+          const yDist = Math.abs(yp - selectedPoint.yp);
+          if (yDist < 10) {
+            item.hit = true;
+          }
+
           return item;
         }
         e = m - 1;