[#1156] Chart > Axis > title 옵션 추가

docs/views/barChart/api/barChart.md

@@ -130,6 +130,7 @@ const chartData = {
   | plotLines | Array | ([상세](#plotline)) | plot line(임계선 표시 용도) 설정 | |
   | plotBands | Array | ([상세](#plotband)) | plot band(임계영역 표시 용도) 설정 | |
   | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
+  | title | Object | ([상세](#title)) | 라벨의 폰트 스타일을 설정 | |  
 
 ##### linear type
    - interval (Axis Label 표기를 위한 interval)
@@ -171,6 +172,18 @@ const chartData = {
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 | |
 | fitDir | String | 'right' | Ellipsis 방향 | ( right => 'aaa...', left => '...aaa') |
 
+##### title
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+|-----|------|-------|-----|-----|
+| use | Boolean | false | Chart 축(Axis) Title 표시 여부 | true / false |
+| text | String | null | Title 로 표시될 text | |
+| fontSize | Number | 12 | 글자 크기 | |
+| fontWeight | Number | 400 | 글자 굵기 | 100, 200, 300, ... 900 |
+| fontFamily | String | 'Roboto' | 폰트 | |
+| fontStyle | String | 'normal' | 폰트 스타일 | 'normal', 'italic' |
+| textAlign | String | 'right' | 텍스트 정렬| 'right', 'left', 'center' |
+| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | |
+
 ##### plotLine
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|

docs/views/heatMap/api/heatMap.md

@@ -93,6 +93,7 @@ const chartData =
   | interval | String/number | | 축에 표시되는 값의 간격 단위 ( time: string / linear: number) |  [time](#time-type), [linear](#linear-type) |
   | labelStyle | Object | ([상세](#labelstyle)) | 라벨의 폰트 스타일을 설정 | |
   | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
+  | title | Object | ([상세](#title)) | 라벨의 폰트 스타일을 설정 | |  
 
 ##### time type
    - interval (Axis Label 표기를 위한 interval)
@@ -119,10 +120,22 @@ const chartData =
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 | |
 | fitDir | String | 'right' | Ellipsis 방향 | ( right => 'aaa...', left => '...aaa') |
 
+##### title
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+|-----|------|-------|-----|-----|
+| use | Boolean | false | Chart 축(Axis) Title 표시 여부 | true / false |
+| text | String | null | Title 로 표시될 text | |
+| fontSize | Number | 12 | 글자 크기 | |
+| fontWeight | Number | 400 | 글자 굵기 | 100, 200, 300, ... 900 |
+| fontFamily | String | 'Roboto' | 폰트 | |
+| fontStyle | String | 'normal' | 폰트 스타일 | 'normal', 'italic' |
+| textAlign | String | 'right' | 텍스트 정렬| 'right', 'left', 'center' |
+| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | |
+
 #### title
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
-| show | Boolean | false | 타이틀 표시 여부 | true /false |
+| show | Boolean | false | 차트 타이틀 표시 여부 | true /false |
 | height | Number | 40 | 타이틀 영역이 높이 | |
 | text | String | '' | 타이틀 | | 
 | style | Object | | 타이틀 폰트 스타일 | | 

docs/views/lineChart/api/lineChart.md

@@ -121,6 +121,7 @@ const chartData =
   | plotLines | Array | ([상세](#plotline)) | plot line(임계선 표시 용도) 설정 | |
   | plotBands | Array | ([상세](#plotband)) | plot band(임계영역 표시 용도) 설정 | |
   | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
+  | title | Object | ([상세](#title)) | 라벨의 폰트 스타일을 설정 | |  
 
 ##### time type
    - interval (Axis Label 표기를 위한 interval)
@@ -140,6 +141,18 @@ const chartData =
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 | |
 | fitDir | String | 'right' | Ellipsis 방향 | ( right => 'aaa...', left => '...aaa') |
 
+##### title
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+|-----|------|-------|-----|-----|
+| use | Boolean | false | Chart 축(Axis) Title 표시 여부 | true / false |
+| text | String | null | Title 로 표시될 text | |
+| fontSize | Number | 12 | 글자 크기 | |
+| fontWeight | Number | 400 | 글자 굵기 | 100, 200, 300, ... 900 |
+| fontFamily | String | 'Roboto' | 폰트 | |
+| fontStyle | String | 'normal' | 폰트 스타일 | 'normal', 'italic' |
+| textAlign | String | 'right' | 텍스트 정렬| 'right', 'left', 'center' |
+| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | |
+
 ##### plotLine
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|

docs/views/lineChart/example/AxisTitle.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="case">
+    <ev-chart
+      :data="chartData"
+      :options="chartOptions"
+    />
+    <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 = {
+        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>

docs/views/lineChart/props.js

@@ -18,6 +18,8 @@ import SelectLabel from './example/SelectLabel';
 import SelectLabelRaw from '!!raw-loader!./example/SelectLabel';
 import SelectSeries from './example/SelectSeries';
 import SelectSeriesRaw from '!!raw-loader!./example/SelectSeries';
+import AxisTitle from './example/AxisTitle';
+import AxisTitleRaw from '!!raw-loader!./example/AxisTitle';
 
 export default {
   mdText,
@@ -67,5 +69,10 @@ export default {
       component: PlotLine,
       parsedData: parseComponent(PlotLineRaw),
     },
+    AxisTitle: {
+      description: '차트 축에 title을 설정할 수 있습니다.',
+      component: AxisTitle,
+      parsedData: parseComponent(AxisTitleRaw),
+    },
   },
 };

docs/views/scatterChart/api/scatterChart.md

@@ -85,6 +85,7 @@ const chartData =
   | plotLines | Array | ([상세](#plotline)) | plot line(임계선 표시 용도) 설정 | |
   | plotBands | Array | ([상세](#plotband)) | plot band(임계영역 표시 용도) 설정 | |
   | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
+  | title | Object | ([상세](#title)) | 라벨의 폰트 스타일을 설정 | |  
 
 ##### time type
    - interval (Axis Label 표기를 위한 interval)
@@ -108,6 +109,18 @@ const chartData =
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 | |
 | fitDir | String | 'right' | Ellipsis 방향 | ( right => 'aaa...', left => '...aaa') |
 
+##### title
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+|-----|------|-------|-----|-----|
+| use | Boolean | false | Chart 축(Axis) Title 표시 여부 | true / false |
+| text | String | null | Title 로 표시될 text | |
+| fontSize | Number | 12 | 글자 크기 | |
+| fontWeight | Number | 400 | 글자 굵기 | 100, 200, 300, ... 900 |
+| fontFamily | String | 'Roboto' | 폰트 | |
+| fontStyle | String | 'normal' | 폰트 스타일 | 'normal', 'italic' |
+| textAlign | String | 'right' | 텍스트 정렬| 'right', 'left', 'center' |
+| color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | |
+
 ##### plotLine
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|

package.json

@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.17",
+  "version": "3.3.18",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

src/components/chart/chart.core.js

@@ -443,15 +443,31 @@ class EvChart {
     const { width, height } = this.getChartDOMRect();
 
     const padding = this.options.padding;
+    const xAxisTitleOpt = this.options.axesX[0]?.title;
+    const yAxisTitleOpt = this.options.axesY[0]?.title;
+    const titleMargin = 10;
+
+    let xAxisTitleHeight = 0;
+    if (xAxisTitleOpt?.use && xAxisTitleOpt?.text) {
+      const fontSize = isNaN(xAxisTitleOpt?.fontSize) ? 12 : xAxisTitleOpt?.fontSize;
+      xAxisTitleHeight = fontSize + titleMargin;
+    }
+
+    let yAxisTitleHeight = 0;
+    if (yAxisTitleOpt?.use && yAxisTitleOpt?.text) {
+      const fontSize = isNaN(yAxisTitleOpt?.fontSize) ? 12 : yAxisTitleOpt?.fontSize;
+      yAxisTitleHeight = fontSize + titleMargin;
+    }
+
     const horizontalPadding = padding.left + padding.right;
-    const verticalPadding = padding.top + padding.bottom;
+    const verticalPadding = padding.top + padding.bottom + xAxisTitleHeight + yAxisTitleHeight;
     const chartWidth = width > horizontalPadding ? width - horizontalPadding : width;
     const chartHeight = height > verticalPadding ? height - verticalPadding : height;
 
     const x1 = padding.left;
     const x2 = Math.max(width - padding.right, x1 + 2);
-    const y1 = padding.top;
-    const y2 = Math.max(height - padding.bottom, y1 + 2);
+    const y1 = padding.top + yAxisTitleHeight;
+    const y2 = Math.max(height - padding.bottom - xAxisTitleHeight, y1 + 2);
 
     return {
       x1,