[#1168] Stack Bar Chart > showValue옵션 로직 개선 (#1169)

Co-authored-by: jinhee park <jinhee@ex-em.com>
ex-em · May 18, 2022 · cc93a1d · cc93a1d
1 parent dea5eef
commit cc93a1d
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 27 deletions.
diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md
@@ -70,9 +70,11 @@ const chartData = {
 | use | Boolean | false | data label 표시 여부 | true /false |
 | textColor | Hex, RGB, RGBA Code(String) | '#000000' | 글자 색상  | |
 | fontSize | Number | 12 | 글자 크기 | |
-| align | String | 'end' | tooltip 테두리 색상  | 'start', 'center', 'end', 'out' |
+| align | String | 'end' | 텍스트 위치 (막대 시작, 막대 중간, 막대 끝, 막대 바깥쪽)  | 'start', 'center', 'end', 'out' |
 | formatter | function | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (value) => value + '%' |
 | decimalPoint | Number | 0 | 소수점 자릿수  |  |
+* Stack Bar Chart의 경우 'out' 은 지원하지 않습니다. 
+* 막대 영역이 좁을 경우 값이 표시되지 않을 수 있습니다.
 
 #### data example
 ```

diff --git a/docs/views/barChart/example/Stack.vue b/docs/views/barChart/example/Stack.vue
@@ -10,10 +10,10 @@
     setup() {
       const chartData = {
         series: {
-          series1: { name: 'series#1' },
-          series2: { name: 'series#2' },
-          series3: { name: 'series#3' },
-          series4: { name: 'series#4' },
+          series1: { name: 'series#1', showValue: { use: true } },
+          series2: { name: 'series#2', showValue: { use: true } },
+          series3: { name: 'series#3', showValue: { use: true } },
+          series4: { name: 'series#4', showValue: { use: true } },
         },
         groups: [
           ['series1', 'series2', 'series3', 'series4'],

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "evui",
-  "version": "3.3.20",
+  "version": "3.3.21",
   "description": "A EXEM Library project",
   "author": "exem <dev_client@ex-em.com>",
   "license": "MIT",

diff --git a/src/components/chart/element/element.bar.js b/src/components/chart/element/element.bar.js
@@ -1,4 +1,5 @@
 import { defaultsDeep } from 'lodash-es';
+import { truthy } from '@/common/utils';
 import { COLOR, BAR_OPTION } from '../helpers/helpers.constant';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
@@ -359,13 +360,11 @@ class Bar {
     ctx.textAlign = isHorizontal && align !== 'center' ? 'left' : 'center';
 
     let value;
-    const isStacked = !isNaN(data.o);
-    if (data.o === null) {
-      value = isHorizontal ? data.x : data.y;
-    } else if (isStacked) {
+    const isStacked = truthy(this.stackIndex);
+    if (isStacked) {
       value = data.o;
     } else {
-      value = '';
+      value = (isHorizontal ? data.x : data.y) ?? '';
     }
 
     let formattedTxt;
@@ -374,49 +373,73 @@ class Bar {
     }
 
     if (!formatter || typeof formattedTxt !== 'string') {
-      formattedTxt = Util.labelSignFormat(value, decimalPoint);
+      formattedTxt = Util.labelSignFormat(value, decimalPoint) ?? '';
     }
 
-    const vw = Math.round(ctx.measureText(formattedTxt).width);
-    const vh = fontSize + 4;
+    const textWidth = Math.round(ctx.measureText(formattedTxt).width);
+    const textHeight = fontSize + 4;
     const minXPos = x + 10;
     const minYPos = y - 10;
+    const widthFreeSpaceToDraw = w - 10;
+    const heightFreeSpaceToDraw = Math.abs(h + 10);
     const centerX = x + (w / 2) <= minXPos ? minXPos : x + (w / 2);
     const centerY = y + (h / 2) >= minYPos ? minYPos : y + (h / 2);
     const centerYHorizontal = isHighlight ? y + (h / 2) : y - (h / 2);
 
     switch (align) {
-      case 'start':
+      case 'start': {
         if (isHorizontal) {
-          ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
-        } else {
+          if (textWidth < widthFreeSpaceToDraw) {
+            ctx.fillText(formattedTxt, minXPos, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
           ctx.fillText(formattedTxt, centerX, minYPos);
         }
+
         break;
-      case 'center':
+      }
+
+      case 'center': {
         if (isHorizontal) {
-          ctx.fillText(formattedTxt, centerX, centerYHorizontal);
-        } else {
+          if (textWidth < widthFreeSpaceToDraw) {
+            ctx.fillText(formattedTxt, centerX, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
           ctx.fillText(formattedTxt, centerX, centerY);
         }
+
         break;
-      case 'out':
+      }
+
+      case 'out': {
+        if (isStacked) {
+          console.warn('[EVUI][Bar Chart] In case of Stack Bar Chart, \'out\' of \'showValue\'\'s align is not supported.');
+          return;
+        }
+
         if (isHorizontal) {
           ctx.fillText(formattedTxt, minXPos + w, centerYHorizontal);
         } else {
-          ctx.fillText(formattedTxt, centerX, y + h - (vh / 2));
+          ctx.fillText(formattedTxt, centerX, y + h - (textHeight / 2));
         }
+
         break;
-      case 'end':
+      }
+
       default:
+      case 'end': {
         if (isHorizontal) {
-          const xPos = x + w - (vw * 2);
-          ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
-        } else {
-          const yPos = y + h + vh;
+          if (textWidth < widthFreeSpaceToDraw) {
+            const xPos = x + w - (textWidth * 2);
+            ctx.fillText(formattedTxt, xPos <= minXPos ? minXPos : xPos, centerYHorizontal);
+          }
+        } else if (textHeight < heightFreeSpaceToDraw) {
+          const yPos = y + h + textHeight;
           ctx.fillText(formattedTxt, centerX, yPos >= minYPos ? minYPos : yPos);
         }
+
         break;
+      }
     }
 
     ctx.restore();