Upgrade all

eslint.config.js

@@ -0,0 +1,38 @@
+const globals = require("globals")
+const pluginJs = require("@eslint/js")
+const pluginReact = require("eslint-plugin-react")
+const storybook = require("eslint-plugin-storybook")
+
+module.exports = [
+  { files: ["**/*.{js,mjs,cjs,jsx}"] },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.commonjs,
+        ...globals.es6,
+        ...globals.jest,
+        ...globals.node,
+      },
+    },
+  },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  ...storybook.configs["flat/recommended"],
+  {
+    rules: {
+      "react/jsx-filename-extension": [1, { extensions: [".js", ".jsx"] }],
+      "react/prop-types": "off",
+      "react/display-name": "off",
+    },
+  },
+  {
+    ignores: [
+      // Ignore dotfiles
+      ".*.js",
+      "node_modules/",
+      "dist/",
+      "!.storybook",
+    ],
+  },
+]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "5.5.3",
+  "version": "6.0.1",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",
@@ -34,63 +34,64 @@
   ],
   "peerDependencies": {
     "@netdata/netdata-ui": "^4.3.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^5.3.9"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "styled-components": ">=5.3.9"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
+    "@babel/cli": "^7.26.4",
+    "@babel/core": "^7.26.0",
+    "@babel/eslint-parser": "^7.25.9",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
-    "@babel/plugin-transform-modules-umd": "^7.24.7",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@netdata/netdata-ui": "^4.5.11",
-    "@storybook/addon-essentials": "^8.1.11",
-    "@storybook/addon-interactions": "^8.1.11",
-    "@storybook/addon-links": "^8.1.11",
-    "@storybook/addon-onboarding": "^8.1.11",
+    "@babel/plugin-transform-modules-umd": "^7.25.9",
+    "@babel/plugin-transform-runtime": "^7.25.9",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@netdata/netdata-ui": "^5.0.0-dev.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-interactions": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-onboarding": "^8.4.7",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.1.11",
-    "@storybook/react": "^8.1.11",
-    "@storybook/react-webpack5": "^8.1.11",
-    "babel-loader": "^9.1.3",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-webpack5": "^8.4.7",
+    "babel-loader": "^9.2.1",
     "babel-plugin-module-resolver": "^5.0.2",
     "babel-plugin-styled-components": "^2.1.4",
     "clean-webpack-plugin": "^4.0.0",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react": "^7.34.3",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-storybook": "^0.11.1",
+    "globals": "^15.14.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.3.2",
+    "prettier": "^3.4.2",
     "raw-loader": "^4.0.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "rimraf": "^5.0.7",
-    "sass-loader": "^14.2.1",
-    "storybook": "^8.1.11",
-    "styled-components": "^5.3.9",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
+    "sass-loader": "^16.0.4",
+    "storybook": "^8.4.7",
+    "styled-components": "^6.1.13",
     "svg-sprite-loader": "^6.0.11",
     "svgo-loader": "^4.0.0",
-    "webpack": "^5.92.1",
+    "webpack": "^5.97.1",
     "webpack-cli": "^5.1.4",
     "webpack-plugin": "^1.0.5"
   },
   "dependencies": {
-    "@storybook/test": "^8.1.11",
+    "@storybook/test": "^8.4.7",
     "babel-eslint": "^10.1.0",
     "d3": "^7.9.0",
     "d3-scale": "^4.0.2",
     "dygraphs": "^2.2.1",
     "easy-pie-chart": "^2.1.7",
     "md5": "^2.3.0",
     "throttle-debounce": "^5.0.2",
-    "uuid": "^10.0.0"
+    "uuid": "^11.0.3"
   }
 }

src/components/bars/index.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from "react"
+import React from "react"
 import ChartContainer from "@/components/chartContainer"
 import { useOnResize } from "@/components/provider"
 import withChart from "@/components/hocs/withChart"
 import { ChartWrapper } from "@/components/hocs/withTile"
 import Dimensions from "./dimensions"
 
-export const BarsChart = forwardRef(({ uiName, ...rest }, ref) => {
+export const BarsChart = ({ uiName, ref, ...rest }) => {
   const { width, height } = useOnResize(uiName)
 
   return (
@@ -15,6 +15,6 @@ export const BarsChart = forwardRef(({ uiName, ...rest }, ref) => {
       </ChartContainer>
     </ChartWrapper>
   )
-})
+}
 
 export default withChart(BarsChart, { tile: true })

src/components/d3pie/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React from "react"
 import styled, { keyframes } from "styled-components"
 import { Flex } from "@netdata/netdata-ui"
 import ChartContainer from "@/components/chartContainer"
@@ -25,7 +25,7 @@ export const Skeleton = styled(Flex).attrs(props => ({
   animation: ${frames} 1.6s ease-in infinite;
 `
 
-export const D3pie = forwardRef(({ uiName, ...rest }, ref) => {
+export const D3pie = ({ uiName, ref, ...rest }) => {
   const loaded = useAttributeValue("loaded")
   const { width, height } = useOnResize(uiName)
   const size = width < height ? width : height
@@ -41,6 +41,6 @@ export const D3pie = forwardRef(({ uiName, ...rest }, ref) => {
       )}
     </ChartWrapper>
   )
-})
+}
 
 export default withChart(D3pie, { tile: true })

src/components/easyPie/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React from "react"
 import styled, { keyframes } from "styled-components"
 import { Flex, Text } from "@netdata/netdata-ui"
 import ChartContainer from "@/components/chartContainer"
@@ -73,7 +73,7 @@ export const Skeleton = styled(Flex).attrs(props => ({
   animation: ${frames} 1.6s ease-in infinite;
 `
 
-export const EasyPie = forwardRef(({ uiName, ...rest }, ref) => {
+export const EasyPie = ({ uiName, ref, ...rest }) => {
   const loaded = useAttributeValue("loaded")
 
   const { width, height } = useOnResize(uiName)
@@ -96,6 +96,6 @@ export const EasyPie = forwardRef(({ uiName, ...rest }, ref) => {
       )}
     </ChartWrapper>
   )
-})
+}
 
 export default withChart(EasyPie, { tile: true })

src/components/filterToolbox/label.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React from "react"
 import styled from "styled-components"
 import { Flex, TextSmall, getColor } from "@netdata/netdata-ui"
 import chevronDown from "@netdata/netdata-ui/dist/components/icon/assets/chevron_down.svg"
@@ -27,32 +27,37 @@ const StyledLabel = styled(TextSmall).attrs({
   flex: 1;
 `
 
-const Label = forwardRef(
-  (
-    { icon, secondaryLabel, tertiaryLabel, label, chevron = true, iconRotate, textProps, ...rest },
-    ref
-  ) =>
-    icon ? (
-      <Container ref={ref} {...rest}>
-        {icon}
-      </Container>
-    ) : (
-      <Container ref={ref} {...rest}>
-        {secondaryLabel && (
-          <TextSmall color="textLite" whiteSpace="nowrap" truncate>
-            {secondaryLabel}
-          </TextSmall>
-        )}
-        <StyledLabel {...textProps}>{label}</StyledLabel>
-        {tertiaryLabel && (
-          <TextSmall color="textLite" whiteSpace="nowrap" truncate>
-            {tertiaryLabel}
-          </TextSmall>
-        )}
-        {chevron && <Icon svg={chevronDown} size="12px" color="textNoFocus" rotate={iconRotate} />}
-      </Container>
-    )
-)
+const Label = ({
+  icon,
+  secondaryLabel,
+  tertiaryLabel,
+  label,
+  chevron = true,
+  iconRotate,
+  textProps,
+  ref,
+  ...rest
+}) =>
+  icon ? (
+    <Container ref={ref} {...rest}>
+      {icon}
+    </Container>
+  ) : (
+    <Container ref={ref} {...rest}>
+      {secondaryLabel && (
+        <TextSmall color="textLite" whiteSpace="nowrap" truncate>
+          {secondaryLabel}
+        </TextSmall>
+      )}
+      <StyledLabel {...textProps}>{label}</StyledLabel>
+      {tertiaryLabel && (
+        <TextSmall color="textLite" whiteSpace="nowrap" truncate>
+          {tertiaryLabel}
+        </TextSmall>
+      )}
+      {chevron && <Icon svg={chevronDown} size="12px" color="textNoFocus" rotate={iconRotate} />}
+    </Container>
+  )
 
 const TooltipContent = ({ heading, body }) => (
   <Flex column gap={1} {...tooltipStyleProps}>

src/components/gauge/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React from "react"
 import styled, { keyframes } from "styled-components"
 import { Flex, Text, getColor } from "@netdata/netdata-ui"
 import ChartContainer from "@/components/chartContainer"
@@ -121,7 +121,7 @@ export const Skeleton = styled(Flex).attrs(props => ({
   animation: ${frames} 1.6s ease-in infinite;
 `
 
-export const Gauge = forwardRef(({ uiName, ...rest }, ref) => {
+export const Gauge = ({ uiName, ref, ...rest }) => {
   const loaded = useAttributeValue("loaded")
 
   return (
@@ -145,6 +145,6 @@ export const Gauge = forwardRef(({ uiName, ...rest }, ref) => {
       )}
     </ChartWrapper>
   )
-})
+}
 
 export default withChart(Gauge, { tile: true })

src/components/groupBoxes/container.js

@@ -1,11 +1,11 @@
-import React, { forwardRef } from "react"
+import React from "react"
 import { Flex } from "@netdata/netdata-ui"
 import GroupBoxes from "./groupBoxes"
 
-const Container = forwardRef((props, ref) => (
-  <Flex column width="100%" height="100%" gap={4} padding={[4, 2]} ref={ref} {...props}>
+const Container = props => (
+  <Flex column width="100%" height="100%" gap={4} padding={[4, 2]} {...props}>
     <GroupBoxes />
   </Flex>
-))
+)
 
 export default Container

src/components/groupBoxes/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react"
+import React from "react"
 import useForwardRef from "@netdata/netdata-ui/dist/hooks/useForwardRef"
 import useHover from "@/components/useHover"
 import withChart from "@/components/hocs/withChart"
@@ -10,7 +10,7 @@ import Container from "@/components/container"
 import GroupBoxes from "./groupBoxes"
 import Footer from "./footer"
 
-export const GroupBoxesContainer = forwardRef(({ uiName, ...rest }, ref) => {
+export const GroupBoxesContainer = ({ uiName, ref, ...rest }) => {
   const chart = useChart()
 
   const hoverRef = useHover(
@@ -44,6 +44,6 @@ export const GroupBoxesContainer = forwardRef(({ uiName, ...rest }, ref) => {
       {!showingInfo && <Footer />}
     </Container>
   )
-})
+}
 
 export default withChart(GroupBoxesContainer)

src/components/groupBoxes/popover/labels.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, memo } from "react"
+import React, { memo } from "react"
 import styled from "styled-components"
 import { Flex, TextMicro } from "@netdata/netdata-ui"
 import { useChart, useConverted, useAttributeValue, useUnitSign } from "@/components/provider"
@@ -35,7 +35,7 @@ const Grid = styled.div`
   align-items: center;
 `
 
-const Labels = forwardRef(({ label, groupLabel, data, id }, ref) => {
+const Labels = ({ label, groupLabel, data, id, ref }) => {
   const chart = useChart()
   const viewDimensions = chart.getAttribute("viewDimensions")
   const index = chart.getDimensionIndex(id)
@@ -75,6 +75,6 @@ const Labels = forwardRef(({ label, groupLabel, data, id }, ref) => {
       )}
     </Container>
   )
-})
+}
 
 export default memo(Labels)