[#1174] Chart > 툴팁 타이틀 한글 폰트가 다르게 적용됨 (#1175)

Co-authored-by: jinhee park <jinhee@ex-em.com>

docs/views/barChart/api/barChart.md

@@ -256,6 +256,7 @@ const chartData = {
 | maxHeight | Number |  | 툴팁의 최대 높이  | |
 | maxWidth | Number |  | 툴팁의 최대 너비  | |
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
+| fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |
 ```

docs/views/barChart/example/Default.vue

@@ -10,9 +10,9 @@
     setup() {
       const chartData = {
         series: {
-          series1: { name: 'series#1' },
+          series1: { name: '시리즈 이름' },
         },
-        labels: ['value1', 'value2', 'value3', 'value5', 'value5'],
+        labels: ['가나다라', '마바사', '아자차', '카타', '파하'],
         data: {
           series1: [100, 150, 51, 150, 350],
         },

docs/views/heatMap/api/heatMap.md

@@ -179,6 +179,7 @@ const chartData =
 | maxHeight | Number |  | 툴팁의 최대 높이  | |
 | maxWidth | Number |  | 툴팁의 최대 너비  | |
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
+| fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |
 ```

docs/views/lineChart/api/lineChart.md

@@ -223,6 +223,7 @@ const chartData =
 | maxHeight | Number |  | 툴팁의 최대 높이  | |
 | maxWidth | Number |  | 툴팁의 최대 너비  | |
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
+| fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |
 ```

docs/views/pieChart/api/pieChart.md

@@ -108,6 +108,7 @@ const chartData =
 | maxHeight | Number |  | 툴팁의 최대 높이  | |
 | maxWidth | Number |  | 툴팁의 최대 너비  | |
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
+| fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |
 ```

docs/views/scatterChart/api/scatterChart.md

@@ -199,6 +199,7 @@ const chartData =
 | maxHeight | Number |  | 툴팁의 최대 높이  | |
 | maxWidth | Number |  | 툴팁의 최대 너비  | |
 | textOverflow | String | 'wrap' | 툴팁에 표시될 텍스트가 maxWidth 값을 넘길 경우 의 처리  | 'wrap', 'ellipsis |
+| fontFamily | String | 'Roboto' | 툴팁에 표시될 폰트  | 'Roboto', 'serif |
 | showAllValueInRange | Boolean | false | 동일한 axes값을 가진 전체 series를 Tooltip에 표시 |
 | formatter | function / Object | null | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용   | (아래 코드 참고) |
 ```

package.json

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

src/components/chart/plugins/plugins.tooltip.js

@@ -1,17 +1,17 @@
-import { numberWithComma } from '@/common/utils';
+import { numberWithComma, convertToPercent } from '@/common/utils';
 import debounce from '@/common/utils.debounce';
 import dayjs from 'dayjs';
 import Canvas from '../helpers/helpers.canvas';
 import Util from '../helpers/helpers.util';
-import { convertToPercent } from '../../../common/utils';
+
 
 const TITLE_HEIGHT = 30;
 const TEXT_HEIGHT = 14;
 const LINE_SPACING = 8;
 const COLOR_MARGIN = 16;
 const VALUE_MARGIN = 50;
 const SCROLL_WIDTH = 17;
-const FONT_STYLE = 'normal normal lighter 14px Roboto';
+let fontStyle = 'normal normal lighter 14px Roboto';
 
 const modules = {
   /**
@@ -34,6 +34,7 @@ const modules = {
     this.tooltipCtx = this.tooltipCanvas.getContext('2d');
 
     this.tooltipDOM.style.display = 'none';
+    this.setFontFamily();
 
     this.tooltipBodyDOM.appendChild(this.tooltipCanvas);
     this.tooltipDOM.appendChild(this.tooltipHeaderDOM);
@@ -52,6 +53,15 @@ const modules = {
     }
   },
 
+  /**
+   * set tooltip's font style
+   */
+  setFontFamily() {
+    const fontFamily = this.options?.tooltip?.fontFamily ?? 'Roboto';
+    fontStyle = `normal normal lighter 14px ${fontFamily}`;
+    this.tooltipHeaderDOM.style.fontFamily = fontFamily;
+  },
+
   /**
    * Set tooltip DOM's position and style
    * @param {object} hitInfo    value and mouse position touched
@@ -73,7 +83,7 @@ const modules = {
 
     // calculate and decide width of canvas El(contentsWidth)
     ctx.save();
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
     const isHorizontal = !!this.options.horizontal;
     const label = isHorizontal ? items[hitInfo.hitId]?.data?.y : items[hitInfo.hitId]?.data?.x;
     const tooltipValue = label?.length > maxSeries.length ? label : maxSeries;
@@ -216,7 +226,7 @@ const modules = {
     x += boxPadding.l;
     y += boxPadding.t;
 
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
 
     const seriesList = [];
     seriesKeys.forEach((seriesName) => {
@@ -414,7 +424,7 @@ const modules = {
     const itemY = boxPadding.t + TEXT_HEIGHT + 2;
     const itemValue = hitItem.o > -1 ? hitItem.o : 'error';
 
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
 
     ctx.beginPath();
 
@@ -490,7 +500,7 @@ const modules = {
     x += boxPadding.l;
     y += boxPadding.t;
 
-    ctx.font = FONT_STYLE;
+    ctx.font = fontStyle;
 
     const seriesList = [];
     seriesKeys.forEach((seriesName) => {

src/components/chart/style/chart.scss

@@ -223,7 +223,6 @@
 
   .ev-chart-tooltip-header {
     padding: 8px 16px 0 16px;
-    font-family: Roboto, serif;
     overflow: hidden;
     font-size: 16px;
 

src/components/chart/uses.js

@@ -59,6 +59,7 @@ const DEFAULT_OPTIONS = {
     debouncedHide: false,
     useScrollbar: false,
     textOverflow: 'wrap',
+    fontFamily: 'Roboto',
   },
   indicator: {
     use: true,