HeatMap > graident legend 추가 (#1159)

Co-authored-by: Hye Yeon, Kim <hy2on@ex-em.com>

docs/views/heatMap/api/heatMap.md

@@ -147,6 +147,7 @@ const chartData =
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 | --- | ---- | ----- | --- | ----------|
 | show | Boolean | false | Legend 표시 여부 | true /false |
+| type | String | 'icon' | Legend type 지정 | 'icon', 'gradient' |
 | position | String | 'right' | Legend 위치 | 'top', 'right', 'bottom', 'left' |
 | color | Hex, RGB, RGBA Code(String) | '#353740' | 폰트 색상 | | 
 | inactive | Hex, RGB, RGBA Code(String) | '#aaa' | 비활성화 상태의 폰트 색상 | | 
@@ -212,6 +213,7 @@ const chartOptions = {
 | color | Hex, RGB, RGBA Code(String) | '#FFFFFF' | stroke color 지정 | |
 | lineWidth | number | 1 | stroke 선 굵기 지정 | |
 | opacity | number | 1 | stroke opacity 지정 | 0.1 ~ 1 |
+| radius | number | 0 | border radius 조정 | |
 
 ### 3. resize-timeout
 - Default : 0

docs/views/heatMap/example/Default.vue

@@ -35,14 +35,15 @@ import { onMounted, reactive } from 'vue';
           show: true,
         },
         indicator: {
-          use: false,
+          use: true,
         },
         axesX: [{
           type: 'step',
-          showAxis: false,
+          showGrid: false,
         }],
         axesY: [{
           type: 'step',
+          showGrid: false,
         }],
         heatMapColor: {
           min: '#FFC19E',

docs/views/heatMap/example/Gradient.vue

@@ -0,0 +1,91 @@
+<template>
+  <ev-chart
+      :data="chartData"
+      :options="chartOptions"
+  />
+</template>
+
+<script>
+import { reactive } from 'vue';
+
+  export default {
+    setup() {
+      const chartData = reactive({
+        series: {
+          series1: {
+            name: 'series#1',
+            showValue: {
+              use: true,
+              decimalPoint: 2,
+            },
+          },
+        },
+        labels: {
+          x: ['2020', '2021', '2022'],
+          y: ['Q1', 'Q2', 'Q3', 'Q4'],
+        },
+        data: {
+          series1: [
+            { x: '2020', y: 'Q1', value: 46.57 },
+            { x: '2020', y: 'Q2', value: 50.22 },
+            { x: '2020', y: 'Q3', value: 45.10 },
+            { x: '2020', y: 'Q4', value: 57.35 },
+            { x: '2021', y: 'Q1', value: 60.55 },
+            { x: '2021', y: 'Q2', value: 63.35 },
+            { x: '2021', y: 'Q3', value: 58.67 },
+            { x: '2021', y: 'Q4', value: 57.55 },
+            { x: '2022', y: 'Q1', value: 66.12 },
+            { x: '2022', y: 'Q2', value: 80.15 },
+            { x: '2022', y: 'Q3', value: 82.22 },
+            { x: '2022', y: 'Q4', value: 84.00 },
+          ],
+        },
+      });
+
+
+      const chartOptions = {
+        type: 'heatMap',
+        width: '100%',
+        title: {
+          text: 'Chart Title',
+          show: true,
+        },
+        indicator: {
+          use: true,
+        },
+        axesX: [{
+          type: 'step',
+          showGrid: false,
+        }],
+        axesY: [{
+          type: 'step',
+          showGrid: false,
+        }],
+        heatMapColor: {
+          min: '#F9945A',
+          max: '#9D3B02',
+          categoryCnt: 4,
+          stroke: {
+            show: true,
+            color: '#FFFFFF',
+            lineWidth: 2,
+            radius: 10,
+          },
+          decimalPoint: 2,
+        },
+        tooltip: {
+          use: true,
+        },
+        legend: {
+          type: 'gradient',
+          position: 'bottom',
+        },
+      };
+
+      return {
+        chartData,
+        chartOptions,
+      };
+    },
+  };
+</script>

docs/views/heatMap/props.js

@@ -6,6 +6,8 @@ import Event from './example/Event';
 import EventRaw from '!!raw-loader!./example/Event';
 import Time from './example/Time';
 import TimeRaw from '!!raw-loader!./example/Time';
+import Gradient from './example/Gradient';
+import GradientRaw from '!!raw-loader!./example/Gradient';
 
 export default {
   mdText,
@@ -25,5 +27,10 @@ export default {
       component: Event,
       parsedData: parseComponent(EventRaw),
     },
+    Gradient: {
+      description: 'gradient 범주로 표현 가능합니다.',
+      component: Gradient,
+      parsedData: parseComponent(GradientRaw),
+    },
   },
 };

package.json

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

src/components/chart/chart.core.js

@@ -8,6 +8,7 @@ import StepScale from './scale/scale.step';
 import TimeCategoryScale from './scale/scale.time.category';
 import Title from './plugins/plugins.title';
 import Legend from './plugins/plugins.legend';
+import GradientLegend from './plugins/plugins.legend.gradient';
 import Interaction from './plugins/plugins.interaction';
 import Tooltip from './plugins/plugins.tooltip';
 import Pie from './plugins/plugins.pie';
@@ -23,6 +24,10 @@ class EvChart {
     Object.assign(this, Pie);
     Object.assign(this, Tip);
 
+    if (options.type === 'heatMap' && options.legend.type === 'gradient') {
+      Object.assign(this, GradientLegend);
+    }
+
     this.target = target;
     this.data = data;
     this.options = options;
@@ -163,6 +168,7 @@ class EvChart {
       maxTipOpt: { background: maxTip.background, color: maxTip.color },
       selectLabel: { option: selectLabel, selected: this.defaultSelectInfo },
       selectSeries: { option: selectSeries, selected: this.defaultSelectInfo },
+      overlayCtx: this.overlayCtx,
     };
 
     let showIndex = 0;