v4.3.1

.storybook/preview.js

@@ -22,16 +22,8 @@ const preview = {
       return (
         <ThemeProvider theme={theme}>
           <GlobalStyles />
-          <Flex
-            width="100vw"
-            height="100vh"
-            background="mainBackground"
-            alignItems="center"
-            justifyContent="center"
-          >
-            <Flex>
-              <Story />
-            </Flex>
+          <Flex width="100vw" height="100vh" background="mainBackground" overflow="auto">
+            <Story />
           </Flex>
         </ThemeProvider>
       )

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netdata/charts",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "description": "Netdata frontend SDK and chart utilities",
   "main": "dist/index.js",
   "module": "dist/es6/index.js",

src/agentv2.stories.js

@@ -1,6 +1,5 @@
 import React from "react"
-import { ThemeProvider } from "styled-components"
-import { Flex, DefaultTheme, DarkTheme } from "@netdata/netdata-ui"
+import { Flex } from "@netdata/netdata-ui"
 import Line from "@/components/line"
 import GaugeComponent from "@/components/gauge"
 import EasyPieComponent from "@/components/easyPie"
@@ -167,24 +166,22 @@ export const Chart = ({ nodesScope, contextScope, contexts, host, theme, singleD
   sdk.appendChild(chart10)
 
   return (
-    <ThemeProvider theme={theme === "default" ? DefaultTheme : DarkTheme}>
-      <Flex background="mainBackground" column gap={2} padding={[3]}>
-        <Flex height={50} gap={2}>
-          <EasyPieComponent chart={chart2} />
-          <GaugeComponent chart={chart3} />
-          <NumberComponent chart={chart5} />
-          <D3pieComponent chart={chart6} />
-        </Flex>
-        <Flex height={50} gap={2}>
-          <D3pieComponent chart={chart8} />
-          <D3pieComponent chart={chart9} />
-          <BarsComponent chart={chart10} />
-        </Flex>
-        <Line chart={chart} height="315px" width="100%" />
-        <Line chart={chart7} height="315px" width="100%" />
-        <GroupBoxes chart={chart4} />
+    <Flex background="mainBackground" column gap={2} padding={[3]} overflow="auto">
+      <Flex height={50} width="100%" gap={2}>
+        <EasyPieComponent chart={chart2} height="100px" />
+        <GaugeComponent chart={chart3} height="100px" />
+        <NumberComponent chart={chart5} height="100px" />
+        <D3pieComponent chart={chart6} height="100px" />
       </Flex>
-    </ThemeProvider>
+      <Flex height={50} width="100%" gap={2}>
+        <D3pieComponent chart={chart8} height="100px" />
+        <D3pieComponent chart={chart9} height="100px" />
+        <BarsComponent chart={chart10} height="100px" />
+      </Flex>
+      <Line chart={chart} height="315px" width="100%" />
+      <Line chart={chart7} height="315px" width="100%" />
+      <GroupBoxes chart={chart4} />
+    </Flex>
   )
 }
 

src/components/hocs/withChart.js

@@ -3,7 +3,6 @@ import { withChartProvider } from "@/components/provider"
 import withChartTrack from "./withChartTrack"
 import withFullscreen from "./withFullscreen"
 import withDeferredMount from "./withDeferredMount"
-import withResize from "./withResize"
 import withTile from "./withTile"
 
 export default (Component, options = {}) => {

src/components/hocs/withFullscreen.js

@@ -11,7 +11,7 @@ export default Component => {
     return (
       <Layer full>
         <Flex background="mainBackground" flex width={{ max: "inherit" }} padding={[4]}>
-          <Component {...props} ref={ref} />
+          <Component {...props} height="100%" ref={ref} />
         </Flex>
       </Layer>
     )

src/components/hocs/withTile.js

@@ -111,7 +111,7 @@ export const HeadWrapper = ({ children, uiName, ...rest }) => {
               column
               height="100%"
               width="2px"
-              background="nodeBadgeBackground"
+              background="neutralHighlight"
               justifyContent="end"
             >
               <ColorBar

src/components/icon/button.js

@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import { getColor } from "@netdata/netdata-ui"
+import { getColor, cursor } from "@netdata/netdata-ui"
 import { withTooltip } from "@/components/tooltip"
 
 const color = ({ active, disabled, defaultColor = "textLite" }) => {
@@ -10,6 +10,7 @@ const color = ({ active, disabled, defaultColor = "textLite" }) => {
 }
 
 const Button = styled.button.attrs(({ icon, hoverIndicator = true, padding = 0, ...rest }) => ({
+  cursor: "pointer",
   ...rest,
   children: icon || rest.children,
   active: rest.active || rest["aria-expanded"],
@@ -22,7 +23,7 @@ const Button = styled.button.attrs(({ icon, hoverIndicator = true, padding = 0,
   line-height: 0;
   background: ${({ theme, active }) =>
     active ? getColor("borderSecondary")({ theme }) : "initial"};
-  cursor: pointer;
+  ${cursor}
   color: ${({ active, disabled, theme }) => getColor(color({ active, disabled }))({ theme })};
 
   svg {

src/components/line/footer/index.js

@@ -1,9 +1,8 @@
 import React from "react"
-import { Box, Flex } from "@netdata/netdata-ui"
+import { Flex } from "@netdata/netdata-ui"
 import Legend from "@/components/line/legend"
 import HeatmapColors from "@/components/line/legend/heatmapColors"
 import DimensionSort from "@/components/line/dimensionSort"
-import Resize from "@/components/line/resize"
 import { useAttributeValue } from "@/components/provider/selectors"
 import Indicators from "@/components/line/indicators"
 import Drawer from "../drawer"
@@ -19,26 +18,6 @@ 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 && !enabledWidthResize) return null
-
-  return (
-    <Box position="absolute" right={0} bottom="-4px" className="chart-handle">
-      <Resize cursor={getCursor(enabledHeightResize, enabledWidthResize)} />
-    </Box>
-  )
-}
-
 const Footer = () => {
   const showingInfo = useAttributeValue("showingInfo")
   const expanded = useAttributeValue("expanded")
@@ -59,7 +38,7 @@ const Footer = () => {
           {expanded && <Drawer />}
         </>
       )}
-      {expandable ? (
+      {expandable && (
         <Flex
           flex
           position="relative"
@@ -68,10 +47,7 @@ const Footer = () => {
           border={{ side: "top", color: "borderSecondary" }}
         >
           <Expander />
-          <ResizeHandler />
         </Flex>
-      ) : (
-        <ResizeHandler />
       )}
     </Container>
   )

src/sdk/initialAttributes.js

@@ -126,13 +126,9 @@ export default {
   colors: [],
 
   height: "",
-  enabledHeightResize: true,
-  pristineEnabledHeightResize: {},
   enabledYAxis: true,
 
   width: "",
-  enabledWidthResize: false,
-  pristineEnabledWidthResize: {},
   enabledXAxis: true,
 
   hasToolbox: true,
@@ -195,6 +191,7 @@ export default {
   agent: true,
 
   toolboxElements: [Information, ChartType, Fullscreen],
+  toolboxProps: {},
   leftHeaderElements: [Status],
 
   expanded: false,

src/sdk/makeNode.js

@@ -123,11 +123,6 @@ export default ({ sdk, parent = null, attributes: initialAttributes }) => {
     updateIntls(attributes.timezone)
   }
 
-  const updateSize = (height, width) => {
-    updateAttributes({ height, width })
-    sdk.trigger("sizeChanged", instance, height, width)
-  }
-
   const moveY = (min, max) => {
     sdk.trigger("moveY", instance, min, max)
   }
@@ -178,32 +173,14 @@ export default ({ sdk, parent = null, attributes: initialAttributes }) => {
     moveX(-900)
   }
 
-  const pristineHeight = makePristine(
-    "pristineEnabledHeightResize",
-    ["enabledHeightResize"],
-    updateAttributes
-  )
-
-  const pristineWidth = makePristine(
-    "pristineEnabledWidthResize",
-    ["enabledWidthResize"],
-    updateAttributes
-  )
-
   const toggleFullscreen = () => {
     const fullscreen = getAttribute("fullscreen")
 
     if (!fullscreen) {
-      pristineHeight.updatePristine(attributes, "enabledHeightResize", false)
-      updateAttribute("enabledHeightResize", false)
-      pristineWidth.updatePristine(attributes, "enabledWidthResize", false)
-      updateAttribute("enabledWidthResize", false)
       updateAttribute("fullscreen", !fullscreen)
       return
     }
 
-    pristineHeight.resetPristine(attributes)
-    pristineWidth.resetPristine(attributes)
     updateAttribute("fullscreen", !fullscreen)
   }
 
@@ -240,7 +217,6 @@ export default ({ sdk, parent = null, attributes: initialAttributes }) => {
     getId,
     getAncestor,
     inherit,
-    updateSize,
     updateStaticValueRange,
     resetStaticValueRange,
     toggleFullscreen,