v5.2.1

netdata · Jun 26, 2024 · e73c48a · e73c48a
1 parent 1232fa9
commit e73c48a
Show file tree

Hide file tree

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

diff --git a/src/components/groupBoxes/drawBoxes.js b/src/components/groupBoxes/drawBoxes.js
@@ -151,5 +151,6 @@ export default (chart, el, { onMouseenter, onMouseout }, options = {}) => {
     update,
     activateBox: index => activateBox(index),
     deactivateBox: () => deactivateBox(),
+    getElement: () => backgroundEl,
   }
 }
diff --git a/src/components/groupBoxes/footer/legend.js b/src/components/groupBoxes/footer/legend.js
@@ -29,11 +29,11 @@ const Legend = () => {
   const maxColor = chart.getThemeAttribute("themeGroupBoxesMax")
 
   return (
-    <Flex data-testid="groupBox-legend" gap={4} alignItems="center">
+    <Flex data-testid="groupBox-legend" gap={4} alignItems="center" width="100%">
       <TextNano strong>
         {selectedContexts && selectedContexts !== "*" ? selectedContexts : contextScope}
       </TextNano>
-      <Flex gap={2} alignItems="center">
+      <Flex gap={2} alignItems="center" width="100%">
         <TextNano>
           {chart.getConvertedValue(min)} {units}
         </TextNano>

diff --git a/src/components/groupBoxes/groupBoxes.js b/src/components/groupBoxes/groupBoxes.js
@@ -1,4 +1,4 @@
-import React, { memo } from "react"
+import React, { memo, useRef } from "react"
 import styled, { keyframes } from "styled-components"
 import { Box, Flex, TextMicro } from "@netdata/netdata-ui"
 import { useLoadingColor, useAttributeValue, useColor } from "@/components/provider"
@@ -78,6 +78,7 @@ const GroupBoxWrapper = ({ uiName, subTree, data, label, groupedBy, hasMore }) =
 
 const GroupBoxes = ({ uiName }) => {
   const { data, tree } = useGroupBox(uiName)
+  const ref = useRef()
 
   const loaded = useAttributeValue("loaded")
   const showingInfo = useAttributeValue("showingInfo")
@@ -88,7 +89,14 @@ const GroupBoxes = ({ uiName }) => {
   if (!loaded) return <SkeletonIcon />
 
   return (
-    <Flex data-testid="groupBoxes" flexWrap flex position="relative" height={{ min: "150px" }}>
+    <Flex
+      data-testid="groupBoxes"
+      flexWrap
+      flex
+      position="relative"
+      height={{ min: "150px" }}
+      ref={ref}
+    >
       {showingInfo ? (
         <Details />
       ) : rest.length ? (

diff --git a/src/components/line/resize/index.js b/src/components/line/resize/index.js