From 74d8ece5018d7f708d6833f18998402d9369b2d1 Mon Sep 17 00:00:00 2001
From: jinhee park <jinhee@ex-em.com>
Date: Thu, 21 Jul 2022 17:05:05 +0900
Subject: [PATCH] =?UTF-8?q?[#1245]=20Chart=20>=20Legend=20=EA=B4=80?=
 =?UTF-8?q?=EB=A0=A8=20=EC=98=B5=EC=85=98=20=EB=B3=80=EA=B2=BD=20=EC=8B=9C?=
 =?UTF-8?q?=20DOM=20=EC=9D=84=20=EB=AA=BB=EC=B0=BE=EB=8A=94=20Error=20log?=
 =?UTF-8?q?=20=EB=B0=9C=EC=83=9D=20#################################=201.?=
 =?UTF-8?q?=20watch=20=EB=AC=B8=EC=9D=B4=20mounted=20hook=20=EC=95=88?=
 =?UTF-8?q?=EC=97=90=20=EB=93=A4=EC=96=B4=EC=9E=88=EC=96=B4=20mounted=20?=
 =?UTF-8?q?=EB=90=A0=20=EB=95=8C=20=EB=A7=88=EB=8B=A4=20=EB=8F=99=EC=9D=BC?=
 =?UTF-8?q?=ED=95=9C=20=EA=B0=9D=EC=B2=B4=EB=A5=BC=20=EB=B0=94=EB=9D=BC?=
 =?UTF-8?q?=EB=B3=B4=EB=8A=94=20watch=EA=B0=80=20=EC=A4=91=EB=B3=B5?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=83=9D=EC=84=B1=EB=90=98=EC=97=AC=20?=
 =?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=9C=20=EB=AC=B8=EC=A0=9C=20=ED=94=BD?=
 =?UTF-8?q?=EC=8A=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chart/Chart.vue | 92 ++++++++++++++++++----------------
 1 file changed, 50 insertions(+), 42 deletions(-)

diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
index 440eb4c69..faefbd4b6 100644
--- a/src/components/chart/Chart.vue
+++ b/src/components/chart/Chart.vue
@@ -97,51 +97,59 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated } from 'vue';
         }
       };
 
+      watch(() => props.options, (chartOpt) => {
+        const newOpt = getNormalizedOptions(chartOpt);
+
+        const isUpdateLegendType = !isEqual(newOpt.legend.table, evChart.options.legend.table);
+
+        evChart.options = cloneDeep(newOpt);
+
+        evChart.update({
+          updateSeries: false,
+          updateSelTip: { update: false, keepDomain: false },
+          updateLegend: isUpdateLegendType,
+        });
+      }, { deep: true });
+
+      watch(() => props.data, (chartData) => {
+        const newData = getNormalizedData(chartData);
+
+        const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
+            || !isEqual(newData.groups, evChart.data.groups)
+            || props.options.type === 'heatMap';
+
+        const isUpdateData = !isEqual(newData.data, evChart.data);
+
+        evChart.data = cloneDeep(newData);
+
+        evChart.update({
+          updateSeries: isUpdateSeries,
+          updateSelTip: { update: true, keepDomain: false },
+          updateData: isUpdateData,
+        });
+      }, { deep: true });
+
+      watch(() => props.selectedItem, (newValue) => {
+        const chartType = props.options?.type;
+
+        evChart.selectItemByData(newValue, chartType);
+      }, { deep: true });
+
+      watch(() => props.selectedLabel, (newValue) => {
+        if (newValue.dataIndex) {
+          evChart.renderWithSelected(newValue.dataIndex);
+        }
+      }, { deep: true });
+
+      watch(() => props.selectedSeries, (newValue) => {
+        if (newValue.seriesId) {
+          evChart.renderWithSelected(newValue.seriesId);
+        }
+      }, { deep: true });
+
       onMounted(async () => {
         await createChart();
         await drawChart();
-
-        await watch(() => props.options, (chartOpt) => {
-          const newOpt = getNormalizedOptions(chartOpt);
-          const isUpdateLegend = !isEqual(newOpt.legend, evChart.options.legend);
-          evChart.options = cloneDeep(newOpt);
-          evChart.update({
-            updateSeries: false,
-            updateSelTip: { update: false, keepDomain: false },
-            updateLegend: isUpdateLegend,
-          });
-        }, { deep: true });
-
-        await watch(() => props.data, (chartData) => {
-          const newData = getNormalizedData(chartData);
-          const isUpdateSeries = !isEqual(newData.series, evChart.data.series)
-              || !isEqual(newData.groups, evChart.data.groups)
-              || props.options.type === 'heatMap';
-          const isUpdateData = !isEqual(newData.data, evChart.data);
-          evChart.data = cloneDeep(newData);
-          evChart.update({
-            updateSeries: isUpdateSeries,
-            updateSelTip: { update: true, keepDomain: false },
-            updateData: isUpdateData,
-          });
-        }, { deep: true });
-
-        await watch(() => props.selectedItem, (newValue) => {
-          const chartType = props.options?.type;
-          evChart.selectItemByData(newValue, chartType);
-        }, { deep: true });
-
-        await watch(() => props.selectedLabel, (newValue) => {
-          if (newValue.dataIndex) {
-            evChart.renderWithSelected(newValue.dataIndex);
-          }
-        }, { deep: true });
-
-        await watch(() => props.selectedSeries, (newValue) => {
-          if (newValue.seriesId) {
-            evChart.renderWithSelected(newValue.seriesId);
-          }
-        }, { deep: true });
       });
 
       onBeforeUnmount(() => {