[#933] [3.0] Chart - Axis Label show 옵션 추가 (#934)

Co-authored-by: jinhee park <jinhee@ex-em.com>
ex-em · Nov 12, 2021 · 9bc000c · 9bc000c
1 parent 8c0d9f5
commit 9bc000c
Show file tree

Hide file tree

Showing 8 changed files with 166 additions and 149 deletions.
diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md
@@ -132,6 +132,7 @@ const chartData = {
 ##### labelStyle
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|
+| show | Boolean | true | label 표시 여부 | true / false |
 | fontSize | Number | 12 | 글자 크기 | |
 | color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | |
 | fontFamily | String | 'Roboto' | 폰트 | |

diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md
@@ -99,6 +99,7 @@ const chartData =
 ##### labelStyle
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|
+| show | Boolean | true | label 표시 여부 | true / false |
 | fontSize | Number | 12 | 글자 크기 | |
 | color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | |
 | fontFamily | String | 'Roboto' | 폰트 | |

diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md
@@ -92,6 +92,7 @@ const chartData =
 ##### labelStyle
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
 |-----|------|-------|-----|-----|
+| show | Boolean | true | label 표시 여부 | true / false |
 | fontSize | Number | 12 | 글자 크기 | |
 | color | Hex, RGB, RGBA Code(String) | '#25262E' | 글자 색상 | |
 | fontFamily | String | 'Roboto' | 폰트 | |

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

diff --git a/src/components/chart/chart.core.js b/src/components/chart/chart.core.js
@@ -441,38 +441,42 @@ class EvChart {
     let lh = 0;
 
     axesX.forEach((axis, index) => {
-      lw = range.x[index].size.width + labelBuffer.width;
-      lh = range.x[index].size.height + labelBuffer.height;
+      if (axis.labelStyle?.show) {
+        lw = range.x[index].size.width + labelBuffer.width;
+        lh = range.x[index].size.height + labelBuffer.height;
 
-      if (axis.position === 'bottom') {
-        if (lh > labelOffset.bottom) {
-          labelOffset.bottom = lh;
-        }
-      } else if (axis.position === 'top') {
-        if (lh > labelOffset.top) {
-          labelOffset.top = lh;
+        if (axis.position === 'bottom') {
+          if (lh > labelOffset.bottom) {
+            labelOffset.bottom = lh;
+          }
+        } else if (axis.position === 'top') {
+          if (lh > labelOffset.top) {
+            labelOffset.top = lh;
+          }
         }
-      }
 
-      labelOffset.left = (lw / 2) > labelOffset.left ? (lw / 2) : labelOffset.left;
-      labelOffset.right = (lw / 2) > labelOffset.right ? (lw / 2) : labelOffset.right;
+        labelOffset.left = (lw / 2) > labelOffset.left ? (lw / 2) : labelOffset.left;
+        labelOffset.right = (lw / 2) > labelOffset.right ? (lw / 2) : labelOffset.right;
+      }
     });
 
     axesY.forEach((axis, index) => {
-      lw = Math.max(range.y[index].size.width + labelBuffer.width, 42 + labelBuffer.width);
+      if (axis.labelStyle?.show) {
+        lw = Math.max(range.y[index].size.width + labelBuffer.width, 42 + labelBuffer.width);
 
-      if (axis.position === 'left') {
-        if (lw > labelOffset.left) {
-          labelOffset.left = lw;
-        }
-      } else if (axis.position === 'right') {
-        if (lw > labelOffset.right) {
-          labelOffset.right = lw;
+        if (axis.position === 'left') {
+          if (lw > labelOffset.left) {
+            labelOffset.left = lw;
+          }
+        } else if (axis.position === 'right') {
+          if (lw > labelOffset.right) {
+            labelOffset.right = lw;
+          }
         }
-      }
 
-      labelOffset.top = (lh / 2) > labelOffset.top ? (lh / 2) : labelOffset.top;
-      labelOffset.bottom = (lh / 2) > labelOffset.bottom ? (lh / 2) : labelOffset.bottom;
+        labelOffset.top = (lh / 2) > labelOffset.top ? (lh / 2) : labelOffset.top;
+        labelOffset.bottom = (lh / 2) > labelOffset.bottom ? (lh / 2) : labelOffset.bottom;
+      }
     });
 
     return labelOffset;

diff --git a/src/components/chart/helpers/helpers.constant.js b/src/components/chart/helpers/helpers.constant.js
@@ -87,6 +87,7 @@ export const AXIS_OPTION = {
   interval: null,
   decimalPoint: null,
   labelStyle: {
+    show: true,
     fontSize: 12,
     color: '#25262E',
     fontFamily: 'Roboto',

diff --git a/src/components/chart/scale/scale.js b/src/components/chart/scale/scale.js
@@ -220,69 +220,71 @@ class Scale {
       return;
     }
 
-    const labelGap = (endPoint - startPoint) / steps;
-    const ticks = [];
-    let labelCenter = null;
-    let linePosition = null;
+    if (this.labelStyle?.show) {
+      const labelGap = (endPoint - startPoint) / steps;
+      const ticks = [];
+      let labelCenter = null;
+      let linePosition = null;
+
+      ctx.strokeStyle = this.gridLineColor;
+      ctx.lineWidth = 1;
+      aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
-    ctx.strokeStyle = this.gridLineColor;
-    ctx.lineWidth = 1;
-    aliasPixel = Util.aliasPixel(ctx.lineWidth);
+      let labelText;
+      for (let ix = 0; ix <= steps; ix++) {
+        ctx.beginPath();
+        ticks[ix] = axisMin + (ix * stepValue);
 
-    let labelText;
-    for (let ix = 0; ix <= steps; ix++) {
-      ctx.beginPath();
-      ticks[ix] = axisMin + (ix * stepValue);
+        labelCenter = Math.round(startPoint + (labelGap * ix));
+        linePosition = labelCenter + aliasPixel;
+        labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
 
-      labelCenter = Math.round(startPoint + (labelGap * ix));
-      linePosition = labelCenter + aliasPixel;
-      labelText = this.getLabelFormat(Math.min(axisMax, ticks[ix]));
+        let labelPoint;
 
-      let labelPoint;
+        if (this.type === 'x') {
+          labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
+          ctx.fillText(labelText, labelCenter, labelPoint);
+          if (options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) {
+            const selectedLabel = this.getLabelFormat(
+              Math.min(axisMax, hitInfo.label + (0 * stepValue)),
+            );
+            if (selectedLabel === labelText) {
+              const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
+              Util.showLabelTip({
+                ctx: this.ctx,
+                width: Math.round(ctx.measureText(selectedLabel).width) + 10,
+                height,
+                x: labelCenter,
+                y: labelPoint + (height - 2),
+                borderRadius: 2,
+                arrowSize: 3,
+                text: labelText,
+                backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor,
+                textColor: options?.selectItem?.labelTipStyle?.textColor,
+              });
+            }
+          }
+          if (ix !== 0 && this.showGrid) {
+            ctx.moveTo(linePosition, offsetPoint);
+            ctx.lineTo(linePosition, offsetCounterPoint);
+          }
+        } else {
+          labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
+          ctx.fillText(labelText, labelPoint, labelCenter);
 
-      if (this.type === 'x') {
-        labelPoint = this.position === 'top' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelCenter, labelPoint);
-        if (options?.selectItem?.showLabelTip && hitInfo?.label && !this.options?.horizontal) {
-          const selectedLabel = this.getLabelFormat(
-            Math.min(axisMax, hitInfo.label + (0 * stepValue)),
-          );
-          if (selectedLabel === labelText) {
-            const height = Math.round(ctx.measureText(this.labelStyle?.fontSize).width);
-            Util.showLabelTip({
-              ctx: this.ctx,
-              width: Math.round(ctx.measureText(selectedLabel).width) + 10,
-              height,
-              x: labelCenter,
-              y: labelPoint + (height - 2),
-              borderRadius: 2,
-              arrowSize: 3,
-              text: labelText,
-              backgroundColor: options?.selectItem?.labelTipStyle?.backgroundColor,
-              textColor: options?.selectItem?.labelTipStyle?.textColor,
-            });
+          if (ix === steps) {
+            linePosition += 1;
           }
-        }
-        if (ix !== 0 && this.showGrid) {
-          ctx.moveTo(linePosition, offsetPoint);
-          ctx.lineTo(linePosition, offsetCounterPoint);
-        }
-      } else {
-        labelPoint = this.position === 'left' ? offsetPoint - 10 : offsetPoint + 10;
-        ctx.fillText(labelText, labelPoint, labelCenter);
 
-        if (ix === steps) {
-          linePosition += 1;
+          if (ix !== 0 && this.showGrid) {
+            ctx.moveTo(offsetPoint, linePosition);
+            ctx.lineTo(offsetCounterPoint, linePosition);
+          }
         }
 
-        if (ix !== 0 && this.showGrid) {
-          ctx.moveTo(offsetPoint, linePosition);
-          ctx.lineTo(offsetCounterPoint, linePosition);
-        }
+        ctx.stroke();
+        ctx.closePath();
       }
-
-      ctx.stroke();
-      ctx.closePath();
     }
 
     // Draw plot lines and plot bands