chore: refactor getStatus to getItemProps

Author: Pixselve

pages/06-visual-tests/cartesian-tooltip.page.tsx

@@ -31,7 +31,7 @@ const dataA = baseline.map(({ x, y }) => ({ x, y }));
 const dataB = baseline.map(({ x, y }, index) => ({ x, y: y + index * 10000 }));
 
 const series: Highcharts.SeriesOptionsType[] = [
-  { id: 'A', name: "A", type: "spline", data: dataA },
+  { id: "A", name: "A", type: "spline", data: dataA },
   { name: "B", type: "spline", data: dataB },
 ];
 

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

@@ -1456,48 +1456,47 @@ minimum width, the horizontal scrollbar is automatically added.",
         "analyticsTag": undefined,
         "defaultValue": undefined,
         "deprecatedTag": undefined,
-        "description": "Called whenever a legend item is hovered to provide content for legend tooltip's header, body, and (optional) footer.
-If not provided, no tooltip will be displayed.",
+        "description": "Specifies the options for each item in the chart.",
         "i18nTag": undefined,
         "inlineType": {
-          "name": "GetLegendTooltipContent",
+          "name": "(id: string) => ChartItemOptions",
           "parameters": [
             {
-              "name": "props",
-              "type": "GetLegendTooltipContentProps",
+              "name": "id",
+              "type": "string",
             },
           ],
-          "returnType": "LegendTooltipContent",
+          "returnType": "ChartItemOptions",
           "type": "function",
         },
-        "name": "getLegendTooltipContent",
+        "name": "getItemProps",
         "optional": true,
         "systemTags": undefined,
-        "type": "GetLegendTooltipContent",
+        "type": "((id: string) => ChartItemOptions)",
         "visualRefreshTag": undefined,
       },
       {
         "analyticsTag": undefined,
         "defaultValue": undefined,
         "deprecatedTag": undefined,
-        "description": "This property is used to provide a custom status for the series markers.
-The callback function is called for each series and should return a status value.",
+        "description": "Called whenever a legend item is hovered to provide content for legend tooltip's header, body, and (optional) footer.
+If not provided, no tooltip will be displayed.",
         "i18nTag": undefined,
         "inlineType": {
-          "name": "(series: Highcharts.Series) => "warning"",
+          "name": "GetLegendTooltipContent",
           "parameters": [
             {
-              "name": "series",
-              "type": "Highcharts.Series",
+              "name": "props",
+              "type": "GetLegendTooltipContentProps",
             },
           ],
-          "returnType": ""warning"",
+          "returnType": "LegendTooltipContent",
           "type": "function",
         },
-        "name": "getSeriesStatus",
+        "name": "getLegendTooltipContent",
         "optional": true,
         "systemTags": undefined,
-        "type": "((series: Highcharts.Series) => "warning" | undefined)",
+        "type": "GetLegendTooltipContent",
         "visualRefreshTag": undefined,
       },
       {
@@ -1567,19 +1566,20 @@ Supported Highcharts versions: 12.",
         "description": "An object that contains all of the localized strings required by the component.",
         "i18nTag": true,
         "inlineType": {
-          "name": "CartesianI18nStrings & PieI18nStrings & CoreI18nStrings",
+          "name": "CartesianI18nStrings & PieI18nStrings & CoreI18nStrings & Partial<{ seriesStatusWarningAriaLabel: string; }>",
           "type": "union",
           "valueDescriptions": undefined,
           "values": [
             "CartesianI18nStrings",
             "PieI18nStrings",
             "CoreI18nStrings",
+            "Partial<{ seriesStatusWarningAriaLabel: string; }>",
           ],
         },
         "name": "i18nStrings",
         "optional": true,
         "systemTags": undefined,
-        "type": "CartesianI18nStrings & PieI18nStrings & CoreI18nStrings",
+        "type": "CartesianI18nStrings & PieI18nStrings & CoreI18nStrings & Partial<{ seriesStatusWarningAriaLabel: string; }>",
         "visualRefreshTag": undefined,
       },
       {

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

@@ -7,6 +7,7 @@ import "highcharts/highcharts-more";
 import "highcharts/modules/solid-gauge";
 import { CoreChartProps } from "../../../lib/components/core/interfaces";
 import {
+  fillDefaultsForGetItemProps,
   getChartLegendItems,
   getLegendsProps,
   getPointColor,
@@ -79,7 +80,7 @@ describe("CoreChart: utils", () => {
             callback: (api) => (chartApi = api),
           });
 
-          const items = getChartLegendItems(chartApi!.chart);
+          const items = getChartLegendItems(chartApi!.chart, fillDefaultsForGetItemProps(undefined));
           expect(items[0].isSecondary).toBe(axisOptions.opposite);
         },
       );
@@ -109,7 +110,7 @@ describe("CoreChart: utils", () => {
           callback: (api) => (chartApi = api),
         });
 
-        const items = getChartLegendItems(chartApi!.chart);
+        const items = getChartLegendItems(chartApi!.chart, fillDefaultsForGetItemProps(undefined));
         expect(items).toHaveLength(2);
         expect(items[0].isSecondary).toBe(false);
         expect(items[1].isSecondary).toBe(true);
@@ -137,7 +138,7 @@ describe("CoreChart: utils", () => {
         callback: (api) => (chartApi = api),
       });
 
-      const items = getChartLegendItems(chartApi!.chart);
+      const items = getChartLegendItems(chartApi!.chart, fillDefaultsForGetItemProps(undefined));
 
       if (type === "gauge" || type === "solidgauge") {
         expect(items).toHaveLength(1);
@@ -255,4 +256,32 @@ describe("CoreChart: utils", () => {
       });
     });
   });
+
+  describe("fillDefaultsForGetItemProps", () => {
+    describe.each([
+      {
+        scenario: "getItemProps is undefined",
+        getItemProps: undefined,
+        id: "item1",
+        expected: { status: "default" },
+      },
+      {
+        scenario: "getItemProps returns empty object",
+        getItemProps: () => ({}),
+        id: "item1",
+        expected: { status: "default" },
+      },
+      {
+        scenario: "getItemProps returns status",
+        getItemProps: () => ({ status: "active" as const }),
+        id: "item1",
+        expected: { status: "active" },
+      },
+    ])("$scenario", ({ getItemProps, id, expected }) => {
+      it("should return correct default values", () => {
+        const result = fillDefaultsForGetItemProps(getItemProps);
+        expect(result(id)).toEqual(expected);
+      });
+    });
+  });
 });

src/core/__tests__/utils.test.ts

@@ -30,7 +30,7 @@ import { VerticalAxisTitle } from "./components/core-vertical-axis-title";
 import { getFormatter } from "./formatters";
 import { useChartI18n } from "./i18n-utils";
 import { CoreChartProps } from "./interfaces";
-import { fillDefaultsForGetItemProps, getPointAccessibleDescription, hasVisibleLegendItems } from "./utils";
+import { fillDefaultsForGetItemProps } from "./utils";
 import { getLegendsProps, getPointAccessibleDescription } from "./utils";
 
 import styles from "./styles.css.js";

src/core/chart-core.tsx

@@ -12,7 +12,6 @@ import { getDataAttributes } from "../../base-component/get-data-attributes";
 
 import styles from "./styles.css.js";
 import testClasses from "./test-classes/styles.css.js";
-import { ChartSeriesMarkerStatus } from "../series-marker/interfaces";
 
 interface ChartDetailPair {
   key: ReactNode;
@@ -25,8 +24,6 @@ interface ListItemProps {
   subItems?: ReadonlyArray<ChartDetailPair>;
   marker?: React.ReactNode;
   description?: ReactNode;
-  status: ChartSeriesMarkerStatus;
-  statusAriaDescription: string;
 }
 
 export interface ChartSeriesDetailItem extends ChartDetailPair {
@@ -175,13 +172,12 @@ function ExpandableSeries({
   );
 }
 
-function NonExpandableSeries({ itemKey, value, subItems, marker, description, status }: ListItemProps) {
+function NonExpandableSeries({ itemKey, value, subItems, marker, description }: ListItemProps) {
   return (
     <>
       <div className={clsx(styles["key-value-pair"], styles.announced)}>
         <div className={clsx(testClasses.key, styles.key)}>
           {marker}
-          <span style={{ display: "none" }}>warning status</span>
           <span>{itemKey}</span>
         </div>
         <span className={clsx(testClasses.value, styles.value)}>{value}</span>