v5.5.2

package.json

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

src/chartLibraries/dygraph/index.js

@@ -244,7 +244,10 @@ export default (sdk, chart) => {
       }
       return chart.getConvertedValue(y) // TODO Pass { dimensionId: context.id } when multiple contexts with different units
     },
-    makeYTicker: () => numericTicker,
+    makeYTicker:
+      (options = {}) =>
+      (a, b, pixels, opts, dygraph, vals) =>
+        numericTicker(a, b, pixels, opts, dygraph, vals, options),
     highlightCircleSize: 4,
   }
 
@@ -286,8 +289,10 @@ export default (sdk, chart) => {
         const value = parseFloat(parseFloat(y).toFixed(5))
         return isNaN(value) ? y : value
       },
-      makeYTicker: labels => (a, b, pixels, opts, dygraph) =>
-        heatmapTicker(a, b, pixels, opts, dygraph, labels),
+      makeYTicker:
+        (options = {}) =>
+        (a, b, pixels, opts, dygraph, vals) =>
+          heatmapTicker(a, b, pixels, opts, dygraph, vals, options),
       highlightCircleSize: 0,
     },
     default: {
@@ -316,7 +321,9 @@ export default (sdk, chart) => {
     } = optionsByChartType[chartType] || optionsByChartType.default
 
     const yAxisLabelFormatter = makeYAxisLabelFormatter(labels)
-    const yTicker = makeYTicker ? makeYTicker(chart.getVisibleDimensionIds()) : null
+    const yTicker = makeYTicker
+      ? makeYTicker({ labels: chart.getVisibleDimensionIds(), units: chart.getUnits() })
+      : null
 
     const { selectedLegendDimensions } = chart.getAttributes()
     const dimensionIds = chart.getPayloadDimensionIds()

src/chartLibraries/dygraph/tickers/heatmap.js

@@ -1,14 +1,14 @@
 import { withoutPrefix } from "@/helpers/heatmap"
 
-export default (a, b, pixels, opts, dygraph, vals) => {
-  const labels = vals.map(withoutPrefix)
+export default (a, b, pixels, opts, dygraph, vals, { labels: defaultLabels } = {}) => {
+  const labels = defaultLabels.map(withoutPrefix)
 
   const pixelsPerTick = opts("pixelsPerLabel")
   const maxTicks = Math.floor(pixels / pixelsPerTick)
 
   const formatLabel = opts("axisLabelFormatter")
 
-  const hiddenStep = Math.ceil(vals.length / (maxTicks - 1))
+  const hiddenStep = Math.ceil(defaultLabels.length / (maxTicks - 1))
   const ticks = labels.map((l, i) => ({
     v: i,
     label: i % hiddenStep === 0 ? formatLabel(labels[i], 0, opts, dygraph) : null,

src/chartLibraries/dygraph/tickers/numeric.js

@@ -1,8 +1,10 @@
+import { isBinary } from "@/helpers/units"
+
 const anomalySVG = `<div title="Anomaly detection percent (%)"><svg width="15" height="16" view-box="0 0 15 16" xmlns="http://www.w3.org/2000/svg" fill="#B596F8" fill-opacity="0.4" transform="translate(18, -1) scale(0.6)">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M13.228 3.29597L8.522 0.578973C8.167 0.373973 7.771 0.271973 7.375 0.271973C6.979 0.271973 6.583 0.373973 6.228 0.578973L1.522 3.29597C0.812 3.70597 0.375 4.46297 0.375 5.28297V10.718C0.375 11.537 0.812 12.295 1.522 12.704L6.228 15.421C6.583 15.626 6.979 15.728 7.375 15.728C7.771 15.728 8.167 15.626 8.522 15.421L13.228 12.704C13.938 12.294 14.375 11.537 14.375 10.718V5.28297C14.375 4.46297 13.938 3.70597 13.228 3.29597ZM7.97949 4.76094L7.37505 3.23265L6.7706 4.76094L4.93313 9.40688H4.37505H1.37505V10.7069H4.37505H5.37505H5.81696L5.97949 10.2959L7.37505 6.76735L8.7706 10.2959L9.26618 11.549L9.93839 10.3811L10.375 9.62253L10.8117 10.3811L10.9992 10.7069H11.375H13.375V9.40688H11.7509L10.9384 7.99531L10.375 7.01662L9.8117 7.99531L9.48391 8.56479L7.97949 4.76094Z" />
 </svg></div>`
 
-export default (a, b, pixels, opts, dygraph, vals) => {
+export default (a, b, pixels, opts, dygraph, vals, { units } = {}) => {
   const pixelsPerTick = opts("pixelsPerLabel")
   let ticks = []
   let i, j, tickV, nTicks
@@ -13,8 +15,10 @@ export default (a, b, pixels, opts, dygraph, vals) => {
     }
   } else {
     if (ticks.length === 0) {
-      const mults = [1, 2, 5, 10, 20, 50, 100]
-      const base = 10
+      const mults = isBinary(units[0])
+        ? [1, 2, 4, 8, 16, 32, 64, 128, 256]
+        : [1, 2, 5, 10, 20, 50, 100]
+      const base = isBinary(units[0]) ? 1024 : 10
 
       // Get the maximum number of permitted ticks based on the
       // graph's pixel size and pixelsPerTick setting.

src/components/filterToolbox/aggregate.js

@@ -81,6 +81,7 @@ const Aggregate = ({ labelProps, defaultMinimal, ...rest }) => {
       dropTitle={dropTitle}
       {...rest}
       labelProps={{
+        chevron: !isMinimal && !defaultMinimal,
         secondaryLabel: isMinimal || defaultMinimal ? "" : "the",
         label: isMinimal || defaultMinimal ? icon : short,
         title: tooltipProps.heading,

src/components/hocs/withTile.js

@@ -94,7 +94,7 @@ export const HeadWrapper = ({ children, customChildren, hasFilters = true, ...re
       {hasToolbox && focused && debouncedFocused && (
         <Toolbox
           position="absolute"
-          top="-16px"
+          top="-14px"
           right="0"
           background="mainChartHeaderBg"
           width={{ min: "100%" }}