From ded1846f4d2b7d80a3a5bdcd18f0d018493d8fc2 Mon Sep 17 00:00:00 2001
From: jinhee park <jinhee@ex-em.com>
Date: Fri, 19 Jan 2024 15:42:23 +0900
Subject: [PATCH] =?UTF-8?q?[#1587]=20Chart=20>=20tooltip=20>=20formatter?=
 =?UTF-8?q?=20>=20html=20>=20=EB=8F=99=EC=A0=81=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=EC=97=AC=EB=B6=80=20=EC=A0=81=EC=9A=A9=20?=
 =?UTF-8?q?=EB=B6=88=EA=B0=80=ED=95=9C=20=EC=9D=B4=EC=8A=88=20=EB=B0=9C?=
 =?UTF-8?q?=EC=83=9D=20#####=20-=20formatter=EA=B0=80=20=EB=B3=80=EA=B2=BD?=
 =?UTF-8?q?=EB=90=9C=20=EA=B2=BD=EC=9A=B0,=20tooltip=20DOM=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0=20=ED=9B=84=20=EB=8B=A4=EC=8B=9C=20=EC=83=9D=EC=84=B1?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/lineChart/example/CustomTooltip.vue | 78 ++++++++++++-------
 src/components/chart/Chart.vue                |  5 ++
 src/components/chart/chart.core.js            | 16 +++-
 3 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/docs/views/lineChart/example/CustomTooltip.vue b/docs/views/lineChart/example/CustomTooltip.vue
index f0b7122ac..23cf76fce 100644
--- 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
index bedac680c..ee432b544 100644
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -171,6 +171,10 @@
       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);
 
@@ -178,6 +182,7 @@
           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
index 53688995d..a0fe0be55 100644
--- 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();