[#1242] Chart > Zoom in, out 기능

###################################### - ev-chart-zoom slot으로 넘어오는 컴포넌트 중 props에 data, options이 없다면 발생하는 에러 수정
ex-em · Aug 19, 2022 · 5b3402e · 5b3402e
1 parent 83d6531
commit 5b3402e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/docs/views/zoomChart/example/Default.vue b/docs/views/zoomChart/example/Default.vue
@@ -12,6 +12,10 @@
         :data="chartData2"
         :options="chartOptions2"
       />
+      <ev-chart
+        :data="chartData3"
+        :options="chartOptions3"
+      />
       <div class="description">
         <p class="case-title">줌 버퍼 메모리</p>
         <ev-input-number
@@ -95,6 +99,16 @@ export default {
       },
     });
 
+    const chartData3 = reactive({
+      series: {
+        series11: { name: 'series#11' },
+      },
+      labels: [],
+      data: {
+        series11: [],
+      },
+    });
+
     const chartOptions = reactive({
       type: 'line',
       width: '100%',
@@ -151,10 +165,36 @@ export default {
       },
     });
 
+    const chartOptions3 = reactive({
+      type: 'line',
+      width: '100%',
+      title: {
+        text: 'Chart Title3',
+        show: true,
+      },
+      legend: {
+        show: false,
+        position: 'right',
+      },
+      axesX: [{
+        type: 'time',
+        showGrid: false,
+        timeFormat: 'HH:mm:ss',
+        interval: 'second',
+      }],
+      axesY: [{
+        type: 'linear',
+        showGrid: false,
+        startToZero: true,
+        autoScaleRatio: 0.1,
+      }],
+    });
+
     const addRandomChartData = () => {
       timeValue = dayjs(timeValue).add(1, 'second');
       chartData.labels.push(dayjs(timeValue));
       chartData2.labels.push(dayjs(timeValue));
+      chartData3.labels.push(dayjs(timeValue));
 
       Object.values(chartData.data).forEach((seriesData) => {
         seriesData.push(Math.floor(Math.random() * ((5000 - 5) + 1)) + 5);
@@ -163,6 +203,10 @@ export default {
       Object.values(chartData2.data).forEach((seriesData) => {
         seriesData.push(Math.floor(Math.random() * ((5000 - 5) + 1)) + 5);
       });
+
+      Object.values(chartData3.data).forEach((seriesData) => {
+        seriesData.push(Math.floor(Math.random() * ((5000 - 5) + 1)) + 5);
+      });
     };
 
     onMounted(() => {
@@ -185,6 +229,7 @@ export default {
 
       init(chartData);
       init(chartData2);
+      init(chartData3);
 
       for (let ix = 0; ix < Math.ceil(Math.random() * 100); ix++) {
         addRandomChartData();
@@ -194,6 +239,7 @@ export default {
     watch(isShowToggleLegend, (isShow) => {
       chartOptions.legend.show = isShow;
       chartOptions2.legend.show = isShow;
+      chartOptions3.legend.show = isShow;
     });
 
     watch(isExpandChartArea, (isExpand) => {
@@ -216,8 +262,10 @@ export default {
       chartZoomOptions,
       chartData,
       chartData2,
+      chartData3,
       chartOptions,
       chartOptions2,
+      chartOptions3,
       isShowToggleLegend,
       isExpandChartArea,
       zoomRef,

diff --git a/src/components/chartZoom/ChartZoom.vue b/src/components/chartZoom/ChartZoom.vue
@@ -78,8 +78,10 @@ export default {
       evChartInfo.dom = evChartZoomRef.value.querySelectorAll('.ev-chart-container');
 
       if (evChartInfo.dom.length) {
-        slots.default(evChartInfo.dom).forEach(({ type, props: { data, options } }) => {
+        slots.default(evChartInfo.dom).forEach(({ type, props: evChartProps }) => {
           if (type?.name === 'EvChart') {
+            const { options, data } = evChartProps;
+
             if (!options?.dragSelection?.use) {
               options.dragSelection = {
                 use: true,

diff --git a/src/components/chartZoom/chartZoom.core.js b/src/components/chartZoom/chartZoom.core.js
@@ -113,7 +113,7 @@ export default class EvChartZoom {
     ) : 0;
 
     if (evChartOptions[dragChartIdx].axesX[0].type === 'time') {
-      const zoomSeries = zoomInfoData[dragChartIdx].items;
+      const zoomSeries = zoomInfoData[0].items;
       const zoomStartDate = zoomSeries[0].x;
       const zoomEndDate = zoomSeries[zoomSeries.length - 1].x;
       const currentChartDataLabels = evChartData[dragChartIdx].labels;