[#1268] Chart > Brush 기능

docs/router/index.js

@@ -29,6 +29,7 @@ import barChartProps from 'docs/views/barChart/props';
 import lineChartProps from 'docs/views/lineChart/props';
 import scatterChartProps from 'docs/views/scatterChart/props';
 import zoomChartProps from 'docs/views/zoomChart/props';
+import brushChartProps from 'docs/views/brushChart/props';
 import comboChartProps from 'docs/views/comboChart/props';
 import pieChartProps from 'docs/views/pieChart/props';
 import treeGridProps from 'docs/views/treeGrid/props';
@@ -293,6 +294,15 @@ const routes = [
       category: 'Chart',
     },
   },
+  {
+    path: '/brushChart',
+    name: 'BrushChart',
+    component: PageView,
+    props: brushChartProps,
+    meta: {
+      category: 'Chart',
+    },
+  },
   {
     path: '/message',
     name: 'Message',

docs/views/brushChart/api/brushChart.md

@@ -0,0 +1,34 @@
+>## Desc
+>### 1. 차트 브러쉬 (Chart Brush)
+ - 태그는 &lt;ev-chart-brush&gt;(이하 <차트 브러쉬>)으로 정의
+ - Chart와 Brush를 Chart Group로 감싸 차트의 줌 위치와 원본 차트를 보여주는 Brush 기능 사용 가능.
+
+```
+<ev-chart-group
+    ...
+>
+  <ev-chart
+    ...
+  />
+  <ev-chart-brush :options='options'/>
+  <ev-chart
+    ...
+  />
+  <ev-chart-brush :options='options2'/>
+</ev-chart-group>
+```   
+<br/>
+
+>## 브러쉬 사용 가능한 차트
+1. [Line Chart](../lineChart)
+
+<br/>
+
+>## Props
+### 1. options
+| 이름          | 타입      | 디폴트  | 설명                                                                      | 종류(예시)                       | 
+|-------------|---------|------|-------------------------------------------------------------------------|---------------------------------------------------|
+| show        | Boolean | true | 차트 브러쉬를 사용할지 설정                                                         |                              |
+| chartIdx    | Number  | 0    | Chart Group으로 묶여있는 chart 중 몇 번째의(인덱스) 차트를 브러쉬에 보여줄지 설정                  |                              |
+| height      | Number  | 100  | 차트 브러쉬의 높이 설정                                                           |                                 |
+| useDebounce | Boolean | true | true 이면 마지막 브러쉬 영역으로 차트가 업데이트 되고 false 이면 브러쉬 영역 조절에 따라 동시에 차트도 업데이트 됨. |                                 |

docs/views/brushChart/example/AxisTitle.vue

@@ -0,0 +1,212 @@
+<template>
+  <div class="case">
+    <ev-chart-group>
+      <ev-chart
+        :data="chartData"
+        :options="chartOptions"
+      />
+      <ev-chart-brush/>
+    </ev-chart-group>
+    <div class="description">
+      <div
+        v-for="(option, idx) in titleOptions"
+        :key="idx"
+        class="section"
+      >
+        <h3 v-if="idx===0" class="section-title"> X Axis </h3>
+        <h3 v-else class="section-title"> Y Axis </h3>
+
+        <div class="section-body">
+          <div class="section-item">
+            <label>use</label>
+            <ev-toggle v-model="option.use"/>
+          </div>
+          <div class="section-item">
+            <label>text</label>
+            <ev-text-field v-model="option.text"/>
+          </div>
+          <div class="section-item">
+            <label>fontWeight</label>
+            <ev-input-number
+              v-model="option.fontWeight"
+              :step="100"
+              :min="100"
+              :max="900"
+            />
+          </div>
+          <div class="section-item">
+            <label>fontSize</label>
+            <ev-input-number
+              v-model="option.fontSize"
+              :step="1"
+              :min="1"
+              :max="30"
+            />
+          </div>
+          <div class="section-item">
+            <label>fontFamily</label>
+            <ev-text-field v-model="option.fontFamily"/>
+          </div>
+          <div class="section-item">
+            <label>textAlign</label>
+            <ev-select
+              v-model="option.textAlign"
+              :items="[{
+                name: 'right',
+                value: 'right',
+              }, {
+                name: 'center',
+                value: 'center',
+              }, {
+                name: 'left',
+                value: 'left',
+              }]"
+            />
+          </div>
+          <div class="section-item">
+            <label>fontStyle</label>
+            <ev-select
+              v-model="option.fontStyle"
+              :items="[{
+                name: 'normal',
+                value: 'normal',
+              }, {
+                name: 'italic',
+                value: 'italic',
+              }]"
+            />
+          </div>
+          <div class="section-item">
+            <label>color</label>
+            <ev-text-field v-model="option.color"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, ref } from 'vue';
+import dayjs from 'dayjs';
+
+export default {
+  setup() {
+    const xAxisTitle = reactive({
+      use: true,
+      text: '1 Week',
+      fontWeight: 400,
+      fontSize: 12,
+      fontFamily: 'Roboto',
+      textAlign: 'right',
+      fontStyle: 'normal',
+      color: '#808080',
+    });
+
+    const yAxisTitle = reactive({
+      use: true,
+      text: 'Amount',
+      fontWeight: 400,
+      fontSize: 12,
+      fontFamily: 'Roboto',
+      textAlign: 'right',
+      fontStyle: 'normal',
+      color: '#808080',
+    });
+
+    const titleOptions = ref([xAxisTitle, yAxisTitle]);
+
+    const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+
+    const chartData = reactive({
+      series: {
+        series1: { name: 'series#1' },
+      },
+      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: [10, 20, 21, 57, 12, 86, 44],
+      },
+    });
+
+    const chartOptions = reactive({
+      type: 'line',
+      width: '100%',
+      height: '300px',
+      title: {
+        text: 'Chart Title',
+        show: true,
+      },
+      legend: {
+        show: false,
+      },
+      axesX: [{
+        type: 'time',
+        timeFormat: 'MM/DD',
+        interval: 'day',
+        title: xAxisTitle,
+      }],
+      axesY: [{
+        type: 'linear',
+        showGrid: true,
+        startToZero: true,
+        autoScaleRatio: 0.1,
+        title: yAxisTitle,
+      }],
+    });
+
+    return {
+      chartData,
+      chartOptions,
+      titleOptions,
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.section {
+  width: 100%;
+
+  &-title {
+    padding: 10px;
+    background-color: rgba(#FADE4C, 0.6);
+  }
+
+  &-body {
+    display: flex;
+    padding: 0 0 10px 10px;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .section-item {
+      display: flex;
+      width: 50%;
+      flex-direction: row;
+      margin-top: 10px;
+
+      label {
+        width: 100px;
+        line-height: 35px;
+        margin-right: 10px;
+        font-weight: 700;
+      }
+
+      .ev-toggle {
+        margin-top: 7px;
+      }
+
+      .ev-text-field, .ev-input-number, .ev-select {
+        width: auto;
+      }
+    }
+  }
+}
+</style>