fix: Do not render tooltip descriptions if set to null

Author: jperals

src/cartesian-chart/__tests__/cartesian-chart-error-bars.test.tsx

@@ -31,7 +31,7 @@ describe("CartesianChart: errorbar series", () => {
       expect(getAllTooltipSeries()).toHaveLength(1);
       expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Column 1");
       expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("2");
-      expect(getTooltipSeries(0).findDescription().getElement().textContent).toBe("Error range1 - 3");
+      expect(getTooltipSeries(0).findDescription()!.getElement().textContent).toBe("Error range1 - 3");
     });
 
     test("attaches error series to the previous series by using `:previous` as value for `linkedTo`", async () => {
@@ -48,7 +48,7 @@ describe("CartesianChart: errorbar series", () => {
       expect(getAllTooltipSeries()).toHaveLength(1);
       expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Column 1");
       expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("2");
-      expect(getTooltipSeries(0).findDescription().getElement().textContent).toBe("Error range1 - 3");
+      expect(getTooltipSeries(0).findDescription()!.getElement().textContent).toBe("Error range1 - 3");
     });
 
     test("renders only the error range if error bar series name is not provided", async () => {
@@ -63,7 +63,7 @@ describe("CartesianChart: errorbar series", () => {
       await highlightFirstPointAndWaitForTooltip();
 
       expect(getAllTooltipSeries()).toHaveLength(1);
-      expect(getTooltipSeries(0).findDescription().getElement().textContent).toBe("1 - 3");
+      expect(getTooltipSeries(0).findDescription()!.getElement().textContent).toBe("1 - 3");
     });
 
     test("renders multiple error bars per series", async () => {
@@ -81,7 +81,7 @@ describe("CartesianChart: errorbar series", () => {
       expect(getAllTooltipSeries()).toHaveLength(1);
       expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Column 1");
       expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("2");
-      expect(getTooltipSeries(0).findDescription().getElement().textContent).toBe(
+      expect(getTooltipSeries(0).findDescription()!.getElement().textContent).toBe(
         "Error range 1" + "1 - 3" + "Error range 2" + "0 - 4",
       );
     });
@@ -107,7 +107,29 @@ describe("CartesianChart: errorbar series", () => {
       expect(getAllTooltipSeries()).toHaveLength(1);
       expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Custom key Column 1");
       expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("Custom value 2");
-      expect(getTooltipSeries(0).findDescription().getElement().textContent).toBe("Custom description 1 - 3");
+      expect(getTooltipSeries(0).findDescription()!.getElement().textContent).toBe("Custom description 1 - 3");
+    });
+
+    test("does not render description if set to null", async () => {
+      renderCartesianChart({
+        highcharts,
+        series: [
+          { type: "column", name: "Column 1", data: [2], id: "column-1" },
+          { type: "errorbar", name: "Column 2", data: [{ low: 1, high: 3 }], linkedTo: "column-1" },
+        ],
+        tooltip: {
+          point: () => ({
+            description: null,
+          }),
+        },
+      });
+
+      await highlightFirstPointAndWaitForTooltip();
+
+      expect(getAllTooltipSeries()).toHaveLength(1);
+      expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Column 1");
+      expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("2");
+      expect(getTooltipSeries(0).findDescription()).toBe(null);
     });
   });
 

src/cartesian-chart/__tests__/cartesian-chart-tooltip.test.tsx

@@ -189,7 +189,7 @@ describe("CartesianChart: tooltip", () => {
       getTooltipSeries(0).findValue().find("button")!.click();
       expect(onClickValue).toHaveBeenCalledWith("root");
 
-      expect(getTooltipSeries(0).findDescription().getElement().textContent).toBe("1 - 4");
+      expect(getTooltipSeries(0).findDescription()!.getElement().textContent).toBe("1 - 4");
 
       expect(getTooltipSeries(1).findKey().getElement().textContent).toBe("Custom name for Threshold");
       expect(getTooltipSeries(1).findValue().getElement().textContent).toBe("T");
@@ -217,7 +217,7 @@ describe("CartesianChart: tooltip", () => {
 
       expectCustomSubItems();
 
-      expect(getTooltipSeries(0).findDescription().getElement().textContent).toBe("1 - 4");
+      expect(getTooltipSeries(0).findDescription()!.getElement().textContent).toBe("1 - 4");
 
       expect(getTooltipSeries(1).findKey().getElement().textContent).toBe("Threshold");
       expect(getTooltipSeries(1).findValue().getElement().textContent).toBe(""); // X threshold has no y value

src/core/components/core-tooltip.tsx

@@ -150,7 +150,7 @@ function getTooltipContentCartesian(
   const detailItems: ChartSeriesDetailItem[] = matchedItems.map((item) => {
     const valueFormatter = getFormatter(item.point.series.yAxis);
     const itemY = isXThreshold(item.point.series) ? null : (item.point.y ?? null);
-    const customContent = renderers.point ? renderers.point({ item }) : null;
+    const customContent = renderers.point ? renderers.point({ item }) : undefined;
     return {
       key: customContent?.key ?? item.point.series.name,
       value: customContent?.value ?? valueFormatter(itemY),
@@ -159,8 +159,7 @@ function getTooltipContentCartesian(
       expandableId: customContent?.expandable ? item.point.series.name : undefined,
       highlighted: item.point.x === point?.x && item.point.y === point?.y,
       description:
-        customContent?.description ??
-        (item.errorRanges.length ? (
+        customContent?.description === undefined && item.errorRanges.length ? (
           <>
             {item.errorRanges.map((errorBarPoint, index) => (
               <div key={index} className={styles["error-range"]}>
@@ -171,7 +170,9 @@ function getTooltipContentCartesian(
               </div>
             ))}
           </>
-        ) : null),
+        ) : (
+          customContent?.description
+        ),
     };
   });
   // We only support cartesian charts with a single x axis.