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

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

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/packages/common/src/Utility.ts b/packages/common/src/Utility.ts
@@ -739,7 +739,10 @@ export function textSize(_text: string | string[], fontName: string = "Verdana",
         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
+            height: Math.max(...text.map(t => {
+                const textMeasurement = g_fontSizeContext.measureText("" + t);
+                return textMeasurement.fontBoundingBoxDescent + textMeasurement.fontBoundingBoxAscent;
+            }))
         };
     }
     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>`;
             })
             ;