From 6511ec1d37871f14679e5ca95b815860ef9b5085 Mon Sep 17 00:00:00 2001 From: Jin-Hee Park <53548023+jhee564@users.noreply.github.com> Date: Thu, 15 Feb 2024 14:47:40 +0900 Subject: [PATCH] =?UTF-8?q?[#1602]=20Chart=20>=20Tooltip=20>=20Header=20DO?= =?UTF-8?q?M=20=EC=98=81=EC=97=AD=EC=9D=B4=200=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EA=B3=84=EC=82=B0=EB=90=98=EB=8A=94=20=ED=98=84=EC=83=81=20?= =?UTF-8?q?=EB=B0=9C=EC=83=9D=20(#1603)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [#1602] Chart > tooltip > Row Padding 옵션 추가 ############################################## - tooltipDOMHeight이 결정되도록 로직 수정 * [#1602] Chart > Tooltip > Header DOM 영역이 0으로 계산되는 현상 발생 ############################################## - Tooltip Header DOM그리는 로직 순서 변경 - Tooltip 예제 코드에 debounce 옵션 추가 --------- Co-authored-by: jinhee park --- docs/views/lineChart/example/Tooltip.vue | 1 + .../chart/plugins/plugins.tooltip.js | 85 ++++++++++--------- 2 files changed, 46 insertions(+), 40 deletions(-) diff --git a/docs/views/lineChart/example/Tooltip.vue b/docs/views/lineChart/example/Tooltip.vue index 6e53d24cb..4d0a88d38 100644 --- a/docs/views/lineChart/example/Tooltip.vue +++ b/docs/views/lineChart/example/Tooltip.vue @@ -359,6 +359,7 @@ bottom: bottomPadding, }, showHeader, + debouncedHide: true, }, }); diff --git a/src/components/chart/plugins/plugins.tooltip.js b/src/components/chart/plugins/plugins.tooltip.js index 6cecd06c3..b7237be57 100644 --- a/src/components/chart/plugins/plugins.tooltip.js +++ b/src/components/chart/plugins/plugins.tooltip.js @@ -6,6 +6,7 @@ import Util from '../helpers/helpers.util'; const LINE_SPACING = 8; const VALUE_MARGIN = 50; const SCROLL_WIDTH = 17; +const BODY_PADDING = 8; const modules = { /** @@ -73,7 +74,7 @@ const modules = { const { top = 0, right = 20, - bottom = 8, + bottom = 3, left = 16, } = this.options?.tooltip?.rowPadding ?? {}; @@ -104,6 +105,30 @@ const modules = { const opt = this.options.tooltip; const seriesColorMarginRight = this.getColorMargin(); + // Draw hidden tooltip header DOM to calculate height + const sId = hitInfo.hitId; + const hitItem = items[sId].data; + const hitAxis = items[sId].axis; + const titleFormatter = opt.formatter?.title; + + if (this.axesX.length && this.axesY.length && opt.showHeader) { + if (titleFormatter) { + this.tooltipHeaderDOM.textContent = titleFormatter({ + x: hitItem.x, + y: hitItem.y, + }); + } else { + this.tooltipHeaderDOM.textContent = this.options.horizontal + ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y) + : this.axesX[hitAxis.x].getLabelFormat(hitItem.x); + } + } + + if (opt.textOverflow) { + this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`); + } + + this.tooltipHeaderDOM.style.visibility = 'hidden'; // calculate and decide width of canvas El(contentsWidth) ctx.save(); @@ -173,19 +198,20 @@ const modules = { this.tooltipHeaderDOM.style.height = 'auto'; this.tooltipDOM.style.height = 'auto'; this.tooltipBodyDOM.style.height = `${contentsHeight + 6}px`; - + this.tooltipDOM.style.display = 'block'; // set tooltipDOM's positions const bodyWidth = document.body.clientWidth; const bodyHeight = document.body.clientHeight; const distanceMouseAndTooltip = 20; - const tooltipDOMSize = this.tooltipDOM?.getBoundingClientRect(); + const tooltipDOMHeight = this.tooltipDOM?.offsetHeight + || this.tooltipHeaderDOM?.offsetHeight + contentsHeight + BODY_PADDING; const maximumPosX = bodyWidth - contentsWidth - distanceMouseAndTooltip; - const maximumPosY = bodyHeight - tooltipDOMSize.height - distanceMouseAndTooltip; + const maximumPosY = bodyHeight - tooltipDOMHeight - distanceMouseAndTooltip; const expectedPosX = mouseX + distanceMouseAndTooltip; const expectedPosY = mouseY + distanceMouseAndTooltip; const reversedPosX = mouseX - contentsWidth - distanceMouseAndTooltip; - const reversedPosY = mouseY - tooltipDOMSize.height - distanceMouseAndTooltip; + const reversedPosY = mouseY - tooltipDOMHeight - distanceMouseAndTooltip; this.tooltipDOM.style.left = expectedPosX > maximumPosX ? `${reversedPosX}px` : `${expectedPosX}px`; @@ -225,39 +251,21 @@ const modules = { drawTooltip(hitInfo, context) { const ctx = context; const items = hitInfo.items; - const sId = hitInfo.hitId; - const hitItem = items[sId].data; - const hitAxis = items[sId].axis; const [, maxValue] = hitInfo.maxTip; const seriesKeys = this.alignSeriesList(Object.keys(items)); const boxPadding = this.getBoxPadding(); const isHorizontal = this.options.horizontal; const opt = this.options.tooltip; - const titleFormatter = opt.formatter?.title; const textHeight = this.getTextHeight(); const seriesColorMarginRight = this.getColorMargin(); - // draw tooltip Title(axis label) and add style class for wrap line about too much long label. + // draw Tooltip header DOM if (this.axesX.length && this.axesY.length && opt.showHeader) { - if (titleFormatter) { - this.tooltipHeaderDOM.textContent = titleFormatter({ - x: hitItem.x, - y: hitItem.y, - }); - } else { - this.tooltipHeaderDOM.textContent = this.options.horizontal - ? this.axesY[hitAxis.y].getLabelFormat(hitItem.y) - : this.axesX[hitAxis.x].getLabelFormat(hitItem.x); - } + this.tooltipHeaderDOM.style.visibility = 'visible'; } else { - // Pie Chart this.tooltipHeaderDOM.style.display = 'none'; } - if (opt.textOverflow) { - this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`); - } - // draw tooltip contents (series, value combination) let x = 2; let y = 2; @@ -399,7 +407,6 @@ const modules = { const boxPadding = this.getBoxPadding(); const isHorizontal = this.options.horizontal; const opt = this.options.tooltip; - const titleFormatter = opt.formatter?.title; const series = Object.values(this.seriesList)[0]; const textHeight = this.getTextHeight(); const seriesColorMarginRight = this.getColorMargin(); @@ -423,20 +430,11 @@ const modules = { return; } - // draw tooltip Title(axis label) and add style class for wrap line about too much long label. - if (this.axesX.length) { - if (titleFormatter) { - this.tooltipHeaderDOM.textContent = titleFormatter({ - x: hitItem.x, - y: hitItem.y, - }); - } else { - this.tooltipHeaderDOM.textContent = this.axesX[hitAxis.x].getLabelFormat(hitItem.x); - } - } - - if (opt.textOverflow) { - this.tooltipHeaderDOM.classList.add(`ev-chart-tooltip-header--${opt.textOverflow}`); + // draw Tooltip header DOM + if (this.axesX.length && this.axesY.length && opt.showHeader) { + this.tooltipHeaderDOM.style.visibility = 'visible'; + } else { + this.tooltipHeaderDOM.style.display = 'none'; } this.setTooltipDOMStyle(opt); @@ -501,6 +499,13 @@ const modules = { const textHeight = this.getTextHeight(); const seriesColorMarginRight = this.getColorMargin(); + // draw Tooltip header DOM + if (this.axesX.length && this.axesY.length && opt.showHeader) { + this.tooltipHeaderDOM.style.visibility = 'visible'; + } else { + this.tooltipHeaderDOM.style.display = 'none'; + } + let x = 2; let y = 2;