[#786][3.0] Bar Chart 그라데이션 기능 추가

docs/views/barChart/api/barChart.md

@@ -23,9 +23,22 @@
   |------------ |-----------|---------|-------------------------|---------------------------------------------------|
   | name | String | series-${index} | 특정 데이터에 대한 시리즈 옵션 |  |
   | type | String | 'bar' | 시리즈에 해당하는 데이터 표현 방식 | 'bar', 'pie', 'line', 'scatter' |
-  | color | HexCode(String) | COLOR[index] | 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
+  | color | String or Object | COLOR[index] | 특정 색상을 지정하지 않으면 사전에 정의된 16개 색상('#2b99f0' ~ '#df6264)을 순차적으로 적용 |  |
   | showValue | Object | ([상세](#showvalue)) | 막대 위에 값 표시 여부 및 속성 |  |
 
+#### color Example
+```
+const chartData = {
+    series: {
+      series1: { name: 'series#1' }, // 기본 색상으로 자동 할당
+      series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상 지정
+      series3: { name: 'series#3', color: [[0, '#FBC2EB'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
+      series4: { name: 'series#3', color: [[], [1, '#ED9B57']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
+    },
+    ... 생략
+}
+```
+
 #### showValue
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|

docs/views/barChart/example/Gradient.vue

@@ -0,0 +1,49 @@
+<template>
+  <ev-chart
+    :data="chartData"
+    :options="chartOptions"
+  />
+</template>
+
+<script>
+  export default {
+    setup() {
+      const chartData = {
+        series: {
+          series1: { name: 'series#1' }, // 기본 색상
+          series2: { name: 'series#2', color: '#FF00FF' }, // 특정 색상
+          series3: { name: 'series#3', color: [[0, '#FBC2EB'], [1, '#A6C1EE']] }, // 특정 색상으로 그라데이션
+          series4: { name: 'series#3', color: [[], [1, '#ED9B57']] }, // 투명하게 시작하여 특정 색상으로 그라데이션
+        },
+        labels: ['value1', 'value2', 'value3', 'value5', 'value5'],
+        data: {
+          series1: [100, 150, 100, 150, 350],
+          series2: [23, 54, 51, 229, 150],
+          series3: [20, 75, 200, 100, 51],
+          series4: [200, 95, 40, 50, 151],
+        },
+      };
+
+      const chartOptions = {
+        type: 'bar',
+        axesX: [{
+          type: 'step',
+        }],
+        axesY: [{
+          showAxis: true,
+          type: 'linear',
+          startToZero: true,
+          autoScaleRatio: 0.1,
+        }],
+      };
+
+      return {
+        chartData,
+        chartOptions,
+      };
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+</style>

docs/views/barChart/props.js

@@ -12,6 +12,8 @@ import Time from './example/Time';
 import TimeRaw from '!!raw-loader!./example/Time';
 import Event from './example/Event';
 import EventRaw from '!!raw-loader!./example/Event';
+import Gradient from './example/Gradient';
+import GradientRaw from '!!raw-loader!./example/Gradient';
 
 export default {
   mdText,
@@ -46,5 +48,10 @@ export default {
       component: Event,
       parsedData: parseComponent(EventRaw),
     },
+    Gradient: {
+      description: '막대에 그라데이션 효과를 줄 수 있습니다.',
+      component: Gradient,
+      parsedData: parseComponent(GradientRaw),
+    },
   },
 };

src/components/chart/element/element.bar.js

@@ -96,9 +96,6 @@ class Bar {
 
     ctx.beginPath();
 
-    const opacity = this.state === 'downplay' ? 0.1 : 1;
-    ctx.fillStyle = `rgba(${Util.hexToRgb(this.color)},${opacity})` || '';
-
     this.data.forEach((item, index) => {
       if (isHorizontal) {
         categoryPoint = ysp - (cArea * index) - cPad;
@@ -128,6 +125,19 @@ class Bar {
         h = Canvas.calculateY(item.y, minmaxY.graphMin, minmaxY.graphMax, yArea);
       }
 
+      const opacity = this.state === 'downplay' ? 0.1 : 1;
+      if (typeof this.color !== 'string') {
+        ctx.fillStyle = Canvas.createGradient(
+          ctx,
+          isHorizontal,
+          { x, y, w, h },
+          this.color,
+          opacity,
+        );
+      } else {
+        ctx.fillStyle = `rgba(${Util.hexToRgb(this.color)},${opacity})` || '';
+      }
+
       ctx.fillRect(x, y, w, isHorizontal ? -h : h);
 
       if (showValue.use) {
@@ -159,8 +169,7 @@ class Bar {
    * @returns {undefined}
    */
   itemHighlight(item, context) {
-    const showValue = this.showValue;
-
+    const { showValue, isHorizontal } = this;
     const gdata = item.data;
     const ctx = context;
 
@@ -170,11 +179,18 @@ class Bar {
     const h = gdata.h;
 
     ctx.save();
-    ctx.fillStyle = this.color;
     ctx.shadowOffsetX = 0;
     ctx.shadowOffsetY = 0;
     ctx.shadowBlur = 4;
-    ctx.shadowColor = this.color;
+
+    if (typeof this.color !== 'string') {
+      const grd = Canvas.createGradient(ctx, isHorizontal, { x, y, w, h }, this.color);
+      ctx.fillStyle = grd;
+      ctx.shadowColor = this.color[this.color.length - 1][1];
+    } else {
+      ctx.fillStyle = this.color;
+      ctx.shadowColor = this.color;
+    }
 
     ctx.fillRect(x, y, w, h);
 

src/components/chart/helpers/helpers.canvas.js

@@ -1,3 +1,5 @@
+import Util from './helpers.util';
+
 export default {
   /**
    * Calculate X position
@@ -234,4 +236,41 @@ export default {
       ctx.rect(x, y, width, height);
     }
   },
+
+  /**
+   * create Linear Gradient
+   * @param ctx
+   * @param isHorizontal
+   * @param positions
+   * @param stops
+   * @param opacity
+   *
+   * @returns {object} gradient
+   */
+  createGradient(ctx, isHorizontal, positions, stops, opacity = 1) {
+    const { x, y, w, h } = positions;
+    let gradient;
+
+    if (isHorizontal) {
+      gradient = ctx.createLinearGradient(x, 0, x + w, 0);
+    } else {
+      gradient = ctx.createLinearGradient(0, y, 0, y + h);
+    }
+
+    for (let ix = 0; ix < stops.length; ix++) {
+      let opa;
+      let stop = stops[ix];
+
+      if (!stop.length) {
+        stop = [ix, '#FFFFFF'];
+        opa = 0;
+      } else {
+        opa = opacity;
+      }
+
+      gradient.addColorStop(stop[0], `rgba(${Util.hexToRgb(stop[1])},${opa})`);
+    }
+
+    return gradient;
+  },
 };

src/components/chart/plugins/plugins.legend.js

@@ -102,7 +102,12 @@ const modules = {
         nameDOM.style.color = opt.inactive;
       } else {
         this.seriesInfo.count++;
-        colorDOM.style.backgroundColor = series.color;
+        if (typeof series.color !== 'string') {
+          colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+        } else {
+          colorDOM.style.backgroundColor = series.color;
+        }
+
         nameDOM.style.color = opt.color;
       }
 
@@ -249,7 +254,12 @@ const modules = {
 
     nameDOM.series = series;
 
-    colorDOM.style.backgroundColor = series.color;
+    if (typeof series.color !== 'string') {
+      colorDOM.style.backgroundColor = series.color[series.color.length - 1][1];
+    } else {
+      colorDOM.style.backgroundColor = series.color;
+    }
+
     colorDOM.dataset.type = 'color';
     nameDOM.style.color = opt.color;
     nameDOM.textContent = series.name;

src/components/chart/plugins/plugins.tooltip.js

@@ -1,5 +1,6 @@
 import { numberWithComma } from '@/common/utils';
 import debounce from '@/common/utils.debounce';
+import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
 
 const modules = {
@@ -201,7 +202,17 @@ const modules = {
       itemY += Util.aliasPixel(itemY);
 
       ctx.beginPath();
-      ctx.fillStyle = color;
+
+      if (typeof color !== 'string') {
+        ctx.fillStyle = Canvas.createGradient(
+          ctx,
+          isHorizontal,
+          { x: itemX - 4, y: itemY, w: 12, h: -12 },
+          color,
+        );
+      } else {
+        ctx.fillStyle = color;
+      }
 
       ctx.fillRect(itemX - 4, itemY - 12, 12, 12);
       ctx.fillStyle = opt.fontColor;