fix(html/common): correct BreakdownTable tooltip height calculation

Signed-off-by: Jeremy Clements <[email protected]>
hpcc-systems · Nov 7, 2023 · 5c77723 · 5c77723
1 parent 3d813a0
commit 5c77723
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/packages/common/src/Utility.ts b/packages/common/src/Utility.ts
@@ -736,11 +736,17 @@ export function textSize(_text: string | string[], fontName: string = "Verdana",
     const hash = `${bold}::${fontSize}::${fontName}::${text.join("::")}`;
     let retVal = g_fontSizeContextCache[hash];
     if (!retVal) {
+        retVal = { width: 0, height: 0 };
         g_fontSizeContext.font = `${bold ? "bold " : ""}${fontSize}px ${fontName}`;
-        g_fontSizeContextCache[hash] = retVal = {
-            width: Math.max(...text.map(t => g_fontSizeContext.measureText("" + t).width)),
-            height: fontSize * text.length
-        };
+        text.forEach(line => {
+            const textMeasurement = g_fontSizeContext.measureText("" + line);
+            const width = textMeasurement.width;
+            const height = (textMeasurement.fontBoundingBoxDescent + textMeasurement.fontBoundingBoxAscent) * text.length;
+            g_fontSizeContextCache[hash] = retVal = {
+                width: width > retVal.width ? width : retVal.width,
+                height: height > retVal.height ? height : retVal.height
+            };
+        });
     }
     return retVal;
 }

diff --git a/packages/html/src/BreakdownTable.ts b/packages/html/src/BreakdownTable.ts
@@ -53,8 +53,8 @@ export class BreakdownTable extends StyledTable {
         this._tooltip
             .tooltipHTML(data => {
                 const rowCount = this.useCalculatedRowCount() ? this.calculateRowCount() : this.rowCount();
-                const rowHeight = this.fontSize();
-                const widestLabel = Math.max(...data.map(row => this.textSize(row[0], "Verdana", this.fontSize()).width));
+                const rowHeight = Math.max(...data.map(row => this.textSize(row[0], this.fontFamily(), this.fontSize()).height)) ?? this.fontSize();
+                const widestLabel = Math.max(...data.map(row => this.textSize(row[0], this.fontFamily(), this.fontSize()).width));
                 const widestPerc = 30;
                 const colCount = 2;
                 const w = colCount * (widestLabel + widestPerc) + (this._tooltip.padding() * 2);
@@ -65,13 +65,13 @@ export class BreakdownTable extends StyledTable {
                 return `<div style="
                     width: 100%;
                     height: 100%;
-                    font-size: ${this.fontSize()}px
-                ">${
-                    otherData.map(row => `<div style="
+                    font-size: ${this.fontSize()}px;
+                ">${otherData.map(row =>
+                    `<div style="
                         float:left;
                         width:${Math.floor(99 / colCount)}%;
                     ">${row[0]}: ${row[1]}</div>`
-                    ).join("")
+                ).join("")
                     }</div>`;
             })
             ;