chore: move interfaces around and rename getItemProps

Pixselve · Pixselve · commit f38f47867dde · 2025-12-19T10:00:55.000Z
diff --git a/pages/03-core/core-line-chart.page.tsx b/pages/03-core/core-line-chart.page.tsx
@@ -131,8 +131,8 @@ export default function () {
             },
           },
         }}
-        getItemProps={(id) => ({
-          status: id === "A" ? "warning" : "default",
+        getItemOptions={({ itemId }) => ({
+          status: itemId === "A" ? "warning" : "default",
         })}
         chartHeight={400}
         getTooltipContent={() => ({
diff --git a/pages/06-visual-tests/cartesian-tooltip.page.tsx b/pages/06-visual-tests/cartesian-tooltip.page.tsx
@@ -49,8 +49,8 @@ export default function () {
         }}
         chartHeight={400}
         tooltip={{ placement: "outside" }}
-        getItemProps={(id) => ({
-          status: id === "A" ? "warning" : "default",
+        getItemOptions={({ itemId }) => ({
+          status: itemId === "A" ? "warning" : "default",
         })}
         getTooltipContent={() => ({
           footer() {
diff --git a/pages/06-visual-tests/column-hover.page.tsx b/pages/06-visual-tests/column-hover.page.tsx
@@ -76,8 +76,8 @@ function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
         ],
         yAxis: [{ title: { text: "Error count" } }],
       }}
-      getItemProps={(id) => ({
-        status: id === "Severe" ? "warning" : "default",
+      getItemOptions={({ itemId }) => ({
+        status: itemId === "Severe" ? "warning" : "default",
       })}
       callback={(api) => {
         setTimeout(() => {
diff --git a/pages/06-visual-tests/pie-tooltip.page.tsx b/pages/06-visual-tests/pie-tooltip.page.tsx
@@ -31,8 +31,8 @@ export default function () {
         options={{
           series: series,
         }}
-        getItemProps={(id) => ({
-          status: id === "Failed" ? "warning" : "default",
+        getItemOptions={({ itemId }) => ({
+          status: itemId === "Failed" ? "warning" : "default",
         })}
         chartHeight={400}
         getTooltipContent={() => ({
diff --git a/src/__tests__/__snapshots__/documenter.test.ts.snap b/src/__tests__/__snapshots__/documenter.test.ts.snap
@@ -1459,20 +1459,20 @@ minimum width, the horizontal scrollbar is automatically added.",
         "description": "Specifies the options for each item in the chart.",
         "i18nTag": undefined,
         "inlineType": {
-          "name": "(id: string) => ChartItemOptions",
+          "name": "(props: CoreChartProps.GetItemOptionsProps) => CoreChartProps.ChartItemOptions",
           "parameters": [
             {
-              "name": "id",
-              "type": "string",
+              "name": "props",
+              "type": "CoreChartProps.GetItemOptionsProps",
             },
           ],
-          "returnType": "ChartItemOptions",
+          "returnType": "CoreChartProps.ChartItemOptions",
           "type": "function",
         },
-        "name": "getItemProps",
+        "name": "getItemOptions",
         "optional": true,
         "systemTags": undefined,
-        "type": "((id: string) => ChartItemOptions)",
+        "type": "((props: CoreChartProps.GetItemOptionsProps) => CoreChartProps.ChartItemOptions)",
         "visualRefreshTag": undefined,
       },
       {
diff --git a/src/core/__tests__/chart-core-legend.test.tsx b/src/core/__tests__/chart-core-legend.test.tsx
@@ -562,8 +562,8 @@ describe("CoreChart: legend", () => {
             },
           ],
         },
-        getItemProps: (id) => ({
-          status: id === "L1" ? "warning" : "default",
+        getItemOptions: ({ itemId }) => ({
+          status: itemId === "L1" ? "warning" : "default",
         }),
       });
 
diff --git a/src/core/__tests__/chart-core-utils.test.tsx b/src/core/__tests__/chart-core-utils.test.tsx
@@ -7,7 +7,7 @@ import "highcharts/highcharts-more";
 import "highcharts/modules/solid-gauge";
 import { CoreChartProps } from "../../../lib/components/core/interfaces";
 import {
-  fillDefaultsForGetItemProps,
+  fillDefaultsForgetItemOptions,
   getChartLegendItems,
   getLegendsProps,
   getPointColor,
@@ -80,7 +80,7 @@ describe("CoreChart: utils", () => {
             callback: (api) => (chartApi = api),
           });
 
-          const items = getChartLegendItems(chartApi!.chart, fillDefaultsForGetItemProps(undefined));
+          const items = getChartLegendItems(chartApi!.chart, fillDefaultsForgetItemOptions(undefined));
           expect(items[0].isSecondary).toBe(axisOptions.opposite);
         },
       );
@@ -110,7 +110,7 @@ describe("CoreChart: utils", () => {
           callback: (api) => (chartApi = api),
         });
 
-        const items = getChartLegendItems(chartApi!.chart, fillDefaultsForGetItemProps(undefined));
+        const items = getChartLegendItems(chartApi!.chart, fillDefaultsForgetItemOptions(undefined));
         expect(items).toHaveLength(2);
         expect(items[0].isSecondary).toBe(false);
         expect(items[1].isSecondary).toBe(true);
@@ -138,7 +138,7 @@ describe("CoreChart: utils", () => {
         callback: (api) => (chartApi = api),
       });
 
-      const items = getChartLegendItems(chartApi!.chart, fillDefaultsForGetItemProps(undefined));
+      const items = getChartLegendItems(chartApi!.chart, fillDefaultsForgetItemOptions(undefined));
 
       if (type === "gauge" || type === "solidgauge") {
         expect(items).toHaveLength(1);
@@ -257,29 +257,29 @@ describe("CoreChart: utils", () => {
     });
   });
 
-  describe("fillDefaultsForGetItemProps", () => {
+  describe("fillDefaultsForgetItemOptions", () => {
     describe.each([
       {
-        scenario: "getItemProps is undefined",
-        getItemProps: undefined,
+        scenario: "getItemOptions is undefined",
+        getItemOptions: undefined,
         id: "item1",
         expected: { status: "default", markerAriaDescription: undefined },
       },
       {
-        scenario: "getItemProps returns empty object",
-        getItemProps: () => ({}),
+        scenario: "getItemOptions returns empty object",
+        getItemOptions: () => ({}),
         id: "item1",
         expected: { status: "default", markerAriaDescription: undefined },
       },
       {
-        scenario: "getItemProps returns status",
-        getItemProps: () => ({ status: "warning" as const }),
+        scenario: "getItemOptions returns status",
+        getItemOptions: () => ({ status: "warning" as const }),
         id: "item1",
         expected: { status: "warning", markerAriaDescription: undefined },
       },
       {
-        scenario: "getItemProps returns status and contains i18n",
-        getItemProps: () => ({ status: "warning" as const }),
+        scenario: "getItemOptions returns status and contains i18n",
+        getItemOptions: () => ({ status: "warning" as const }),
         id: "item1",
         expected: { status: "warning", markerAriaDescription: "hello hi" },
         options: {
@@ -288,18 +288,18 @@ describe("CoreChart: utils", () => {
         },
       },
       {
-        scenario: "getItemProps returns status and contains i18n - getI18nFromStatus returns undefined",
-        getItemProps: () => ({ status: "warning" as const }),
+        scenario: "getItemOptions returns status and contains i18n - getI18nFromStatus returns undefined",
+        getItemOptions: () => ({ status: "warning" as const }),
         id: "item1",
         expected: { status: "warning", markerAriaDescription: undefined },
         options: {
           markerAriaDescriptionTemplate: "hello {status}",
           getI18nFromStatus: (): undefined => undefined,
         },
       },
-    ])("$scenario", ({ getItemProps, id, expected, options }) => {
+    ])("$scenario", ({ getItemOptions, id, expected, options }) => {
       it("should return correct default values", () => {
-        const result = fillDefaultsForGetItemProps(getItemProps, options);
+        const result = fillDefaultsForgetItemOptions(getItemOptions, options);
         expect(result(id)).toEqual(expected);
       });
     });
diff --git a/src/core/chart-api/chart-extra-context.tsx b/src/core/chart-api/chart-extra-context.tsx
@@ -8,7 +8,7 @@ import { getChartSeries } from "../../internal/utils/chart-series";
 import { getSeriesData } from "../../internal/utils/series-data";
 import { ChartLabels } from "../i18n-utils";
 import { CoreChartProps, Rect } from "../interfaces";
-import { fillDefaultsForGetItemProps, getGroupRect, isSeriesStacked } from "../utils";
+import { fillDefaultsForgetItemOptions, getGroupRect, isSeriesStacked } from "../utils";
 
 // Chart API context is used for dependency injection for chart utilities.
 // It is initialized on chart render, and includes the chart instance, consumer
@@ -32,7 +32,7 @@ export namespace ChartExtraContext {
     tooltipEnabled: boolean;
     keyboardNavigationEnabled: boolean;
     labels: ChartLabels;
-    getItemProps: ReturnType<typeof fillDefaultsForGetItemProps>;
+    getItemOptions: ReturnType<typeof fillDefaultsForgetItemOptions>;
   }
 
   export interface Handlers {
@@ -64,7 +64,7 @@ export function createChartContext(): ChartExtraContext {
       tooltipEnabled: false,
       keyboardNavigationEnabled: false,
       labels: {},
-      getItemProps: fillDefaultsForGetItemProps(undefined),
+      getItemOptions: fillDefaultsForgetItemOptions(undefined),
     },
     handlers: {},
     state: {},
diff --git a/src/core/chart-api/chart-extra-legend.tsx b/src/core/chart-api/chart-extra-legend.tsx
@@ -84,7 +84,7 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
 
   private initLegend = () => {
     const prevState = this.get().items.reduce((map, item) => map.set(item.id, item), new Map<string, LegendItem>());
-    const itemSpecs = getChartLegendItems(this.context.chart(), this.context.settings.getItemProps);
+    const itemSpecs = getChartLegendItems(this.context.chart(), this.context.settings.getItemOptions);
     const legendItems = itemSpecs.map(
       ({ id, name, color, markerType, visible, status, isSecondary, markerAriaDescription }) => {
         const marker = this.renderMarker(markerType, color, visible, status, markerAriaDescription);
diff --git a/src/core/chart-core.tsx b/src/core/chart-core.tsx
@@ -1,9 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
-// SPDX-License-Identifier: Apache-2.0
-
 import { useRef } from "react";
 import clsx from "clsx";
 import type Highcharts from "highcharts";
@@ -30,7 +27,7 @@ import { VerticalAxisTitle } from "./components/core-vertical-axis-title";
 import { getFormatter } from "./formatters";
 import { useChartI18n } from "./i18n-utils";
 import { CoreChartProps } from "./interfaces";
-import { fillDefaultsForGetItemProps, i18nStatus } from "./utils";
+import { fillDefaultsForgetItemOptions, i18nStatus } from "./utils";
 import { getLegendsProps, getPointAccessibleDescription } from "./utils";
 
 import styles from "./styles.css.js";
@@ -68,7 +65,7 @@ export function InternalCoreChart({
   onVisibleItemsChange,
   visibleItems,
   __internalRootRef,
-  getItemProps,
+  getItemOptions,
   ...rest
 }: CoreChartProps & InternalBaseComponentProps) {
   const highcharts = rest.highcharts as null | typeof Highcharts;
@@ -80,7 +77,7 @@ export function InternalCoreChart({
     tooltipEnabled: tooltipOptions?.enabled !== false,
     keyboardNavigationEnabled: keyboardNavigation,
     labels,
-    getItemProps: fillDefaultsForGetItemProps(getItemProps, {
+    getItemOptions: fillDefaultsForgetItemOptions(getItemOptions, {
       markerAriaDescriptionTemplate: i18nStrings?.chartMarkerAriaDescriptionTemplate,
       getI18nFromStatus: i18nStatus(i18nStrings),
     }),
diff --git a/src/core/components/core-tooltip.tsx b/src/core/components/core-tooltip.tsx
@@ -162,7 +162,7 @@ function getTooltipContentCartesian(
   const x = group[0].x;
   const chart = group[0].series.chart;
   const getSeriesMarker = (series: Highcharts.Series) => {
-    const itemProps = api.context.settings.getItemProps(getSeriesId(series));
+    const itemProps = api.context.settings.getItemOptions({ itemId: getSeriesId(series) });
     return api.renderMarker(
       getSeriesMarkerType(series),
       getSeriesColor(series),
@@ -256,8 +256,8 @@ function getTooltipContentPie(
           getSeriesMarkerType(point.series),
           getPointColor(point),
           true,
-          api.context.settings.getItemProps(getPointId(point)).status,
-          api.context.settings.getItemProps(getPointId(point)).markerAriaDescription,
+          api.context.settings.getItemOptions({ itemId: getPointId(point) }).status,
+          api.context.settings.getItemOptions({ itemId: getPointId(point) }).markerAriaDescription,
         )}
         <Box variant="span" fontWeight="bold">
           {point.name}
diff --git a/src/core/interfaces.ts b/src/core/interfaces.ts
@@ -317,15 +317,6 @@ export interface CoreCartesianOptions {
   verticalAxisTitlePlacement?: "top" | "side";
 }
 
-export interface ChartItemOptions {
-  /**
-   * If specified, specifies the status of an item.
-   * An item can be a point or a series.
-   * @default "default"
-   */
-  status?: ChartSeriesMarkerStatus;
-}
-
 export interface CoreChartProps
   extends Pick<
       BaseChartOptions,
@@ -419,9 +410,8 @@ export interface CoreChartProps
   i18nStrings?: CartesianI18nStrings & PieI18nStrings & CoreI18nStrings & ChartSeriesMarkerI18n;
   /**
    * Specifies the options for each item in the chart.
-   * @param id the item id. Can be the id of a series or a point.
    */
-  getItemProps?: (id: string) => ChartItemOptions;
+  getItemOptions?: (props: CoreChartProps.GetItemOptionsProps) => CoreChartProps.ChartItemOptions;
 }
 
 export namespace CoreChartProps {
@@ -446,6 +436,22 @@ export namespace CoreChartProps {
   export type XAxisOptions = Highcharts.XAxisOptions & { valueFormatter?: (value: null | number) => string };
   export type YAxisOptions = Highcharts.YAxisOptions & { valueFormatter?: (value: null | number) => string };
 
+  export interface ChartItemOptions {
+    /**
+     * If specified, specifies the status of an item.
+     * An item can be a point or a series.
+     * @default "default"
+     */
+    status?: ChartSeriesMarkerStatus;
+  }
+
+  export interface GetItemOptionsProps {
+    /**
+     * The item id. Can be the id of a series or a point.
+     */
+    itemId: string;
+  }
+
   export interface HeaderOptions {
     content: React.ReactNode;
   }
diff --git a/src/core/utils.ts b/src/core/utils.ts
@@ -9,7 +9,7 @@ import { getChartSeries } from "../internal/utils/chart-series";
 import { castArray } from "../internal/utils/utils";
 import { getFormatter } from "./formatters";
 import { ChartLabels } from "./i18n-utils";
-import { ChartItemOptions, CoreChartProps, Rect } from "./interfaces";
+import { CoreChartProps, Rect } from "./interfaces";
 
 export interface LegendItemSpec {
   id: string;
@@ -137,7 +137,7 @@ export function getPointColor(point?: Highcharts.Point): string {
 // Highcharts legend is disabled. Instead, we use this custom method to collect legend items from the chart.
 export function getChartLegendItems(
   chart: Highcharts.Chart,
-  getItemProps: ReturnType<typeof fillDefaultsForGetItemProps>,
+  getItemOptions: ReturnType<typeof fillDefaultsForgetItemOptions>,
 ): readonly LegendItemSpec[] {
   const legendItems: LegendItemSpec[] = [];
   const isInverted = chart.inverted ?? false;
@@ -155,7 +155,7 @@ export function getChartLegendItems(
     // The same is not supported for pie chart segments.
     if (series.options.showInLegend !== false) {
       const seriesId = getSeriesId(series);
-      const itemProps = getItemProps(seriesId);
+      const itemProps = getItemOptions({ itemId: seriesId });
       legendItems.push({
         id: seriesId,
         name: series.name,
@@ -178,7 +178,7 @@ export function getChartLegendItems(
         markerType: getSeriesMarkerType(point.series),
         color: getPointColor(point),
         visible: point.visible,
-        status: getItemProps(pointId).status,
+        status: getItemOptions({ itemId: pointId }).status,
         isSecondary,
       });
     }
@@ -405,25 +405,25 @@ function getChartRect(rect: Rect, chart: Highcharts.Chart, canBeInverted: boolea
       };
 }
 
-export interface FillDefaultsForGetItemPropsOptions {
+export interface FillDefaultsForgetItemOptionsOptions {
   markerAriaDescriptionTemplate?: string;
   getI18nFromStatus?: (status: ChartSeriesMarkerStatus) => string | undefined;
 }
 
 /**
  * Creates a function that returns chart item properties with default values applied.
  *
- * This higher-order function wraps an optional `getItemProps` function and ensures that
+ * This higher-order function wraps an optional `getItemOptions` function and ensures that
  * all required properties of `ChartItemOptions` are present, filling in defaults where needed.
  */
-export function fillDefaultsForGetItemProps(
-  getItemProps: CoreChartProps["getItemProps"],
-  options?: FillDefaultsForGetItemPropsOptions,
-): (id: string) => Required<ChartItemOptions> & {
+export function fillDefaultsForgetItemOptions(
+  getItemOptions: CoreChartProps["getItemOptions"],
+  options?: FillDefaultsForgetItemOptionsOptions,
+): (props: CoreChartProps.GetItemOptionsProps) => Required<CoreChartProps.ChartItemOptions> & {
   markerAriaDescription?: string;
 } {
-  return (id: string) => {
-    const prevItem = getItemProps?.(id) ?? {};
+  return (props: CoreChartProps.GetItemOptionsProps) => {
+    const prevItem = getItemOptions?.(props) ?? {};
     const status = prevItem.status ?? "default";
     const statusI18n = options?.getI18nFromStatus?.(status);
 
