Merge branch 'main' into change-chart-type-page

Author: pan-kot

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

@@ -5,7 +5,7 @@ import { act } from "react";
 import highcharts from "highcharts";
 import { vi } from "vitest";
 
-import { CoreChartAPI } from "../../../lib/components/core/interfaces";
+import { CoreChartProps } from "../../../lib/components/core/interfaces";
 import { renderChart, selectLegendItem } from "./common";
 import { HighchartsTestHelper } from "./highcharts-utils";
 
@@ -18,10 +18,28 @@ const series: Highcharts.SeriesOptionsType[] = [
   { type: "line", name: "Line 2", data: [4, 5, 6] },
 ];
 
+const threeSeries: Highcharts.SeriesOptionsType[] = [
+  { type: "line", name: "Line 1", data: [1, 2, 3] },
+  { type: "line", name: "Line 2", data: [4, 5, 6] },
+  { type: "line", name: "Line 3", data: [7, 8, 9] },
+];
+
+const pieSeries: Highcharts.SeriesOptionsType[] = [
+  {
+    type: "pie",
+    name: "Data",
+    data: [
+      { name: "Segment 1", y: 33.3 },
+      { name: "Segment 2", y: 33.3 },
+      { name: "Segment 3", y: 33.4 },
+    ],
+  },
+];
+
 describe("CoreChart: API tests", () => {
   test("passes isApiCall=false to onHighlight when triggered by an user interaction", () => {
     const onHighlight = vi.fn();
-    renderChart({ highcharts, options: { series }, onHighlight });
+    renderChart({ highcharts, onHighlight, options: { series } });
 
     act(() => hc.highlightChartPoint(0, 0));
 
@@ -32,7 +50,7 @@ describe("CoreChart: API tests", () => {
 
   test("passes isApiCall=true to onHighlight when triggered programmatically through API", () => {
     const onHighlight = vi.fn();
-    let chartApi: CoreChartAPI | null = null;
+    let chartApi: CoreChartProps.ChartAPI | null = null;
 
     renderChart({ highcharts, onHighlight, options: { series }, callback: (api) => (chartApi = api) });
 
@@ -55,7 +73,7 @@ describe("CoreChart: API tests", () => {
 
   test("passes isApiCall=true to onClearHighlight when triggered programmatically through API", () => {
     const onClearHighlight = vi.fn();
-    let chartApi: CoreChartAPI | null = null;
+    let chartApi: CoreChartProps.ChartAPI | null = null;
 
     renderChart({ highcharts, onClearHighlight, options: { series }, callback: (api) => (chartApi = api) });
 
@@ -74,11 +92,49 @@ describe("CoreChart: API tests", () => {
 
   test("passes isApiCall=true to onVisibleItemsChange when triggered programmatically through API", () => {
     const onVisibleItemsChange = vi.fn();
-    let chartApi: CoreChartAPI | null = null;
+    let chartApi: CoreChartProps.ChartAPI | null = null;
 
     renderChart({ highcharts, options: { series }, onVisibleItemsChange, callback: (api) => (chartApi = api) });
 
     act(() => chartApi!.setItemsVisible(["Line 1"]));
     expect(onVisibleItemsChange).toHaveBeenCalledWith({ items: expect.any(Array), isApiCall: true });
   });
+
+  test("highlightItems should only highlight the specified series in a line chart", () => {
+    let chartApi: CoreChartProps.ChartAPI | null = null;
+    renderChart({ highcharts, options: { series: threeSeries }, callback: (api) => (chartApi = api) });
+
+    act(() => chartApi!.highlightItems([hc.getChartSeries(1).name]));
+
+    expect(hc.getChartSeries(0).state).toBe("inactive");
+    expect(hc.getChartSeries(1).state).toBe("");
+    expect(hc.getChartSeries(2).state).toBe("inactive");
+
+    act(() => chartApi!.clearChartHighlight());
+    act(() => chartApi!.highlightItems([hc.getChartSeries(0).name, hc.getChartSeries(2).name]));
+
+    expect(hc.getChartSeries(0).state).toBe("");
+    expect(hc.getChartSeries(1).state).toBe("inactive");
+    expect(hc.getChartSeries(2).state).toBe("");
+  });
+
+  test("highlightItems should only highlight the specified point in a pie chart", () => {
+    let chartApi: CoreChartProps.ChartAPI | null = null;
+    renderChart({ highcharts, options: { series: pieSeries }, callback: (api) => (chartApi = api) });
+
+    const series = hc.getChartSeries(0);
+
+    act(() => chartApi!.highlightItems([series.points[1].name]));
+
+    expect(hc.getChartPoint(0, 0).state).toBe(undefined);
+    expect(hc.getChartPoint(0, 1).state).toBe("hover");
+    expect(hc.getChartPoint(0, 2).state).toBe(undefined);
+
+    act(() => chartApi!.clearChartHighlight());
+    act(() => chartApi!.highlightItems([series.points[0].name, series.points[2].name]));
+
+    expect(hc.getChartPoint(0, 0).state).toBe("hover");
+    expect(hc.getChartPoint(0, 1).state).toBe("");
+    expect(hc.getChartPoint(0, 2).state).toBe("hover");
+  });
 });

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 { KeyCode } from "@cloudscape-design/component-toolkit/internal";
 
-import { createChartWrapper, renderChart } from "./common";
+import { createChartWrapper, hoverLegendItem, renderChart } from "./common";
 import { HighchartsTestHelper } from "./highcharts-utils";
 
 import legendTestClasses from "../../../lib/components/internal/components/chart-legend/test-classes/styles.selectors.js";
@@ -451,4 +452,23 @@ describe("CoreChart: legend", () => {
       expect(wrapper.findLegend()!.findItemTooltip()!.findHeader()!.getElement().textContent).toBe("P2");
     });
   });
+
+  test("calls onLegendItemHighlight when hovering over a legend item", () => {
+    const onLegendItemHighlight = vi.fn();
+    const { wrapper } = renderChart({ highcharts, options: { series }, onLegendItemHighlight });
+
+    hoverLegendItem(0, wrapper);
+
+    expect(onLegendItemHighlight).toHaveBeenCalledWith(
+      expect.objectContaining({
+        item: expect.objectContaining({
+          id: "L1",
+          name: "L1",
+          marker: expect.any(Object),
+          visible: expect.any(Boolean),
+          highlighted: expect.any(Boolean),
+        }),
+      }),
+    );
+  });
 });

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

@@ -38,6 +38,7 @@ describe("CoreChart: rendering", () => {
     expect(callback).toHaveBeenCalledWith({
       chart: hc.getChart(),
       highcharts,
+      highlightItems: expect.any(Function),
       setItemsVisible: expect.any(Function),
       highlightChartPoint: expect.any(Function),
       highlightChartGroup: expect.any(Function),

src/core/__tests__/common.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { act, useState } from "react";
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 
 import "@cloudscape-design/components/test-utils/dom";
 import { CoreChartProps } from "../../../lib/components/core/interfaces";
@@ -33,6 +33,7 @@ export function StatefulChart(props: CoreChartProps) {
 }
 
 type TestProps = Partial<CoreChartProps> & {
+  onLegendItemHighlight?: () => void;
   i18nProvider?: Record<string, Record<string, string>>;
 };
 
@@ -86,3 +87,8 @@ export function toggleLegendItem(index: number, wrapper: BaseChartWrapper = crea
   const modifier = Math.random() > 0.5 ? { metaKey: true } : { ctrlKey: true };
   act(() => wrapper.findLegend()!.findItems()[index].click(modifier));
 }
+export function hoverLegendItem(index: number, wrapper: BaseChartWrapper = createChartWrapper()) {
+  act(() => {
+    fireEvent.mouseOver(wrapper.findLegend()!.findItems()[index].getElement());
+  });
+}

src/core/chart-api/index.tsx

@@ -208,6 +208,9 @@ export class ChartAPI {
 
   // Callbacks used for hover and keyboard navigation, and also exposed to the public API to give the ability
   // to highlight and show tooltip for the given point or group manually.
+  public highlightChartItems = (itemIds: readonly string[]) => {
+    this.chartExtraHighlight.highlightChartItems(itemIds);
+  };
   public setItemsVisible = (visibleItemsIds: readonly string[], { isApiCall }: { isApiCall: boolean }) => {
     this.chartExtraLegend.onItemVisibilityChange(visibleItemsIds, { isApiCall });
   };
@@ -228,6 +231,7 @@ export class ChartAPI {
   };
   public get publicApi() {
     return {
+      highlightItems: (itemIds: readonly string[]) => this.highlightChartItems(itemIds),
       setItemsVisible: (visibleItemIds: readonly string[]) => this.setItemsVisible(visibleItemIds, { isApiCall: true }),
       highlightChartPoint: (point: Highcharts.Point) => this.highlightChartPoint(point, { isApiCall: true }),
       highlightChartGroup: (group: readonly Highcharts.Point[]) => this.highlightChartGroup(group, { isApiCall: true }),

src/core/chart-core.tsx

@@ -58,6 +58,7 @@ export function InternalCoreChart({
   filter,
   keyboardNavigation = true,
   onHighlight,
+  onLegendItemHighlight,
   onClearHighlight,
   onVisibleItemsChange,
   visibleItems,
@@ -307,6 +308,7 @@ export function InternalCoreChart({
               position={legendPosition}
               api={api}
               i18nStrings={i18nStrings}
+              onItemHighlight={onLegendItemHighlight}
               getLegendTooltipContent={rest.getLegendTooltipContent}
             />
           ) : null

src/core/components/core-legend.tsx

@@ -14,13 +14,15 @@ export function ChartLegend({
   actions,
   position,
   i18nStrings,
+  onItemHighlight,
   getLegendTooltipContent,
 }: {
   api: ChartAPI;
   title?: string;
   actions?: React.ReactNode;
   position: "bottom" | "side";
   i18nStrings?: BaseI18nStrings;
+  onItemHighlight?: (detail: CoreChartProps.LegendItemHighlightDetail) => void;
   getLegendTooltipContent?: CoreChartProps.GetLegendTooltipContent;
 }) {
   const i18n = useInternalI18n("[charts]");
@@ -39,8 +41,11 @@ export function ChartLegend({
       actions={actions}
       position={position}
       onItemVisibilityChange={api.onItemVisibilityChange}
-      onItemHighlightEnter={(itemId) => api.onHighlightChartItems([itemId])}
       onItemHighlightExit={api.onClearChartItemsHighlight}
+      onItemHighlightEnter={(item) => {
+        api.onHighlightChartItems([item.id]);
+        onItemHighlight?.({ item });
+      }}
       getTooltipContent={(props) => {
         if (isChartTooltipPinned) {
           return null;

src/core/interfaces.ts

@@ -341,6 +341,10 @@ export interface CoreChartProps
    * IDs of visible series or points.
    */
   visibleItems?: readonly string[];
+  /**
+   * Called when a legend item is highlighted.
+   */
+  onLegendItemHighlight?: (detail: CoreChartProps.LegendItemHighlightDetail) => void;
   /**
    * Called when series/points visibility changes due to user interaction with legend or filter.
    */
@@ -379,6 +383,7 @@ export namespace CoreChartProps {
   export interface ChartAPI {
     chart: Highcharts.Chart;
     highcharts: typeof Highcharts;
+    highlightItems(itemIds: readonly string[]): void;
     setItemsVisible(itemIds: readonly string[]): void;
     highlightChartPoint(point: Highcharts.Point): void;
     highlightChartGroup(group: readonly Highcharts.Point[]): void;
@@ -440,6 +445,9 @@ export namespace CoreChartProps {
     items: TooltipContentItem[];
   }
 
+  export interface LegendItemHighlightDetail {
+    item: LegendItem;
+  }
   export interface VisibleItemsChangeDetail {
     items: readonly LegendItem[];
     isApiCall: boolean;

src/internal/components/chart-legend/index.tsx

@@ -32,7 +32,7 @@ export interface ChartLegendProps {
   ariaLabel?: string;
   actions?: React.ReactNode;
   position: "bottom" | "side";
-  onItemHighlightEnter: (itemId: string) => void;
+  onItemHighlightEnter: (item: LegendItem) => void;
   onItemHighlightExit: () => void;
   onItemVisibilityChange: (hiddenItems: string[]) => void;
   getTooltipContent: (props: GetLegendTooltipContentProps) => null | LegendTooltipContent;
@@ -120,7 +120,7 @@ export const ChartLegend = ({
     const item = items.find((item) => item.id === itemId);
     if (item?.visible) {
       highlightControl.cancelPrevious();
-      onItemHighlightEnter(itemId);
+      onItemHighlightEnter(item);
     }
   };
   const clearHighlight = () => {