v5.0.5

package.json

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

src/components/gauge/index.js

@@ -8,6 +8,7 @@ import {
   useAttributeValue,
   useOnResize,
   useLatestConvertedValue,
+  useDimensionIds,
 } from "@/components/provider"
 import withChart from "@/components/hocs/withChart"
 import { ChartWrapper } from "@/components/hocs/withTile"
@@ -39,7 +40,8 @@ export const Value = () => {
 }
 
 export const Unit = () => {
-  const unit = useUnitSign()
+  const [firstDimId] = useDimensionIds()
+  const unit = useUnitSign({ dimensionId: firstDimId })
   return (
     <Label color="textLite" fontSize="1em">
       {unit}

src/components/line/legend/dimension.js

@@ -110,7 +110,7 @@ const Dimension = forwardRef(({ id }, ref) => {
 
           <AnomalyProgressBar id={id} />
 
-          <Flex gap={1} alignItems="center" data-testid="chartLegendDimension-valueContainer" flex>
+          <Flex gap={1} alignItems="end" data-testid="chartLegendDimension-valueContainer" flex>
             <Value id={id} strong visible={visible} Component={TextBig} />
             <Units visible={visible} dimensionId={id} />
           </Flex>

src/components/line/overlays/latestValue.js

@@ -22,7 +22,7 @@ const defaultTextProps = {
 }
 
 const LatestValue = ({ dimensionId, textProps, ...rest }) => {
-  const unit = useUnitSign()
+  const unit = useUnitSign({ dimensionId })
   const value = useLatestConvertedValue(dimensionId)
   const { width, height } = useOnResize()
 

src/components/number/index.js

@@ -1,7 +1,12 @@
 import React, { forwardRef } from "react"
 import { Text } from "@netdata/netdata-ui"
 import ChartContainer from "@/components/chartContainer"
-import { useUnitSign, useLatestConvertedValue, useOnResize } from "@/components/provider"
+import {
+  useUnitSign,
+  useLatestConvertedValue,
+  useOnResize,
+  useDimensionIds,
+} from "@/components/provider"
 import withChart from "@/components/hocs/withChart"
 import { ChartWrapper } from "@/components/hocs/withTile"
 import FontSizer from "@/components/helpers/fontSizer"
@@ -26,7 +31,8 @@ export const Value = props => {
 
 export const Unit = props => {
   const { width, height } = useOnResize()
-  const unit = useUnitSign()
+  const [firstDimId] = useDimensionIds()
+  const unit = useUnitSign({ dimensionId: firstDimId })
 
   if (!unit) return null
 

src/helpers/units/all.js

@@ -196,6 +196,60 @@ export default {
     },
   },
   units: {
+    "mm:ss": {
+      symbol: "mm:ss",
+      name: "duration in minutes",
+      print_symbol: "mm:ss",
+      is_metric: false,
+      is_special: true,
+      is_additive: false,
+      is_binary: false,
+    },
+    "h:mm:ss": {
+      symbol: "h:mm:ss",
+      name: "duration in hours",
+      print_symbol: "h:mm:ss",
+      is_metric: false,
+      is_special: true,
+      is_additive: false,
+      is_binary: false,
+    },
+    "d:h:mm": {
+      symbol: "d:h:mm",
+      name: "duration in days",
+      print_symbol: "d:h:mm",
+      is_metric: false,
+      is_special: true,
+      is_additive: false,
+      is_binary: false,
+    },
+    "mo:d:h": {
+      symbol: "mo:d:h",
+      name: "duration in months",
+      print_symbol: "mo:d:h",
+      is_metric: false,
+      is_special: true,
+      is_additive: false,
+      is_binary: false,
+    },
+    "a:mo:d": {
+      symbol: "a:mo:d",
+      name: "duration in years",
+      print_symbol: "yr:mo:d",
+      is_metric: false,
+      is_special: true,
+      is_additive: false,
+      is_binary: false,
+    },
+    "dHH:MM:ss": {
+      symbol: "dHH:MM:ss",
+      name: "dHH:MM:ss",
+      print_symbol: "",
+      is_metric: false,
+      is_special: true,
+      is_additive: false,
+      is_binary: false,
+    },
     "%": {
       symbol: "%",
       name: "percent",

src/helpers/units/conversableUnits.js

@@ -128,25 +128,25 @@ export default {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 1_000 && max < 60_000,
       convert: twoFixed(0.001),
     },
-    min: {
+    "mm:ss": {
       check: (chart, max) =>
         chart.getAttribute("secondsAsTime") && max >= 60_000 && max < 3_600_000,
       convert: value => seconds2time(value / 1_000, "MINUTES"),
     },
-    h: {
+    "h:mm:ss": {
       check: (chart, max) =>
         chart.getAttribute("secondsAsTime") && max >= 3_600_000 && max < 86_400_000,
       convert: value => seconds2time(value / 1_000, "HOURS"),
     },
-    d: {
+    "d:h:mm": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 86_400_000,
       convert: value => seconds2time(value / 1_000, "DAYS"),
     },
-    mo: {
+    "mo:d:h": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 86_400_000 * 30,
       convert: value => seconds2time(value / 1_000, "MONTHS"),
     },
-    a: {
+    "a:mo:d": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 86_400_000 * 365,
       convert: value => seconds2time(value / 1_000, "YEARS"),
     },
@@ -164,23 +164,23 @@ export default {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 1 && max < 60,
       convert: twoFixed(1),
     },
-    min: {
+    "mm:ss": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 60 && max < 3_600,
       convert: value => seconds2time(value, "MINUTES"),
     },
-    h: {
+    "h:mm:ss": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 3_600 && max < 86_400,
       convert: value => seconds2time(value, "HOURS"),
     },
-    d: {
+    "d:h:mm": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 86_400,
       convert: value => seconds2time(value, "DAYS"),
     },
-    mo: {
+    "mo:d:h": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 86_400 * 30,
       convert: value => seconds2time(value, "MONTHS"),
     },
-    a: {
+    "a:mo:d": {
       check: (chart, max) => chart.getAttribute("secondsAsTime") && max >= 86_400 * 365,
       convert: value => seconds2time(value, "YEARS"),
     },

src/helpers/units/index.js

@@ -5,7 +5,6 @@ import scalableUnits, { keys } from "./scalableUnits"
 export const unitsMissing = u => typeof allUnits.units[u] === "undefined"
 export const getUnitConfig = u =>
   allUnits.units[u] || {
-    name: u,
     is_additive: true,
     is_metric: true,
     is_binary: false,
@@ -42,13 +41,13 @@ export const getScales = u => {
 }
 
 const labelify = (base, config, long) => {
-  if (!config || !base) return base
+  if (!config) return base
   if (long) return typeof config.name === "undefined" ? base : config.name
   return typeof config.print_symbol === "undefined" ? base : config.print_symbol
 }
 
 export const getUnitsString = (u, prefix = "", base = "", long) => {
-  if (!isAdditive(u)) return base
+  if (!isAdditive(u)) return labelify(base, u, long).trim()
 
   if (isMetric(u) || isBinary(u) || isBit(u))
     return `${labelify(prefix, allUnits.prefixes[prefix], long)}${isBinary(u) || isBit(u) ? "" : " "}${labelify(base, u, long)}`.trim()

src/sdk/plugins/unitConversion/getConversionUnits.js

@@ -49,7 +49,7 @@ const conversable = (chart, units, delta, desiredUnits) => {
   if (scaleIndex === -1) return ["original"]
 
   const key = scaleKeys[scaleIndex]
-  return [makeConversableKey(units, key)]
+  return [makeConversableKey(units, key), null, "", scaleKeys[scaleIndex]]
 }
 
 const getMethod = (chart, units, min, max) => {