[#1268] Chart > Indicator test selectedItem

ex-em · Oct 6, 2022 · bc64bd7 · bc64bd7
1 parent af39987
commit bc64bd7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 22 deletions.
diff --git a/docs/views/brushChart/example/EventGroup.vue b/docs/views/brushChart/example/EventGroup.vue
@@ -7,11 +7,13 @@
       v-model:zoomEndIdx='zoomEndIdx'
     >
       <ev-chart
+        v-model:selectedLabel="defaultSelectLabel"
         :data="chartData"
         :options="chartOptions"
         @click="onClick"
       />
       <ev-chart
+        v-model:selectedLabel="defaultSelectLabel"
         :data="chartData2"
         :options="chartOptions"
         @click="onClick"
@@ -95,11 +97,29 @@ export default {
         startToZero: true,
         autoScaleRatio: 0.1,
       }],
-      selectItem: {
+      selectLabel: {
         use: true,
+        useClick: true,
+        limit: 1,
+        useDeselectOverflow: true,
+        useApproximateValue: true,
+        tipBackground: '#FF0000',
+        useSeriesOpacity: false,
+        useLabelOpacity: false,
+        indicatorColor: '#000000',
+        tipStyle: {
+          height: 20,
+          background: '#000000',
+          textColor: '#FFFFFF',
+          fontSize: 14,
+          fontFamily: 'Roboto',
+          fontWeight: 400,
+        },
+
+        showTip: false,
         showTextTip: true,
         tipText: 'label',
-        fixedPosTop: true,
+        fixedPosTop: false,
         showIndicator: true,
       },
     });
@@ -204,6 +224,10 @@ export default {
       tableData.value = cloneData;
     });
 
+    const defaultSelectLabel = ref({
+      dataIndex: [1],
+    });
+
     return {
       tableData,
       columns,
@@ -218,6 +242,7 @@ export default {
       onClickRow,
       chartGroupOptions,
       defaultGroupSelectItem,
+      defaultSelectLabel,
     };
   },
 };

diff --git a/docs/views/brushChart/props.js b/docs/views/brushChart/props.js
@@ -26,16 +26,16 @@ export default {
       component: EventGroup,
       parsedData: parseComponent(EventGroupRaw),
     },
-    EventGroupIndividual: {
-      description: '1. Brush 영역 조절, 2. wheel/mouse drag 를 이용한 Brush 영역 이동, 3. Brush 영역 외 영역을 클릭 시 해당 영역으로 순간 이동이 가능합니다.',
-      component: EventGroupIndividual,
-      parsedData: parseComponent(EventGroupIndividualRaw),
-    },
-    EventDefault: {
-      description: '1. Brush 영역 조절, 2. wheel/mouse drag 를 이용한 Brush 영역 이동, 3. Brush 영역 외 영역을 클릭 시 해당 영역으로 순간 이동이 가능합니다.',
-      component: EventDefault,
-      parsedData: parseComponent(EventDefaultRaw),
-    },
+    // EventGroupIndividual: {
+    //   description: '1. Brush 영역 조절, 2. wheel/mouse drag 를 이용한 Brush 영역 이동, 3. Brush 영역 외 영역을 클릭 시 해당 영역으로 순간 이동이 가능합니다.',
+    //   component: EventGroupIndividual,
+    //   parsedData: parseComponent(EventGroupIndividualRaw),
+    // },
+    // EventDefault: {
+    //   description: '1. Brush 영역 조절, 2. wheel/mouse drag 를 이용한 Brush 영역 이동, 3. Brush 영역 외 영역을 클릭 시 해당 영역으로 순간 이동이 가능합니다.',
+    //   component: EventDefault,
+    //   parsedData: parseComponent(EventDefaultRaw),
+    // },
     // Event: {
     //   description: '1. Brush 영역 조절, 2. wheel/mouse drag 를 이용한 Brush 영역 이동, 3. Brush 영역 외 영역을 클릭 시 해당 영역으로 순간 이동이 가능합니다.',
     //   component: Event,

diff --git a/src/components/chart/chart.core.js b/src/components/chart/chart.core.js
@@ -314,7 +314,7 @@ class EvChart {
       tipLocationInfo = this.lastHitInfo;
     } else if (this.defaultSelectItemInfo) {
       // console.log('this.defaultSelectItemInfo', this.defaultSelectItemInfo)
-      tipLocationInfo = this.getItem(this.defaultSelectItemInfo, false);
+      tipLocationInfo = this.getItem({ dataIndex: this.defaultSelectInfo.dataIndex[0] }, false);
     } else {
       tipLocationInfo = null;
     }

diff --git a/src/components/chart/element/element.tip.js b/src/components/chart/element/element.tip.js
@@ -19,11 +19,12 @@ const modules = {
     let maxArgs;
     let isExistSelectedLabel;
 
-    if (labelTipOpt.use && labelTipOpt.showTip) {
-      isExistSelectedLabel = this.drawLabelTip();
-    }
+    // if (labelTipOpt.use && labelTipOpt.showTip) {
+    //   isExistSelectedLabel = this.drawLabelTip();
+    // }
 
-    if (selTipOpt.use && tipLocationInfo && !isExistSelectedLabel) {
+    // selectedItem 선 그리는 부분
+    if (tipLocationInfo && !isExistSelectedLabel) {
       const seriesInfo = this.seriesList[tipLocationInfo?.sId];
 
       if (!seriesInfo?.show) {
@@ -43,20 +44,20 @@ const modules = {
           isSamePos = true;
         }
 
-        if (selTipOpt.showTextTip || selTipOpt.showTip) {
-          if (selTipOpt.tipText === 'label') {
+        if (labelTipOpt.showTextTip || labelTipOpt.showTip) {
+          if (labelTipOpt.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', seriesOpt: seriesInfo, isSamePos, ...selArgs });
+          this.drawTextTip({ opt: labelTipOpt, tipType: 'sel', seriesOpt: seriesInfo, isSamePos, ...selArgs });
         }
 
-        if (selTipOpt.showIndicator) {
-          this.drawFixedIndicator({ opt: selTipOpt, seriesOpt: seriesInfo, ...selArgs });
+        if (labelTipOpt.showIndicator) {
+          this.drawFixedIndicator({ opt: labelTipOpt, seriesOpt: seriesInfo, ...selArgs });
         }
       }