feat: Adds details renderer to core tooltip API (#69)

* feat: Adds details renderer to core tooltip API

* add core tooltip content tests

Author: pan-kot

src/__tests__/__snapshots__/documenter.test.ts.snap

@@ -883,7 +883,7 @@ Supported series types:
           {
             "name": "details",
             "optional": true,
-            "type": "((props: TooltipSlotRenderProps) => ReadonlyArray<PieChartProps.TooltipDetail>)",
+            "type": "((props: TooltipSlotRenderProps) => ReadonlyArray<BaseTooltipDetail>)",
           },
           {
             "name": "enabled",

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

@@ -6,7 +6,7 @@ import { waitFor } from "@testing-library/react";
 import highcharts from "highcharts";
 import { vi } from "vitest";
 
-import { CoreChartAPI } from "../../../lib/components/core/interfaces";
+import { CoreChartProps } from "../../../lib/components/core/interfaces";
 import testClasses from "../../../lib/components/core/test-classes/styles.selectors";
 import { createChartWrapper, renderChart } from "./common";
 import { HighchartsTestHelper } from "./highcharts-utils";
@@ -51,7 +51,7 @@ const data = [
   { name: "P3", y: 60 },
 ];
 
-const series: Highcharts.SeriesOptionsType[] = [
+const pieSeries: Highcharts.SeriesOptionsType[] = [
   {
     type: "pie",
     name: "Pie series",
@@ -84,7 +84,7 @@ describe("CoreChart: tooltip", () => {
   test("renders highcharts tooltip", () => {
     const { wrapper } = renderChart({
       highcharts,
-      options: { series, tooltip: { enabled: true, formatter: () => "Custom content" } },
+      options: { series: pieSeries, tooltip: { enabled: true, formatter: () => "Custom content" } },
       tooltip: { enabled: false },
     });
 
@@ -184,12 +184,12 @@ describe("CoreChart: tooltip", () => {
   });
 
   test("shows tooltip with api", async () => {
-    let api: null | CoreChartAPI = null;
+    let api: null | CoreChartProps.ChartAPI = null;
     const onHighlight = vi.fn();
     const onClearHighlight = vi.fn();
     const { wrapper } = renderChart({
       highcharts,
-      options: { series },
+      options: { series: pieSeries },
       onHighlight,
       onClearHighlight,
       getTooltipContent: () => ({
@@ -221,7 +221,7 @@ describe("CoreChart: tooltip", () => {
   test("keeps showing tooltip when cursor is over the tooltip", async () => {
     const { wrapper } = renderChart({
       highcharts,
-      options: { series },
+      options: { series: pieSeries },
       getTooltipContent: () => ({ header: () => "", body: () => "" }),
     });
 
@@ -250,7 +250,7 @@ describe("CoreChart: tooltip", () => {
   test("pins and unpins tooltip", async () => {
     const { wrapper } = renderChart({
       highcharts,
-      options: { series },
+      options: { series: pieSeries },
       getTooltipContent: ({ point }) => ({ header: () => `y${point?.y}`, body: () => "" }),
     });
 
@@ -291,7 +291,7 @@ describe("CoreChart: tooltip", () => {
   test("provides point and group for onHighlight and getTooltipContent", async () => {
     const onHighlight = vi.fn();
     const getTooltipContent = vi.fn();
-    renderChart({ highcharts, options: { series }, onHighlight, getTooltipContent });
+    renderChart({ highcharts, options: { series: pieSeries }, onHighlight, getTooltipContent });
 
     for (let i = 0; i < data.length; i++) {
       act(() => hc.highlightChartPoint(0, i));
@@ -370,4 +370,39 @@ describe("CoreChart: tooltip", () => {
       expect(onHighlight).toHaveBeenCalledWith(expect.objectContaining({ point: hc.getChartPoint(0, 1) }));
     },
   );
+
+  test("renders customized cartesian points", () => {
+    const { wrapper } = renderChart({
+      highcharts,
+      options: { series: lineSeries },
+      getTooltipContent: () => ({
+        header: () => "Header",
+        point: ({ item }) => ({ key: ` [${item.point.series.name}]`, value: ` [${item.point.y}]` }),
+      }),
+    });
+
+    act(() => hc.highlightChartPoint(0, 2));
+
+    expect(wrapper.findTooltip()!.findBody()!.getElement().textContent).toBe(
+      " [Line series 1] [13] [Line series 2] [23]",
+    );
+  });
+
+  test("renders customized pie segment details", () => {
+    const { wrapper } = renderChart({
+      highcharts,
+      options: { series: pieSeries },
+      getTooltipContent: () => ({
+        header: () => "Header",
+        details: ({ point }) => [
+          { key: `[${point.name}]`, value: ` [${point.y}]` },
+          { key: " [custom key]", value: " [custom value]" },
+        ],
+      }),
+    });
+
+    act(() => hc.highlightChartPoint(0, 2));
+
+    expect(wrapper.findTooltip()!.findBody()!.getElement().textContent).toBe("[P3] [60] [custom key] [custom value]");
+  });
 });

src/core/components/core-tooltip.tsx

@@ -215,11 +215,15 @@ function getTooltipContentPie(
         </Box>
       </div>
     ),
-    body: renderers.body?.(tooltipDetails) ?? (
-      // We expect all pie chart segments to have defined y values. We use y=0 as fallback
-      // because the property is optional in Highcharts types.
-      <ChartSeriesDetails details={[{ key: point.series.name, value: point.y ?? 0 }]} />
-    ),
+    body:
+      renderers.body?.(tooltipDetails) ??
+      (renderers.details ? (
+        <ChartSeriesDetails details={renderers.details({ point })} compactList={true} />
+      ) : (
+        // We expect all pie chart segments to have defined y values. We use y=0 as fallback
+        // because the property is optional in Highcharts types.
+        <ChartSeriesDetails details={[{ key: point.series.name, value: point.y ?? 0 }]} />
+      )),
     footer: renderers.footer?.(tooltipDetails),
   };
 }

src/core/interfaces.ts

@@ -108,6 +108,11 @@ export interface BaseNoDataOptions {
   onRecoveryClick?: NonCancelableEventHandler;
 }
 
+export interface BaseTooltipDetail {
+  key: React.ReactNode;
+  value: React.ReactNode;
+}
+
 export interface BaseI18nStrings {
   loadingText?: string;
   errorText?: string;
@@ -428,6 +433,7 @@ export namespace CoreChartProps {
   }
   export interface TooltipContentRenderer {
     point?: (props: TooltipPointProps) => TooltipPointFormatted;
+    details?: (props: TooltipDetailsProps) => readonly TooltipDetail[];
     header?: (props: TooltipSlotProps) => React.ReactNode;
     body?: (props: TooltipSlotProps) => React.ReactNode;
     footer?: (props: TooltipSlotProps) => React.ReactNode;
@@ -445,6 +451,12 @@ export namespace CoreChartProps {
     items: TooltipContentItem[];
   }
 
+  export interface TooltipDetailsProps {
+    point: Highcharts.Point;
+  }
+
+  export type TooltipDetail = BaseTooltipDetail;
+
   export interface LegendItemHighlightDetail {
     item: LegendItem;
   }

src/pie-chart/chart-pie-internal.tsx

@@ -12,7 +12,6 @@ import { CoreChartProps } from "../core/interfaces";
 import { getOptionsId } from "../core/utils";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
 import * as Styles from "../internal/chart-styles";
-import ChartSeriesDetails from "../internal/components/series-details";
 import { fireNonCancelableEvent } from "../internal/events";
 import { SomeRequired, Writeable } from "../internal/utils/utils";
 import { useInnerArea } from "./chart-inner-area";
@@ -62,29 +61,24 @@ export const InternalPieChart = forwardRef(
     // We convert pie tooltip options to the core chart's getTooltipContent callback,
     // ensuring no internal types are exposed to the consumer-defined render functions.
     const getTooltipContent: CoreChartProps["getTooltipContent"] = () => {
-      const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => {
-        const point = props.items[0].point;
+      const transformDetailsProps = ({
+        point,
+      }: CoreChartProps.TooltipDetailsProps): PieChartProps.TooltipDetailsRenderProps => {
         return {
           totalValue: point.total ?? 0,
           segmentValue: point.y ?? 0,
           segmentId: getOptionsId(point.options),
           segmentName: point.name ?? "",
         };
       };
+      const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => {
+        const point = props.items[0].point;
+        return transformDetailsProps({ point });
+      };
       return {
         header: tooltip?.header ? (props) => tooltip.header!(transformSlotProps(props)) : undefined,
-        body:
-          tooltip?.body || tooltip?.details
-            ? (props) =>
-                tooltip.body ? (
-                  tooltip.body(transformSlotProps(props))
-                ) : (
-                  <ChartSeriesDetails
-                    details={tooltip?.details?.(transformSlotProps(props)) ?? []}
-                    compactList={true}
-                  />
-                )
-            : undefined,
+        details: tooltip?.details ? (props) => tooltip.details!(transformDetailsProps(props)) : undefined,
+        body: tooltip?.body ? (props) => tooltip.body!(transformSlotProps(props)) : undefined,
         footer: tooltip?.footer ? (props) => tooltip.footer!(transformSlotProps(props)) : undefined,
       };
     };

src/pie-chart/interfaces.ts

@@ -105,10 +105,7 @@ export namespace PieChartProps {
     totalValue: number;
   }
 
-  export interface TooltipDetail {
-    key: React.ReactNode;
-    value: React.ReactNode;
-  }
+  export type TooltipDetail = CoreTypes.BaseTooltipDetail;
 
   export type SegmentTitleRenderProps = SegmentDescriptionRenderProps;
   export interface SegmentDescriptionRenderProps {