ing

ex-em · Sep 15, 2022 · d4566a5 · d4566a5
1 parent cf6116d
commit d4566a5
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 71 deletions.
diff --git a/docs/views/brushChart/example/Default.vue b/docs/views/brushChart/example/Default.vue
@@ -43,10 +43,12 @@
       <ev-button @click="onUpdateChartData">데이터 업데이트</ev-button>
       <br/>
       <br/>
-      <ev-button @click="onToggleBrush">Brush 생성/제거</ev-button>
+      <span class="toggle-label">Brush 생성</span>
+      <ev-toggle v-model="isShowBrush"/>
       <br/>
       <br/>
-      <ev-button @click="onToggleToolbar">툴바 생성/제거</ev-button>
+      <span class="toggle-label">툴바 생성</span>
+      <ev-toggle v-model="isShowToolbar"/>
       <br/>
       <br/>
       <span class="toggle-label">토글 레전드</span>
@@ -67,6 +69,8 @@ export default {
   setup() {
     const isShowToggleLegend = ref(false);
     const isExpandChartArea = ref(false);
+    const isShowBrush = ref(true);
+    const isShowToolbar = ref(false);
     const bufferMemoryCnt = ref(10);
     const zoomRef = ref();
     const zoomStartIdx = ref(0);
@@ -75,9 +79,9 @@ export default {
 
     const chartGroupOptions = reactive({
       zoom: {
-        bufferMemoryCnt: 5,
+        bufferMemoryCnt: 10,
         toolbar: {
-          show: true,
+          show: isShowToolbar,
           items: {
             previous: {
               icon: 'ev-icon-allow2-left',
@@ -185,13 +189,13 @@ export default {
     });
 
     const brushOptions = reactive({
-      show: true,
+      show: isShowBrush,
       chartIdx: 0,
       height: 100,
     });
 
     const brushOptions2 = reactive({
-      show: true,
+      show: isShowBrush,
       chartIdx: 1,
       height: 100,
     });
@@ -236,15 +240,6 @@ export default {
       }
     };
 
-    const onToggleToolbar = () => {
-      chartGroupOptions.zoom.toolbar.show = !chartGroupOptions.zoom.toolbar.show;
-    };
-
-    const onToggleBrush = () => {
-      brushOptions.show = !brushOptions.show;
-      brushOptions2.show = !brushOptions2.show;
-    };
-
     watch(isShowToggleLegend, (isShow) => {
       chartOptions.legend.show = isShow;
       chartOptions2.legend.show = isShow;
@@ -275,14 +270,14 @@ export default {
       brushOptions,
       brushOptions2,
       isShowToggleLegend,
+      isShowToolbar,
+      isShowBrush,
       isExpandChartArea,
       zoomRef,
       zoomStartIdx,
       zoomEndIdx,
       bufferMemoryCnt,
       onUpdateChartData,
-      onToggleToolbar,
-      onToggleBrush,
     };
   },
 };

diff --git a/docs/views/zoomChart/example/ChartGroup.vue b/docs/views/zoomChart/example/ChartGroup.vue
@@ -45,7 +45,8 @@
       <ev-button @click="onUpdateChartData">데이터 업데이트</ev-button>
       <br/>
       <br/>
-      <ev-button @click="onToggleToolbar">툴바 생성/제거</ev-button>
+      <span class="toggle-label">툴바 생성</span>
+      <ev-toggle v-model="isShowToolbar"/>
       <br/>
       <br/>
       <span class="toggle-label">토글 레전드</span>
@@ -66,6 +67,7 @@ export default {
   setup() {
     const isShowToggleLegend = ref(false);
     const isExpandChartArea = ref(false);
+    const isShowToolbar = ref(true);
     const bufferMemoryCnt = ref(10);
     const zoomRef = ref();
     const zoomStartIdx = ref(0);
@@ -76,7 +78,7 @@ export default {
       zoom: {
         bufferMemoryCnt: 5,
         toolbar: {
-          show: true,
+          show: isShowToolbar,
           items: {
             previous: {
               icon: 'ev-icon-allow2-left',
@@ -287,10 +289,6 @@ export default {
       }
     };
 
-    const onToggleToolbar = () => {
-      chartGroupOptions.zoom.toolbar.show = !chartGroupOptions.zoom.toolbar.show;
-    };
-
     watch(isShowToggleLegend, (isShow) => {
       chartOptions.legend.show = isShow;
       chartOptions2.legend.show = isShow;
@@ -323,12 +321,12 @@ export default {
       chartOptions3,
       isShowToggleLegend,
       isExpandChartArea,
+      isShowToolbar,
       zoomRef,
       zoomStartIdx,
       zoomEndIdx,
       bufferMemoryCnt,
       onUpdateChartData,
-      onToggleToolbar,
     };
   },
 };

diff --git a/docs/views/zoomChart/example/Default.vue b/docs/views/zoomChart/example/Default.vue
@@ -31,7 +31,8 @@
       <ev-button @click="onUpdateChartData">데이터 업데이트</ev-button>
       <br/>
       <br/>
-      <ev-button @click="onToggleToolbar">툴바 생성/제거</ev-button>
+      <span class="toggle-label">툴바 생성</span>
+      <ev-toggle v-model="isShowToolbar"/>
       <br/>
       <br/>
       <span class="toggle-label">토글 레전드</span>
@@ -52,6 +53,7 @@ export default {
   setup() {
     const isShowToggleLegend = ref(false);
     const isExpandChartArea = ref(false);
+    const isShowToolbar = ref(true);
     const bufferMemoryCnt = ref(10);
     const zoomStartIdx = ref(0);
     const zoomEndIdx = ref(0);
@@ -96,7 +98,7 @@ export default {
       zoom: {
         bufferMemoryCnt: 5,
         toolbar: {
-          show: true,
+          show: isShowToolbar,
           items: {
             previous: {
               icon: 'ev-icon-allow2-left',
@@ -177,10 +179,6 @@ export default {
       chartOptions.zoom.bufferMemoryCnt = cnt;
     }, { immediate: true });
 
-    const onToggleToolbar = () => {
-      chartOptions.zoom.toolbar.show = !chartOptions.zoom.toolbar.show;
-    };
-
     return {
       chartData,
       chartOptions,
@@ -190,7 +188,7 @@ export default {
       zoomStartIdx,
       zoomEndIdx,
       bufferMemoryCnt,
-      onToggleToolbar,
+      isShowToolbar,
       onUpdateChartData,
     };
   },

diff --git a/src/components/chart/plugins/plugins.interaction.js b/src/components/chart/plugins/plugins.interaction.js
@@ -31,11 +31,19 @@ const modules = {
           if (isCurMouseXInsideBrushBtn('leftX')) {
             this.overlayCanvas.style['z-index'] = 1;
             this.brushCanvas.style['z-index'] = 2;
+
+            if (this.brushCanvas.style.cursor === 'initial') {
+              this.brushCanvas.style.cursor = 'ew-resize';
+            }
           }
 
           if (isCurMouseXInsideBrushBtn('rightX')) {
             this.overlayCanvas.style['z-index'] = 1;
             this.brushCanvas.style['z-index'] = 2;
+
+            if (this.brushCanvas.style.cursor === 'initial') {
+              this.brushCanvas.style.cursor = 'ew-resize';
+            }
           }
         }
       }
@@ -87,28 +95,26 @@ const modules = {
      */
 
     const onBrushMoveWheel = (e) => {
-      if (this.isUseZoomMode.value) {
-        e.preventDefault();
-        this.brushIdx.isExecutedByWheel = true;
-        if (this.brushIdx.start === this.brushIdx.end) {
+      e.preventDefault();
+      this.brushIdx.isExecutedByWheel = true;
+      if (this.brushIdx.start === this.brushIdx.end) {
+        return;
+      }
+
+      if (e.deltaY > 0) {
+        if (!this.brushIdx.start) {
           return;
         }
 
-        if (e.deltaY > 0) {
-          if (!this.brushIdx.start) {
-            return;
-          }
-
-          this.brushIdx.start -= 1;
-          this.brushIdx.end -= 1;
-        } else {
-          if (this.brushIdx.end === this.data.labels.length - 1) {
-            return;
-          }
-
-          this.brushIdx.start += 1;
-          this.brushIdx.end += 1;
+        this.brushIdx.start -= 1;
+        this.brushIdx.end -= 1;
+      } else {
+        if (this.brushIdx.end === this.data.labels.length - 1) {
+          return;
         }
+
+        this.brushIdx.start += 1;
+        this.brushIdx.end += 1;
       }
     };
 

diff --git a/src/components/chart/uses.js b/src/components/chart/uses.js
@@ -319,7 +319,7 @@ export const useZoomModel = (
       options: [],
     },
   });
-  const evChartClone = reactive({ data: null, options: [] });
+  const evChartClone = reactive({ data: null, options: null });
 
   const getRangeInfo = (zoomInfo) => {
     if (zoomInfo.data.length && zoomInfo.range && isUseZoomMode.value) {
@@ -377,7 +377,7 @@ export const useZoomModel = (
 
     if (evChartInfo.props.data.length) {
       evChartClone.data = cloneDeep(evChartInfo.props.data);
-      evChartClone.options = evChartInfo.props.options;
+      evChartClone.options = cloneDeep(evChartInfo.props.options);
 
       const emitFunc = {
         updateZoomStartIdx: startIdx => emit('update:zoomStartIdx', startIdx),
@@ -525,7 +525,6 @@ export const useZoomModel = (
     evChartInfo,
     evChartToolbarRef,
     evChartClone,
-    isUseZoomMode,
     brushIdx,
 
     createEvChartZoom,

diff --git a/src/components/chartBrush/ChartBrush.vue b/src/components/chartBrush/ChartBrush.vue
@@ -28,14 +28,14 @@ export default {
     let evChart = null;
     let evChartBrush = null;
 
-    const injectEvChartClone = inject('evChartClone', { data: [], options: [] });
+    const injectEvChartClone = inject('evChartClone', { data: [] });
+    const injectEvChartInfo = inject('evChartInfo', { props: { options: [] } });
     const injectBrushIdx = inject('brushIdx', {
       start: 0,
       end: 0,
       isExecutedByButton: false,
       isExecutedByWheel: false,
     });
-    const injectIsUseZoomMode = inject('isUseZoomMode', false);
 
     const {
       getNormalizedBrushOptions,
@@ -57,7 +57,7 @@ export default {
     );
 
     const evChartOption = computed(() => {
-      const chartOption = (injectEvChartClone.options ?? [])[evChartBrushOptions.value.chartIdx];
+      const chartOption = injectEvChartInfo.props.options[evChartBrushOptions.value.chartIdx];
 
       const option = {
         ...chartOption,
@@ -160,7 +160,6 @@ export default {
         evChart,
         evChartData,
         evChartOption,
-        injectIsUseZoomMode,
         injectBrushIdx,
         evChartBrushRef,
       );

diff --git a/src/components/chartBrush/chartBrush.core.js b/src/components/chartBrush/chartBrush.core.js
@@ -1,16 +1,14 @@
 import { throttle } from 'lodash-es';
 
 export default class EvChartBrush {
-  constructor(evChart, evChartData, evChartOption, isUseZoomMode, brushIdx, evChartBrushRef) {
+  constructor(evChart, evChartData, evChartOption, brushIdx, evChartBrushRef) {
     this.evChart = evChart;
     this.evChartData = evChartData;
     this.evChartOption = evChartOption;
-    this.isUseZooMode = isUseZoomMode;
     this.brushIdx = brushIdx;
     this.evChartBrushRef = evChartBrushRef;
 
     this.evChart.brushIdx = brushIdx;
-    this.evChart.isUseZoomMode = isUseZoomMode;
   }
 
   init(isResize) {
@@ -122,15 +120,7 @@ export default class EvChartBrush {
     const onMouseMove = (e) => {
       const evBrushChartPos = this.evBrushChartPos;
 
-      if (brushCanvas.style.cursor === 'initial' && this.isUseZooMode.value) {
-        brushCanvas.style.cursor = 'ew-resize';
-      }
-
       if (isClickBrushButton) {
-        if (!this.isUseZooMode.value) {
-          return;
-        }
-
         if (!curClickButtonType) {
           this.brushIdx.isExecutedByButton = true;
           const calDisToCurMouseX = xPos => Math.abs(
@@ -199,7 +189,6 @@ export default class EvChartBrush {
     };
 
     const initState = () => {
-      brushCanvas.style.cursor = 'initial';
       this.brushIdx.isExecutedByButton = false;
       isClickBrushButton = false;
       beforeMouseXPos = 0;

diff --git a/src/components/chartGroup/ChartGroup.vue b/src/components/chartGroup/ChartGroup.vue
@@ -62,7 +62,6 @@ export default {
       evChartInfo,
       evChartToolbarRef,
       evChartClone,
-      isUseZoomMode,
       brushIdx,
 
       createEvChartZoom,
@@ -73,7 +72,7 @@ export default {
     } = useZoomModel(normalizedOptions, { wrapper: null, evChartGroupRef });
 
     provide('evChartClone', evChartClone);
-    provide('isUseZoomMode', isUseZoomMode);
+    provide('evChartInfo', evChartInfo);
     provide('brushIdx', brushIdx);
 
     onMounted(() => {

diff --git a/src/components/chartGroup/style/chartGroup.scss b/src/components/chartGroup/style/chartGroup.scss
@@ -1,4 +1,5 @@
 .ev-chart-group__wrapper {
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
diff --git a/src/components/chartGroup/uses.js b/src/components/chartGroup/uses.js
@@ -5,7 +5,7 @@ const DEFAULT_OPTIONS = {
   zoom: {
     bufferMemoryCnt: 100,
     toolbar: {
-      show: true,
+      show: false,
       items: {
         previous: {
           icon: 'ev-icon-allow2-left',