v4.3.2

netdata · Nov 3, 2023 · 6eff9bf · 6eff9bf
1 parent 4ee9b68
commit 6eff9bf
Show file tree

Hide file tree

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

diff --git a/src/components/groupBoxes/popover/index.js b/src/components/groupBoxes/popover/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useRef } from "react"
 import ReactDOM from "react-dom"
-import { DropContainer } from "@netdata/netdata-ui"
+import DropContainer from "@netdata/netdata-ui/dist/components/drops/drop/container"
 import useMakeUpdatePosition from "@netdata/netdata-ui/dist/components/drops/drop/useMakeUpdatePosition"
 import useDropElement from "@netdata/netdata-ui/dist/hooks/useDropElement"
 import Labels from "./labels"

diff --git a/src/components/groupBoxes/popover/labels.js b/src/components/groupBoxes/popover/labels.js
@@ -1,4 +1,4 @@
-import React, { memo } from "react"
+import React, { forwardRef, memo } from "react"
 import styled from "styled-components"
 import { Flex, TextMicro } from "@netdata/netdata-ui"
 import { useChart, useConverted, useAttributeValue } from "@/components/provider"
@@ -35,7 +35,7 @@ const Grid = styled.div`
   align-items: center;
 `
 
-const Labels = ({ index, label, groupLabel, data, id }) => {
+const Labels = forwardRef(({ index, label, groupLabel, data, id }, ref) => {
   const chart = useChart()
   const viewDimensions = chart.getAttribute("viewDimensions")
 
@@ -47,7 +47,7 @@ const Labels = ({ index, label, groupLabel, data, id }) => {
   const convertedValue = useConverted(value, { valueKey: "percent" })
 
   return (
-    <Container data-testid="chartPopover-labels" maxWidth={chartWidth} gap={2}>
+    <Container data-testid="chartPopover-labels" maxWidth={chartWidth} gap={2} ref={ref}>
       <Flex column gap={1}>
         <TextMicro>{groupLabel}</TextMicro>
         <TextMicro strong>{label}</TextMicro>
@@ -59,7 +59,7 @@ const Labels = ({ index, label, groupLabel, data, id }) => {
             bg={chart.getThemeAttribute("themeGroupBoxesMax")}
             height="18px"
           />
-          <TextMicro padding={[1, 2]} strong>
+          <TextMicro padding={[1.5, 2]} strong>
             {convertedValue}
             {convertedValue !== "-" && "%"}
           </TextMicro>
@@ -74,6 +74,6 @@ const Labels = ({ index, label, groupLabel, data, id }) => {
       )}
     </Container>
   )
-}
+})
 
 export default memo(Labels)