feat: add status property support for series markers

pages/03-core/core-line-chart.page.tsx

@@ -69,6 +69,7 @@ const series: Highcharts.SeriesOptionsType[] = [
     data: dataB,
   },
   {
+    id: "A",
     name: "Comprehensive System Resource Utilization Measurements Over Time",
     type: "line",
     data: dataC,
@@ -105,6 +106,14 @@ export default function () {
       <CoreChart
         {...chartProps.core}
         highcharts={Highcharts}
+        i18nStrings={{
+          itemMarkerStatusAriaLabel: (status) => {
+            if (status === "warning") {
+              return "Warning status";
+            }
+            return status as never;
+          },
+        }}
         options={{
           lang: {
             accessibility: {
@@ -126,6 +135,9 @@ export default function () {
             },
           },
         }}
+        getItemOptions={(itemId) => ({
+          status: itemId === "A" ? "warning" : "default",
+        })}
         chartHeight={400}
         getTooltipContent={() => ({
           point({ item, hideTooltip }) {

pages/03-core/marker-permutations.page.tsx

@@ -21,7 +21,7 @@ import {
 
 import { ChartSeriesMarker, ChartSeriesMarkerProps } from "../../lib/components/internal/components/series-marker";
 import PermutationsView, { createPermutations } from "../common/permutations";
-import { Page } from "../common/templates";
+import { Page, PageSection } from "../common/templates";
 
 const permutationsForColors = [
   colorChartsPaletteCategorical1,
@@ -57,6 +57,10 @@ const permutationsForColors = [
   ]),
 );
 
+const permutationsForWarningColors = permutationsForColors.map((permutations) =>
+  permutations.map((permutation) => ({ ...permutation, status: "warning" as const })),
+);
+
 export default function MarkerPermutations() {
   return (
     <Page title="Marker permutations" subtitle="This page lists all markers that we currently support.">
@@ -70,6 +74,19 @@ export default function MarkerPermutations() {
           />
         ))}
       </SpaceBetween>
+
+      <PageSection title="Warning state">
+        <SpaceBetween size="m">
+          {permutationsForWarningColors.map((permutations, index) => (
+            <PermutationsView
+              key={index}
+              permutations={permutations}
+              render={(permutation) => <ChartSeriesMarker {...permutation} />}
+              direction="horizontal"
+            />
+          ))}
+        </SpaceBetween>
+      </PageSection>
     </Page>
   );
 }

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[] = [
-  { name: "A", type: "spline", data: dataA },
+  { id: "A", name: "A", type: "spline", data: dataA },
   { name: "B", type: "spline", data: dataB },
 ];
 
@@ -49,6 +49,9 @@ export default function () {
         }}
         chartHeight={400}
         tooltip={{ placement: "outside" }}
+        getItemOptions={(itemId) => ({
+          status: itemId === "A" ? "warning" : "default",
+        })}
         getTooltipContent={() => ({
           footer() {
             return <Button>Footer action</Button>;

pages/06-visual-tests/column-hover.page.tsx

@@ -46,6 +46,7 @@ function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
         plotOptions: { series: { stacking: type === "stacked" ? "normal" : undefined } },
         series: [
           {
+            id: "Severe",
             name: "Severe",
             type: "column" as const,
             data: [22, 28, 25, 13, 28],
@@ -75,6 +76,9 @@ function Chart({ type }: { type: "single" | "stacked" | "grouped" }) {
         ],
         yAxis: [{ title: { text: "Error count" } }],
       }}
+      getItemOptions={(itemId) => ({
+        status: itemId === "Severe" ? "warning" : "default",
+      })}
       callback={(api) => {
         setTimeout(() => {
           if (api.chart.series) {

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

@@ -15,7 +15,7 @@ const series: Highcharts.SeriesOptionsType[] = [
     type: "pie",
     data: [
       { name: "Running", y: 60 },
-      { name: "Failed", y: 30 },
+      { name: "Failed", y: 30, id: "Failed" },
       { name: "In-progress", y: 10 },
     ],
   },
@@ -31,6 +31,9 @@ export default function () {
         options={{
           series: series,
         }}
+        getItemOptions={(itemId) => ({
+          status: itemId === "Failed" ? "warning" : "default",
+        })}
         chartHeight={400}
         getTooltipContent={() => ({
           footer() {

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

@@ -1452,6 +1452,29 @@ minimum width, the horizontal scrollbar is automatically added.",
         "type": "CoreChartProps.FooterOptions",
         "visualRefreshTag": undefined,
       },
+      {
+        "analyticsTag": undefined,
+        "defaultValue": undefined,
+        "deprecatedTag": undefined,
+        "description": "Specifies the options for each item in the chart.",
+        "i18nTag": undefined,
+        "inlineType": {
+          "name": "CoreChartProps.GetItemOptions",
+          "parameters": [
+            {
+              "name": "itemId",
+              "type": "string",
+            },
+          ],
+          "returnType": "CoreChartProps.ChartItemOptions",
+          "type": "function",
+        },
+        "name": "getItemOptions",
+        "optional": true,
+        "systemTags": undefined,
+        "type": "CoreChartProps.GetItemOptions",
+        "visualRefreshTag": undefined,
+      },
       {
         "analyticsTag": undefined,
         "defaultValue": undefined,
@@ -1543,7 +1566,7 @@ 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": "CoreChartProps.I18nStrings",
           "type": "union",
           "valueDescriptions": undefined,
           "values": [
@@ -1555,7 +1578,7 @@ Supported Highcharts versions: 12.",
         "name": "i18nStrings",
         "optional": true,
         "systemTags": undefined,
-        "type": "CartesianI18nStrings & PieI18nStrings & CoreI18nStrings",
+        "type": "CoreChartProps.I18nStrings",
         "visualRefreshTag": undefined,
       },
       {

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

@@ -3,10 +3,11 @@
 
 import { act } from "react";
 import highcharts from "highcharts";
-import { vi } from "vitest";
+import { describe, vi } from "vitest";
 
 import { KeyCode } from "@cloudscape-design/component-toolkit/internal";
 
+import * as seriesMarker from "../../../lib/components/internal/components/series-marker";
 import {
   createChartWrapper,
   hoverLegendItem,
@@ -93,6 +94,8 @@ const mouseOver = (element: HTMLElement) => element.dispatchEvent(new MouseEvent
 const mouseOut = (element: HTMLElement) => element.dispatchEvent(new MouseEvent("mouseout", { bubbles: true }));
 const mouseLeavePause = () => new Promise((resolve) => setTimeout(resolve, 300));
 
+vi.mock(import("../../../lib/components/internal/components/series-marker"), { spy: true });
+
 describe("CoreChart: legend", () => {
   test("renders no legend when legend.enabled=false", () => {
     renderChart({ highcharts, options: { series }, legend: { enabled: false } });
@@ -527,6 +530,49 @@ describe("CoreChart: legend", () => {
     rerender({ highcharts, options: { series: lineSeries.filter((s) => s.name !== "L1") } });
     expect(getItems({ dimmed: false, active: true }).map((w) => w.getElement().textContent)).toEqual(["L2", "Line 3"]);
   });
+
+  describe("Marker status", () => {
+    const seriesMarkerMock = vi.mocked(seriesMarker.ChartSeriesMarker);
+
+    beforeEach(() => {
+      seriesMarkerMock.mockImplementation((props) => {
+        return <div data-testid={props.status}></div>;
+      });
+    });
+    afterEach(() => {
+      seriesMarkerMock.mockReset();
+    });
+
+    test("should render markers using the corresponding status", () => {
+      const { wrapper } = renderChart({
+        highcharts,
+        options: {
+          series: [
+            {
+              id: "L1",
+              type: "line",
+              name: "L1",
+              data: [1],
+            },
+            {
+              id: "L2",
+              type: "line",
+              name: "L2",
+              data: [1],
+            },
+          ],
+        },
+        getItemOptions: (itemId) => ({
+          status: itemId === "L1" ? "warning" : "default",
+        }),
+      });
+
+      const warnings = wrapper.findAll('[data-testid="warning"]');
+      const defaults = wrapper.findAll('[data-testid="default"]');
+      expect(warnings).toHaveLength(1);
+      expect(defaults).toHaveLength(1);
+    });
+  });
 });
 
 describe("CoreChart: secondary legend", () => {

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

@@ -79,7 +79,7 @@ describe("CoreChart: utils", () => {
             callback: (api) => (chartApi = api),
           });
 
-          const items = getChartLegendItems(chartApi!.chart);
+          const items = getChartLegendItems({ chart: chartApi!.chart });
           expect(items[0].isSecondary).toBe(axisOptions.opposite);
         },
       );
@@ -109,7 +109,7 @@ describe("CoreChart: utils", () => {
           callback: (api) => (chartApi = api),
         });
 
-        const items = getChartLegendItems(chartApi!.chart);
+        const items = getChartLegendItems({ chart: chartApi!.chart });
         expect(items).toHaveLength(2);
         expect(items[0].isSecondary).toBe(false);
         expect(items[1].isSecondary).toBe(true);
@@ -137,7 +137,7 @@ describe("CoreChart: utils", () => {
         callback: (api) => (chartApi = api),
       });
 
-      const items = getChartLegendItems(chartApi!.chart);
+      const items = getChartLegendItems({ chart: chartApi!.chart });
 
       if (type === "gauge" || type === "solidgauge") {
         expect(items).toHaveLength(1);

src/core/chart-api/chart-extra-context.tsx

@@ -32,6 +32,7 @@ export namespace ChartExtraContext {
     tooltipEnabled: boolean;
     keyboardNavigationEnabled: boolean;
     labels: ChartLabels;
+    getItemOptions?: CoreChartProps.GetItemOptions;
   }
 
   export interface Handlers {

src/core/chart-api/chart-extra-legend.tsx

@@ -5,6 +5,7 @@ import type Highcharts from "highcharts";
 
 import { LegendItem } from "../../internal/components/interfaces";
 import { ChartSeriesMarker, ChartSeriesMarkerType } from "../../internal/components/series-marker";
+import { ChartSeriesMarkerStatus } from "../../internal/components/series-marker/interfaces";
 import { fireNonCancelableEvent } from "../../internal/events";
 import AsyncStore from "../../internal/utils/async-store";
 import { getChartSeries } from "../../internal/utils/chart-series";
@@ -83,11 +84,17 @@ 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());
-    const legendItems = itemSpecs.map(({ id, name, color, markerType, visible, isSecondary }) => {
-      const marker = this.renderMarker(markerType, color, visible);
-      return { id, name, marker, visible, isSecondary, highlighted: prevState.get(id)?.highlighted ?? false };
+    const itemSpecs = getChartLegendItems({
+      chart: this.context.chart(),
+      getItemOptions: this.context.settings.getItemOptions,
+      itemMarkerStatusAriaLabel: this.context.settings.labels.itemMarkerLabel,
     });
+    const legendItems = itemSpecs.map(
+      ({ id, name, color, markerType, visible, status, isSecondary, markerAriaLabel }) => {
+        const marker = this.renderMarker({ type: markerType, color, visible, status, ariaLabel: markerAriaLabel });
+        return { id, name, marker, visible, isSecondary, highlighted: prevState.get(id)?.highlighted ?? false };
+      },
+    );
     this.updateLegendItems(legendItems);
   };
 
@@ -109,9 +116,23 @@ export class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
   // The chart markers derive from type and color and are cached to avoid unnecessary renders,
   // and allow comparing them by reference.
   private markersCache = new Map<string, React.ReactNode>();
-  public renderMarker(type: ChartSeriesMarkerType, color: string, visible = true): React.ReactNode {
-    const key = `${type}:${color}:${visible}`;
-    const marker = this.markersCache.get(key) ?? <ChartSeriesMarker type={type} color={color} visible={visible} />;
+  public renderMarker({
+    type,
+    status = "default",
+    color,
+    visible = true,
+    ariaLabel,
+  }: {
+    type: ChartSeriesMarkerType;
+    color: string;
+    visible?: boolean;
+    status?: ChartSeriesMarkerStatus;
+    ariaLabel?: string;
+  }): React.ReactNode {
+    const key = `${type}:${color}:${visible}:${status}`;
+    const marker = this.markersCache.get(key) ?? (
+      <ChartSeriesMarker type={type} color={color} visible={visible} status={status} ariaLabel={ariaLabel} />
+    );
     this.markersCache.set(key, marker);
     return marker;
   }

src/core/chart-core.tsx

@@ -15,6 +15,7 @@ import { InternalBaseComponentProps } from "../internal/base-component/use-base-
 import * as Styles from "../internal/chart-styles";
 import { castArray } from "../internal/utils/utils";
 import { useChartAPI } from "./chart-api";
+import { ChartExtraContext } from "./chart-api/chart-extra-context";
 import { ChartContainer } from "./chart-container";
 import { ChartApplication } from "./components/core-application";
 import { ChartFilters } from "./components/core-filters";
@@ -63,17 +64,19 @@ export function InternalCoreChart({
   onVisibleItemsChange,
   visibleItems,
   __internalRootRef,
+  getItemOptions,
   ...rest
 }: CoreChartProps & InternalBaseComponentProps) {
   const highcharts = rest.highcharts as null | typeof Highcharts;
   const labels = useChartI18n({ ariaLabel, ariaDescription, i18nStrings });
-  const context = {
+  const context: ChartExtraContext["settings"] = {
     chartId: useUniqueId(),
     noDataEnabled: !!noDataOptions,
     legendEnabled: legendOptions?.enabled !== false,
     tooltipEnabled: tooltipOptions?.enabled !== false,
     keyboardNavigationEnabled: keyboardNavigation,
     labels,
+    getItemOptions: getItemOptions ?? (() => ({})),
   };
   const handlers = { onHighlight, onClearHighlight, onVisibleItemsChange };
   const state = { visibleItems };