[#1038] chart select item 옵션 관련 로직 개선 (#1060)

Co-authored-by: jinhee park <jinhee@ex-em.com>

docs/views/barChart/api/barChart.md

@@ -3,14 +3,27 @@
 
 ```
 <ev-chart
+    v-model:selectedItem="선택된 데이터 정보"
     :data="차트데이터"
     :options="차트속성"
     :resize-timeout="debounce wait시간(단위: ms)"
 />
 ```
 
 >## 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일 경우 빈 객체를 반환
+

docs/views/barChart/example/Event.vue

@@ -2,18 +2,24 @@
   <div class="case">
     <ev-chart
       ref="chart"
+      v-model:selectedItem="defaultSelectItem"
       :data="chartData"
       :options="chartOptions"
       @click="onClick"
       @dbl-click="onDblClick"
     />
     <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,
       };
     },
   };

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,
       };
     },
   };

docs/views/lineChart/api/lineChart.md

@@ -3,14 +3,27 @@
 
 ```
 <ev-chart
+    v-model:selectedItem="선택된 데이터 정보"
     :data="차트데이터"
     :options="차트속성"
     :resize-timeout="debounce wait시간(단위: ms)"
 />
 ```
 
 >## 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일 경우 빈 객체를 반환

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,
       };

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",

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,13 +37,15 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
       'click',
       'dbl-click',
       'drag-select',
+      'update:selectedItem',
     ],
     setup(props) {
       let evChart = {};
       let isInit = false;
 
       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,
       };
     },
   };