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

###################################### - 구ì 조 변경 중 - brush 추가 중
ex-em · Aug 24, 2022 · 8b1dc9b · 8b1dc9b
1 parent 7266ec3
commit 8b1dc9b
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 12 deletions.
diff --git a/docs/views/zoomChart/example/Default.vue b/docs/views/zoomChart/example/Default.vue
@@ -4,19 +4,30 @@
     class="case"
   >
     <ev-chart
+      ref="evChartRef"
       :data="chartData3"
       :options="chartOptions3"
+      v-model:zoom-idx="zoomIdx"
+    />
+    <ev-chart-brush
+      v-model="zoomIdx"
+      :ev-chart-dom="evChartRef"
     />
 
-    <ev-chart-group :options="chartGroupOptions">
+    <ev-chart-group
+      :options="chartGroupOptions"
+      v-model:zoomIdx="groupZoomIdx"
+    >
       <ev-chart
         :data="chartData"
         :options="chartOptions"
       />
+      <ev-chart-brush v-model="groupZoomIdx"/>
       <ev-chart
         :data="chartData2"
         :options="chartOptions2"
       />
+      <ev-chart-brush v-model="groupZoomIdx"/>
     </ev-chart-group>
 
     <div class="description">
@@ -53,7 +64,10 @@ export default {
     const isShowToggleLegend = ref(false);
     const isExpandChartArea = ref(false);
     const bufferMemoryCnt = ref(5);
+    const evChartRef = ref();
     const zoomRef = ref();
+    const zoomIdx = ref();
+    const groupZoomIdx = ref();
     let timeValue = dayjs().format('YYYY-MM-DD HH:mm:ss');
 
     const chartGroupOptions = reactive({
@@ -217,7 +231,7 @@ export default {
       type: 'line',
       width: '100%',
       title: {
-        text: '개별 차트',
+        text: '개별 차트 1',
         show: true,
       },
       legend: {
@@ -348,7 +362,10 @@ export default {
       chartOptions3,
       isShowToggleLegend,
       isExpandChartArea,
+      evChartRef,
       zoomRef,
+      zoomIdx,
+      groupZoomIdx,
       bufferMemoryCnt,
       onUpdateChartData,
       onClickUseZoom,

diff --git a/src/components/chart/Chart.vue b/src/components/chart/Chart.vue
@@ -38,6 +38,10 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated, ref } from 'vue';
   export default {
     name: 'EvChart',
     props: {
+      zoomIdx: {
+        type: Object,
+        default: () => ({})
+      },
       selectedItem: {
         type: Object,
         default: null,
@@ -70,8 +74,9 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated, ref } from 'vue';
       'update:selectedItem',
       'update:selectedLabel',
       'update:selectedSeries',
+      'update:zoomIdx'
     ],
-    setup(props) {
+    setup(props, { emit }) {
       let evChart = null;
       const {
         eventListeners,
@@ -126,7 +131,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated, ref } from 'vue';
 
       const getRangeInfo = (zoomInfo) => {
         if (zoomInfo.data.length && zoomInfo.range && isUseZoomMode.value) {
-          evChartZoom.dragZoom(zoomInfo);
+          evChartZoom.dragZoom(zoomInfo, zoomIdx => emit('update:zoomIdx', zoomIdx));
         }
       };
 
@@ -235,7 +240,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated, ref } from 'vue';
           updateData: isUpdateData,
         });
 
-        if (normalizedOptions.zoom.use) {
+        if (normalizedOptions.zoom.use && !isGroup.value) {
           if (!evChartZoom?.isAnimationFinish) {
             return;
           }
@@ -244,7 +249,7 @@ import { onMounted, onBeforeUnmount, watch, onDeactivated, ref } from 'vue';
             evChartClone.data = [cloneDeep(newData)];
             isUseZoomMode.value = false;
 
-           // setEvChartOptions();
+           setEvChartOptions();
 
             evChartZoom.updateEvChartCloneData(evChartClone, isUseZoomMode.value);
           }

diff --git a/src/components/chart/chartZoom.core.js b/src/components/chart/chartZoom.core.js
@@ -99,7 +99,12 @@ export default class EvChartZoom {
     this.setZoomAreaMemory(zoomStartIdx, zoomEndIdx, direction === 'previous' ? 'latest' : 'previous');
   }
 
-  dragZoom({ data: zoomInfoData, range: { dragSelectionInfo } }) {
+  dragZoom(zoomInfo, emitUpdateZoomIdx) {
+    if (!this.emitUpdateZoomIdx) {
+      this.emitUpdateZoomIdx = emitUpdateZoomIdx;
+    };
+
+    const { data: zoomInfoData, range: { dragSelectionInfo } } = zoomInfo;
     const {
       dragXsp,
       dragXep,
@@ -220,7 +225,7 @@ export default class EvChartZoom {
           this.executeZoom(newZoomStartIdx, newZoomEndIdx);
           this.setZoomAreaMemory(newZoomStartIdx, newZoomEndIdx);
         }
-      });
+      })
     }
   }
 
@@ -270,6 +275,11 @@ export default class EvChartZoom {
         (l, labelIdx) => zoomStartIdx <= labelIdx && zoomEndIdx >= labelIdx,
       );
     }
+
+    this.emitUpdateZoomIdx({
+      start: zoomStartIdx,
+      end: zoomEndIdx,
+    });
   }
 
   executeDragZoomAnimation(
@@ -386,6 +396,13 @@ export default class EvChartZoom {
       latest: [],
     };
 
+    if (this.emitUpdateZoomIdx) {
+      this.emitUpdateZoomIdx({
+        start: 0,
+        end: cloneLabelsLastIdx,
+      });
+    }
+
     this.setIconStyle(isUseZoomMode);
   }
 

diff --git a/src/components/chartBrush/ChartBrush.vue b/src/components/chartBrush/ChartBrush.vue
@@ -0,0 +1,43 @@
+<template>
+<div
+  ref='chartBrushRef'
+  style="background: blanchedalmond; text-align: center;"
+>
+  차트 브러쉬 위치
+  {{$props.modelValue}}
+</div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue';
+
+export default {
+  name: 'EvChartBrush',
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({}),
+    },
+    evChartDom: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  setup(props) {
+    const chartBrushRef = ref();
+
+    onMounted(() => {
+      console.log('chartBrushREf', chartBrushRef);
+      console.log('props evChartDom', props.evChartDom)
+    })
+
+    return {
+      chartBrushRef
+    }
+  }
+};
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/chartBrush/index.js b/src/components/chartBrush/index.js
@@ -0,0 +1,9 @@
+import VueResizeObserver from 'vue-resize-observer';
+import EvChartBrush from './ChartBrush';
+
+EvChartBrush.install = (app) => {
+  app.component(EvChartBrush.name, EvChartBrush);
+  app.use(VueResizeObserver);
+};
+
+export default EvChartBrush;
diff --git a/src/components/chartGroup/ChartGroup.vue b/src/components/chartGroup/ChartGroup.vue
@@ -31,12 +31,19 @@ import { useModel } from './uses';
 export default {
   name: 'EvChartGroup',
   props: {
+    zoomIdx: {
+      type: Object,
+      default: () => ({}),
+    },
     options: {
       type: Object,
       default: () => ({}),
     },
   },
-  setup(props, { slots }) {
+  emits: [
+    'update:zoomIdx',
+  ],
+  setup(props, { slots, emit }) {
     const evChartInfo = reactive({
       dom: {},
       props: {
@@ -100,7 +107,7 @@ export default {
 
     const getRangeInfo = (zoomInfo) => {
       if (zoomInfo.data.length && zoomInfo.range && isUseZoomMode.value) {
-        evChartZoom.dragZoom(zoomInfo);
+        evChartZoom.dragZoom(zoomInfo, zoomIdx => emit('update:zoomIdx', zoomIdx));
       }
     };
 

diff --git a/src/main.js b/src/main.js
@@ -27,7 +27,8 @@ import EvTree from '@/components/tree/';
 import EvTimePicker from '@/components/timePicker/';
 import EvGrid from '@/components/grid/';
 import EvChart from '@/components/chart/';
-import EvChartZoom from '@/components/chartGroup/';
+import EvChartBrush from '@/components/chartBrush/';
+import EvChartGroup from '@/components/chartGroup/';
 import EvTreeGrid from '@/components/treeGrid/';
 import EvPagination from '@/components/pagination/';
 import { version } from '../package.json';
@@ -59,7 +60,8 @@ const components = [
   EvTimePicker,
   EvGrid,
   EvChart,
-  EvChartZoom,
+  EvChartBrush,
+  EvChartGroup,
   EvMessage,
   EvNotification,
   EvMessageBox,