[#1583] Chart > Tooltip > FontSize 조정 관련 옵션 추가 (#1584)

* [#1583] Chart > Tooltip > Font Size 옵션 추가 ##### - FontSize옵션 추가 - 관련 설명 추가 - Tooltip Header관련 padding값 조정 * [#1583] Chart > Tooltip > Font Size 옵션 추가 ##### - 삭제된 docs 원복 --------- Co-authored-by: jinhee park <jinhee@ex-em.com>
ex-em · Jan 19, 2024 · 1814f9b · 1814f9b
1 parent 3da9e78
commit 1814f9b
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 43 deletions.
diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md
@@ -300,6 +300,7 @@ const chartData = {
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
 | fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | fontColor | Hex code (string), Object   | '#000000' | 툴팁에 표시될 폰트 컬러 | '#FFFFFF', { label: '#FFFFFF', value: '#FFFFFF', 'title: #FFFFFF' } |
+| fontSize            | Object                      | { title: 16, contents: 14 } | 툴팁에 표시될 폰트 사이즈  | |
 | colorShape | String | 'rect' | 툴팁에 표시될 series color의 모양 | 'rect', 'circle' |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |

diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md
@@ -254,6 +254,7 @@ const chartData =
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
 | fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | fontColor | Hex code (string), Object   | '#000000' | 툴팁에 표시될 폰트 컬러 | '#FFFFFF', { label: '#FFFFFF', value: '#FFFFFF', 'title: #FFFFFF' } |
+| fontSize            | Object                      | { title: 16, contents: 14 } | 툴팁에 표시될 폰트 사이즈  | |
 | colorShape | String | 'rect' | 툴팁에 표시될 series color의 모양 | 'rect', 'circle' |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |

diff --git a/docs/views/lineChart/example/Tooltip.vue b/docs/views/lineChart/example/Tooltip.vue
@@ -128,6 +128,35 @@
           <ev-text-field v-model="valueFontColor"/>
         </div>
       </div>
+
+      <div class="row">
+        <h3> Font Size </h3>
+      </div>
+
+      <div class="row">
+        <div class="row-item">
+          <span class="item-title">
+            title
+          </span>
+          <ev-input-number
+              v-model="titleFontSize"
+              :step="1"
+              :min="10"
+              :max="50"
+          />
+        </div>
+        <div class="row-item">
+          <span class="item-title">
+            contents
+          </span>
+          <ev-input-number
+              v-model="contentsFontSize"
+              :step="1"
+              :min="10"
+              :max="50"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -158,6 +187,8 @@
       const titleFontColor = ref('#005CB5');
       const labelFontColor = ref('#FF8C40');
       const valueFontColor = ref('#FF00FF');
+      const titleFontSize = ref(16);
+      const contentsFontSize = ref(14);
 
       const chartData = reactive({
         series: {
@@ -252,6 +283,10 @@
             label: labelFontColor,
             value: valueFontColor,
           },
+          fontSize: {
+            title: titleFontSize,
+            contents: contentsFontSize,
+          },
         },
       });
 
@@ -288,6 +323,8 @@
         titleFontColor,
         labelFontColor,
         valueFontColor,
+        titleFontSize,
+        contentsFontSize,
       };
     },
   };

diff --git a/docs/views/pieChart/api/pieChart.md b/docs/views/pieChart/api/pieChart.md
@@ -127,6 +127,7 @@ const chartData =
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
 | fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | fontColor | Hex code (string), Object   | '#000000' | 툴팁에 표시될 폰트 컬러 | '#FFFFFF', { label: '#FFFFFF', value: '#FFFFFF', 'title: #FFFFFF' } |
+| fontSize            | Object                      | { title: 16, contents: 14 } | 툴팁에 표시될 폰트 사이즈  | |
 | colorShape | String | 'rect' | 툴팁에 표시될 series color의 모양 | 'rect', 'circle' |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |

diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md
@@ -118,7 +118,7 @@ const chartData =
 | fontFamily | String | 'Roboto' | 폰트 | |
 | fitWidth | Boolean | false | Label Text Ellipsis 처리 | |
 | fitDir | String | 'right' | Ellipsis 방향 | ( right => 'aaa...', left => '...aaa') |
- | padding |  Number | 0 | (X축, linear, time타입에만 해당) label의 좌우 여백 | 0 |
+| padding |  Number | 0 | (X축, linear, time타입에만 해당) label의 좌우 여백 | 0 |
 
 ##### title
 | 이름 | 타입 | 디폴트 | 설명 | 종류(예시) |
@@ -216,6 +216,7 @@ const chartData =
 | textOverflow        | String                      | 'wrap'    | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis'                                                  |
 | fontFamily          | String                      | 'Roboto'  | 툴팁에 표시될 폰트                           | 'Roboto', 'serif'                                                   |
 | fontColor           | Hex code (string), Object   | '#000000' | 툴팁에 표시될 폰트 컬러                        | '#FFFFFF', { label: '#FFFFFF', value: '#FFFFFF', 'title: #FFFFFF' } |
+| fontSize            | Object                      | { title: 16, contents: 14 } | 툴팁에 표시될 폰트 사이즈  | |
 | colorShape | String | 'rect' | 툴팁에 표시될 series color의 모양 | 'rect', 'circle' |
 | showAllValueInRange | Boolean                     | false     | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter           | function / Object           | null      | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용      | (아래 코드 참고)                                                          |