[#1587] Chart > tooltip > formatter > html > 동적으로 사용여부 적용 불가한 이슈 발생

##### - formatter가 변경된 경우, tooltip DOM 제거 후 다시 생성하도록 로직 추가
ex-em · Jan 19, 2024 · ded1846 · ded1846
1 parent 11762aa
commit ded1846
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 29 deletions.
diff --git a/docs/views/lineChart/example/CustomTooltip.vue b/docs/views/lineChart/example/CustomTooltip.vue
@@ -1,12 +1,21 @@
 <template>
-  <ev-chart
-      :data="chartData"
-      :options="chartOptions"
-  />
+  <div class="case">
+    <ev-chart
+        :data="chartData"
+        :options="chartOptions"
+    />
+    <div class="description">
+      <span class="toggle-label">HTML Tooltip 사용</span>
+      <ev-toggle
+          v-model="useHtml"
+      />
+    </div>
+  </div>
+
 </template>
 
 <script>
-import { onMounted, reactive } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 import dayjs from 'dayjs';
 
 export default {
@@ -25,6 +34,31 @@ export default {
       },
     });
 
+    const useHtml = ref(true);
+    const htmlTooltipFormatter = {
+      html: (seriesList) => {
+        let result = '<div class="ev-chart-tooltip-custom" style="width: 250px">';
+        result += `<div class="ev-chart-tooltip-custom__header"> ${dayjs(seriesList?.[0]?.data?.x).format('mm:ss')}</div>`;
+        result += '<div class="ev-chart-tooltip-custom__body">';
+        seriesList.forEach((series) => {
+          result += '<br/>';
+          result += '<div class="row">';
+          result += `<div class="color-circle" style="background-color: ${series.color}"></div>`;
+          result += `<div class="series-name">${series.name} 값 </div>`;
+          result += `<div class="value">${series.data?.y}</div>`;
+          result += '</div>';
+          result += '<div class="row">';
+          result += `<div class="color-circle" style="background-color: ${series.color}"></div>`;
+          result += '<div class="series-name">전체 합계 </div>';
+          result += `<div class="value">${chartData.data[series?.sId].reduce((a, b) => a + b, 0)}</div>`;
+          result += '</div>';
+        });
+
+        result += '</div></div>';
+        return result;
+      },
+    };
+
     const chartOptions = reactive({
       type: 'line',
       width: '100%',
@@ -49,32 +83,19 @@ export default {
       }],
       tooltip: {
         use: true,
-        formatter: {
-          html: (seriesList) => {
-            let result = '<div class="ev-chart-tooltip-custom" style="width: 250px">';
-            result += `<div class="ev-chart-tooltip-custom__header"> ${dayjs(seriesList?.[0]?.data?.x).format('mm:ss')}</div>`;
-            result += '<div class="ev-chart-tooltip-custom__body">';
-            seriesList.forEach((series) => {
-              result += '<br/>';
-              result += '<div class="row">';
-              result += `<div class="color-circle" style="background-color: ${series.color}"></div>`;
-              result += `<div class="series-name">${series.name} 값 </div>`;
-              result += `<div class="value">${series.data?.y}</div>`;
-              result += '</div>';
-              result += '<div class="row">';
-              result += `<div class="color-circle" style="background-color: ${series.color}"></div>`;
-              result += '<div class="series-name">전체 합계 </div>';
-              result += `<div class="value">${chartData.data[series?.sId].reduce((a, b) => a + b, 0)}</div>`;
-              result += '</div>';
-            });
-
-            result += '</div></div>';
-            return result;
-          },
-        },
       },
     });
 
+    watch(useHtml, () => {
+      if (useHtml.value) {
+        chartOptions.tooltip.formatter = htmlTooltipFormatter;
+      } else {
+        chartOptions.tooltip.formatter = null;
+      }
+    }, {
+      immediate: true,
+    });
+
     let timeValue = dayjs().format('YYYY-MM-DD HH:mm:ss');
     const addRandomChartData = () => {
       timeValue = dayjs(timeValue).add(1, 'second');
@@ -94,6 +115,7 @@ export default {
     return {
       chartData,
       chartOptions,
+      useHtml,
     };
   },
 };

diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
@@ -171,13 +171,18 @@
       watch(() => props.options, (chartOpt) => {
         const newOpt = getNormalizedOptions(chartOpt);
         const isUpdateLegendType = !isEqual(newOpt.legend.table, evChart.options.legend.table);
+        const isUpdateTooltipFormatter = !isEqual(
+            newOpt.tooltip.formatter,
+            evChart.options.tooltip.formatter,
+        );
 
         evChart.options = cloneDeep(newOpt);
 
         evChart.update({
           updateSeries: false,
           updateSelTip: { update: false, keepDomain: false },
           updateLegend: isUpdateLegendType,
+          updateTooltipFormatter: isUpdateTooltipFormatter,
         });
 
         if (!injectIsChartGroup) {

diff --git a/src/components/chart/chart.core.js b/src/components/chart/chart.core.js
@@ -718,7 +718,13 @@ class EvChart {
     const groups = this.data.groups;
     const series = this.data.series;
 
-    const { updateSeries, updateSelTip, updateLegend, updateData } = updateInfo;
+    const {
+      updateSeries,
+      updateSelTip,
+      updateLegend,
+      updateData,
+      updateTooltipFormatter,
+    } = updateInfo;
 
     if (!this.isInit) {
       return;
@@ -789,6 +795,7 @@ class EvChart {
       this.hideTitle();
     }
 
+    // legend Update
     if (options.legend.show) {
       const useTable = !!options.legend?.table?.use
         && options.type !== 'heatMap'
@@ -810,6 +817,13 @@ class EvChart {
     } else if (this.isInitLegend) {
       this.hideLegend();
     }
+
+    // Tooltip Update
+    if (updateTooltipFormatter) {
+      this.tooltipDOM.innerHTML = '';
+      this.createTooltipDOM();
+    }
+
     this.chartRect = this.getChartRect();
 
     this.minMax = this.getStoreMinMax();