[#1362] Chart > ev-chart-group 내 ev-chart, ev-chart-brush를 element로 감쌀 시 에러 발생

package.json

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

src/components/chart/Chart.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="zoomOptions.toolbar.show && !injectIsChartGroup"
+    v-if="zoomOptions.toolbar?.show && !injectIsChartGroup"
     ref="evChartToolbarRef"
   >
     <ev-chart-toolbar
@@ -79,6 +79,7 @@
       const injectBrushSeries = inject('brushSeries', { list: [], chartIdx: null });
       const injectGroupSelectedLabel = inject('groupSelectedLabel', null);
       const injectBrushIdx = inject('brushIdx', { start: 0, end: -1 });
+      const injectEvChartPropsInGroup = inject('evChartPropsInGroup', []);
 
       const {
         eventListeners,
@@ -110,10 +111,11 @@
         setDataForUseZoom,
         controlZoomIdx,
         onClickToolbar,
-      } = useZoomModel(
+      } = injectIsChartGroup ? {} : useZoomModel(
         normalizedOptions,
         { wrapper, evChartGroupRef: null },
         props.selectedLabel ? selectedLabel : selectedItem,
+        injectEvChartPropsInGroup,
       );
 
       const createChart = () => {
@@ -227,6 +229,10 @@
       }
 
       onMounted(async () => {
+        if (injectEvChartPropsInGroup?.value) {
+          injectEvChartPropsInGroup.value.push(props);
+        }
+
         await createChart();
         await drawChart();
       });
@@ -235,6 +241,10 @@
         if (evChart && 'destroy' in evChart) {
           evChart.destroy();
         }
+
+        if (injectEvChartPropsInGroup?.value?.length) {
+          injectEvChartPropsInGroup.value.length = 0;
+        }
       });
 
       onDeactivated(() => {
@@ -268,7 +278,7 @@
         injectIsChartGroup,
         onClickToolbar,
         normalizedOptions,
-        zoomOptions: toRef(evChartZoomOptions, 'zoom'),
+        zoomOptions: toRef(evChartZoomOptions ?? { zoom: {} }, 'zoom'),
       };
     },
   };

src/components/chart/uses.js

@@ -1,4 +1,12 @@
-import { ref, computed, getCurrentInstance, nextTick, reactive, onUpdated, watch } from 'vue';
+import {
+  ref,
+  reactive,
+  computed,
+  watch,
+  getCurrentInstance,
+  nextTick,
+  onUpdated,
+} from 'vue';
 import { cloneDeep, defaultsDeep, isEqual } from 'lodash-es';
 import { getQuantity } from '@/common/utils';
 import EvChartZoom from '@/components/chart/chartZoom.core';
@@ -332,8 +340,9 @@ export const useZoomModel = (
   evChartNormalizedOptions,
   { wrapper: evChartWrapper, evChartGroupRef },
   selectedLabelOrItem,
+  evChartPropsInGroup,
 ) => {
-  const { props, slots, emit } = getCurrentInstance();
+  const { props, emit } = getCurrentInstance();
 
   const isExecuteZoom = ref(false);
   const isUseZoomMode = ref(false);
@@ -393,23 +402,17 @@ export const useZoomModel = (
   };
 
   const createEvChartZoom = () => {
-    if (evChartGroupRef) {
+    if (evChartGroupRef?.value) {
       evChartInfo.dom = evChartGroupRef.value.querySelectorAll('.ev-chart-container');
 
-      let chartIdx = 0;
       if (evChartInfo.dom.length) {
-        slots.default(evChartInfo.dom).forEach(({ type, props: evChartProps }) => {
-          if (type?.name === 'EvChart') {
-            const { options, data } = evChartProps;
+        evChartPropsInGroup.value.forEach(({ data, options }, idx) => {
+          data.chartIdx = idx;
 
-            data.chartIdx = chartIdx;
-            chartIdx++;
+          evChartInfo.props.data.push(data);
+          evChartInfo.props.options.push(options);
 
-            evChartInfo.props.data.push(data);
-            evChartInfo.props.options.push(options);
-          } else if (type?.name === 'EvChartBrush') {
-            brushChartIdx.value.push(evChartProps?.options?.chartIdx ?? 0);
-          }
+          brushChartIdx.value.push(idx);
         });
       }
     } else {

src/components/chartBrush/chartBrush.core.js

@@ -39,26 +39,28 @@ export default class EvChartBrush {
       return;
     }
 
-    const existedBrushCanvas = this.evChartBrushRef.value.querySelector('.brush-canvas');
+    if (this.evChartBrushRef?.value) {
+      const existedBrushCanvas = this.evChartBrushRef.value.querySelector('.brush-canvas');
 
-    if (!existedBrushCanvas) {
-      const brushCanvas = document.createElement('canvas');
+      if (!existedBrushCanvas) {
+        const brushCanvas = document.createElement('canvas');
 
-      brushCanvas.setAttribute('class', 'brush-canvas');
-      brushCanvas.setAttribute('style', 'display: block; z-index: 1;');
+        brushCanvas.setAttribute('class', 'brush-canvas');
+        brushCanvas.setAttribute('style', 'display: block; z-index: 1;');
 
-      const evChartBrushContainer = this.evChartBrushRef.value.querySelector('.ev-chart-brush-container');
+        const evChartBrushContainer = this.evChartBrushRef.value.querySelector('.ev-chart-brush-container');
 
-      if (evChartBrushContainer) {
-        this.brushCanvas = brushCanvas;
-        evChartBrushContainer.appendChild(brushCanvas);
-        this.evChartBrushContainer = evChartBrushContainer;
+        if (evChartBrushContainer) {
+          this.brushCanvas = brushCanvas;
+          evChartBrushContainer.appendChild(brushCanvas);
+          this.evChartBrushContainer = evChartBrushContainer;
 
-        this.drawBrushRect({ brushCanvas });
-        this.addEvent(brushCanvas);
+          this.drawBrushRect({ brushCanvas });
+          this.addEvent(brushCanvas);
+        }
+      } else {
+        this.drawBrushRect({ brushCanvas: existedBrushCanvas, isResize });
       }
-    } else {
-      this.drawBrushRect({ brushCanvas: existedBrushCanvas, isResize });
     }
   }
 

src/components/chartGroup/ChartGroup.vue

@@ -57,12 +57,14 @@ export default {
       isExecuteZoom,
       brushSeries,
       evChartGroupRef,
+      evChartPropsInGroup,
     } = useGroupModel();
 
     const normalizedOptions = getNormalizedOptions(props.options);
     provide('isExecuteZoom', isExecuteZoom);
     provide('isChartGroup', true);
     provide('brushSeries', brushSeries);
+    provide('evChartPropsInGroup', evChartPropsInGroup);
     const groupSelectedLabel = computed({
       get: () => props.groupSelectedLabel,
       set: val => emit('update:groupSelectedLabel', val),
@@ -85,6 +87,7 @@ export default {
       normalizedOptions,
       { wrapper: null, evChartGroupRef },
       groupSelectedLabel,
+      evChartPropsInGroup,
     );
 
     provide('evChartClone', evChartClone);

src/components/chartGroup/uses.js

@@ -37,6 +37,7 @@ const DEFAULT_OPTIONS = {
 export const useGroupModel = () => {
   const isExecuteZoom = ref(false);
   const evChartGroupRef = ref();
+  const evChartPropsInGroup = ref([]);
   const brushSeries = reactive({ list: [], chartIdx: null });
   const getNormalizedOptions = options => defaultsDeep({}, options, DEFAULT_OPTIONS);
 
@@ -45,5 +46,6 @@ export const useGroupModel = () => {
     isExecuteZoom,
     brushSeries,
     evChartGroupRef,
+    evChartPropsInGroup,
   };
 };