v5.5.6

netdata · Jan 16, 2025 · 5bf5cdc · 5bf5cdc
1 parent 0ebaa8d
commit 5bf5cdc
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 72 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "5.5.5",
+  "version": "5.5.6",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

diff --git a/src/chartLibraries/dygraph/index.js b/src/chartLibraries/dygraph/index.js
@@ -1,6 +1,5 @@
 import Dygraph from "dygraphs"
 import makeChartUI from "@/sdk/makeChartUI"
-import makeExecuteLatest from "@/helpers/makeExecuteLatest"
 import makeResizeObserver from "@/helpers/makeResizeObserver"
 import { isHeatmap } from "@/helpers/heatmap"
 import {
@@ -26,7 +25,6 @@ export default (sdk, chart) => {
   let navigation = null
   let hoverX = null
   let resizeObserver = null
-  let executeLatest
   let overlays = null
 
   const mount = element => {
@@ -40,7 +38,6 @@ export default (sdk, chart) => {
     const attributes = chart.getAttributes()
     const { data, labels } = chart.getPayload()
 
-    executeLatest = makeExecuteLatest()
     const isEmpty = attributes.outOfLimits || data.length === 0
 
     dygraph = new Dygraph(element, isEmpty ? [[0]] : data, {
@@ -50,27 +47,23 @@ export default (sdk, chart) => {
       labels: isEmpty ? ["X"] : labels,
 
       dateWindow: chart.getDateWindow(),
-      clickCallback: executeLatest.add((...args) => chartUI.trigger("click", ...args)),
-      highlightCallback: executeLatest.add((...args) =>
-        chartUI.trigger("highlightCallback", ...args)
-      ),
-      unhighlightCallback: executeLatest.add(() => chartUI.trigger("unhighlightCallback")),
+      clickCallback: (...args) => chartUI.trigger("click", ...args),
+      highlightCallback: (...args) => chartUI.trigger("highlightCallback", ...args),
+      unhighlightCallback: () => chartUI.trigger("unhighlightCallback"),
       drawCallback: (...args) => chartUI.trigger("drawCallback", ...args),
-      underlayCallback: executeLatest.add((...args) =>
-        chartUI.trigger("underlayCallback", ...args)
-      ),
+      underlayCallback: (...args) => chartUI.trigger("underlayCallback", ...args),
       interactionModel: {
         willDestroyContextMyself: true,
-        mouseout: executeLatest.add((...args) => chartUI.trigger("mouseout", ...args)),
-        mousedown: executeLatest.add((...args) => chartUI.trigger("mousedown", ...args)),
-        mousemove: executeLatest.add((...args) => chartUI.trigger("mousemove", ...args)),
-        mouseover: executeLatest.add((...args) => chartUI.trigger("mouseover", ...args)),
-        mouseup: executeLatest.add((...args) => chartUI.trigger("mouseup", ...args)),
-        touchstart: executeLatest.add((...args) => chartUI.trigger("touchstart", ...args)),
-        touchmove: executeLatest.add((...args) => chartUI.trigger("touchmove", ...args)),
-        touchend: executeLatest.add((...args) => chartUI.trigger("touchend", ...args)),
-        dblclick: executeLatest.add((...args) => chartUI.trigger("dblclick", ...args)),
-        wheel: executeLatest.add((...args) => chartUI.trigger("wheel", ...args)),
+        mouseout: (...args) => chartUI.trigger("mouseout", ...args),
+        mousedown: (...args) => chartUI.trigger("mousedown", ...args),
+        mousemove: (...args) => chartUI.trigger("mousemove", ...args),
+        mouseover: (...args) => chartUI.trigger("mouseover", ...args),
+        mouseup: (...args) => chartUI.trigger("mouseup", ...args),
+        touchstart: (...args) => chartUI.trigger("touchstart", ...args),
+        touchmove: (...args) => chartUI.trigger("touchmove", ...args),
+        touchend: (...args) => chartUI.trigger("touchend", ...args),
+        dblclick: (...args) => chartUI.trigger("dblclick", ...args),
+        wheel: (...args) => chartUI.trigger("wheel", ...args),
       },
       series: {
         ...(attributes.showAnomalies && {
@@ -136,30 +129,21 @@ export default (sdk, chart) => {
     navigation.toggle(attributes.enabledNavigation, attributes.navigation)
 
     listeners = [
-      chartUI.on(
-        "resize",
-        executeLatest.add(() => dygraph.resize())
-      ),
-      chart.onAttributeChange(
-        "hoverX",
-        executeLatest.add(dimensions => {
-          const row = Array.isArray(dimensions) ? chart.getClosestRow(dimensions[0]) : -1
-
-          if (row === -1) return dygraph.setSelection()
-
-          crosshair(instance, row)
-        })
-      ),
-      chart.onAttributeChange(
-        "clickX",
-        executeLatest.add(dimensions => {
-          const row = Array.isArray(dimensions) ? chart.getClosestRow(dimensions[0]) : -1
+      chartUI.on("resize", () => dygraph.resize()),
+      chart.onAttributeChange("hoverX", dimensions => {
+        const row = Array.isArray(dimensions) ? chart.getClosestRow(dimensions[0]) : -1
 
-          if (row === -1) return dygraph.setSelection()
+        if (row === -1) return dygraph.setSelection()
 
-          crosshair(instance, row, "click")
-        })
-      ),
+        crosshair(instance, row)
+      }),
+      chart.onAttributeChange("clickX", dimensions => {
+        const row = Array.isArray(dimensions) ? chart.getClosestRow(dimensions[0]) : -1
+
+        if (row === -1) return dygraph.setSelection()
+
+        crosshair(instance, row, "click")
+      }),
       chart.onAttributeChange("enabledHover", hoverX.toggle),
       chart.onAttributeChange("enabledNavigation", navigation.toggle),
       chart.onAttributeChange("navigation", navigation.set),
@@ -432,7 +416,6 @@ export default (sdk, chart) => {
     if (!dygraph) return
 
     resizeObserver()
-    if (executeLatest) executeLatest.clear()
     listeners.forEach(listener => listener())
     listeners = []
     chartUI.unmount()

diff --git a/src/components/helpers/fontSizer.js b/src/components/helpers/fontSizer.js
@@ -7,37 +7,29 @@ const FontSizer = ({
   maxWidth = 100,
   maxFontSize = 500,
   minFontSize = 10,
+  cacheKey,
   ...rest
 }) => {
   const [ref, setRef] = useState()
-  const cancelRef = useRef(false)
 
   useEffect(() => {
     if (!ref) return
 
-    const timeoutId = setTimeout(() => {
-      cancelRef.current = false
+    requestAnimationFrame(() => {
       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 widthScale = maxWidth / ref.offsetWidth
+      const heightScale = maxHeight / ref.offsetHeight
+
+      const scaleFactor = Math.min(widthScale, heightScale)
+      fontSize = Math.floor(maxFontSize * scaleFactor) || 1
 
-    return () => {
-      cancelRef.current = true
-      clearTimeout(timeoutId)
-    }
-  }, [children, maxHeight, maxWidth, ref])
+      ref.style.fontSize = fontSize + "px"
+    })
+  }, [children, maxHeight, maxWidth, ref, cacheKey])
 
   return (
     <Component truncate ref={setRef} {...rest}>

diff --git a/src/components/line/overlays/latestValue.js b/src/components/line/overlays/latestValue.js
@@ -58,13 +58,14 @@ const LatestValue = ({ dimensionId, textProps, ...rest }) => {
       </FontSizer>
       <FontSizer
         Component={StrokeLabel}
-        maxHeight={(height - 20) * 0.25}
-        maxWidth={(width - 20) * 0.7}
+        maxHeight={(height - 20) * 0.15}
+        maxWidth={(width - 20) * 0.2}
         fontSize="1.1em"
         strong
         {...defaultTextProps}
         color="textLite"
         {...textProps}
+        cacheKey={value}
       >
         {unit}
       </FontSizer>

diff --git a/src/components/line/popover/index.js b/src/components/line/popover/index.js
@@ -42,24 +42,20 @@ const Popover = ({ uiName }) => {
         const offsetX = event.offsetX || event.layerX
         const offsetY = event.offsetY || event.layerY
 
-        setOpen(true)
-
         if (!targetRef.current) return
 
         targetRef.current.style.left = `${offsetX}px`
         targetRef.current.style.top = `${offsetY}px`
 
         updatePositionRef.current()
 
-        const winHeight = window.innerHeight
-        const winWidth = window.innerWidth
-
         const { width, height } = dropRef.current.getBoundingClientRect()
-        const left = offsetX + width > winWidth
-        const top = offsetY + height > winHeight
+        const left = offsetX + width > window.innerWidth
+        const top = offsetY + height > window.innerHeight
 
         setAlign(getAlign(left, top))
       }),
+      chart.getUI(uiName).on("mouseover", () => setOpen(true)),
       chart.getUI(uiName).on("mouseout", () => setOpen(false)),
       chart.onAttributeChange("panning", panning => panning && setOpen(false)),
       chart.onAttributeChange("highlighting", panning => panning && setOpen(false))