[#1347][EXEM]Line Chart > Tooltip > 마우스 오버 시 일부 시점 포인트 안되는 현상 (#1349)

docs/views/brushChart/example/SelectLabelGroup.vue

@@ -144,7 +144,7 @@ export default {
       let val3;
       let val4;
 
-      if (ix >= 3) {
+      if (ix < 20 || ix > 40) {
         val = Math.floor(Math.random() * ((5000 - 5) + 1)) + 5;
         val2 = Math.floor(Math.random() * ((5000 - 5) + 1)) + 5;
         val3 = Math.floor(Math.random() * ((5000 - 5) + 1)) + 5;
@@ -161,7 +161,7 @@ export default {
     };
 
     onMounted(() => {
-      for (let ix = 0; ix < 10; ix++) {
+      for (let ix = 0; ix < 400; ix++) {
         addRandomChartLabel();
         addRandomChartData(ix);
       }

package.json

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

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

@@ -27,6 +27,9 @@ class Line {
       highlight: { opacity: 1, lineWidth: 2 },
     };
     this.data = [];
+    this.beforeMouseXp = 0;
+    this.beforeMouseYp = 0;
+    this.beforeFindItemIndex = -1;
     this.size = {
       comboOffset: 0,
     };
@@ -233,39 +236,83 @@ class Line {
 
   /**
    * Find graph item
-   * @param {array}  offset       mouse position
+   * @param {array}    offset          mouse position
+   * @param {boolean}  isHorizontal
+   * @param {number}   dataIndex       selected label data index
+   * @param {boolean}  useSelectLabelOrItem   used to display select label/item at tooltip location
    *
    * @returns {object} graph item
    */
-  findGraphData(offset, isHorizontal, dataIndex) {
+  findGraphData(offset, isHorizontal, dataIndex, useSelectLabelOrItem) {
     const xp = offset[0];
     const yp = offset[1];
     const item = { data: null, hit: false, color: this.color };
     const gdata = this.data;
+    const SPARE_XP = 0.5;
 
     if (gdata?.length) {
       if (typeof dataIndex === 'number' && this.show) {
         item.data = gdata[dataIndex];
         item.index = dataIndex;
+      } 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)) {
-            item.data = gdata[m];
-            item.index = m;
+          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;
+                }
+              }
+            } else {
+              item.data = gdata[m];
+              item.index = m;
+            }
 
             if ((y - 6 <= yp) && (yp <= y + 6)) {
               item.hit = true;
             }
-            return item;
+
+            break;
           } else if (x + xpInterval > xp) {
             e = m - 1;
           } else {
@@ -275,6 +322,15 @@ class Line {
       }
     }
 
+    if (!useSelectLabelOrItem) {
+      this.beforeMouseXp = xp;
+      this.beforeMouseYp = yp;
+
+      if (typeof item.index === 'number') {
+        this.beforeFindItemIndex = item.index;
+      }
+    }
+
     return item;
   }
 

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

@@ -554,6 +554,7 @@ const modules = {
         [dataInfo.xp, dataInfo.yp],
         useApproximate,
         dataIndex,
+        true,
       )];
     } else {
       const seriesList = Object.entries(this.seriesList);
@@ -579,6 +580,7 @@ const modules = {
           [dataInfo?.xp ?? 0, dataInfo?.yp ?? 0],
           useApproximate,
           idx,
+          true,
         );
       });
     }
@@ -606,9 +608,16 @@ const modules = {
    * @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
+   *
    * @returns {object} clicked item information
    */
-  getItemByPosition(offset, useApproximate = false, dataIndex) {
+  getItemByPosition(
+    offset,
+    useApproximate = false,
+    dataIndex,
+    useSelectLabelOrItem = false,
+  ) {
     const seriesIDs = Object.keys(this.seriesList);
     const isHorizontal = !!this.options.horizontal;
 
@@ -627,7 +636,13 @@ const modules = {
       const findFn = useApproximate ? series.findApproximateData : series.findGraphData;
 
       if (findFn) {
-        const item = findFn.call(series, offset, isHorizontal, dataIndex);
+        const item = findFn.call(
+          series,
+          offset,
+          isHorizontal,
+          dataIndex,
+          useSelectLabelOrItem,
+        );
         const data = item.data;
         const index = item.index;
 
@@ -831,6 +846,7 @@ const modules = {
         [offsetX, y],
         selectLabel?.useApproximateValue,
         dataIndex,
+        true,
       );
       labelIndex = hitInfo.maxIndex ?? -1;
     }