diff --git a/docs/views/barChart/api/barChart.md b/docs/views/barChart/api/barChart.md index 5209211d3..a94993211 100644 --- a/docs/views/barChart/api/barChart.md +++ b/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 | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용 | (아래 코드 참고) | ``` diff --git a/docs/views/barChart/example/Default.vue b/docs/views/barChart/example/Default.vue index af5ef8a60..12c33653b 100644 --- a/docs/views/barChart/example/Default.vue +++ b/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], }, diff --git a/docs/views/heatMap/api/heatMap.md b/docs/views/heatMap/api/heatMap.md index e65c66314..398910796 100644 --- a/docs/views/heatMap/api/heatMap.md +++ b/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 | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용 | (아래 코드 참고) | ``` diff --git a/docs/views/lineChart/api/lineChart.md b/docs/views/lineChart/api/lineChart.md index 305a76167..a09b050cc 100644 --- a/docs/views/lineChart/api/lineChart.md +++ b/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 | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용 | (아래 코드 참고) | ``` diff --git a/docs/views/pieChart/api/pieChart.md b/docs/views/pieChart/api/pieChart.md index a3409c02a..e76141326 100644 --- a/docs/views/pieChart/api/pieChart.md +++ b/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 | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용 | (아래 코드 참고) | ``` diff --git a/docs/views/scatterChart/api/scatterChart.md b/docs/views/scatterChart/api/scatterChart.md index 4c3217b39..6648ed711 100644 --- a/docs/views/scatterChart/api/scatterChart.md +++ b/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 | 데이터가 표시되기 전에 데이터의 형식을 지정하는 데 사용 | (아래 코드 참고) | ``` diff --git a/package.json b/package.json index c15e4d44b..bc7c90275 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "evui", - "version": "3.3.22", + "version": "3.3.23", "description": "A EXEM Library project", "author": "exem ", "license": "MIT", diff --git a/src/components/chart/plugins/plugins.tooltip.js b/src/components/chart/plugins/plugins.tooltip.js index f1330eedf..b6da58bab 100644 --- a/src/components/chart/plugins/plugins.tooltip.js +++ b/src/components/chart/plugins/plugins.tooltip.js @@ -1,9 +1,9 @@ -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; @@ -11,7 +11,7 @@ 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) => { diff --git a/src/components/chart/style/chart.scss b/src/components/chart/style/chart.scss index af48cf5ad..84f527abb 100644 --- a/src/components/chart/style/chart.scss +++ b/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; diff --git a/src/components/chart/uses.js b/src/components/chart/uses.js index 0da5582f5..022310d3c 100644 --- a/src/components/chart/uses.js +++ b/src/components/chart/uses.js @@ -59,6 +59,7 @@ const DEFAULT_OPTIONS = { debouncedHide: false, useScrollbar: false, textOverflow: 'wrap', + fontFamily: 'Roboto', }, indicator: { use: true,