From 86504e2878ed395a4d303c3bb083038732620d66 Mon Sep 17 00:00:00 2001
From: Jin-Hee Park <53548023+jhee564@users.noreply.github.com>
Date: Tue, 8 Feb 2022 15:40:51 +0900
Subject: [PATCH] =?UTF-8?q?[#1038]=20chart=20select=20item=20=EC=98=B5?=
 =?UTF-8?q?=EC=85=98=20=EA=B4=80=EB=A0=A8=20=EB=A1=9C=EC=A7=81=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0=20(#1060)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: jinhee park <jinhee@ex-em.com>
---
 docs/views/barChart/api/barChart.md           |  34 +++--
 docs/views/barChart/example/Event.vue         |  31 +++-
 docs/views/barChart/example/Time.vue          |  14 ++
 docs/views/lineChart/api/lineChart.md         |  36 +++--
 docs/views/lineChart/example/Event.vue        |   7 +
 package.json                                  |   2 +-
 src/components/chart/Chart.vue                |  18 ++-
 src/components/chart/chart.core.js            |  25 +++-
 src/components/chart/element/element.tip.js   |  34 +++--
 src/components/chart/model/model.store.js     | 120 ++++++++++++----
 .../chart/plugins/plugins.interaction.js      | 132 ++----------------
 src/components/chart/uses.js                  |  10 +-
 12 files changed, 268 insertions(+), 195 deletions(-)

diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md
index ffc2b40fb..6e8a98cf1 100644
--- a/docs/views/barChart/api/barChart.md
+++ b/docs/views/barChart/api/barChart.md
@@ -3,6 +3,7 @@
 
 ```
 <ev-chart
+    v-model:selectedItem="선택된 데이터 정보"
     :data="차트데이터"
     :options="차트속성"
     :resize-timeout="debounce wait시간(단위: ms)"
@@ -10,7 +11,19 @@
 ```
 
 >## Props
-### 1. data  
+### 1. v-model:selectedItem
+ - option에서 [selectItem](#selectitem) 옵션을 사용할 경우 유효한 바인딩
+ - 현재 선택된 Item에 대한 정보 (seriesID, dataIndex)
+#### Example
+```
+const selectedItem = ref({
+    seriesID: 'series1', // Series ID (key)
+    dataIndex: 0, // 몇번째 데이터인지
+});
+```
+
+
+### 2. data  
   | 이름 | 타입 | 디폴트 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | series | Object | {} | 특정 데이터에 대한 시리즈 옵션 |  |
@@ -66,7 +79,7 @@ const chartData = {
 }
 ```
   
-### 2. options 
+### 3. options 
   | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | type | String | '' | series 별로 type값을 지정하지 않을 경우 일괄 적용될 차트의 타입 | 'bar', 'pie', 'line', 'scatter' |
@@ -241,15 +254,16 @@ const chartData = {
 | tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상  | |
 | tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상  | |
 
->### Event
-| 이름 | 파라미터 | 설명 |
- |------|----------|------|
- | click | selectedItem | 클릭된 series의 label, value, seriesID 값을 반환 |
- | dbl-click | selectedItem | 더블 클릭된 series의 label, value, seriesID 값을 반환 |
- * 단, `selectedItem` 옵션의 `use`값이 `true` 이어야 `selectedItem` 객체를 반환하며 false일 경우 빈 객체를 반환
 
-
-### 3. resize-timeout
+### 4. resize-timeout
 - Default : 0
 - debounce 사용. 연속으로 이벤트가 발생한 경우, 마지막 이벤트가 끝난 시점을 기준으로 `주어진 시간 (resize-timeout)` 이후 콜백 실행
 
+
+### 5. Event
+| 이름 | 파라미터 | 설명 |
+ |------|----------|------|
+| click | selectedItem | 클릭된 series의 label, value, seriesID 값을 반환 |
+| dbl-click | selectedItem | 더블 클릭된 series의 label, value, seriesID 값을 반환 |
+* 단, `selectedItem` 옵션의 `use`값이 `true` 이어야 `selectedItem` 객체를 반환하며 false일 경우 빈 객체를 반환
+
diff --git a/docs/views/barChart/example/Event.vue b/docs/views/barChart/example/Event.vue
index 71f6c38f2..094f868fe 100644
--- a/docs/views/barChart/example/Event.vue
+++ b/docs/views/barChart/example/Event.vue
@@ -2,6 +2,7 @@
   <div class="case">
     <ev-chart
       ref="chart"
+      v-model:selectedItem="defaultSelectItem"
       :data="chartData"
       :options="chartOptions"
       @click="onClick"
@@ -9,11 +10,16 @@
     />
     <div class="description">
       <ev-button
-        @click="selectValue1">
-        select Value1
+        @click="toggleSelectData">
+        select toggle 1 - 2
       </ev-button>
       <br><br>
       <div>
+        <div class="badge yellow">
+          기본 선택값 v-model
+        </div>
+        {{ defaultSelectItem }}
+        <br><br>
         <div class="badge yellow">
           클릭된 라벨
         </div>
@@ -38,10 +44,12 @@
       const chartData = {
         series: {
           series1: { name: 'series#1' },
+          series2: { name: 'series#2' },
         },
         labels: ['value1', 'value2', 'value3', 'value4', 'value5'],
         data: {
           series1: [100, 150, 51, 150, 350],
+          series2: [100, 150, 51, 150, 450],
         },
       };
 
@@ -75,6 +83,12 @@
         selectItem: {
           use: true,
           showTextTip: true,
+          tipBackground: '#FF00FF',
+        },
+        maxTip: {
+          use: true,
+          showTextTip: true,
+          tipBackground: '#FF0000',
         },
       };
 
@@ -88,8 +102,14 @@
         dblClickedLabel.value = target.label;
       };
 
-      const selectValue1 = () => {
-        chart.value.selectItemByLabel('value1');
+      const defaultSelectItem = ref({
+        seriesID: 'series1',
+        dataIndex: 1,
+      });
+
+      const toggleSelectData = () => {
+        const idx = defaultSelectItem.value.dataIndex;
+        defaultSelectItem.value.dataIndex = idx === 1 ? 2 : 1;
       };
 
       return {
@@ -98,9 +118,10 @@
         chartOptions,
         clickedLabel,
         dblClickedLabel,
+        defaultSelectItem,
         onClick,
         onDblClick,
-        selectValue1,
+        toggleSelectData,
       };
     },
   };
diff --git a/docs/views/barChart/example/Time.vue b/docs/views/barChart/example/Time.vue
index 9141e0120..08f4ca628 100644
--- a/docs/views/barChart/example/Time.vue
+++ b/docs/views/barChart/example/Time.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="case">
     <ev-chart
+      v-model:selectedItem="defaultSelectItem"
       :data="chartData"
       :options="chartOptions"
     />
@@ -51,15 +52,22 @@
           tipBackground: '#DBDBDB',
           tipTextColor: '#000000',
         },
+        selectItem: {
+          use: true,
+          showTextTip: true,
+          tipBackground: '#FF00FF',
+        },
       };
 
       const chartData = reactive({
         series: {
           series1: { name: 'series#1' },
+          series2: { name: 'series#2' },
         },
         labels: [],
         data: {
           series1: [],
+          series2: [],
         },
       });
 
@@ -103,10 +111,16 @@
         clearTimeout(liveInterval.value);
       });
 
+      const defaultSelectItem = ref({
+        seriesID: 'series1',
+        dataIndex: 9,
+      });
+
       return {
         chartData,
         chartOptions,
         isLive,
+        defaultSelectItem,
       };
     },
   };
diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md
index 8a928bb6e..a9cc5dee6 100644
--- a/docs/views/lineChart/api/lineChart.md
+++ b/docs/views/lineChart/api/lineChart.md
@@ -3,6 +3,7 @@
 
 ```
 <ev-chart
+    v-model:selectedItem="선택된 데이터 정보"
     :data="차트데이터"
     :options="차트속성"
     :resize-timeout="debounce wait시간(단위: ms)"
@@ -10,7 +11,19 @@
 ```
 
 >## Props
-### 1. data  
+### 1. v-model:selectedItem
+- option에서 [selectItem](#selectitem) 옵션을 사용할 경우 유효한 바인딩
+- 현재 선택된 Item에 대한 정보 (seriesID, dataIndex)
+#### Example
+```
+const selectedItem = ref({
+    seriesID: 'series1', // Series ID (key)
+    dataIndex: 0, // 몇번째 데이터인지
+});
+```
+
+
+### 2. data  
   | 이름 | 타입 | 디폴트 | 설명 | 종류 |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | series | Object | {} | 특정 데이터에 대한 시리즈 옵션 |  |
@@ -55,7 +68,7 @@ const chartData =
 };
 ```
   
-### 2. options 
+### 3. options 
   | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | type | String | '' | series 별로 type값을 지정하지 않을 경우 일괄 적용될 차트의 타입 | 'bar', 'pie', 'line', 'scatter' |
@@ -216,15 +229,16 @@ const chartData =
 | fillColor | Hex, RGB, RGBA Code(String) | '#38ACEC' | 선택 영역 색상 | |
 | opacity | Number | 0.65 | 선택 영역 불투명도 | 0 ~ 1 |
 
->### Event
-| 이름 | 파라미터 | 설명 |
- |------|----------|------|
- | click | selectedItem | 클릭된 series의 label, value, seriesID 값을 반환 |
- | dbl-click | selectedItem | 더블 클릭된 series의 label, value, seriesID 값을 반환 |
- | drag-select | data, range | 그래프에서 드래그를 해서 선택영역 안의 데이터와 선택영역에 대한 범위 값을 얻을 수 있다. <br><br> ex) data : [{ seriesName, seriesId, items: [] }, {...}, {...}] <br> ex) range : { xMin, xMax, yMin, yMax } <br><br> data의 요소 propery중 items 는 해당 Series의 데이터 들이 있으며 x, y값은 데이터 기반 <xp, yp 는 Canvas기반의 좌표 값 |
- * 단, `selectedItem` 옵션의 `use`값이 `true` 이어야 `selectedItem` 객체를 반환하며 false일 경우 빈 객체를 반환
 
-
-### 3. resize-timeout
+### 4. resize-timeout
 - Default : 0
 - debounce 사용. 연속으로 이벤트가 발생한 경우, 마지막 이벤트가 끝난 시점을 기준으로 `주어진 시간 (resize-timeout)` 이후 콜백 실행
+
+
+### 5. Event
+| 이름 | 파라미터 | 설명 |
+ |------|----------|------|
+| click | selectedItem | 클릭된 series의 label, value, seriesID 값을 반환 |
+| dbl-click | selectedItem | 더블 클릭된 series의 label, value, seriesID 값을 반환 |
+| drag-select | data, range | 그래프에서 드래그를 해서 선택영역 안의 데이터와 선택영역에 대한 범위 값을 얻을 수 있다. <br><br> ex) data : [{ seriesName, seriesId, items: [] }, {...}, {...}] <br> ex) range : { xMin, xMax, yMin, yMax } <br><br> data의 요소 propery중 items 는 해당 Series의 데이터 들이 있으며 x, y값은 데이터 기반 <xp, yp 는 Canvas기반의 좌표 값 |
+* 단, `selectedItem` 옵션의 `use`값이 `true` 이어야 `selectedItem` 객체를 반환하며 false일 경우 빈 객체를 반환
diff --git a/docs/views/lineChart/example/Event.vue b/docs/views/lineChart/example/Event.vue
index 1f38579ee..77e2841ed 100644
--- a/docs/views/lineChart/example/Event.vue
+++ b/docs/views/lineChart/example/Event.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="case">
     <ev-chart
+      v-model:selectedItem="defaultSelectItem"
       :data="chartData"
       :options="chartOptions"
       @click="onClick"
@@ -86,11 +87,17 @@
         dblClickedLabel.value = dayjs(target.label).format('YYYY-MM-DD');
       };
 
+      const defaultSelectItem = ref({
+        seriesID: 'series1',
+        dataIndex: chartData.data.series1.length - 1,
+      });
+
       return {
         chartData,
         chartOptions,
         clickedLabel,
         dblClickedLabel,
+        defaultSelectItem,
         onClick,
         onDblClick,
       };
diff --git a/package.json b/package.json
index 6747564a0..5f67fbac8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",
diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index 4a53eb832..618af8bca 100644
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -16,6 +16,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
   export default {
     name: 'EvChart',
     props: {
+      selectedItem: {
+        type: Object,
+        default: null,
+      },
       options: {
         type: Object,
         default: () => ({}),
@@ -33,6 +37,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'click',
       'dbl-click',
       'drag-select',
+      'update:selectedItem',
     ],
     setup(props) {
       let evChart = {};
@@ -40,6 +45,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
 
       const {
         eventListeners,
+        selectInfo,
         getNormalizedData,
         getNormalizedOptions,
       } = useModel();
@@ -60,6 +66,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
           normalizedData,
           normalizedOptions,
           eventListeners,
+          selectInfo,
         );
       };
 
@@ -93,6 +100,12 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
             updateSelTip: { update: true, keepDomain: false },
           });
         }, { deep: true });
+
+        await watch(() => props.selectedItem, (newValue) => {
+          if (newValue?.seriesID && !isNaN(newValue?.dataIndex)) {
+            evChart.selectItemByData(newValue);
+          }
+        }, { deep: true });
       });
 
       onBeforeUnmount(() => {
@@ -120,16 +133,11 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       }, props.resizeTimeout);
 
-      const selectItemByLabel = (label) => {
-        evChart.selectItemByLabel(label);
-      };
-
       return {
         wrapper,
         wrapperStyle,
         onResize,
         redraw,
-        selectItemByLabel,
       };
     },
   };
diff --git a/src/components/chart/chart.core.js b/src/components/chart/chart.core.js
index 80e336184..5ee57e58a 100644
--- a/src/components/chart/chart.core.js
+++ b/src/components/chart/chart.core.js
@@ -13,7 +13,7 @@ import Pie from './plugins/plugins.pie';
 import Tip from './element/element.tip';
 
 class EvChart {
-  constructor(target, data, options, listeners) {
+  constructor(target, data, options, listeners, defaultSelectInfo) {
     Object.keys(Model).forEach(key => Object.assign(this, Model[key]));
     Object.assign(this, Title);
     Object.assign(this, Legend);
@@ -63,6 +63,8 @@ class EvChart {
       charts: { pie: [], bar: [], line: [], scatter: [] },
       count: 0,
     };
+
+    this.defaultSelectInfo = defaultSelectInfo;
   }
 
   /**
@@ -199,6 +201,26 @@ class EvChart {
     }
   }
 
+  /**
+   * Draw Tip with hitInfo and defaultSelectInfo
+   * @param hitInfo
+   */
+  drawTip(hitInfo) {
+    let tipLocationInfo;
+
+    if (hitInfo) {
+      tipLocationInfo = hitInfo;
+    } else if (this.lastHitInfo) {
+      tipLocationInfo = this.lastHitInfo;
+    } else if (this.defaultSelectInfo) {
+      tipLocationInfo = this.getItem(this.defaultSelectInfo, false);
+    } else {
+      tipLocationInfo = null;
+    }
+
+    this.drawTips(tipLocationInfo);
+  }
+
   /**
    * Create axes
    * @param {string} dir    axis direction
@@ -533,6 +555,7 @@ class EvChart {
       if (!updateSelTip.keepDomain) {
         this.lastTip.pos = null;
         this.lastHitInfo = null;
+        this.defaultSelectInfo = null;
       }
     }
 
diff --git a/src/components/chart/element/element.tip.js b/src/components/chart/element/element.tip.js
index 2f0b5cf82..55d33b7ae 100644
--- a/src/components/chart/element/element.tip.js
+++ b/src/components/chart/element/element.tip.js
@@ -3,23 +3,21 @@ import Canvas from '../helpers/helpers.canvas';
 
 const modules = {
   /**
-   * Draw TextTip with hitInfo
-   * @param {object} [hitInfo=undefined]    mouse hit information
+   * Draw TextTip with tip's locationInfo
+   * @param {object} [tipLocationInfo=undefined]   tip location information
    *
    * @returns {undefined}
    */
-  drawTip(hitInfo) {
+  drawTips(tipLocationInfo) {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const maxTipOpt = opt.maxTip;
     const selectItemOpt = opt.selectItem;
+    let maxArgs;
 
-    if (maxTipOpt.use || selectItemOpt.use) {
+    if (maxTipOpt.use) {
       const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
-      const selSID = (hitInfo && hitInfo.sId ? hitInfo.sId : this.lastHitInfo?.sId) ?? maxSID;
-
-      const maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
-      const selArgs = this.calculateTipInfo(this.seriesList[selSID], 'sel', hitInfo);
+      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
 
       if (maxTipOpt.use && maxArgs) {
         this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
@@ -28,11 +26,25 @@ const modules = {
           this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
         }
       }
+    }
+
+    if (selectItemOpt.use && tipLocationInfo) {
+      const seriesInfo = this.seriesList[tipLocationInfo?.sId];
+
+      if (!seriesInfo?.show) {
+        return;
+      }
+
+      const selArgs = this.calculateTipInfo(
+        seriesInfo,
+        'sel',
+        tipLocationInfo,
+      );
 
       if (selectItemOpt.use && selArgs) {
         let isSamePos = false;
 
-        if (maxTipOpt.use && maxArgs && maxArgs.dp === selArgs.dp) {
+        if (maxTipOpt.use && maxArgs?.dp === selArgs.dp) {
           isSamePos = true;
         }
 
@@ -45,8 +57,8 @@ const modules = {
         }
       }
 
-      if (hitInfo && hitInfo.label !== null) {
-        this.lastHitInfo = hitInfo;
+      if (tipLocationInfo && tipLocationInfo.label !== null) {
+        this.lastHitInfo = tipLocationInfo;
       }
     }
   },
diff --git a/src/components/chart/model/model.store.js b/src/components/chart/model/model.store.js
index c00013efa..7830f5045 100644
--- a/src/components/chart/model/model.store.js
+++ b/src/components/chart/model/model.store.js
@@ -387,43 +387,16 @@ const modules = {
   },
 
   /**
-   * Get graph item by label index
-   * @param {number} pos  label index position
-   *
-   * @returns {object} graph item
-   */
-  getItemByLabelIndex(pos) {
-    if (pos < 0) {
-      return false;
-    }
-
-    return this.getItem(pos);
-  },
-
-  /**
-   * Get graph item by label
-   * @param {any} label  label value for searching graph item
+   * Get graph items for each series by label index
+   * @param {number} labelIndex  label index
    *
    * @returns {object} graph item
    */
-  getItemByLabel(label) {
-    if (label === null || label === undefined) {
+  getItemByLabelIndex(labelIndex) {
+    if (labelIndex < 0) {
       return false;
     }
 
-    const labels = this.data.labels;
-    const labelIndex = labels && labels.indexOf ? labels.indexOf(label) : -1;
-
-    return this.getItem(labelIndex);
-  },
-
-  /**
-   * Get graph items for each series by label index
-   * @param {number} labelIndex  label index
-   *
-   * @returns {object} graph item
-   */
-  getItem(labelIndex) {
     const sIds = Object.keys(this.seriesList);
     const isHorizontal = !!this.options.horizontal;
 
@@ -479,6 +452,91 @@ const modules = {
     return findInfo;
   },
 
+  getItem({ seriesID, dataIndex }, useApproximate = false) {
+    const dataInfo = this.getDataByValues(seriesID, dataIndex);
+    return this.getItemByPosition([dataInfo.xp, dataInfo.yp], useApproximate);
+  },
+  /**
+   *
+   * @param seriesID
+   * @param dataIndex
+   * @returns {*}
+   */
+  getDataByValues(seriesID, dataIndex) {
+    const series = this.seriesList[seriesID];
+    if (!series || isNaN(dataIndex) || dataIndex < 0 || series?.data.length <= dataIndex) {
+      return false;
+    }
+
+    return series.data[dataIndex];
+  },
+
+  /**
+   * Find graph item by position x and y
+   * @param {array}   offset          position x and y
+   * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
+   *
+   * @returns {object} clicked item information
+   */
+  getItemByPosition(offset, useApproximate = false) {
+    const sIds = Object.keys(this.seriesList);
+    const isHorizontal = !!this.options.horizontal;
+
+    let maxl = null;
+    let maxp = null;
+    let maxg = null;
+    let maxSID = '';
+    let acc = 0;
+    let useStack = false;
+    let maxIndex = null;
+
+    for (let ix = 0; ix < sIds.length; ix++) {
+      const sId = sIds[ix];
+      const series = this.seriesList[sId];
+      const findFn = useApproximate ? series.findApproximateData : series.findGraphData;
+
+      if (findFn) {
+        const item = findFn.call(series, offset, isHorizontal);
+        const data = item.data;
+        const index = item.index;
+
+        if (data) {
+          const ldata = isHorizontal ? data.y : data.x;
+          const lp = isHorizontal ? data.yp : data.xp;
+
+          if (ldata !== null && ldata !== undefined) {
+            const g = isHorizontal ? data.o || data.x : data.o || data.y;
+
+            if (series.stackIndex) {
+              acc += !isNaN(data.o) ? data.o : 0;
+              useStack = true;
+            } else {
+              acc += data.y;
+            }
+
+            if (maxg === null || maxg <= g) {
+              maxg = g;
+              maxSID = sId;
+              maxl = ldata;
+              maxp = lp;
+              maxIndex = index;
+            }
+          }
+        }
+      }
+    }
+
+    return {
+      label: maxl,
+      pos: maxp,
+      value: maxg === null ? 0 : maxg,
+      sId: maxSID,
+      acc,
+      useStack,
+      maxIndex,
+    };
+  },
+
   /**
    * Create min/max information for all of data
    * @property seriesList
diff --git a/src/components/chart/plugins/plugins.interaction.js b/src/components/chart/plugins/plugins.interaction.js
index a4242d02a..a55770075 100644
--- a/src/components/chart/plugins/plugins.interaction.js
+++ b/src/components/chart/plugins/plugins.interaction.js
@@ -101,7 +101,7 @@ const modules = {
 
       if (selectItem.use) {
         const offset = this.getMousePosition(e);
-        const hitInfo = this.findClickedData(offset, selectItem.useApproximateValue);
+        const hitInfo = this.getItemByPosition(offset, selectItem.useApproximateValue);
 
 
         if (hitInfo.label !== null) {
@@ -125,13 +125,18 @@ const modules = {
       const args = { e };
       if (this.options.selectItem.use) {
         const offset = this.getMousePosition(e);
-        const hitInfo = this.findClickedData(offset);
+        const hitInfo = this.getItemByPosition(offset, false);
 
         if (hitInfo.label !== null) {
           this.render(hitInfo);
         }
 
-        ({ label: args.label, value: args.value, sId: args.seriesId } = hitInfo);
+        ({
+          label: args.label,
+          value: args.value,
+          sId: args.seriesId,
+          maxIndex: args.dataIndex,
+        } = hitInfo);
       }
 
       if (typeof this.listeners.click === 'function') {
@@ -398,130 +403,21 @@ const modules = {
   },
 
   /**
-   * Find clicked graph item on mouse position
-   * @param {array}   offset          return value from getMousePosition()
-   * @param {boolean} useApproximate  if it's true. it'll look for closed item on mouse position
-   *
-   * @returns {object} clicked item information
-   */
-  findClickedData(offset, useApproximate) {
-    const sIds = Object.keys(this.seriesList);
-    const isHorizontal = !!this.options.horizontal;
-
-    let maxl = null;
-    let maxp = null;
-    let maxg = null;
-    let maxSID = '';
-    let acc = 0;
-    let useStack = false;
-    let maxIndex = null;
-
-    for (let ix = 0; ix < sIds.length; ix++) {
-      const sId = sIds[ix];
-      const series = this.seriesList[sId];
-      const findFn = useApproximate ? series.findApproximateData : series.findGraphData;
-
-      if (findFn) {
-        const item = findFn.call(series, offset, isHorizontal);
-        const data = item.data;
-        const index = item.index;
-
-        if (data) {
-          const ldata = isHorizontal ? data.y : data.x;
-          const lp = isHorizontal ? data.yp : data.xp;
-
-          if (ldata !== null && ldata !== undefined) {
-            const g = isHorizontal ? data.o || data.x : data.o || data.y;
-
-            if (series.stackIndex) {
-              acc += !isNaN(data.o) ? data.o : 0;
-              useStack = true;
-            } else {
-              acc += data.y;
-            }
-
-            if (maxg === null || maxg <= g) {
-              maxg = g;
-              maxSID = sId;
-              maxl = ldata;
-              maxp = lp;
-              maxIndex = index;
-            }
-          }
-        }
-      }
-    }
-
-    return {
-      label: maxl,
-      pos: maxp,
-      value: maxg === null ? 0 : maxg,
-      sId: maxSID,
-      acc,
-      useStack,
-      maxIndex,
-    };
-  },
-
-  /**
-   * Find graph item by label entered from user
-   * @param {any} label   label value
    *
-   * @returns {boolean} if it wasn't able to find it, return false. if not, return true and render.
+   * @param targetInfo
+   * @returns {boolean}
    */
-  selectItemByLabel(label) {
-    const findInfo = this.getItemByLabel(label);
+  selectItemByData(targetInfo) {
+    const foundInfo = this.getItem(targetInfo, false);
 
-    if (findInfo) {
-      this.render(findInfo);
+    if (foundInfo) {
+      this.render(foundInfo);
     } else {
       return false;
     }
 
     return true;
   },
-  findHitItem2(offset) {
-    const mouseX = offset[0];
-    const mouseY = offset[1];
-
-    const width = this.chartRect.chartWidth;
-    const height = this.chartRect.chartHeight;
-    const centerX = (width / 2) + this.chartRect.padding.left;
-    const centerY = (height / 2) + this.chartRect.padding.top;
-
-    const dx = mouseX - centerX;
-    const dy = mouseY - centerY;
-
-    let angle;
-    angle = ((Math.atan2(-dy, -dx) * 180) / Math.PI) - 90;
-    angle = angle < 0 ? 360 + angle : angle;
-    const rad = ((angle * Math.PI) / 180) + (1.5 * Math.PI);
-    const distance = Math.round(Math.sqrt((dx ** 2) + (dy ** 2)));
-
-    const graphData = this.graphData;
-    let gdata;
-    let dsIndex = null;
-    let sId = null;
-
-    for (let ix = 0, ixLen = graphData.length; ix < ixLen; ix++) {
-      gdata = graphData[ix];
-      if (distance > gdata.ir && distance < gdata.or) {
-        dsIndex = ix;
-      }
-    }
-
-    if (graphData[dsIndex]) {
-      for (let ix = 0, ixLen = graphData[dsIndex].data.length; ix < ixLen; ix++) {
-        gdata = graphData[dsIndex].data[ix];
-
-        if (rad > gdata.sa && rad < gdata.ea) {
-          sId = gdata.id;
-        }
-      }
-    }
-
-    return { dsIndex, sId };
-  },
 
   /**
    * Find items by series within a range
diff --git a/src/components/chart/uses.js b/src/components/chart/uses.js
index 92d87b8f8..2dc81c09a 100644
--- a/src/components/chart/uses.js
+++ b/src/components/chart/uses.js
@@ -1,5 +1,5 @@
 import { ref, computed, getCurrentInstance, nextTick } from 'vue';
-import { defaultsDeep } from 'lodash-es';
+import { cloneDeep, defaultsDeep } from 'lodash-es';
 import { getQuantity } from '@/common/utils';
 
 const DEFAULT_OPTIONS = {
@@ -97,7 +97,7 @@ const DEFAULT_DATA = {
 };
 
 export const useModel = () => {
-  const { emit } = getCurrentInstance();
+  const { props, emit } = getCurrentInstance();
 
   const getNormalizedOptions = (options) => {
     const normalizedOptions = defaultsDeep({}, options, DEFAULT_OPTIONS);
@@ -110,9 +110,14 @@ export const useModel = () => {
   };
   const getNormalizedData = data => defaultsDeep(data, DEFAULT_DATA);
 
+  const selectInfo = cloneDeep(props.selectedItem);
+
   const eventListeners = {
     click: async (e) => {
       await nextTick();
+      if (e.label) {
+        emit('update:selectedItem', { seriesID: e.seriesId, dataIndex: e.dataIndex });
+      }
       emit('click', e);
     },
     'dbl-click': async (e) => {
@@ -127,6 +132,7 @@ export const useModel = () => {
 
   return {
     eventListeners,
+    selectInfo,
     getNormalizedData,
     getNormalizedOptions,
   };