Upgrade node and ui.

.github/workflows/deploy-storybook.js.yml

@@ -10,7 +10,7 @@ jobs:
     strategy:
       matrix:
         node-version:
-          - 16.3
+          - 18.18
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/tests.yml

@@ -21,7 +21,7 @@ jobs:
 
       - uses: actions/setup-node@v2
         with:
-          node-version: "12.x"
+          node-version: "18.18"
           cache: "yarn"
       - name: Install dependencies
         run: yarn

src/agentv2.stories.js

@@ -11,7 +11,7 @@ import GroupBoxes from "@/components/groupBoxes"
 import makeDefaultSDK from "./makeDefaultSDK"
 
 const Template = ({ nodesScope, contextScope, contexts, host, theme, singleDimension }) => {
-  const sdk = makeDefaultSDK({ attributes: { theme, width: 1000 } })
+  const sdk = makeDefaultSDK({ attributes: { theme, containerWidth: 1000 } })
   const chart = sdk.makeChart({
     attributes: {
       id: "control",

src/components/container.js

@@ -1,14 +1,16 @@
 import styled from "styled-components"
 import { Flex } from "@netdata/netdata-ui"
 
-const Container = styled(Flex).attrs(props => ({
+const Container = styled(Flex).attrs(({ height, width, ...rest }) => ({
   "data-testid": "chart",
   column: true,
   position: "relative",
   round: true,
   border: { color: "mainChartBorder", side: "all" },
   background: "mainChartBg",
-  ...props,
+  height: typeof height === "string" ? height : `${height}px`,
+  width: typeof width === "string" ? width : `${width}px`,
+  ...rest,
 }))`
   ::selection {
     background: transparent;

src/components/groupBoxes/popover/index.js

@@ -28,7 +28,7 @@ const Popover = ({ target, label, index, groupLabel, data, id }) => {
   updatePositionRef.current = useMakeUpdatePosition(target, dropRef, align, stretch)
 
   useEffect(() => {
-    if (!target?.getBoundingClientRect) return
+    if (!target?.getBoundingClientRect || !dropRef.current) return
 
     const { right: targetRight, bottom: targetBottom } = target.getBoundingClientRect()
 

src/components/hocs/withChart.js

@@ -3,11 +3,11 @@ import { withChartProvider } from "@/components/provider"
 import withChartTrack from "./withChartTrack"
 import withFullscreen from "./withFullscreen"
 import withDeferredMount from "./withDeferredMount"
-import withHeight from "./withHeight"
+import withResize from "./withResize"
 import withTile from "./withTile"
 
 export default (Component, options = {}) => {
-  let ComponentWithChart = withFullscreen(withHeight(withChartTrack(withDeferredMount(Component))))
+  let ComponentWithChart = withFullscreen(withResize(withChartTrack(withDeferredMount(Component))))
 
   if (options.tile) ComponentWithChart = withTile(ComponentWithChart)
 

src/components/hocs/withResize.js

@@ -0,0 +1,78 @@
+import React, { useRef, memo, useLayoutEffect } from "react"
+import { useChart } from "@/components/provider"
+import { unregister } from "@/helpers/makeListeners"
+
+export default Component => {
+  const HeightComponent = ({
+    height: defaultHeight = "100%",
+    width: defaultWidth = "100%",
+    flex = true,
+    ...rest
+  }) => {
+    const chart = useChart()
+    const ref = useRef()
+
+    const height =
+      (chart.getAttribute("enabledHeightResize") && chart.getAttribute("height")) || defaultHeight
+    const width =
+      (chart.getAttribute("enabledWidthResize") && chart.getAttribute("width")) || defaultWidth
+
+    useLayoutEffect(() => {
+      let initialHeight = 0
+      let initialWidth = 0
+
+      return unregister(
+        chart
+          .on("resizeStart", () => {
+            initialHeight = ref.current.clientHeight
+            initialWidth = ref.current.clientWidth
+          })
+          .on("resizeMove", (deltaY, deltaX) => {
+            const nextHeight = deltaY ? initialHeight + deltaY : initialHeight
+            const nextWidth = deltaX ? initialWidth + deltaX : initialWidth
+
+            let resized = false
+
+            if (
+              chart.getAttribute("enabledHeightResize") &&
+              nextHeight > 185 &&
+              nextHeight !== initialHeight
+            ) {
+              const nextHeightAttribute = `${nextHeight}px`
+              ref.current.style.height = nextHeightAttribute
+              resized = true
+            }
+
+            if (
+              chart.getAttribute("enabledWidthResize") &&
+              nextWidth > 185 &&
+              nextWidth !== initialWidth
+            ) {
+              const nextWidthAttribute = `${nextWidth}px`
+              ref.current.style.width = nextWidthAttribute
+              resized = true
+            }
+
+            if (resized) chart.getUI().trigger("resizing")
+          })
+          .on("resizeEnd", () => {
+            chart.updateSize(ref.current.clientHeight, ref.current.clientWidth)
+            chart.getUI().trigger("resize")
+          }),
+        chart.onAttributeChange("expanded", expanded => {
+          chart.trigger("resizeStart")
+          chart.trigger(
+            "resizeEnd",
+            expanded ? chart.getAttribute("expandedHeight") : -chart.getAttribute("expandedHeight"),
+            0
+          )
+          chart.trigger("resizeEnd")
+        })
+      )
+    }, [chart])
+
+    return <Component ref={ref} height={height} width={width} flex={flex} {...rest} />
+  }
+
+  return memo(HeightComponent)
+}

src/components/line/footer/index.js

@@ -19,14 +19,22 @@ export const Container = props => (
   />
 )
 
+const getCursor = (enabledHeightResize, enabledWidthResize) =>
+  enabledHeightResize && enabledWidthResize
+    ? "nwse-resize"
+    : enabledHeightResize
+    ? "ns-resize"
+    : "ew-resize"
+
 const ResizeHandler = () => {
   const enabledHeightResize = useAttributeValue("enabledHeightResize")
+  const enabledWidthResize = useAttributeValue("enabledWidthResize")
 
-  if (!enabledHeightResize) return null
+  if (!enabledHeightResize && !enabledWidthResize) return null
 
   return (
     <Box position="absolute" right={0} bottom="-4px">
-      <Resize />
+      <Resize cursor={getCursor(enabledHeightResize, enabledWidthResize)} />
     </Box>
   )
 }

src/components/line/index.js

@@ -11,7 +11,7 @@ import Container from "@/components/container"
 import Footer from "./footer"
 
 export const Line = forwardRef(
-  ({ hasHeader = true, hasFooter = true, hasFilters = true, height, uiName, ...rest }, ref) => {
+  ({ hasHeader = true, hasFooter = true, hasFilters = true, uiName, ...rest }, ref) => {
     const chart = useChart()
     const showingInfo = useAttributeValue("showingInfo")
     const sparkline = useAttributeValue("sparkline")
@@ -32,7 +32,7 @@ export const Line = forwardRef(
     })
 
     return (
-      <Container ref={setRef} {...(sparkline && { border: false })} {...rest} height={height}>
+      <Container ref={setRef} {...(sparkline && { border: false })} {...rest}>
         {hasHeader && <Header />}
         {hasFilters && <FilterToolbox />}
         <ContentWrapper>

src/components/line/legend/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useRef, useEffect, useCallback } from "react"
+import React, { memo, useRef, useEffect } from "react"
 import styled from "styled-components"
 import { debounce } from "throttle-debounce"
 import { Flex, useNavigationArrows } from "@netdata/netdata-ui"
@@ -25,7 +25,8 @@ const Container = styled(Flex).attrs({
 })`
   overflow-x: auto; // fallback
   overflow-x: overlay;
-  height: 45px;
+  overflow-y: hidden;
+  height: 50px;
   ::-webkit-scrollbar {
     height: 6px;
   }
@@ -48,15 +49,19 @@ const SkeletonDimensions = () => (
   </Fragment>
 )
 
-const Dimensions = memo(({ setRef }) => {
+const Dimensions = memo(({ lastItemRef }) => {
   const dimensionIds = useDimensionIds()
 
   if (!dimensionIds) return null
 
   return (
     <Fragment>
-      {dimensionIds.map(id => (
-        <Dimension ref={setRef} key={id} id={id} />
+      {dimensionIds.map((id, index) => (
+        <Dimension
+          {...(index === dimensionIds.length - 1 && { ref: lastItemRef })}
+          key={id}
+          id={id}
+        />
       ))}
     </Fragment>
   )
@@ -70,12 +75,12 @@ const Legend = props => {
   const active = useAttributeValue("active")
 
   const legendRef = useRef(null)
-  const dimensionItemsRef = useRef([])
+  const lastItemRef = useRef()
 
   const [arrowLeft, arrowRight, onScroll] = useNavigationArrows(
     legendRef,
-    dimensionItemsRef,
-    [],
+    lastItemRef,
+    dimensionIds.length,
     true
   )
 
@@ -110,22 +115,6 @@ const Legend = props => {
     }
   }, [legendRef.current])
 
-  const setDimensionRef = useCallback(
-    dimensionItem => {
-      if (!dimensionItem) return
-
-      if (!dimensionItemsRef.current.includes(dimensionItem))
-        dimensionItemsRef.current = [...dimensionItemsRef.current, dimensionItem]
-
-      if (dimensionIds.length < dimensionItemsRef.current.length) {
-        dimensionItemsRef.current = dimensionItemsRef.current.filter(
-          node => node.getAttribute("id") === dimensionItem.getAttribute("id")
-        )
-      }
-    },
-    [dimensionIds.length]
-  )
-
   const scrollLeft = e => {
     e.preventDefault()
     const container = legendRef.current
@@ -145,19 +134,24 @@ const Legend = props => {
   }
 
   return (
-    <>
+    <Flex overflow="hidden" position="relative">
       {arrowLeft && (
         <Flex
           data-testid="filterTray-arrowLeft"
           cursor="pointer"
           onClick={scrollLeft}
-          padding={[2]}
+          padding={[0, 2]}
+          height="100%"
+          position="absolute"
+          left={0}
+          background="mainChartBg"
+          alignItems="center"
         >
           <Icon svg={navLeft} color="key" size="8px" />
         </Flex>
       )}
       <Container ref={legendRef} {...props} data-track={chart.track("legend")}>
-        {!initialLoading && !empty && <Dimensions setRef={setDimensionRef} />}
+        {!initialLoading && !empty && <Dimensions lastItemRef={lastItemRef} />}
         {initialLoading && <SkeletonDimensions />}
         {!initialLoading && empty && <EmptyDimension />}
       </Container>
@@ -166,12 +160,17 @@ const Legend = props => {
           data-testid="filterTray-arrowRight"
           cursor="pointer"
           onClick={scrollRight}
-          padding={[2]}
+          padding={[0, 2]}
+          height="100%"
+          position="absolute"
+          right={0}
+          background="mainChartBg"
+          alignItems="center"
         >
           <Icon svg={navRight} color="key" size="8px" />
         </Flex>
       )}
-    </>
+    </Flex>
   )
 }