Reduce chart hover layout and sorting work

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "6.12.9",
+  "version": "6.12.10",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/components/helpers/fontSizer.js

@@ -1,13 +1,33 @@
 import React, { useState, useEffect, useRef } from "react"
 
+export const findFittedFontSize = ({ minFontSize, maxFontSize, fits }) => {
+  if (maxFontSize <= minFontSize || fits(maxFontSize)) return maxFontSize
+
+  let lower = minFontSize + 1
+  let upper = maxFontSize - 1
+  let fitted = minFontSize
+
+  while (lower <= upper) {
+    const fontSize = Math.floor((lower + upper) / 2)
+
+    if (fits(fontSize)) {
+      fitted = fontSize
+      lower = fontSize + 1
+    } else {
+      upper = fontSize - 1
+    }
+  }
+
+  return fitted
+}
+
 const FontSizer = ({
   children,
   Component = "div",
   maxHeight = 100,
   maxWidth = 100,
   maxFontSize = 50,
   minFontSize = 10,
-  cacheKey,
   ...rest
 }) => {
   const [ref, setRef] = useState()
@@ -18,27 +38,29 @@ const FontSizer = ({
 
     const timeoutId = setTimeout(() => {
       cancelRef.current = false
-      let fontSize = maxFontSize
 
       ref.style.animation = "font-size 02s"
-      ref.style.fontSize = fontSize + "px"
-
-      while (
-        !cancelRef.current &&
-        fontSize > minFontSize &&
-        (ref.offsetWidth > maxWidth || ref.offsetHeight > maxHeight)
-      ) {
-        const delta = Math.ceil(fontSize / 100)
-        fontSize = fontSize - delta
-        ref.style.fontSize = fontSize + "px"
-      }
+      const fontSize = findFittedFontSize({
+        minFontSize,
+        maxFontSize,
+        fits: nextFontSize => {
+          if (cancelRef.current) return true
+
+          ref.style.fontSize = nextFontSize + "px"
+          return ref.offsetWidth <= maxWidth && ref.offsetHeight <= maxHeight
+        },
+      })
+
+      const fittedFontSize = fontSize + "px"
+      if (!cancelRef.current && ref.style.fontSize !== fittedFontSize)
+        ref.style.fontSize = fittedFontSize
     })
 
     return () => {
       cancelRef.current = true
       clearTimeout(timeoutId)
     }
-  }, [children, maxHeight, maxWidth, ref])
+  }, [children, maxFontSize, maxHeight, maxWidth, minFontSize, ref])
 
   return (
     <Component truncate ref={setRef} {...rest}>

src/components/helpers/fontSizer.test.js

@@ -0,0 +1,77 @@
+import React from "react"
+import { act, render } from "@testing-library/react"
+import FontSizer, { findFittedFontSize } from "./fontSizer"
+
+const TestText = ({ truncate, ref, ...rest }) => (
+  <div data-truncate={truncate} ref={ref} {...rest} />
+)
+
+describe("findFittedFontSize", () => {
+  it("finds every fitting threshold with at most seven probes", () => {
+    for (let threshold = 10; threshold <= 50; threshold += 1) {
+      let probes = 0
+      const fontSize = findFittedFontSize({
+        minFontSize: 10,
+        maxFontSize: 50,
+        fits: candidate => {
+          probes += 1
+          return candidate <= threshold
+        },
+      })
+
+      expect(fontSize).toBe(threshold)
+      expect(probes).toBeLessThanOrEqual(7)
+    }
+  })
+
+  it("keeps the minimum size when no candidate fits", () => {
+    const fontSize = findFittedFontSize({
+      minFontSize: 10,
+      maxFontSize: 50,
+      fits: () => false,
+    })
+
+    expect(fontSize).toBe(10)
+  })
+})
+
+describe("FontSizer", () => {
+  beforeEach(() => jest.useFakeTimers())
+
+  afterEach(() => jest.useRealTimers())
+
+  it("applies the largest fitting font size", () => {
+    const { getByText } = render(
+      <FontSizer
+        Component={TestText}
+        maxFontSize={50}
+        minFontSize={10}
+        maxWidth={235}
+        maxHeight={100}
+      >
+        value
+      </FontSizer>
+    )
+    const element = getByText("value")
+    let widthReads = 0
+
+    Object.defineProperties(element, {
+      offsetHeight: {
+        configurable: true,
+        get: () => Number.parseFloat(element.style.fontSize),
+      },
+      offsetWidth: {
+        configurable: true,
+        get: () => {
+          widthReads += 1
+          return Number.parseFloat(element.style.fontSize) * 10
+        },
+      },
+    })
+
+    act(() => jest.runOnlyPendingTimers())
+
+    expect(element.style.fontSize).toBe("23px")
+    expect(widthReads).toBeLessThanOrEqual(7)
+  })
+})

src/components/line/overlays/latestValue.js

@@ -65,7 +65,6 @@ const LatestValue = ({ dimensionId, textProps, ...rest }) => {
         {...defaultTextProps}
         color="textLite"
         {...textProps}
-        cacheKey={value}
       >
         {unit}
       </FontSizer>