[#1268] Chart > Brush 기능

###################################### - brush로 zoom 영역을 넓히거나 좁히는 기능
ex-em · Sep 12, 2022 · fc99b3d · fc99b3d
1 parent ee3e3df
commit fc99b3d
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 133 deletions.
diff --git a/docs/views/zoomChart/example/ChartBrush.vue b/docs/views/zoomChart/example/ChartBrush.vue
@@ -18,11 +18,6 @@
         :options="chartOptions2"
       />
       <ev-chart-brush :options="brushOptions2"/>
-      <ev-chart
-        :data="chartData3"
-        :options="chartOptions3"
-      />
-      <ev-chart-brush :options="brushOptions3"/>
     </ev-chart-group>
 
     <div class="description">
@@ -141,24 +136,6 @@ export default {
       },
     });
 
-    const chartData3 = reactive({
-      series: {
-        series1: { name: 'series#1', fill: false, point: true },
-        series2: { name: 'series#2', fill: false, point: true },
-        series3: { name: 'series#3', fill: false, point: true },
-        series4: { name: 'series#4', fill: false, point: true },
-        series5: { name: 'series#5', fill: false, point: true },
-      },
-      labels: [],
-      data: {
-        series1: [],
-        series2: [],
-        series3: [],
-        series4: [],
-        series5: [],
-      },
-    });
-
     const chartOptions = reactive({
       type: 'line',
       width: '100%',
@@ -215,61 +192,22 @@ export default {
       },
     });
 
-    const chartOptions3 = reactive({
-      type: 'line',
-      width: '100%',
-      title: {
-        text: '그룹에 있는 차트 3',
-        show: true,
-      },
-      legend: {
-        show: false,
-        position: 'right',
-      },
-      axesX: [{
-        type: 'time',
-        showGrid: false,
-        timeFormat: 'HH:mm:ss',
-        interval: 'second',
-      }],
-      axesY: [{
-        type: 'linear',
-        showGrid: true,
-        startToZero: true,
-        autoScaleRatio: 0.1,
-      }],
-      maxTip: {
-        use: true,
-        showIndicator: true,
-        indicatorColor: '#FF0000',
-        tipBackground: '#000000',
-        tipTextColor: '#FFFFFF',
-      },
-    });
-
     const brushOptions = reactive({
       show: true,
       chartIdx: 0,
-      height: 90,
+      height: 100,
     });
 
     const brushOptions2 = reactive({
       show: true,
       chartIdx: 1,
-      height: 90,
-    });
-
-    const brushOptions3 = reactive({
-      show: true,
-      chartIdx: 2,
-      height: 90,
+      height: 100,
     });
 
     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);
@@ -278,10 +216,6 @@ 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(() => {
@@ -304,7 +238,6 @@ export default {
 
       init(chartData);
       init(chartData2);
-      init(chartData3);
 
       for (let ix = 0; ix < Math.ceil(Math.random() * 100); ix++) {
         addRandomChartData();
@@ -318,13 +251,11 @@ export default {
     const onToggleBrush = () => {
       brushOptions.show = !brushOptions.show;
       brushOptions2.show = !brushOptions2.show;
-      brushOptions3.show = !brushOptions3.show;
     };
 
     watch(isShowToggleLegend, (isShow) => {
       chartOptions.legend.show = isShow;
       chartOptions2.legend.show = isShow;
-      chartOptions3.legend.show = isShow;
     });
 
     watch(isExpandChartArea, (isExpand) => {
@@ -347,13 +278,10 @@ export default {
       chartGroupOptions,
       chartData,
       chartData2,
-      chartData3,
       chartOptions,
       chartOptions2,
-      chartOptions3,
       brushOptions,
       brushOptions2,
-      brushOptions3,
       isShowToggleLegend,
       isExpandChartArea,
       zoomRef,

diff --git a/src/components/chart/chart.core.js b/src/components/chart/chart.core.js
@@ -57,6 +57,7 @@ class EvChart {
     this.bufferCtx = this.bufferCanvas.getContext('2d');
     this.overlayCanvas = document.createElement('canvas');
     this.overlayCanvas.setAttribute('style', 'display: block; z-index: 2;');
+    this.overlayCanvas.setAttribute('class', 'overlay-canvas');
     this.overlayCtx = this.overlayCanvas.getContext('2d');
 
     this.pixelRatio = window.devicePixelRatio || 1;

diff --git a/src/components/chart/chartZoom.core.js b/src/components/chart/chartZoom.core.js
@@ -105,7 +105,7 @@ export default class EvChartZoom {
       zoomMoveEndIdx = zoomEndIdx + 1;
     }
 
-    this.isExecuteZoomAtToolbar = true;
+    this.isExecutedByToolbar = true;
     this.executeZoom(zoomMoveStartIdx, zoomMoveEndIdx);
     this.zoomAreaMemory.current[0] = [zoomMoveStartIdx, zoomMoveEndIdx];
   }
@@ -117,7 +117,7 @@ export default class EvChartZoom {
 
     const [zoomStartIdx, zoomEndIdx] = this.zoomAreaMemory[direction].pop();
 
-    this.isExecuteZoomAtToolbar = true;
+    this.isExecutedByToolbar = true;
     this.executeZoom(zoomStartIdx, zoomEndIdx);
     this.setZoomAreaMemory(zoomStartIdx, zoomEndIdx, direction === 'previous' ? 'latest' : 'previous');
   }
@@ -228,7 +228,7 @@ export default class EvChartZoom {
       }
 
       this.isAnimationFinish = false;
-      this.isExecuteZoomAtToolbar = true;
+      this.isExecutedByToolbar = true;
       this.executeDragZoomAnimation(
         displayCanvas,
         animationCtx,
@@ -275,8 +275,10 @@ export default class EvChartZoom {
       );
     }
 
-    this.brushIdx.start = zoomStartIdx;
-    this.brushIdx.end = zoomEndIdx;
+    if (!this.brushIdx.isExecutedByBrush) {
+      this.brushIdx.start = zoomStartIdx;
+      this.brushIdx.end = zoomEndIdx;
+    }
 
     if (this.emitFunc) {
       this.emitFunc.updateZoomStartIdx(zoomStartIdx);
@@ -469,7 +471,7 @@ export default class EvChartZoom {
     const cloneLabelsLastIdx = this.cloneLabelsLastIdx;
 
     if (currentZoomStartIdx !== 0 || currentZoomEndIdx !== cloneLabelsLastIdx) {
-      this.isExecuteZoomAtToolbar = true;
+      this.isExecutedByToolbar = true;
       this.executeZoom(0, cloneLabelsLastIdx);
       this.setZoomAreaMemory(0, cloneLabelsLastIdx);
     }

diff --git a/src/components/chart/plugins/plugins.interaction.js b/src/components/chart/plugins/plugins.interaction.js
@@ -18,6 +18,28 @@ const modules = {
         return;
       }
 
+      if (this.options.brush) {
+        if (!this.brushCanvas) {
+          if (e.path[0].nextSibling.className === 'brush-canvas') {
+            this.brushCanvas = e.path[0].nextSibling;
+          }
+        } else {
+          const isCurMouseXInsideBrushBtn = xPos =>
+            e.offsetX + this.evBrushChartPos.width >= this.evBrushChartPos[xPos]
+            && e.offsetX - this.evBrushChartPos.width <= this.evBrushChartPos[xPos];
+
+          if (isCurMouseXInsideBrushBtn('leftX')) {
+            this.overlayCanvas.style['z-index'] = 1;
+            this.brushCanvas.style['z-index'] = 2;
+          }
+
+          if (isCurMouseXInsideBrushBtn('rightX')) {
+            this.overlayCanvas.style['z-index'] = 1;
+            this.brushCanvas.style['z-index'] = 2;
+          }
+        }
+      }
+
       const { indicator, tooltip, type } = this.options;
       const offset = this.getMousePosition(e);
       const hitInfo = this.findHitItem(offset);

diff --git a/src/components/chart/uses.js b/src/components/chart/uses.js
@@ -304,7 +304,7 @@ export const useZoomModel = (
   const evChartToolbarRef = ref();
 
   const evChartZoomOptions = reactive({ zoom: evChartNormalizedOptions.zoom });
-  const brushIdx = reactive({ start: 0, end: 0 });
+  const brushIdx = reactive({ start: 0, end: 0, isExecutedByBrush: false });
 
   let evChartZoom = null;
   const evChartInfo = reactive({
@@ -329,7 +329,6 @@ export const useZoomModel = (
         use: isUseZoomMode.value,
         getRangeInfo,
       };
-      option.chartIdx = idx;
 
       if (isUseZoomMode.value) {
         option.dragSelection = {
@@ -477,9 +476,9 @@ export const useZoomModel = (
   };
 
   const controlZoomIdx = (zoomStartIdx, zoomEndIdx) => {
-    if (evChartZoom.isExecuteZoomAtToolbar) {
-      evChartZoom.isExecuteZoomAtToolbar = false;
-      return;
+    if (evChartZoom.isExecutedByToolbar && !brushIdx.isExecutedByBrush) {
+        evChartZoom.isExecutedByToolbar = false;
+        return;
     }
 
     if (isUseZoomMode.value) {
@@ -493,6 +492,7 @@ export const useZoomModel = (
     evChartInfo,
     evChartToolbarRef,
     evChartClone,
+    isUseZoomMode,
     brushIdx,
 
     createEvChartZoom,

diff --git a/src/components/chartBrush/ChartBrush.vue b/src/components/chartBrush/ChartBrush.vue
@@ -29,7 +29,8 @@ export default {
     let evChartBrush = null;
 
     const injectEvChartClone = inject('evChartClone', { data: [], options: [] });
-    const injectBrushIdx = inject('brushIdx', { start: 0, end: 0 });
+    const injectBrushIdx = inject('brushIdx', { start: 0, end: 0, isExecutedByBrush: false });
+    const injectIsUseZoomMode = inject('isUseZoomMode', false);
 
     const {
       getNormalizedBrushOptions,
@@ -53,8 +54,8 @@ export default {
     const evChartOption = computed(() => {
       const option = {
         ...(injectEvChartClone.options ?? [])[evChartBrushOptions.value.chartIdx],
-        chartIdx: evChartBrushOptions.value.chartIdx,
         brush: true,
+        brushButtonColor: evChartBrushOptions.value.buttonColor,
         height: evChartBrushOptions.value.height,
         title: {
           show: false,
@@ -129,6 +130,7 @@ export default {
         evChart,
         evChartData,
         evChartOption,
+        injectIsUseZoomMode,
         injectBrushIdx,
         evChartBrushRef,
       );
@@ -146,7 +148,7 @@ export default {
       }
     };
 
-    watch(injectBrushIdx, () => {
+    watch(() => [injectBrushIdx.start, injectBrushIdx.end], () => {
       if (evChartBrushRef.value) {
         drawChartBrush();
       }