v5.2.2

package.json

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

src/components/filterToolbox/filters.js

@@ -14,7 +14,6 @@ import TimeAggregation from "./timeAggregation"
 import Labels from "./labels"
 import Reset from "./reset"
 import ShowPostAggregations from "./showPostAggregations"
-import Config from "./config"
 // import Config from "./config" // TODO use it for dropdown form
 import N from "@netdata/netdata-ui/dist/components/icon/assets/N.svg"
 import I from "@netdata/netdata-ui/dist/components/icon/assets/I.svg"

src/components/line/footer/index.js

@@ -3,7 +3,7 @@ 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 { useAttributeValue } from "@/components/provider/selectors"
+import { useAttributeValue, usePayload } from "@/components/provider/selectors"
 import Indicators from "@/components/line/indicators"
 import Expander from "./expander"
 import { useIsHeatmap } from "@/helpers/heatmap"
@@ -22,6 +22,7 @@ const Footer = () => {
   const showingInfo = useAttributeValue("showingInfo")
   const expandable = useAttributeValue("expandable")
 
+  usePayload()
   const isHeatmap = useIsHeatmap()
 
   return (
@@ -31,8 +32,8 @@ const Footer = () => {
         <>
           {isHeatmap && <HeatmapColors />}
           <Flex alignItems="center">
-            <DimensionSort />
-            <Legend />
+            {!isHeatmap && <DimensionSort />}
+            <Legend padding={isHeatmap ? [0, 2] : undefined} />
           </Flex>
         </>
       )}

src/components/line/legend/heatmapColors.js

@@ -25,7 +25,7 @@ const HeatmapColorsLegend = () => {
   useAttributeValue("theme") // rerender on theme change
 
   return (
-    <Flex data-testid="heatmap-legend" gap={2} alignItems="center" padding={[2, 11]}>
+    <Flex data-testid="heatmap-legend" gap={2} alignItems="center" padding={[2]}>
       <TextNano>
         {chart.getConvertedValue(0)} {units}
       </TextNano>

src/components/line/legend/index.js

@@ -15,13 +15,14 @@ import Dimension, { SkeletonDimension, EmptyDimension } from "./dimension"
 import { Fragment } from "react"
 import Icon from "@/components/icon"
 
-const Container = styled(Flex).attrs({
+const Container = styled(Flex).attrs(props => ({
   gap: 0.5,
   padding: [0, 0, 1],
   alignItems: "center",
   flex: true,
   "data-testid": "chartLegend",
-})`
+  ...props,
+}))`
   overflow-x: auto; // fallback
   overflow-x: overlay;
   overflow-y: hidden;

src/sdk/makeChart/filters/makeControllers.js

@@ -137,6 +137,7 @@ export default chart => {
       chart.updateAttributes({
         chartLibrary: selected,
         processing: true,
+        ...(isHeatmap(selected) && { dimensionsSort: "default" }),
       })
       chart.getUI().unmount()
       chart.setUI({ ...chart.sdk.makeChartUI(chart), ...(chart.ui || {}) }, "default")

src/sdk/makeChart/makeDimensions.js

@@ -322,8 +322,13 @@ export default (chart, sdk) => {
     value = allowNull && value === null ? value : abs ? Math.abs(value) : value
 
     if (incrementable && isIncremental(chart)) {
-      const index = chart.getDimensionIndex(id)
-      const prevId = chart.getVisibleDimensionIds()[index - 1]
+      let index = chart.getDimensionIds().findIndex(dimId => dimId === id)
+
+      if (index === -1) return value
+
+      let prevId = chart.getDimensionIds()[index - 1]
+      while (prevId && !chart.isDimensionVisible(prevId))
+        prevId = chart.getDimensionIds()[--index - 1]
 
       value =
         value -