[#925] [3.0] Chart - Plot band

##################### 1. Plot Band Sample Code 추가 2. 기존 Sample Code 원복
ex-em · Nov 3, 2021 · bb00539 · bb00539
1 parent 31731d1
commit bb00539
Show file tree

Hide file tree

Showing 8 changed files with 416 additions and 40 deletions.
diff --git a/docs/views/barChart/example/Column.vue b/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',
-            },
-          }],
         }],
       };
 

diff --git a/docs/views/barChart/example/PlotLine.vue b/docs/views/barChart/example/PlotLine.vue
@@ -0,0 +1,101 @@
+<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: 40,
+        },
+        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: {
+              text: 'X Plot Band ZONE',
+              fontColor: '#FFA500',
+            },
+          }],
+        }],
+          axesY: [{
+          type: 'linear',
+          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',
+            },
+          }],
+            plotBands: [{
+              color: 'rgba(104, 173, 244, 0.3)',
+              from: 0, // 생략 가능
+              to: 120,
+              label: {
+                text: 'Y Plot Band',
+                fontColor: '#68ADF4',
+              },
+            }],
+        }],
+      };
+
+      return {
+        chartData,
+        chartOptions,
+      };
+    },
+  };
+</script>
diff --git a/docs/views/barChart/props.js b/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),
+    },
   },
 };
diff --git a/docs/views/lineChart/example/Default.vue b/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);
         });
       };
 

diff --git a/docs/views/lineChart/example/PlotLine.vue b/docs/views/lineChart/example/PlotLine.vue
@@ -0,0 +1,106 @@
+<template>
+  <ev-chart
+      :data="chartData"
+      :options="chartOptions"
+  />
+</template>
+
+<script>
+import dayjs from 'dayjs';
+
+export default {
+  setup() {
+    const time = dayjs().format('YYYY-MM-DD HH:mm:ss');
+    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%',
+      padding: {
+        right: 50,
+      },
+      title: {
+        text: 'Chart Title',
+        show: true,
+      },
+      legend: {
+        show: true,
+        position: 'right',
+      },
+      axesX: [{
+        type: 'time',
+        showGrid: false,
+        timeFormat: 'MM/DD',
+        interval: 'day',
+        plotLines: [{
+          color: '#FF0000',
+          value: chartData.labels[5],
+          segments: [6, 2],
+          label: {
+            text: 'X Plot Line',
+            textAlign: 'right',
+          },
+        }],
+        plotBands: [{
+          color: 'rgba(250, 222, 76, 0.8)',
+          from: chartData.labels[2],
+          to: chartData.labels[3],
+          label: {
+            text: 'X Plot Band ZONE',
+            fontColor: '#FFA500',
+          },
+        }],
+      }],
+      axesY: [{
+        type: 'linear',
+        showGrid: true,
+        startToZero: true,
+        autoScaleRatio: 0.1,
+        plotLines: [{
+          color: '#FF0000',
+          value: 50,
+          segments: [6, 2],
+          label: {
+            text: 'Y Plot Line',
+          },
+        }],
+        plotBands: [{
+          color: 'rgba(250, 222, 76, 0.8)',
+          from: 20,
+          to: 40,
+          label: {
+            text: 'Y Plot Band',
+            fontColor: '#FFA500',
+          },
+        }],
+      }],
+    };
+
+    return {
+      chartData,
+      chartOptions,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+</style>
diff --git a/docs/views/lineChart/props.js b/docs/views/lineChart/props.js
@@ -12,6 +12,8 @@ import DragSelection from './example/DragSelection';
 import DragSelectionRaw from '!!raw-loader!./example/DragSelection';
 import Tooltip from './example/Tooltip';
 import TooltipRaw from '!!raw-loader!./example/Tooltip';
+import PlotLine from './example/PlotLine';
+import PlotLineRaw from '!!raw-loader!./example/PlotLine';
 
 export default {
   mdText,
@@ -46,5 +48,10 @@ export default {
       component: Tooltip,
       parsedData: parseComponent(TooltipRaw),
     },
+    'Plot line & Plot band': {
+      description: '차트 배경에 선 및 영역을 표시할 수 있습니다.',
+      component: PlotLine,
+      parsedData: parseComponent(PlotLineRaw),
+    },
   },
 };