v5.5.7

package.json

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

src/components/helpers/fontSizer.js

@@ -5,31 +5,40 @@ const FontSizer = ({
   Component = "div",
   maxHeight = 100,
   maxWidth = 100,
-  maxFontSize = 500,
+  maxFontSize = 50,
   minFontSize = 10,
   cacheKey,
   ...rest
 }) => {
   const [ref, setRef] = useState()
+  const cancelRef = useRef(false)
 
   useEffect(() => {
     if (!ref) return
 
-    requestAnimationFrame(() => {
+    const timeoutId = setTimeout(() => {
+      cancelRef.current = false
       let fontSize = maxFontSize
 
       ref.style.animation = "font-size 02s"
       ref.style.fontSize = fontSize + "px"
 
-      const widthScale = maxWidth / ref.offsetWidth
-      const heightScale = maxHeight / ref.offsetHeight
-
-      const scaleFactor = Math.min(widthScale, heightScale)
-      fontSize = Math.floor(maxFontSize * scaleFactor) || 1
-
-      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"
+      }
     })
-  }, [children, maxHeight, maxWidth, ref, cacheKey])
+
+    return () => {
+      cancelRef.current = true
+      clearTimeout(timeoutId)
+    }
+  }, [children, maxHeight, maxWidth, ref])
 
   return (
     <Component truncate ref={setRef} {...rest}>