[#920] [3.0] Line Chart Drag select 이벤트 추가 (#921)

Co-authored-by: jinhee park <jinhee@ex-em.com>

docs/views/lineChart/api/lineChart.md

@@ -169,11 +169,20 @@ const chartData =
 | tipBackground | Hex, RGB, RGBA Code(String) | '#000000' | tip 배경색상  | |
 | tipTextColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | tip 글자 색상  | |
 
+#### dragSelection
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+| --- | ---- | ----- | --- | ----------|
+| use | Boolean | false | drag-select 사용 여부 | true / false |
+| keepDisplay | Boolean | true | 드래그 후 선택영역 유지 여부  | true / false  |
+| fillColor | Hex, RGB, RGBA Code(String) | '#38ACEC' | 선택 영역 색상 | |
+| opacity | Number | 0.65 | 선택 영역 불투명도 | 0 ~ 1 |
+
 >### Event
 | 이름 | 파라미터 | 설명 |
  |------|----------|------|
  | click | selectedItem | 클릭된 series의 label, value, seriesID 값을 반환 |
  | dbl-click | selectedItem | 더블 클릭된 series의 label, value, seriesID 값을 반환 |
+ | drag-select | data, range | 그래프에서 드래그를 해서 선택영역 안의 데이터와 선택영역에 대한 범위 값을 얻을 수 있다. <br><br> ex) data : [{ seriesName, seriesId, items: [] }, {...}, {...}] <br> ex) range : { xMin, xMax, yMin, yMax } <br><br> data의 요소 propery중 items 는 해당 Series의 데이터 들이 있으며 x, y값은 데이터 기반 <xp, yp 는 Canvas기반의 좌표 값 |
  * 단, `selectedItem` 옵션의 `use`값이 `true` 이어야 `selectedItem` 객체를 반환하며 false일 경우 빈 객체를 반환
 
 

docs/views/lineChart/example/DragSelection.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="case">
+    <ev-chart
+      :data="chartData"
+      :options="chartOptions"
+      @drag-select="onDragSelect"
+    />
+    <div class="description">
+      <div class="badge yellow"> 선택 영역 내 데이터 </div>
+      <br><br>
+      <div
+        v-for="(row, rowIndex) in selectionItems"
+        :key="rowIndex"
+      >
+        <span> Series Name : {{ row.seriesName }} </span>
+        <br>
+        <div
+          v-for="(item, itemIndex) in row.items"
+          :key="itemIndex"
+        >
+          <span>x : {{ convertToDateString(item.x) }}</span>
+          <span>y : {{ item.y }}</span>
+        </div>
+        <br><br>
+      </div>
+      <div class="badge yellow"> 범위 값 </div>
+      <br><br>
+      <div v-if="selectionRange.xMin">
+        <p> X min : {{ convertToDateString(selectionRange.xMin) }} </p>
+        <p> X max : {{ convertToDateString(selectionRange.xMax) }} </p>
+        <p> Y min : {{ selectionRange.yMin }} </p>
+        <p> Y max : {{ selectionRange.yMax }} </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { ref } from 'vue';
+  import dayjs from 'dayjs';
+
+  export default {
+    setup() {
+      const time = dayjs().format('YYYY-MM-DD');
+      const chartData = {
+        series: {
+          series1: { name: 'series#1' },
+          series2: { name: 'series#2' },
+        },
+        labels: [
+          dayjs(time),
+          dayjs(time).add(1, 'day'),
+          dayjs(time).add(2, 'day'),
+          dayjs(time).add(3, 'day'),
+          dayjs(time).add(4, 'day'),
+          dayjs(time).add(5, 'day'),
+          dayjs(time).add(6, 'day'),
+        ],
+        data: {
+          series1: [100, 25, 36, 47, 0, 50, 80],
+          series2: [80, 36, 25, 47, 15, 100, 0],
+        },
+      };
+
+      const chartOptions = {
+        type: 'line',
+        width: '100%',
+        title: {
+          text: 'Chart Title',
+          show: true,
+        },
+        legend: {
+          show: true,
+          position: 'right',
+        },
+        axesX: [{
+          type: 'time',
+          showGrid: true,
+          timeFormat: 'MM/DD',
+          interval: 'day',
+        }],
+        axesY: [{
+          type: 'linear',
+          showGrid: true,
+          startToZero: true,
+          autoScaleRatio: 0.1,
+        }],
+        dragSelection: {
+          use: true,
+          keepDisplay: true,
+        },
+      };
+
+      const selectionItems = ref([]);
+      const selectionRange = ref({});
+      const onDragSelect = ({ data, range }) => {
+        selectionItems.value = data;
+        selectionRange.value = range;
+      };
+
+      const convertToDateString = value => dayjs(value).format('MM/DD');
+
+      return {
+        chartData,
+        chartOptions,
+        selectionItems,
+        selectionRange,
+        onDragSelect,
+        convertToDateString,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+.description {
+  span {
+    margin-right: 15px;
+  }
+}
+</style>

docs/views/lineChart/example/Event.vue

@@ -61,7 +61,6 @@
         axesX: [{
           type: 'time',
           showGrid: false,
-          categoryMode: true,
           timeFormat: 'YYYY-MM-DD',
           interval: 'day',
         }],
@@ -79,12 +78,12 @@
 
       const clickedLabel = ref("''");
       const onClick = (target) => {
-        clickedLabel.value = target.label;
+        clickedLabel.value = dayjs(target.label).format('YYYY-MM-DD');
       };
 
       const dblClickedLabel = ref("''");
       const onDblClick = (target) => {
-        dblClickedLabel.value = target.label;
+        dblClickedLabel.value = dayjs(target.label).format('YYYY-MM-DD');
       };
 
       return {

docs/views/lineChart/props.js

@@ -8,6 +8,8 @@ import Stack from './example/Stack';
 import StackRaw from '!!raw-loader!./example/Stack';
 import Event from './example/Event';
 import EventRaw from '!!raw-loader!./example/Event';
+import DragSelection from './example/DragSelection';
+import DragSelectionRaw from '!!raw-loader!./example/DragSelection';
 import Tooltip from './example/Tooltip';
 import TooltipRaw from '!!raw-loader!./example/Tooltip';
 
@@ -34,6 +36,11 @@ export default {
       component: Event,
       parsedData: parseComponent(EventRaw),
     },
+    DragSelection: {
+      description: 'Drag Select 이벤트 등록이 가능 합니다',
+      component: DragSelection,
+      parsedData: parseComponent(DragSelectionRaw),
+    },
     Tooltip: {
       description: 'Tooltip 기능으로 마우스가 위치한 곳의 값을 볼 수 있습니다.',
       component: Tooltip,

docs/views/scatterChart/api/scatterChart.md

@@ -126,7 +126,7 @@ const chartData =
 #### dragSelection
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
-| use | Boolean | true | drag-select 사용 여부 | true / false |
+| use | Boolean | false | drag-select 사용 여부 | true / false |
 | keepDisplay | Boolean | true | 드래그 후 선택영역 유지 여부  | true / false  |
 | fillColor | Hex, RGB, RGBA Code(String) | '#38ACEC' | 선택 영역 색상 | |
 | opacity | Number | 0.65 | 선택 영역 불투명도 | 0 ~ 1 |

src/components/chart/element/element.line.js

@@ -303,6 +303,19 @@ class Line {
 
     return item;
   }
+
+  /**
+   * Returns items in range
+   * @param {object} params  range values
+   *
+   * @returns {array}
+   */
+  findItems({ xsp, width }) {
+    console.log(this.data);
+    const xep = xsp + width;
+
+    return this.data.filter(seriesData => (xsp - 1 <= seriesData.xp) && (seriesData.xp <= xep + 1));
+  }
 }
 
 export default Line;

src/components/chart/plugins/plugins.interaction.js

@@ -146,8 +146,8 @@ const modules = {
     this.onMouseDown = (e) => {
       const { dragSelection, type } = this.options;
 
-      if (dragSelection.use && type === 'scatter') {
-        this.dragStart(e);
+      if (dragSelection.use && (type === 'scatter' || type === 'line')) {
+        this.dragStart(e, type);
       }
     };
 
@@ -174,7 +174,7 @@ const modules = {
    *
    * @returns {undefined}
    */
-  dragStart(evt) {
+  dragStart(evt, type) {
     const [offsetX, offsetY] = this.getMousePosition(evt);
     const chartRect = this.chartRect;
     const labelOffset = this.labelOffset;
@@ -231,9 +231,9 @@ const modules = {
       }
 
       dragInfo.xsp = Math.min(xcp, xep);
-      dragInfo.ysp = Math.min(ycp, yep);
+      dragInfo.ysp = type === 'scatter' ? Math.min(ycp, yep) : aRange.y1;
       dragInfo.width = Math.ceil(Math.abs(xep - xcp));
-      dragInfo.height = Math.ceil(Math.abs(yep - ycp));
+      dragInfo.height = type === 'scatter' ? Math.ceil(Math.abs(yep - ycp)) : aRange.y2 - aRange.y1;
 
       this.overlayClear();
       this.drawSelectionArea(dragInfo);

src/components/chart/uses.js

@@ -81,9 +81,9 @@ const DEFAULT_OPTIONS = {
     tipTextColor: '#FFFFFF',
   },
   dragSelection: {
-    use: true,
+    use: false,
     keepDisplay: true,
-    fillColor: '#38acec',
+    fillColor: '#38ACEC',
     opacity: 0.65,
   },
 };