Fix popover unit header and exponential value scaling

src/chartLibraries/d3pie/getInitialOptions.js

@@ -82,12 +82,24 @@ export default (chartUI, dataOptions = {}) => {
         truncateLength: 30,
       },
       formatter(context) {
-        if (context.part === "value")
-          return `${
-            context.realLabel === "No data"
-              ? "-"
-              : chartUI.chart.getConvertedValue(context.value, { dimensionId: context.id })
-          } ${chartUI.chart.getUnitSign({ dimensionId: context.id })}`
+        if (context.part === "value") {
+          if (context.realLabel === "No data") return "-"
+
+          const value = context.signedValue ?? context.value
+          const unitAttributes = chartUI.chart.getUnitAttributesForValue(value, {
+            dimensionId: context.id,
+          })
+          const convertedValue = chartUI.chart.getConvertedValue(value, {
+            dimensionId: context.id,
+            unitAttributes,
+          })
+          const convertedUnit = chartUI.chart.getUnitSign({
+            dimensionId: context.id,
+            unitAttributes,
+          })
+
+          return [convertedValue, convertedUnit].filter(Boolean).join(" ")
+        }
         if (context.part === "percentage") return `${context.label}%`
 
         return context.label

src/chartLibraries/d3pie/getInitialOptions.test.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { renderWithChart } from "@jest/testUtilities"
+import { makeHeatmapPayload, renderWithChart } from "@jest/testUtilities"
 import getInitialOptions from "./getInitialOptions"
 
 describe("getInitialOptions", () => {
@@ -58,4 +58,32 @@ describe("getInitialOptions", () => {
 
     expect(typeof options.labels.formatter).toBe("function")
   })
+
+  it("formats a signed value with its atomic scale", async () => {
+    const { chart } = renderWithChart(<div />, {
+      chartType: "pie",
+    })
+    const payload = makeHeatmapPayload(["bytes"], [[-1536]])
+    payload.view.chart_type = "pie"
+    payload.view.units = "By"
+    payload.view.dimensions.units = ["By"]
+
+    chart.doneFetch(payload)
+    await new Promise(resolve => setTimeout(resolve, 0))
+
+    const options = getInitialOptions({
+      getElement: () => ({ clientWidth: 400, clientHeight: 300 }),
+      chart,
+    })
+
+    expect(
+      options.labels.formatter({
+        part: "value",
+        realLabel: "bytes",
+        id: "bytes",
+        value: 1536,
+        signedValue: -1536,
+      })
+    ).toBe("-1.5 KiB")
+  })
 })

src/chartLibraries/d3pie/index.js

@@ -77,13 +77,18 @@ export default (sdk, chart) => {
     const dimensionIds = chart.getVisibleDimensionIds()
 
     const values = dimensionIds
-      .map(id => ({
-        label: shortForLength(id, 30),
-        value: chart.getDimensionValue(id, index),
-        color: chart.selectDimensionColor(id),
-        caption: id,
-        id,
-      }))
+      .map(id => {
+        const signedValue = chart.getDimensionValue(id, index, { abs: false })
+
+        return {
+          label: shortForLength(id, 30),
+          value: Math.abs(signedValue),
+          signedValue,
+          color: chart.selectDimensionColor(id),
+          caption: id,
+          id,
+        }
+      })
       .filter(v => !!v.value)
 
     let [min, max] = getMinMax()

src/chartLibraries/d3pie/library.js

@@ -964,6 +964,8 @@ import * as d3 from "d3"
             formatterContext.index = i
             formatterContext.part = "value"
             formatterContext.value = d.value
+            formatterContext.signedValue = d.signedValue
+            formatterContext.id = d.id
             formatterContext.label = d.value
             formatterContext.realLabel = d.label
             return settings.formatter ? settings.formatter(formatterContext, d.value) : d.value

src/components/bars/dimension.js

@@ -1,10 +1,14 @@
 import React from "react"
 import styled from "styled-components"
-import { Flex } from "@netdata/netdata-ui"
+import { Flex, TextMicro } from "@netdata/netdata-ui"
 import Color, { ColorBar } from "@/components/line/dimensions/color"
 import Name from "@/components/line/dimensions/name"
 import Value, { Value as ValuePart } from "@/components/line/dimensions/value"
-import { useChart, useVisibleDimensionId } from "@/components/provider"
+import {
+  useLatestDisplayValue,
+  useValueWithUnit,
+  useVisibleDimensionId,
+} from "@/components/provider"
 import { labels as annotationLabels } from "@/helpers/annotations"
 import Tooltip from "@/components/tooltip"
 import { rowFlavours } from "./dimensions"
@@ -30,22 +34,29 @@ const rowValueKeys = {
   default: "value",
 }
 
-const ValueOnDot = ({ children, fractionDigits = 0, ...rest }) => {
-  const [first, last] = children.toString().split(".")
+const DisplayValue = ({ id, strong, visible, color }) => {
+  const value = useLatestDisplayValue(id, { allowNull: true })
+  const { convertedValue, convertedUnit } = useValueWithUnit(value, {
+    dimensionId: id,
+    scaleByValue: true,
+  })
 
   return (
-    <Flex alignItems="center" justifyContent="end" padding={[0, 0.5]}>
-      <ValuePart {...rest} textAlign="right">
-        {first}
-      </ValuePart>
-      {typeof last !== "undefined" && <ValuePart {...rest}>.</ValuePart>}
-      <ValuePart as={Flex} flex={false} width={fractionDigits * 1.8} {...rest} textAlign="left">
-        {last}
+    <Flex alignItems="center" justifyContent="end" gap={1} padding={[0, 1]}>
+      <ValuePart strong={strong} color={color} fontSize="1.1em" textAlign="right">
+        {visible ? convertedValue : null}
       </ValuePart>
+      {visible && !!convertedUnit && (
+        <TextMicro color="textDescription" whiteSpace="nowrap">
+          {convertedUnit}
+        </TextMicro>
+      )}
     </Flex>
   )
 }
 
+const PlainValue = props => <ValuePart {...props} textAlign="right" />
+
 const AnnotationsValue = ({ children: annotations, ...rest }) => (
   <Flex gap={1} justifyContent="end">
     {Object.keys(annotations).map(ann => (
@@ -68,9 +79,7 @@ const AnnotationsValue = ({ children: annotations, ...rest }) => (
 
 const Dimension = ({ id, strong, rowFlavour, fullCols }) => {
   const visible = useVisibleDimensionId(id)
-
-  const chart = useChart()
-  const fractionDigits = chart.getAttribute("unitsConversionFractionDigits")
+  const color = rowFlavour === rowFlavours.default ? "text" : "textLite"
 
   return (
     <GridRow opacity={visible ? null : "weak"}>
@@ -84,14 +93,11 @@ const Dimension = ({ id, strong, rowFlavour, fullCols }) => {
         </ColorBackground>
         <Name padding={[0.5, 1.5]} flex id={id} strong={strong} fontSize="1.1em" />
       </Flex>
-      <Value
+      <DisplayValue
         id={id}
         strong={strong}
         visible={visible}
-        Component={ValueOnDot}
-        fractionDigits={fractionDigits}
-        color={rowFlavour === rowFlavours.default ? "text" : "textLite"}
-        fontSize="1.1em"
+        color={color}
       />
       {fullCols && (
         <>
@@ -100,7 +106,7 @@ const Dimension = ({ id, strong, rowFlavour, fullCols }) => {
             strong={strong}
             visible={visible}
             valueKey="arp"
-            Component={ValueOnDot}
+            Component={PlainValue}
             fractionDigits={2}
             color={rowFlavour === rowFlavours.ANOMALY_RATE ? "anomalyTextFocus" : "anomalyText"}
             fontSize="1.1em"

src/components/bars/dimensions.js

@@ -2,7 +2,6 @@ import React, { useMemo, memo } from "react"
 import styled from "styled-components"
 import { useChart, useAttributeValue, usePayload } from "@/components/provider"
 import { TextMicro, TextNano } from "@netdata/netdata-ui"
-import Units from "@/components/line/dimensions/units"
 import Dimension from "./dimension"
 
 const Grid = styled.div`
@@ -108,13 +107,7 @@ const Dimensions = ({ height }) => {
           color={rowFlavour === rowFlavours.default ? "text" : "textLite"}
           textAlign="right"
         >
-          Value{" "}
-          <Units
-            visible
-            strong={rowFlavour === rowFlavours.default}
-            color={rowFlavour === rowFlavours.default ? "text" : "textLite"}
-            fontSize="1em"
-          />
+          Value
         </TextMicro>
         {cols === "full" && (
           <>

src/components/easyPie/index.js

@@ -3,11 +3,10 @@ import styled, { keyframes } from "styled-components"
 import { Flex, Text } from "@netdata/netdata-ui"
 import ChartContainer from "@/components/chartContainer"
 import {
-  useUnitSign,
   useAttributeValue,
-  useLatestConvertedValue,
+  useLatestDisplayValueWithUnit,
   useOnResize,
-  useDimensionIds,
+  useVisibleDimensionIds,
 } from "@/components/provider"
 import withChart from "@/components/hocs/withChart"
 import { ChartWrapper } from "@/components/hocs/withTile"
@@ -20,7 +19,8 @@ export const Label = styled(Text)`
 `
 
 export const Value = () => {
-  const value = useLatestConvertedValue("selected")
+  const [dimensionId] = useVisibleDimensionIds()
+  const { convertedValue: value } = useLatestDisplayValueWithUnit(dimensionId)
 
   return (
     <Label color="text" fontSize="3em" strong>
@@ -30,8 +30,8 @@ export const Value = () => {
 }
 
 export const Unit = () => {
-  const [firstDimId] = useDimensionIds()
-  const unit = useUnitSign({ dimensionId: firstDimId })
+  const [dimensionId] = useVisibleDimensionIds()
+  const { convertedUnit: unit } = useLatestDisplayValueWithUnit(dimensionId)
   return (
     <Label color="textLite" fontSize="1.5em">
       {unit}

src/components/gauge/index.js

@@ -4,11 +4,11 @@ import { Flex, Text, getColor } from "@netdata/netdata-ui"
 import ChartContainer from "@/components/chartContainer"
 import {
   useChart,
-  useUnitSign,
   useAttributeValue,
   useOnResize,
-  useLatestConvertedValue,
-  useDimensionIds,
+  useLatestDisplayValueWithUnit,
+  useValueWithUnit,
+  useVisibleDimensionIds,
 } from "@/components/provider"
 import withChart from "@/components/hocs/withChart"
 import { ChartWrapper } from "@/components/hocs/withTile"
@@ -30,7 +30,8 @@ const StrokeLabel = styled(Label)`
 `
 
 export const Value = () => {
-  const value = useLatestConvertedValue("selected")
+  const [dimensionId] = useVisibleDimensionIds()
+  const { convertedValue: value } = useLatestDisplayValueWithUnit(dimensionId)
 
   return (
     <StrokeLabel flex="2" color="text" fontSize="2em" strong>
@@ -40,8 +41,8 @@ export const Value = () => {
 }
 
 export const Unit = () => {
-  const [firstDimId] = useDimensionIds()
-  const unit = useUnitSign({ dimensionId: firstDimId })
+  const [dimensionId] = useVisibleDimensionIds()
+  const { convertedUnit: unit } = useLatestDisplayValueWithUnit(dimensionId)
   return (
     <Label color="textLite" fontSize="1em">
       {unit}
@@ -51,12 +52,24 @@ export const Unit = () => {
 
 export const Bound = ({ empty, index, uiName, ...rest }) => {
   const chart = useChart()
+  const [dimensionId] = useVisibleDimensionIds()
   const minMax = chart.getUI(uiName).getMinMax?.()
+  const { convertedValue, convertedUnit } = useValueWithUnit(minMax?.[index], {
+    dimensionId,
+    scaleByValue: true,
+  })
 
   return (
-    <Label color="textLite" fontSize="1.3em" {...rest}>
-      {empty ? "-" : chart.getConvertedValue(minMax[index])}
-    </Label>
+    <Flex alignItems="center" gap={1} {...rest}>
+      <Label color="textLite" fontSize="1.3em">
+        {empty ? "-" : convertedValue}
+      </Label>
+      {!empty && !!convertedUnit && (
+        <Label color="textLite" fontSize="1em">
+          {convertedUnit}
+        </Label>
+      )}
+    </Flex>
   )
 }
 

src/components/groupBoxes/popover/labels.js

@@ -1,7 +1,7 @@
 import React, { memo } from "react"
 import styled from "styled-components"
 import { Flex, TextMicro } from "@netdata/netdata-ui"
-import { useChart, useConverted, useAttributeValue, useUnitSign } from "@/components/provider"
+import { useChart, useAttributeValue, useValueWithUnit } from "@/components/provider"
 import { BaseColorBar } from "@/components/line/dimensions/color"
 import Label from "./label"
 
@@ -45,8 +45,11 @@ const Labels = ({ label, groupLabel, data, id, ref }) => {
 
   const chartWidth = chart.getUI().getChartWidth() * 0.9
   const value = chart.getRowDimensionValue(id, data)
-  const convertedValue = useConverted(value)
-  const unitSign = useUnitSign()
+  const displayValue = chart.getRowDimensionValue(id, data, { abs: false })
+  const { convertedValue, convertedUnit } = useValueWithUnit(displayValue, {
+    dimensionId: id,
+    scaleByValue: true,
+  })
 
   return (
     <Container data-testid="chartPopover-labels" maxWidth={chartWidth} gap={2} ref={ref}>
@@ -62,7 +65,7 @@ const Labels = ({ label, groupLabel, data, id, ref }) => {
             height="18px"
           />
           <TextMicro padding={[1.5, 2]} strong>
-            {convertedValue} {convertedValue !== "-" && unitSign}
+            {convertedValue} {convertedValue !== "-" && convertedUnit}
           </TextMicro>
         </Flex>
       </Flex>

src/components/headlessChart/useGroupedChart.js

@@ -37,7 +37,7 @@ const useGroupedChart = ({ sharedMinMax = false } = {}) => {
       const groupDimensionIds = flattenTree(subTree)
 
       const dimensions = groupDimensionIds.map(id => {
-        const value = chart.getDimensionValue(id, rowIndex)
+        const value = chart.getDimensionValue(id, rowIndex, { abs: false })
         return {
           id,
           value,