[#1602] Chart > Tooltip > Header DOM 영역이 0으로 계산되는 현상 발생 (#1603)

* [#1602] Chart > tooltip > Row Padding 옵션 추가 ############################################## - tooltipDOMHeight이 결정되도록 로직 수정 * [#1602] Chart > Tooltip > Header DOM 영역이 0으로 계산되는 현상 발생 ############################################## - Tooltip Header DOM그리는 로직 순서 변경 - Tooltip 예제 코드에 debounce 옵션 추가 --------- Co-authored-by: jinhee park <jinhee@ex-em.com>
ex-em · Feb 15, 2024 · 6511ec1 · 6511ec1
1 parent 07a653e
commit 6511ec1
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 40 deletions.
diff --git 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
@@ -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;