[#1066] Chart > selectItem > showTextTip옵션 개선

docs/views/barChart/api/barChart.md

@@ -245,8 +245,9 @@ const chartData = {
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | false | 차트 아이템 선택 기능  | |
-| showTextTip | Boolean | false | 선택한 label의 최대값 표시  | |
-| showTip | Boolean | false | 선택한 label의 상단에 화살표 표시  | |
+| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부  | |
+| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값  | 'value', 'label |
+| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부  | |
 | showIndicator | Boolean | false | 선택한 label의 indicator 표시  | |
 | fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정  | |
 | useApproximateValue | Boolean | false | 가까운 label을 선택  | |

docs/views/barChart/example/Time.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="case">
     <ev-chart
-      v-model:selectedItem="defaultSelectItem"
       :data="chartData"
       :options="chartOptions"
     />
@@ -52,11 +51,6 @@
           tipBackground: '#DBDBDB',
           tipTextColor: '#000000',
         },
-        selectItem: {
-          use: true,
-          showTextTip: true,
-          tipBackground: '#FF00FF',
-        },
       };
 
       const chartData = reactive({
@@ -111,16 +105,10 @@
         clearTimeout(liveInterval.value);
       });
 
-      const defaultSelectItem = ref({
-        seriesID: 'series1',
-        dataIndex: 9,
-      });
-
       return {
         chartData,
         chartOptions,
         isLive,
-        defaultSelectItem,
       };
     },
   };

docs/views/lineChart/api/lineChart.md

@@ -212,8 +212,9 @@ const chartData =
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | use | Boolean | false | 차트 아이템 선택 기능  | |
-| showTextTip | Boolean | false | 선택한 label의 최대값 표시  | |
-| showTip | Boolean | false | 선택한 label의 상단에 화살표 표시  | |
+| showTextTip | Boolean | false | 선택한 위치의 TextTip(text 포함 화살표, 흡사 말풍선) 생성 여부  | |
+| tipText | String | 'value' | 선택한 위치에 TextTip을 생성한다면 어떤 값  | 'value', 'label |
+| showTip | Boolean | false | 선택한 위치의 Tip(화살표) 생성 여부  | |
 | showIndicator | Boolean | false | 선택한 label의 indicator 표시  | |
 | fixedPosTop | Boolean | false | indicator 및 tip의 위치를 최대값으로 고정  | |
 | useApproximateValue | Boolean | false | 가까운 label을 선택  | |

docs/views/lineChart/example/Event.vue

@@ -8,6 +8,11 @@
       @dbl-click="onDblClick"
     />
     <div class="description">
+      <div class="badge yellow">
+        기본 선택값 v-model
+      </div>
+      {{ defaultSelectItem }}
+      <br><br>
       <div class="badge yellow">
         클릭된 라벨
       </div>
@@ -69,11 +74,18 @@
           type: 'linear',
           showGrid: true,
           startToZero: true,
-          autoScaleRatio: 0.1,
+          autoScaleRatio: 0.3,
         }],
         selectItem: {
           use: true,
           showTextTip: true,
+          tipText: 'label',
+          fixedPosTop: true,
+          showIndicator: true,
+        },
+        maxTip: {
+          use: true,
+          tipBackground: '#FF00FF',
         },
       };
 
@@ -89,7 +101,7 @@
 
       const defaultSelectItem = ref({
         seriesID: 'series1',
-        dataIndex: chartData.data.series1.length - 1,
+        dataIndex: 3,
       });
 
       return {

package.json

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

src/components/chart/element/element.tip.js

@@ -1,4 +1,5 @@
 import { numberWithComma } from '@/common/utils';
+import dayjs from 'dayjs';
 import Canvas from '../helpers/helpers.canvas';
 
 const modules = {
@@ -12,23 +13,10 @@ const modules = {
     const opt = this.options;
     const isHorizontal = !!opt.horizontal;
     const maxTipOpt = opt.maxTip;
-    const selectItemOpt = opt.selectItem;
+    const selTipOpt = opt.selectItem;
     let maxArgs;
 
-    if (maxTipOpt.use) {
-      const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
-      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
-
-      if (maxTipOpt.use && maxArgs) {
-        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
-
-        if (maxTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
-        }
-      }
-    }
-
-    if (selectItemOpt.use && tipLocationInfo) {
+    if (selTipOpt.use && tipLocationInfo) {
       const seriesInfo = this.seriesList[tipLocationInfo?.sId];
 
       if (!seriesInfo?.show) {
@@ -41,26 +29,48 @@ const modules = {
         tipLocationInfo,
       );
 
-      if (selectItemOpt.use && selArgs) {
+      if (selArgs) {
         let isSamePos = false;
 
         if (maxTipOpt.use && maxArgs?.dp === selArgs.dp) {
           isSamePos = true;
         }
 
-        if (selectItemOpt.showTextTip || selectItemOpt.showTip) {
-          this.drawTextTip({ opt: selectItemOpt, tipType: 'sel', isSamePos, ...selArgs });
+        if (selTipOpt.showTextTip || selTipOpt.showTip) {
+          if (selTipOpt.tipText === 'label') {
+            const axisOpt = isHorizontal ? opt.axesY[0] : opt.axesX[0];
+            const label = selArgs.label;
+            selArgs.text = axisOpt.type === 'time' ? dayjs(label).format(axisOpt.timeFormat) : label;
+          } else {
+            selArgs.text = numberWithComma(selArgs.value);
+          }
+
+          this.drawTextTip({ opt: selTipOpt, tipType: 'sel', isSamePos, ...selArgs });
         }
 
-        if (selectItemOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: selectItemOpt, ...selArgs });
+        if (selTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: selTipOpt, ...selArgs });
         }
       }
 
       if (tipLocationInfo && tipLocationInfo.label !== null) {
         this.lastHitInfo = tipLocationInfo;
       }
     }
+
+    if (maxTipOpt.use) {
+      const maxSID = this.minMax[isHorizontal ? 'x' : 'y'][0].maxSID;
+      maxArgs = this.calculateTipInfo(this.seriesList[maxSID], 'max', null);
+
+      if (maxTipOpt.use && maxArgs) {
+        maxArgs.text = numberWithComma(maxArgs.value);
+        this.drawTextTip({ opt: maxTipOpt, tipType: 'max', ...maxArgs });
+
+        if (maxTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: maxTipOpt, ...maxArgs });
+        }
+      }
+    }
   },
 
   /**
@@ -116,19 +126,24 @@ const modules = {
     }
 
     let value = isHorizontal ? series.minMax.maxX : series.minMax.maxY;
-
+    let label;
     if (tipType === 'sel') {
       if (hitInfo && hitInfo.value !== null) {
         value = hitInfo.useStack ? hitInfo.acc : hitInfo.value;
+        label = hitInfo.label;
         lastTip.value = value;
+        lastTip.label = label;
       } else if (lastTip.value !== null) {
         value = lastTip.value;
+        label = lastTip.label;
       } else if (lastTip.pos !== null) {
         const item = type === 'bar'
           ? this.getItemByLabelIndex(lastTip.pos) : this.getItemByLabel(lastTip.pos);
 
         value = item.useStack ? item.acc : item.value;
+        label = item.label;
         lastTip.value = value;
+        lastTip.label = label;
       }
     }
 
@@ -157,7 +172,7 @@ const modules = {
     }
 
     const sizeObj = { xArea, yArea, graphX, graphY, xsp, xep, ysp };
-    const dataObj = { dp, value, text: numberWithComma(value), type };
+    const dataObj = { dp, value, label, type };
 
     return { ...sizeObj, ...dataObj };
   },

src/components/chart/uses.js

@@ -73,6 +73,7 @@ const DEFAULT_OPTIONS = {
   selectItem: {
     use: false,
     showTextTip: false,
+    tipText: 'value',
     showTip: false,
     showIndicator: false,
     fixedPosTop: false,