Render default keys and values in tooltip if not defined

jperals · jperals · commit 68b99ce6af58 · 2025-06-18T10:57:28.000+02:00
diff --git a/src/cartesian-chart/__tests__/cartesian-chart-tooltip.test.tsx b/src/cartesian-chart/__tests__/cartesian-chart-tooltip.test.tsx
@@ -112,115 +112,168 @@ describe("CartesianChart: tooltip", () => {
     });
   });
 
-  test("customizes series rendering", async () => {
+  describe("Custom tooltip content", () => {
+    const series: CartesianChartProps.SeriesOptions[] = [
+      { type: "line", id: "l", name: "Line", data: [{ x: 1, y: 2 }] },
+      { type: "errorbar", linkedTo: "l", name: "Error", data: [{ x: 1, low: 1, high: 4 }] },
+      { type: "x-threshold", name: "Threshold", value: 1 },
+    ];
+
     const onClickValue = vi.fn();
-    renderCartesianChart({
-      highcharts,
-      series: [
-        { type: "line", id: "l", name: "Line", data: [{ x: 1, y: 2 }] },
-        { type: "errorbar", linkedTo: "l", name: "Error", data: [{ x: 1, low: 1, high: 4 }] },
-        { type: "x-threshold", name: "Threshold", value: 1 },
-      ],
-      tooltip: {
-        point({ item }) {
-          return {
-            key: <span>{item.series.name}</span>,
-            value: <button onClick={() => onClickValue("root")}>{item.y ?? "T"}</button>,
-            expandable: item.series.name === "Line",
-            subItems:
-              item.series.name === "Line"
-                ? [
-                    {
-                      key: <span>sub-1 key</span>,
-                      value: <button onClick={() => onClickValue("sub-1")}>sub-1 value</button>,
-                    },
-                    {
-                      key: <span>sub-2 key</span>,
-                      value: <button onClick={() => onClickValue("sub-2")}>sub-2 value</button>,
-                    },
-                  ]
-                : [],
-            description: item.errorRanges?.length ? `${item.errorRanges[0].low} - ${item.errorRanges[0].high}` : null,
-          };
-        },
-      },
-    });
+    const customKey = (item: CartesianChartProps.TooltipPointItem) => (
+      <span>{`Custom name for ${item.series.name}`}</span>
+    );
+    const customValue = (item: CartesianChartProps.TooltipPointItem) => (
+      <button onClick={() => onClickValue("root")}>{item.y ?? "T"}</button>
+    );
+    const customSubItems = (item: CartesianChartProps.TooltipPointItem) =>
+      item.series.name === "Line"
+        ? [
+            {
+              key: <span>sub-1 key</span>,
+              value: <button onClick={() => onClickValue("sub-1")}>sub-1 value</button>,
+            },
+            {
+              key: <span>sub-2 key</span>,
+              value: <button onClick={() => onClickValue("sub-2")}>sub-2 value</button>,
+            },
+          ]
+        : [];
+    const customDescription = (item: CartesianChartProps.TooltipPointItem) =>
+      item.errorRanges?.length ? `${item.errorRanges[0].low} - ${item.errorRanges[0].high}` : null;
 
-    act(() => hc.highlightChartPoint(0, 0));
+    const openTooltip = async () => {
+      act(() => hc.highlightChartPoint(0, 0));
 
-    await waitFor(() => {
-      expect(getTooltip()).not.toBe(null);
+      await waitFor(() => {
+        expect(getTooltip()).not.toBe(null);
+      });
+
+      expect(getTooltipHeader().getElement().textContent).toBe("1");
+      expect(getAllTooltipSeries()).toHaveLength(2);
+    };
+
+    const expectCustomSubItems = () => {
+      expect(getTooltipSeries(0).find('[aria-expanded="false"]')).not.toBe(null);
+      getTooltipSeries(0).find('[aria-expanded="false"]')!.click({ bubbles: false });
+      expect(getTooltipSeries(0).findSubItems()).toHaveLength(2);
+      expect(getTooltipSeries(0).findSubItems()[1].findKey().getElement().textContent).toBe("sub-2 key");
+      expect(getTooltipSeries(0).findSubItems()[1].findValue().getElement().textContent).toBe("sub-2 value");
+      getTooltipSeries(0).findSubItems()[1].findValue().find("button")!.click();
+      expect(onClickValue).toHaveBeenCalledWith("sub-2");
+      expect(getTooltipSeries(1).find('[aria-expanded="false"]')).toBe(null);
+    };
+
+    afterEach(() => {
+      onClickValue.mockReset();
     });
 
-    expect(getTooltipHeader().getElement().textContent).toBe("1");
-    expect(getAllTooltipSeries()).toHaveLength(2);
+    test("customizes key, value, sub-items and description", async () => {
+      renderCartesianChart({
+        highcharts,
+        series,
+        tooltip: {
+          point({ item }) {
+            return {
+              key: customKey(item),
+              value: customValue(item),
+              expandable: item.series.name === "Line",
+              subItems: customSubItems(item),
+              description: customDescription(item),
+            };
+          },
+        },
+      });
 
-    expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Line");
-    expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("2");
-    expect(getTooltipSeries(0).find('[aria-expanded="false"]')).not.toBe(null);
+      await openTooltip();
 
-    getTooltipSeries(0).find('[aria-expanded="false"]')!.click({ bubbles: false });
-    expect(getTooltipSeries(0).findSubItems()).toHaveLength(2);
-    expect(getTooltipSeries(0).findSubItems()[1].findKey().getElement().textContent).toBe("sub-2 key");
-    expect(getTooltipSeries(0).findSubItems()[1].findValue().getElement().textContent).toBe("sub-2 value");
+      expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Custom name for Line");
+      expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("2");
 
-    getTooltipSeries(0).findValue().find("button")!.click();
-    expect(onClickValue).toHaveBeenCalledWith("root");
+      expectCustomSubItems();
 
-    getTooltipSeries(0).findSubItems()[1].findValue().find("button")!.click();
-    expect(onClickValue).toHaveBeenCalledWith("sub-2");
+      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("Threshold");
-    expect(getTooltipSeries(1).findValue().getElement().textContent).toBe("T");
-    expect(getTooltipSeries(1).find('[aria-expanded="false"]')).toBe(null);
-  });
+      expect(getTooltipSeries(1).findKey().getElement().textContent).toBe("Custom name for Threshold");
+      expect(getTooltipSeries(1).findValue().getElement().textContent).toBe("T");
+    });
 
-  test("customizes tooltip slots", async () => {
-    renderCartesianChart({
-      highcharts,
-      series: [
-        { type: "line", id: "l", name: "Line", data: [{ x: 1, y: 2 }] },
-        { type: "x-threshold", name: "Threshold", value: 1 },
-        { type: "errorbar", name: "Error", data: [{ x: 1, low: 3, high: 4 }], linkedTo: "l" },
-      ],
-      tooltip: {
-        header({ x, items }) {
-          return (
-            <span>
-              header {x} {items.length} {items[0].series.name} {items[0].errorRanges![0].low}{" "}
-              {items[0].errorRanges![0].high} {items[1].series.name}
-            </span>
-          );
-        },
-        body({ x, items }) {
-          return (
-            <span>
-              body {x} {items.length} {items[0].series.name} {items[0].errorRanges![0].low}{" "}
-              {items[0].errorRanges![0].high} {items[1].series.name}
-            </span>
-          );
-        },
-        footer({ x, items }) {
-          return (
-            <span>
-              footer {x} {items.length} {items[0].series.name} {items[0].errorRanges![0].low}{" "}
-              {items[0].errorRanges![0].high} {items[1].series.name}
-            </span>
-          );
+    test("renders default key and value if not defined", async () => {
+      renderCartesianChart({
+        highcharts,
+        series,
+        tooltip: {
+          point({ item }) {
+            return {
+              expandable: item.series.name === "Line",
+              subItems: customSubItems(item),
+              description: customDescription(item),
+            };
+          },
         },
-      },
-    });
+      });
 
-    act(() => hc.highlightChartPoint(0, 0));
+      await openTooltip();
 
-    await waitFor(() => {
-      expect(getTooltip()).not.toBe(null);
+      expect(getTooltipSeries(0).findKey().getElement().textContent).toBe("Line");
+      expect(getTooltipSeries(0).findValue().getElement().textContent).toBe("2");
+
+      expectCustomSubItems();
+
+      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
     });
 
-    expect(getTooltipHeader().getElement().textContent).toBe("header 1 2 Line 3 4 Threshold");
-    expect(getTooltipBody().getElement().textContent).toBe("body 1 2 Line 3 4 Threshold");
-    expect(getTooltipFooter().getElement().textContent).toBe("footer 1 2 Line 3 4 Threshold");
+    test("customizes tooltip slots", async () => {
+      renderCartesianChart({
+        highcharts,
+        series: [
+          { type: "line", id: "l", name: "Line", data: [{ x: 1, y: 2 }] },
+          { type: "x-threshold", name: "Threshold", value: 1 },
+          { type: "errorbar", name: "Error", data: [{ x: 1, low: 3, high: 4 }], linkedTo: "l" },
+        ],
+        tooltip: {
+          header({ x, items }) {
+            return (
+              <span>
+                header {x} {items.length} {items[0].series.name} {items[0].errorRanges![0].low}{" "}
+                {items[0].errorRanges![0].high} {items[1].series.name}
+              </span>
+            );
+          },
+          body({ x, items }) {
+            return (
+              <span>
+                body {x} {items.length} {items[0].series.name} {items[0].errorRanges![0].low}{" "}
+                {items[0].errorRanges![0].high} {items[1].series.name}
+              </span>
+            );
+          },
+          footer({ x, items }) {
+            return (
+              <span>
+                footer {x} {items.length} {items[0].series.name} {items[0].errorRanges![0].low}{" "}
+                {items[0].errorRanges![0].high} {items[1].series.name}
+              </span>
+            );
+          },
+        },
+      });
+
+      act(() => hc.highlightChartPoint(0, 0));
+
+      await waitFor(() => {
+        expect(getTooltip()).not.toBe(null);
+      });
+
+      expect(getTooltipHeader().getElement().textContent).toBe("header 1 2 Line 3 4 Threshold");
+      expect(getTooltipBody().getElement().textContent).toBe("body 1 2 Line 3 4 Threshold");
+      expect(getTooltipFooter().getElement().textContent).toBe("footer 1 2 Line 3 4 Threshold");
+    });
   });
 });
diff --git a/src/cartesian-chart/interfaces.ts b/src/cartesian-chart/interfaces.ts
@@ -178,8 +178,8 @@ export namespace CartesianChartProps {
     series: NonErrorBarSeriesOptions;
   }
   export interface TooltipPointFormatted {
-    key: React.ReactNode;
-    value: React.ReactNode;
+    key?: React.ReactNode;
+    value?: React.ReactNode;
     description?: React.ReactNode;
     expandable?: boolean;
     subItems?: ReadonlyArray<{ key: React.ReactNode; value: React.ReactNode }>;
diff --git a/src/core/components/core-tooltip.tsx b/src/core/components/core-tooltip.tsx
@@ -18,7 +18,6 @@ import {
   CoreTooltipOptions,
   GetTooltipContent,
   GetTooltipContentProps,
-  TooltipPointFormatted,
   TooltipSlotProps,
 } from "../interfaces";
 import { getPointColor, getSeriesColor, getSeriesId, getSeriesMarkerType, isXThreshold } from "../utils";
@@ -150,16 +149,18 @@ function getTooltipContentCartesian(
   const matchedItems = findTooltipSeriesItems(chart.series, group);
   const detailItems: ChartSeriesDetailItem[] = matchedItems.map((item) => {
     const valueFormatter = getFormatter(item.point.series.yAxis);
-    const formatted: TooltipPointFormatted = (() => {
-      // Using consumer-defined details.
-      if (renderers.point) {
-        return renderers.point({ item });
-      }
-      const itemY = isXThreshold(item.point.series) ? null : (item.point.y ?? null);
-      return {
-        key: item.point.series.name,
-        value: valueFormatter(itemY),
-        description: item.errorRanges.length ? (
+    const itemY = isXThreshold(item.point.series) ? null : (item.point.y ?? null);
+    const customContent = renderers.point ? renderers.point({ item }) : null;
+    return {
+      key: customContent?.key ?? item.point.series.name,
+      value: customContent?.value ?? valueFormatter(itemY),
+      marker: getSeriesMarker(item.point.series),
+      subItems: customContent?.subItems,
+      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 ? (
           <div>
             {item.errorRanges.map((errorBarPoint, index) => (
               <div key={index} className={styles["error-range"]}>
@@ -170,17 +171,7 @@ function getTooltipContentCartesian(
               </div>
             ))}
           </div>
-        ) : null,
-      };
-    })();
-    return {
-      key: formatted.key,
-      value: formatted.value,
-      marker: getSeriesMarker(item.point.series),
-      subItems: formatted.subItems,
-      expandableId: formatted.expandable ? item.point.series.name : undefined,
-      description: formatted.description,
-      highlighted: item.point.x === point?.x && item.point.y === point?.y,
+        ) : null),
     };
   });
   if (chart.options.plotOptions?.series?.stacking) {
