[#1343] Chart > Axis > axisLineWidth 옵션 추가 (#1344)

* [#1343] Chart > Axis > axisLineWidth 옵션 추가 ##################################### - axisLineWidth 옵션 추가 (기본값 1) - 관련 설명 추가 * [#1343] Chart > Axis > axisLineWidth 옵션 추가 ##################################### - axisLineWidth 옵션 추가 (기본값 1) - 관련 설명 추가 Co-authored-by: jinhee park <jinhee@ex-em.com>
ex-em · Jan 10, 2023 · 9da1877 · 9da1877
1 parent 7d419ca
commit 9da1877
Show file tree

Hide file tree

Showing 8 changed files with 8 additions and 3 deletions.
diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md
@@ -123,6 +123,7 @@ const chartData = {
   | startToZero | Boolean | false | 축의 시작을 0 부터 시작할지의 여부 | true / false |
   | autoScaleRatio | Number | null | Axis의 Max Buffer를 위한 속성 | 0.1 ~ 0.9 |
   | showGrid | Boolean | true | 차트 내부 그리드 표시 여부 | true / false |
+  | axisLineWidth  | Number | 1 | 축의 선 굵기 | 1 ~ |
   | axisLineColor | String | '#C9CFDC' | 축의 색상 | | 
   | gridLineColor | String | '#C9CFDC' | 그리드의 색상 | | 
   | range | Array | null | 축에 표시할 값의 min, max | [0, 100] |

diff --git a/docs/views/heatMap/api/heatMap.md b/docs/views/heatMap/api/heatMap.md
@@ -89,6 +89,7 @@ const chartData =
   | startToZero | Boolean | false | 축의 시작을 0 부터 시작할지의 여부 | true / false |
   | autoScaleRatio | Number | null | Axis의 Max Buffer를 위한 속성 | 0.1 ~ 0.9 |
   | showGrid | Boolean | true | 차트 내부 그리드 표시 여부 | true / false |
+  | axisLineWidth  | Number | 1 | 축의 선 굵기 | 1 ~ |
   | axisLineColor | String | '#C9CFDC' | 축의 색상 | | 
   | gridLineColor | String | '#C9CFDC' | 그리드의 색상 | | 
   | interval | String/number | | 축에 표시되는 값의 간격 단위 ( time: string / linear: number) |  [time](#time-type), [linear](#step-type) |

diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md
@@ -114,6 +114,7 @@ const chartData =
   | startToZero | Boolean | false | 축의 시작을 0 부터 시작할지의 여부 | true / false |
   | autoScaleRatio | Number | null | Axis의 Max Buffer를 위한 속성 | 0.1 ~ 0.9 |
   | showGrid | Boolean | true | 차트 내부 그리드 표시 여부 | true / false |
+  | axisLineWidth | Number | 1 | 축의 선 굵기 | 1 ~ |
   | axisLineColor | String | '#C9CFDC' | 축의 색상 | | 
   | gridLineColor | String | '#C9CFDC' | 그리드의 색상 | | 
   | interval | String | null | 축에 표시되는 값의 간격 단위 (ex. 'day', 'hour', 'minute'...)

diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md
@@ -78,6 +78,7 @@ const chartData =
   | startToZero | Boolean | false | 축의 시작을 0 부터 시작할지의 여부 | true / false |
   | autoScaleRatio | Number | null | Axis의 Max Buffer를 위한 속성 | 0.1 ~ 0.9 |
   | showGrid | Boolean | true | 차트 내부 그리드 표시 여부 | true / false |
+  | axisLineWidth  | Number | 1 | 축의 선 굵기 | 1 ~ |
   | axisLineColor | String | '#C9CFDC' | 축의 색상 | | 
   | gridLineColor | String | '#C9CFDC' | 그리드의 색상 | | 
   | interval | String | null | 축에 표시되는 값의 간격 단위 (ex. 'day', 'hour', 'minute'...)

diff --git a/src/components/chart/helpers/helpers.constant.js b/src/components/chart/helpers/helpers.constant.js
@@ -86,6 +86,7 @@ export const AXIS_OPTION = {
   startToZero: false,
   showAxis: true,
   axisLineColor: '#C9CFDC',
+  axisLineWidth: 1,
   showGrid: true,
   gridLineColor: '#C9CFDC',
   showIndicator: false,

diff --git a/src/components/chart/scale/scale.js b/src/components/chart/scale/scale.js
@@ -251,7 +251,7 @@ class Scale {
     }
 
     if (this.showAxis) {
-      ctx.lineWidth = 2;
+      ctx.lineWidth = this.axisLineWidth;
       aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
       ctx.beginPath();

diff --git a/src/components/chart/scale/scale.step.js b/src/components/chart/scale/scale.step.js
@@ -110,7 +110,7 @@ class StepScale extends Scale {
       }
 
       ctx.fillStyle = this.labelStyle.color;
-      ctx.lineWidth = 1;
+      ctx.lineWidth = this.axisLineWidth;
       const aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
       ctx.beginPath();

diff --git a/src/components/chart/scale/scale.time.category.js b/src/components/chart/scale/scale.time.category.js
@@ -146,7 +146,7 @@ class TimeCategoryScale extends Scale {
     }
 
     ctx.fillStyle = this.labelStyle.color;
-    ctx.lineWidth = 1;
+    ctx.lineWidth = this.axisLineWidth;
     const aliasPixel = Util.aliasPixel(ctx.lineWidth);
 
     ctx.beginPath();