From 5bf5cdc802b354af1815abf4784ee9f31ca75378 Mon Sep 17 00:00:00 2001 From: novykh Date: Thu, 16 Jan 2025 18:08:23 +0200 Subject: [PATCH] v5.5.6 --- package.json | 2 +- src/chartLibraries/dygraph/index.js | 71 ++++++++------------- src/components/helpers/fontSizer.js | 28 +++----- src/components/line/overlays/latestValue.js | 5 +- src/components/line/popover/index.js | 10 +-- 5 files changed, 44 insertions(+), 72 deletions(-) diff --git a/package.json b/package.json index 7da7e265..cbb5ccfd 100644 --- 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 index d99e39a5..f552fa09 100644 --- 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 index a1178c10..32d532ac 100644 --- 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 ( diff --git a/src/components/line/overlays/latestValue.js b/src/components/line/overlays/latestValue.js index 2adeb4a2..57c304c2 100644 --- a/src/components/line/overlays/latestValue.js +++ b/src/components/line/overlays/latestValue.js @@ -58,13 +58,14 @@ const LatestValue = ({ dimensionId, textProps, ...rest }) => { {unit} diff --git a/src/components/line/popover/index.js b/src/components/line/popover/index.js index 0e19cb7d..6f57902e 100644 --- a/src/components/line/popover/index.js +++ b/src/components/line/popover/index.js @@ -42,8 +42,6 @@ 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` @@ -51,15 +49,13 @@ const Popover = ({ uiName }) => { 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))