Fix/tile units default hidden

package.json

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

src/components/hocs/withTile.js

@@ -43,7 +43,7 @@ export const Title = () => {
   const chart = useChart()
   const title = useTitle()
   const units = useUnitSign({ withoutConversion: true, long: true })
-  const hideUnits = useAttributeValue("hideUnits")
+  const hideUnits = useAttributeValue("hideUnits") ?? true
   const isMinimal = useIsMinimal()
 
   const onClick = event => {

src/components/hocs/withTile.test.js

@@ -4,21 +4,41 @@ import "@testing-library/jest-dom"
 import { makeHeatmapPayload, renderWithChart } from "@jest/testUtilities"
 import { Title } from "./withTile"
 
+const renderTitle = async hideUnits => {
+  const { chart } = renderWithChart(<div />)
+  const payload = makeHeatmapPayload(["storage"], [[1024]])
+  payload.view.title = "Storage change"
+  payload.view.chart_type = "number"
+  payload.view.units = "KiB"
+  payload.view.dimensions.units = ["KiB"]
+
+  chart.doneFetch(payload)
+  await new Promise(resolve => setTimeout(resolve, 0))
+
+  if (hideUnits !== undefined) chart.updateAttribute("hideUnits", hideUnits)
+
+  renderWithChart(<Title />, { chart })
+}
+
 describe("tile title", () => {
-  it("shows the normalized source unit", async () => {
-    const { chart } = renderWithChart(<div />)
-    const payload = makeHeatmapPayload(["storage"], [[1024]])
-    payload.view.title = "Storage change"
-    payload.view.chart_type = "number"
-    payload.view.units = "KiB"
-    payload.view.dimensions.units = ["KiB"]
+  it("hides the source unit by default, leaving the full width to the title", async () => {
+    await renderTitle()
 
-    chart.doneFetch(payload)
-    await new Promise(resolve => setTimeout(resolve, 0))
+    expect(screen.getByText("Storage change")).toBeInTheDocument()
+    expect(screen.queryByText("• [bytes]")).not.toBeInTheDocument()
+  })
 
-    renderWithChart(<Title />, { chart })
+  it("shows the source unit when hideUnits is explicitly false", async () => {
+    await renderTitle(false)
 
     expect(screen.getByText("Storage change")).toBeInTheDocument()
     expect(screen.getByText("• [bytes]")).toBeInTheDocument()
   })
+
+  it("hides the source unit when hideUnits is explicitly true", async () => {
+    await renderTitle(true)
+
+    expect(screen.getByText("Storage change")).toBeInTheDocument()
+    expect(screen.queryByText("• [bytes]")).not.toBeInTheDocument()
+  })
 })

src/sdk/initialAttributes.js

@@ -143,7 +143,7 @@ export default {
   hasToolbox: true,
   hideTitle: false,
   hideName: false,
-  hideUnits: false,
+  hideUnits: null,
   hasHoverPopover: true,
   expandable: true,
   showAnnotations: true,