[#931] [3.0] Chart - Plot Band 옵션 추가

docs/views/barChart/api/barChart.md

@@ -100,8 +100,9 @@ const chartData = {
   | horizontal | Boolean | null | horizontal Bar 차트 표시를 위한 속성 | true / false | 
   | interval | String | null | 축에 표시되는 값의 간격 단위 (축의 타입에 따라 달라짐)
   | labelStyle | Object | ([상세](#labelstyle)) | 라벨의 폰트 스타일을 설정 | |
-  | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
   | plotLines | Array | ([상세](#plotline)) | plot line(임계선 표시 용도) 설정 | |
+  | plotBands | Array | ([상세](#plotband)) | plot band(임계영역 표시 용도) 설정 | |
+  | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
 
 ##### linear type
    - interval (Axis Label 표기를 위한 interval)
@@ -143,11 +144,20 @@ const chartData = {
 | value | Number(value), Date, Number(Index) | null | 선을 표시할 위치에 해당하는 값 | 3000, <br> new Date(), <br> 1 (축의 타입이 'step'인 경우 1번째 요소) |
 | color | Hex, RGB, RGBA Code(String) | '#FF0000' | 선 색상 | |
 | segments | Array | null | dash 간격 | [6, 2] |
-| label | Object | null | 표시할 label의 스타일을 정의 | ([상세](#plotlinelabel)) |
+| label | Object | null | 표시할 label의 스타일을 정의 | ([상세](#plotlabel)) |
+
+##### plotBand
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+|-----|------|-------|-----|-----|
+| from | Number(value), Date, Number(Index) | null | 박스를 표시할 시작 위치에 해당하는 값 | 3000, <br> new Date(), <br> 1 (축의 타입이 'step'인 경우 1번째 요소) |
+| to | Number(value), Date, Number(Index) | null | 박스를 표시할 종료 위치에 해당하는 값 | 3000, <br> new Date(), <br> 1 (축의 타입이 'step'인 경우 1번째 요소) |
+| color | Hex, RGB, RGBA Code(String) | '#FF0000' | 선 색상 | |
+| label | Object | null | 표시할 label의 스타일을 정의 | ([상세](#plotlabel)) |
 
-##### plotLineLabel
+##### plotLabel
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|
+| show | Boolean | false | label 표시 여부 | true / false |
 | fontSize | Number | 12 | 폰트 크기 | |
 | fontColor | Hex, RGB, RGBA Code(String) | '#FF0000' | 폰트 색상 | |
 | fillColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | 박스 배경 색상 | |
@@ -157,6 +167,8 @@ const chartData = {
 | fontFamily | String | 'Roboto' | 폰트 스타일 |  |
 | textAlign | String | 'center' | 수평 정렬 | 'left', 'center', 'right' |
 | verticalAlign | String | 'middle' | 수직 정렬 | 'top', 'middle', 'bottom' |
+| textOverflow | String | 'none' | 라벨을 넣을 수 있는 여백 혹은 maxWidth 값을 넘었을 경우의 처리방안  | 'none', 'ellipsis' |
+| maxWidth | Number | null | 라벨의 최대 너비  |  |
 
 #### title
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |

docs/views/barChart/example/Column.vue

@@ -54,23 +54,6 @@
           startToZero: true,
           autoScaleRatio: 0.1,
           showGrid: false,
-          plotLines: [{
-            value: 180,
-            color: '#FFA500',
-            label: {
-              text: 'Warning',
-              fontColor: '#FFA500',
-            },
-          }, {
-            value: 300,
-            label: {
-              lineWidth: 1,
-              lineColor: '#000000',
-              fillColor: '#FF0000',
-              fontColor: '#FFFFFF',
-              text: 'Critical',
-            },
-          }],
         }],
       };
 

docs/views/barChart/example/Horizontal.vue

@@ -64,7 +64,6 @@
         },
         tooltip: {
           use: true,
-          formatter: addUnit,
         },
       };
 

docs/views/barChart/example/PlotLine.vue

@@ -0,0 +1,105 @@
+<template>
+  <ev-chart
+    :data="chartData"
+    :options="chartOptions"
+  />
+</template>
+
+<script>
+  export default {
+    setup() {
+      const chartData = {
+        series: {
+          series1: { name: 'series#1', color: '#FEC64F', showValue: { use: true } },
+          series2: { name: 'series#2', color: '#48D1CC', showValue: { use: true } },
+        },
+        labels: [
+          'value1',
+          'value2',
+          'value3',
+          'value4',
+          'value5',
+        ],
+        data: {
+          series1: [100, 150, 51, 150, { value: 350, color: '#FF0000' }],
+          series2: [150, 100, 151, 50, 250],
+        },
+      };
+
+      const chartOptions = {
+        type: 'bar',
+        thickness: 0.8,
+        width: '100%',
+        padding: {
+          right: 80,
+        },
+        title: {
+          text: 'Chart Title',
+            show: true,
+        },
+        legend: {
+          show: true,
+            position: 'right',
+        },
+        axesX: [{
+          type: 'step',
+          showGrid: false,
+          labelStyle: {
+            fitWidth: true,
+            fitDir: 'left',
+          },
+          plotBands: [{
+            color: 'rgba(250, 222, 76, 0.8)',
+            from: 2.5,
+            to: 3.5,
+            label: {
+              show: true,
+              text: 'X Plot Band ZONE',
+              fontColor: '#FFA500',
+            },
+          }],
+        }],
+          axesY: [{
+          type: 'linear',
+          startToZero: true,
+          autoScaleRatio: 0.1,
+          showGrid: false,
+          plotLines: [{
+            value: 180,
+            color: '#FFA500',
+            label: {
+              show: true,
+              text: 'Warning',
+              fontColor: '#FFA500',
+            },
+          }, {
+            value: 300,
+            label: {
+              show: true,
+              lineWidth: 1,
+              lineColor: '#000000',
+              fillColor: '#FF0000',
+              fontColor: '#FFFFFF',
+              text: 'Critical',
+            },
+          }],
+            plotBands: [{
+              color: 'rgba(104, 173, 244, 0.3)',
+              from: 0, // 생략 가능
+              to: 120,
+              label: {
+                show: true,
+                text: 'Y Plot Band Zone',
+                fontColor: '#68ADF4',
+              },
+            }],
+        }],
+      };
+
+      return {
+        chartData,
+        chartOptions,
+      };
+    },
+  };
+</script>

docs/views/barChart/props.js

@@ -14,6 +14,8 @@ import Event from './example/Event';
 import EventRaw from '!!raw-loader!./example/Event';
 import Gradient from './example/Gradient';
 import GradientRaw from '!!raw-loader!./example/Gradient';
+import PlotLine from './example/PlotLine';
+import PlotLineRaw from '!!raw-loader!./example/PlotLine';
 
 export default {
   mdText,
@@ -53,5 +55,10 @@ export default {
       component: Gradient,
       parsedData: parseComponent(GradientRaw),
     },
+    'Plot line & Plot band': {
+      description: '차트 배경에 선 및 영역을 표시할 수 있습니다.',
+      component: PlotLine,
+      parsedData: parseComponent(PlotLineRaw),
+    },
   },
 };

docs/views/lineChart/api/lineChart.md

@@ -85,7 +85,7 @@ const chartData =
   | interval | String | null | 축에 표시되는 값의 간격 단위 (ex. 'day', 'hour', 'minute'...)
   | labelStyle | Object | ([상세](#labelstyle)) | 라벨의 폰트 스타일을 설정 | |
   | plotLines | Array | ([상세](#plotline)) | plot line(임계선 표시 용도) 설정 | |
-      
+  | plotBands | Array | ([상세](#plotband)) | plot band(임계영역 표시 용도) 설정 | |
   | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
 
 ##### time type
@@ -111,11 +111,20 @@ const chartData =
 | value | Number(value), Date, Number(Index) | null | 선을 표시할 위치에 해당하는 값 | 3000, <br> new Date(), <br> 1 (축의 타입이 'step'인 경우 1번째 요소) |
 | color | Hex, RGB, RGBA Code(String) | '#FF0000' | 선 색상 | |
 | segments | Array | null | dash 간격 | [6, 2] |
-| label | Object | null | 표시할 label의 스타일을 정의 | ([상세](#plotlinelabel)) |
+| label | Object | null | 표시할 label의 스타일을 정의 | ([상세](#plotlabel)) |
 
-##### plotLineLabel
+##### plotBand
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|
+| from | Number(value), Date, Number(Index) | null | 박스를 표시할 시작 위치에 해당하는 값 | 3000, <br> new Date(), <br> 1 (축의 타입이 'step'인 경우 1번째 요소) |
+| to | Number(value), Date, Number(Index) | null | 박스를 표시할 종료 위치에 해당하는 값 | 3000, <br> new Date(), <br> 1 (축의 타입이 'step'인 경우 1번째 요소) |
+| color | Hex, RGB, RGBA Code(String) | '#FF0000' | 선 색상 | |
+| label | Object | null | 표시할 label의 스타일을 정의 | ([상세](#plotlabel)) |
+
+##### plotLabel
+| 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
+|-----|------|-------|-----|-----|
+| show | Boolean | false | label 표시 여부 | true / false |
 | fontSize | Number | 12 | 폰트 크기 | |
 | fontColor | Hex, RGB, RGBA Code(String) | '#FF0000' | 폰트 색상 | |
 | fillColor | Hex, RGB, RGBA Code(String) | '#FFFFFF' | 박스 배경 색상 | |
@@ -125,6 +134,8 @@ const chartData =
 | fontFamily | String | 'Roboto' | 폰트 스타일 |  |
 | textAlign | String | 'center' | 수평 정렬 | 'left', 'center', 'right' |
 | verticalAlign | String | 'middle' | 수직 정렬 | 'top', 'middle', 'bottom' |
+| textOverflow | String | 'none' | 라벨을 넣을 수 있는 여백 혹은 maxWidth 값을 넘었을 경우의 처리방안  | 'none', 'ellipsis' |
+| maxWidth | Number | null | 라벨의 최대 너비  |  |
 
 #### title
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |

docs/views/lineChart/example/Default.vue

@@ -19,14 +19,21 @@
 
   export default {
     setup() {
-      const crushTime = ref();
       const chartData = reactive({
         series: {
           series1: { name: 'series#1' },
+          series2: { name: 'series#2' },
+          series3: { name: 'series#3' },
+          series4: { name: 'series#4' },
+          series5: { name: 'series#5' },
         },
         labels: [],
         data: {
           series1: [],
+          series2: [],
+          series3: [],
+          series4: [],
+          series5: [],
         },
       });
 
@@ -49,28 +56,12 @@
           type: 'time',
           timeFormat: 'HH:mm:ss',
           interval: 'second',
-          plotLines: [{
-            color: '#FF0000',
-            value: crushTime,
-            segments: [6, 2],
-            label: {
-              text: 'Crush',
-            },
-          }],
         }],
         axesY: [{
           type: 'linear',
           showGrid: true,
           startToZero: true,
           autoScaleRatio: 0.1,
-          plotLines: [{
-            color: '#FFA500',
-            value: 3000,
-            label: {
-              text: 'Caution',
-              fontColor: '#FFA500',
-            },
-          }],
         }],
       });
 
@@ -91,12 +82,7 @@
             seriesData.shift();
           }
 
-          const randomValue = Math.floor(Math.random() * ((5000 - 5) + 1)) + 5;
-          seriesData.push(randomValue);
-
-          if (randomValue > 4800) {
-            crushTime.value = timeValue;
-          }
+          seriesData.push(Math.floor(Math.random() * ((5000 - 5) + 1)) + 5);
         });
       };