@cloudscape-design/chart-components 1.0.0

package/core/chart-api/chart-extra-highlight.js

@@ -0,0 +1,205 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as Styles from "../../internal/chart-styles";
+import { getSeriesData } from "../../internal/utils/series-data";
+import { getPointId, getSeriesId } from "../utils";
+const SET_STATE_LOCK = Symbol("awsui-set-state-lock");
+// Chart helper that mutes Highcharts default highlighting behavior and offers custom methods
+// for customized control over series and points highlighting.
+export class ChartExtraHighlight {
+    constructor(context) {
+        // We keep track of the previously highlighted series and points to recover highlight state if needed.
+        // The recover is necessary if the chart was re-rendered while the highlighting is set. For example,
+        // when triggered a state update from the consumer-provided tooltip footer action.
+        this.seriesState = new Map();
+        this.pointState = new Map();
+        // The method highlights specified series or points (by id). It is used when hovering over the legend items.
+        this.highlightChartItems = (itemIds) => {
+            for (const s of this.context.chart().series) {
+                // In pie charts it is the points, not series, that are shown in the legend, and can be highlighted.
+                if (s.type === "pie") {
+                    for (const p of s.data) {
+                        if (itemIds.includes(getPointId(p))) {
+                            this.setPointState(p, "hover");
+                        }
+                    }
+                }
+                else {
+                    this.setSeriesState(s, itemIds.includes(getSeriesId(s)) ? "" : "inactive");
+                }
+            }
+            setPlotLinesState(this.context.chart(), (lineId) => itemIds.includes(lineId));
+        };
+        // This method is similar to the above, but it takes a group of points. The cartesian chart points
+        // do not have IDs, so we match points and series by their references instead. This is used to control
+        // highlight state when chart elements are hovered or focused.
+        this.highlightChartGroup = (points) => {
+            const includedPoints = new Set();
+            const includedSeries = new Set();
+            const includedSeriesIds = new Set();
+            points.forEach((point) => {
+                includedPoints.add(point);
+                includedSeries.add(point.series);
+                includedSeriesIds.add(getSeriesId(point.series));
+            });
+            for (const s of this.context.chart().series) {
+                this.setSeriesState(s, includedSeries.has(s) ? "" : "inactive");
+                // For column series we ensure only one group/stack that matches selected X is highlighted.
+                // See: https://github.com/highcharts/highcharts/issues/23076.
+                if (s.type === "column") {
+                    for (const d of s.data) {
+                        this.setPointState(d, includedPoints.has(d) ? "" : "inactive");
+                    }
+                }
+            }
+            setPlotLinesState(this.context.chart(), (lineId) => includedSeriesIds.has(lineId));
+        };
+        // This method is similar to the above, but it takes a single point. This is used for point highlighting
+        // in cartesian charts, and for pie chart segments.
+        this.highlightChartPoint = (point) => {
+            for (const s of this.context.chart().series) {
+                this.setSeriesState(s, point.series === s ? "hover" : "inactive");
+                // For pie charts it is important that the hover actions comes last, as otherwise the segment's highlight "halo"
+                // is removed whenever any segment is made inactive.
+                if (s.type === "pie") {
+                    for (const d of s.data) {
+                        this.setPointState(d, "inactive");
+                    }
+                    this.setPointState(point, "hover");
+                }
+                // For column series we ensure only one group/stack that matches selected X is highlighted.
+                else if (s.type === "column") {
+                    for (const d of s.data) {
+                        this.setPointState(d, d === point ? "hover" : "inactive");
+                    }
+                }
+            }
+            // Highlight linked series when target series is highlighted.
+            this.context
+                .chart()
+                .series.filter((series) => series === point.series)
+                .forEach((series) => series.linkedSeries.forEach((linked) => this.setSeriesState(linked, "hover")));
+            // Highlight threshold series plot lines.
+            setPlotLinesState(this.context.chart(), (lineId) => lineId === getSeriesId(point.series));
+        };
+        // Removes dimmed state from all series and points.
+        this.clearChartItemsHighlight = () => {
+            var _a;
+            for (const s of (_a = this.context.chart().series) !== null && _a !== void 0 ? _a : []) {
+                this.setSeriesState(s, "");
+                for (const p of s.data) {
+                    this.setPointState(p, "");
+                }
+            }
+            setPlotLinesState(this.context.chart(), () => true);
+        };
+        // The points normally don't have ID's or names. In that case, the points are identified by
+        // the combination of x and y values. This is only used to restore the highlight state after re-render.
+        this.getPointKey = (point) => {
+            var _a, _b;
+            return (_a = point.options.id) !== null && _a !== void 0 ? _a : `${point.x}:${(_b = point.y) !== null && _b !== void 0 ? _b : "null"}`;
+        };
+        // We replace `setState` method on Highcharts series and points with a custom implementation, that
+        // prevents Highcharts from altering it. Instead, every state change is explicitly done by the helper.
+        this.overrideStateSetters = () => {
+            for (const s of this.context.chart().series) {
+                // We ensure the replacement is done only once by assigning a custom property to the function.
+                // If the property is present - it means the method was already replaced.
+                if (s.setState[SET_STATE_LOCK] === undefined) {
+                    const original = s.setState;
+                    // The overridden setState method does nothing unless setState[SET_STATE_LOCK] === false.
+                    const overridden = (...args) => {
+                        if (overridden[SET_STATE_LOCK] === false) {
+                            original.call(s, ...args);
+                        }
+                    };
+                    overridden[SET_STATE_LOCK] = true;
+                    s.setState = overridden;
+                }
+                for (const d of getSeriesData(s.data)) {
+                    if (d.setState[SET_STATE_LOCK] === undefined) {
+                        const original = d.setState;
+                        // The overridden setState method does nothing unless setState[SET_STATE_LOCK] === false.
+                        const overridden = (...args) => {
+                            if (overridden[SET_STATE_LOCK] === false) {
+                                original.call(d, ...args);
+                            }
+                        };
+                        overridden[SET_STATE_LOCK] = true;
+                        d.setState = overridden;
+                    }
+                }
+            }
+        };
+        this.context = context;
+    }
+    onChartRender() {
+        this.overrideStateSetters();
+        this.restoreHighlightState();
+    }
+    // Makes the specified series active or dimmed.
+    setSeriesState(series, state) {
+        series.setState[SET_STATE_LOCK] = false;
+        series.setState(state, false);
+        this.updateStoredSeriesState(series, state);
+        series.setState[SET_STATE_LOCK] = true;
+    }
+    // Makes the specified point active or dimmed.
+    setPointState(point, state) {
+        point.setState[SET_STATE_LOCK] = false;
+        point.setState(state, true);
+        this.updateStoredPointState(point, state);
+        point.setState[SET_STATE_LOCK] = true;
+    }
+    // Restores series and points highlight state after chart's re-render.
+    restoreHighlightState() {
+        var _a;
+        const inactiveSeriesIds = new Set();
+        for (const s of this.context.chart().series) {
+            const prevState = this.seriesState.get(getSeriesId(s));
+            if (prevState) {
+                this.setSeriesState(s, prevState);
+            }
+            if (prevState === "inactive") {
+                inactiveSeriesIds.add(getSeriesId(s));
+            }
+            for (const p of getSeriesData(s.data)) {
+                const prevState = (_a = this.pointState.get(getSeriesId(s))) === null || _a === void 0 ? void 0 : _a.get(this.getPointKey(p));
+                if (prevState) {
+                    this.setPointState(p, prevState);
+                }
+            }
+        }
+        setPlotLinesState(this.context.chart(), (lineId) => !inactiveSeriesIds.has(lineId));
+    }
+    updateStoredSeriesState(series, state) {
+        this.seriesState.set(getSeriesId(series), state);
+    }
+    updateStoredPointState(point, state) {
+        var _a;
+        const pointStateInSeries = (_a = this.pointState.get(getSeriesId(point.series))) !== null && _a !== void 0 ? _a : new Map();
+        pointStateInSeries.set(this.getPointKey(point), state);
+        this.pointState.set(getSeriesId(point.series), pointStateInSeries);
+    }
+}
+// The cartesian chart thresholds are represented with invisible series and visible plot lines.
+// When the corresponding series are highlighted, we need to make the not matching plot lines dimmed.
+function setPlotLinesState(chart, isActive) {
+    iteratePlotLines(chart, (lineId, line) => { var _a; return (_a = line.svgElem) === null || _a === void 0 ? void 0 : _a.attr({ opacity: !isActive(lineId) ? Styles.dimmedPlotLineOpacity : 1 }); });
+}
+function iteratePlotLines(chart, cb) {
+    var _a;
+    (_a = chart.axes) === null || _a === void 0 ? void 0 : _a.forEach((axis) => {
+        // The Highcharts `Axis.plotLinesAndBands` API is not covered with TS.
+        if ("plotLinesAndBands" in axis && Array.isArray(axis.plotLinesAndBands)) {
+            axis.plotLinesAndBands.forEach((line) => {
+                // We explicitly do not touch plot lines that have no ID, assuming those are decorative.
+                // Only plot lines that define ID can be dimmed when certain series get highlighted.
+                if (line.options.id) {
+                    cb(line.options.id, line);
+                }
+            });
+        }
+    });
+}
+//# sourceMappingURL=chart-extra-highlight.js.map

package/core/chart-api/chart-extra-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-extra-highlight.js","sourceRoot":"","sources":["../../../../src/core/chart-api/chart-extra-highlight.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type Highcharts from \"highcharts\";\n\nimport * as Styles from \"../../internal/chart-styles\";\nimport { getSeriesData } from \"../../internal/utils/series-data\";\nimport { getPointId, getSeriesId } from \"../utils\";\nimport { ChartExtraContext } from \"./chart-extra-context\";\n\nconst SET_STATE_LOCK = Symbol(\"awsui-set-state-lock\");\n\ntype SeriesSetStateWithLock = Highcharts.Series[\"setState\"] & { [SET_STATE_LOCK]: boolean };\ntype PointSetStateWithLock = Highcharts.Point[\"setState\"] & { [SET_STATE_LOCK]: boolean };\n\n// Chart helper that mutes Highcharts default highlighting behavior and offers custom methods\n// for customized control over series and points highlighting.\nexport class ChartExtraHighlight {\n  private context: ChartExtraContext;\n  constructor(context: ChartExtraContext) {\n    this.context = context;\n  }\n\n  // We keep track of the previously highlighted series and points to recover highlight state if needed.\n  // The recover is necessary if the chart was re-rendered while the highlighting is set. For example,\n  // when triggered a state update from the consumer-provided tooltip footer action.\n  private seriesState = new Map<string, \"\" | Highcharts.SeriesStateValue>();\n  private pointState = new Map<string, Map<string, \"\" | Highcharts.PointStateValue>>();\n\n  public onChartRender() {\n    this.overrideStateSetters();\n    this.restoreHighlightState();\n  }\n\n  // The method highlights specified series or points (by id). It is used when hovering over the legend items.\n  public highlightChartItems = (itemIds: readonly string[]) => {\n    for (const s of this.context.chart().series) {\n      // In pie charts it is the points, not series, that are shown in the legend, and can be highlighted.\n      if (s.type === \"pie\") {\n        for (const p of s.data) {\n          if (itemIds.includes(getPointId(p))) {\n            this.setPointState(p, \"hover\");\n          }\n        }\n      } else {\n        this.setSeriesState(s, itemIds.includes(getSeriesId(s)) ? \"\" : \"inactive\");\n      }\n    }\n    setPlotLinesState(this.context.chart(), (lineId) => itemIds.includes(lineId));\n  };\n\n  // This method is similar to the above, but it takes a group of points. The cartesian chart points\n  // do not have IDs, so we match points and series by their references instead. This is used to control\n  // highlight state when chart elements are hovered or focused.\n  public highlightChartGroup = (points: readonly Highcharts.Point[]) => {\n    const includedPoints = new Set<Highcharts.Point>();\n    const includedSeries = new Set<Highcharts.Series>();\n    const includedSeriesIds = new Set<string>();\n    points.forEach((point) => {\n      includedPoints.add(point);\n      includedSeries.add(point.series);\n      includedSeriesIds.add(getSeriesId(point.series));\n    });\n    for (const s of this.context.chart().series) {\n      this.setSeriesState(s, includedSeries.has(s) ? \"\" : \"inactive\");\n      // For column series we ensure only one group/stack that matches selected X is highlighted.\n      // See: https://github.com/highcharts/highcharts/issues/23076.\n      if (s.type === \"column\") {\n        for (const d of s.data) {\n          this.setPointState(d, includedPoints.has(d) ? \"\" : \"inactive\");\n        }\n      }\n    }\n    setPlotLinesState(this.context.chart(), (lineId) => includedSeriesIds.has(lineId));\n  };\n\n  // This method is similar to the above, but it takes a single point. This is used for point highlighting\n  // in cartesian charts, and for pie chart segments.\n  public highlightChartPoint = (point: Highcharts.Point) => {\n    for (const s of this.context.chart().series) {\n      this.setSeriesState(s, point.series === s ? \"hover\" : \"inactive\");\n      // For pie charts it is important that the hover actions comes last, as otherwise the segment's highlight \"halo\"\n      // is removed whenever any segment is made inactive.\n      if (s.type === \"pie\") {\n        for (const d of s.data) {\n          this.setPointState(d, \"inactive\");\n        }\n        this.setPointState(point, \"hover\");\n      }\n      // For column series we ensure only one group/stack that matches selected X is highlighted.\n      else if (s.type === \"column\") {\n        for (const d of s.data) {\n          this.setPointState(d, d === point ? \"hover\" : \"inactive\");\n        }\n      }\n    }\n    // Highlight linked series when target series is highlighted.\n    this.context\n      .chart()\n      .series.filter((series) => series === point.series)\n      .forEach((series) => series.linkedSeries.forEach((linked) => this.setSeriesState(linked, \"hover\")));\n    // Highlight threshold series plot lines.\n    setPlotLinesState(this.context.chart(), (lineId) => lineId === getSeriesId(point.series));\n  };\n\n  // Removes dimmed state from all series and points.\n  public clearChartItemsHighlight = () => {\n    for (const s of this.context.chart().series ?? []) {\n      this.setSeriesState(s, \"\");\n      for (const p of s.data) {\n        this.setPointState(p, \"\");\n      }\n    }\n    setPlotLinesState(this.context.chart(), () => true);\n  };\n\n  // Makes the specified series active or dimmed.\n  private setSeriesState(series: Highcharts.Series, state: \"\" | Highcharts.SeriesStateValue) {\n    (series.setState as SeriesSetStateWithLock)[SET_STATE_LOCK] = false;\n    series.setState(state, false);\n    this.updateStoredSeriesState(series, state);\n    (series.setState as SeriesSetStateWithLock)[SET_STATE_LOCK] = true;\n  }\n\n  // Makes the specified point active or dimmed.\n  private setPointState(point: Highcharts.Point, state: \"\" | Highcharts.PointStateValue) {\n    (point.setState as PointSetStateWithLock)[SET_STATE_LOCK] = false;\n    point.setState(state, true);\n    this.updateStoredPointState(point, state);\n    (point.setState as PointSetStateWithLock)[SET_STATE_LOCK] = true;\n  }\n\n  // Restores series and points highlight state after chart's re-render.\n  private restoreHighlightState() {\n    const inactiveSeriesIds = new Set<string>();\n    for (const s of this.context.chart().series) {\n      const prevState = this.seriesState.get(getSeriesId(s));\n      if (prevState) {\n        this.setSeriesState(s, prevState);\n      }\n      if (prevState === \"inactive\") {\n        inactiveSeriesIds.add(getSeriesId(s));\n      }\n      for (const p of getSeriesData(s.data)) {\n        const prevState = this.pointState.get(getSeriesId(s))?.get(this.getPointKey(p));\n        if (prevState) {\n          this.setPointState(p, prevState);\n        }\n      }\n    }\n    setPlotLinesState(this.context.chart(), (lineId) => !inactiveSeriesIds.has(lineId));\n  }\n\n  private updateStoredSeriesState(series: Highcharts.Series, state: \"\" | Highcharts.SeriesStateValue) {\n    this.seriesState.set(getSeriesId(series), state);\n  }\n\n  private updateStoredPointState(point: Highcharts.Point, state: \"\" | Highcharts.PointStateValue) {\n    const pointStateInSeries = this.pointState.get(getSeriesId(point.series)) ?? new Map();\n    pointStateInSeries.set(this.getPointKey(point), state);\n    this.pointState.set(getSeriesId(point.series), pointStateInSeries);\n  }\n\n  // The points normally don't have ID's or names. In that case, the points are identified by\n  // the combination of x and y values. This is only used to restore the highlight state after re-render.\n  private getPointKey = (point: Highcharts.Point) => {\n    return point.options.id ?? `${point.x}:${point.y ?? \"null\"}`;\n  };\n\n  // We replace `setState` method on Highcharts series and points with a custom implementation, that\n  // prevents Highcharts from altering it. Instead, every state change is explicitly done by the helper.\n  private overrideStateSetters = () => {\n    for (const s of this.context.chart().series) {\n      // We ensure the replacement is done only once by assigning a custom property to the function.\n      // If the property is present - it means the method was already replaced.\n      if ((s.setState as SeriesSetStateWithLock)[SET_STATE_LOCK] === undefined) {\n        const original = s.setState;\n        // The overridden setState method does nothing unless setState[SET_STATE_LOCK] === false.\n        const overridden: Highcharts.Series[\"setState\"] = (...args) => {\n          if ((overridden as SeriesSetStateWithLock)[SET_STATE_LOCK] === false) {\n            original.call(s, ...args);\n          }\n        };\n        (overridden as SeriesSetStateWithLock)[SET_STATE_LOCK] = true;\n        s.setState = overridden;\n      }\n      for (const d of getSeriesData(s.data)) {\n        if ((d.setState as PointSetStateWithLock)[SET_STATE_LOCK] === undefined) {\n          const original = d.setState;\n          // The overridden setState method does nothing unless setState[SET_STATE_LOCK] === false.\n          const overridden: Highcharts.Point[\"setState\"] = (...args) => {\n            if ((overridden as PointSetStateWithLock)[SET_STATE_LOCK] === false) {\n              original.call(d, ...args);\n            }\n          };\n          (overridden as PointSetStateWithLock)[SET_STATE_LOCK] = true;\n          d.setState = overridden;\n        }\n      }\n    }\n  };\n}\n\n// The cartesian chart thresholds are represented with invisible series and visible plot lines.\n// When the corresponding series are highlighted, we need to make the not matching plot lines dimmed.\nfunction setPlotLinesState(chart: Highcharts.Chart, isActive: (lineId: string) => boolean) {\n  iteratePlotLines(chart, (lineId, line) =>\n    line.svgElem?.attr({ opacity: !isActive(lineId) ? Styles.dimmedPlotLineOpacity : 1 }),\n  );\n}\n\nfunction iteratePlotLines(chart: Highcharts.Chart, cb: (lineId: string, line: Highcharts.PlotLineOrBand) => void) {\n  chart.axes?.forEach((axis) => {\n    // The Highcharts `Axis.plotLinesAndBands` API is not covered with TS.\n    if (\"plotLinesAndBands\" in axis && Array.isArray(axis.plotLinesAndBands)) {\n      axis.plotLinesAndBands.forEach((line: Highcharts.PlotLineOrBand) => {\n        // We explicitly do not touch plot lines that have no ID, assuming those are decorative.\n        // Only plot lines that define ID can be dimmed when certain series get highlighted.\n        if (line.options.id) {\n          cb(line.options.id, line);\n        }\n      });\n    }\n  });\n}\n"]}

package/core/chart-api/chart-extra-legend.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import type Highcharts from "highcharts";
+import { ChartSeriesMarkerType } from "../../internal/components/series-marker";
+import AsyncStore from "../../internal/utils/async-store";
+import { CoreChartProps } from "../interfaces";
+import { ChartExtraContext } from "./chart-extra-context";
+export interface ReactiveLegendState {
+    items: readonly CoreChartProps.LegendItem[];
+}
+export declare class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {
+    private context;
+    private visibilityMode;
+    constructor(context: ChartExtraContext);
+    onChartRender: () => void;
+    updateItemsVisibility: () => void;
+    onItemVisibilityChange: (visibleItems: readonly string[], { isApiCall }: {
+        isApiCall: boolean;
+    }) => void;
+    onHighlightPoint: (point: Highcharts.Point) => void;
+    onHighlightGroup: (group: readonly Highcharts.Point[]) => void;
+    onHighlightItems: (highlightedItems: readonly string[]) => void;
+    onClearHighlight: () => void;
+    private initLegend;
+    private updateLegendItems;
+    private markersCache;
+    renderMarker(type: ChartSeriesMarkerType, color: string, visible?: boolean): React.ReactNode;
+}

package/core/chart-api/chart-extra-legend.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChartSeriesMarker } from "../../internal/components/series-marker";
+import { fireNonCancelableEvent } from "../../internal/events";
+import AsyncStore from "../../internal/utils/async-store";
+import { getChartSeries } from "../../internal/utils/chart-series";
+import { isEqualArrays } from "../../internal/utils/utils";
+import { getChartLegendItems, getPointId, getSeriesId } from "../utils";
+// Chart helper that implements custom legend behaviors.
+export class ChartExtraLegend extends AsyncStore {
+    constructor(context) {
+        super({ items: [] });
+        this.visibilityMode = "external";
+        this.onChartRender = () => {
+            this.initLegend();
+            this.updateItemsVisibility();
+        };
+        // If visible items are explicitly provided, we use them to update visibility of chart's series or points (by ID).
+        // If not provided, the visibility state is managed internally.
+        this.updateItemsVisibility = () => {
+            if (this.context.state.visibleItems) {
+                this.visibilityMode = "external";
+                updateItemsVisibility(this.context.chart(), this.get().items, this.context.state.visibleItems);
+            }
+            else {
+                this.visibilityMode = "internal";
+            }
+        };
+        // A callback to be called when items visibility changes from the outside or from the legend.
+        this.onItemVisibilityChange = (visibleItems, { isApiCall }) => {
+            const currentItems = this.get().items;
+            const updatedItems = currentItems.map((i) => ({ ...i, visible: visibleItems.includes(i.id) }));
+            if (this.visibilityMode === "internal") {
+                this.updateLegendItems(updatedItems);
+                updateItemsVisibility(this.context.chart(), this.get().items, visibleItems);
+            }
+            fireNonCancelableEvent(this.context.handlers.onVisibleItemsChange, { items: updatedItems, isApiCall });
+        };
+        // Updates legend highlight state when chart's point is highlighted.
+        this.onHighlightPoint = (point) => {
+            const visibleItems = point.series.type === "pie" ? [getPointId(point)] : [getSeriesId(point.series)];
+            this.onHighlightItems(visibleItems);
+        };
+        // Updates legend highlight state when chart's group of points is highlighted.
+        this.onHighlightGroup = (group) => {
+            const visibleItems = group.map((point) => getSeriesId(point.series));
+            this.onHighlightItems(visibleItems);
+        };
+        // Updates legend highlight state given an explicit list of item IDs. This is used to update state
+        // when a legend item gets hovered or focused.
+        this.onHighlightItems = (highlightedItems) => {
+            const currentItems = this.get().items;
+            const updatedItems = currentItems.map(({ ...i }) => ({ ...i, highlighted: highlightedItems.includes(i.id) }));
+            this.updateLegendItems(updatedItems);
+        };
+        // Clears legend highlight state.
+        this.onClearHighlight = () => {
+            const nextItems = this.get().items.map(({ ...item }) => ({ ...item, highlighted: false }));
+            this.updateLegendItems(nextItems);
+        };
+        this.initLegend = () => {
+            const itemSpecs = getChartLegendItems(this.context.chart());
+            const legendItems = itemSpecs.map(({ id, name, color, markerType, visible }) => {
+                const marker = this.renderMarker(markerType, color, visible);
+                return { id, name, marker, visible, highlighted: false };
+            });
+            this.updateLegendItems(legendItems);
+        };
+        this.updateLegendItems = (nextItems) => {
+            function isLegendItemsEqual(a, b) {
+                return (a.id === b.id &&
+                    a.name === b.name &&
+                    a.marker === b.marker &&
+                    a.visible === b.visible &&
+                    a.highlighted === b.highlighted);
+            }
+            if (!isEqualArrays(this.get().items, nextItems, isLegendItemsEqual)) {
+                this.set(() => ({ items: nextItems }));
+            }
+        };
+        // The chart markers derive from type and color and are cached to avoid unnecessary renders,
+        // and allow comparing them by reference.
+        this.markersCache = new Map();
+        this.context = context;
+    }
+    renderMarker(type, color, visible = true) {
+        var _a;
+        const key = `${type}:${color}:${visible}`;
+        const marker = (_a = this.markersCache.get(key)) !== null && _a !== void 0 ? _a : _jsx(ChartSeriesMarker, { type: type, color: color, visible: visible });
+        this.markersCache.set(key, marker);
+        return marker;
+    }
+}
+function updateItemsVisibility(chart, legendItems, visibleItems) {
+    const availableItemsSet = new Set(legendItems.map((i) => i.id));
+    const visibleItemsSet = new Set(visibleItems);
+    let updatesCounter = 0;
+    const getVisibleAndCount = (id, visible) => {
+        const nextVisible = visibleItemsSet.has(id);
+        updatesCounter += nextVisible !== visible ? 1 : 0;
+        return nextVisible;
+    };
+    for (const series of getChartSeries(chart.series)) {
+        if (availableItemsSet.has(getSeriesId(series))) {
+            series.setVisible(getVisibleAndCount(getSeriesId(series), series.visible), false);
+        }
+        for (const point of series.data) {
+            if (typeof point.setVisible === "function" && availableItemsSet.has(getPointId(point))) {
+                point.setVisible(getVisibleAndCount(getPointId(point), point.visible), false);
+            }
+        }
+    }
+    // The call `seriesOrPoint.setVisible(visible, false)` does not trigger the chart redraw, as it would otherwise
+    // impact the performance. Instead, we trigger the redraw explicitly, if any change to visibility has been made.
+    if (updatesCounter > 0) {
+        chart.redraw();
+    }
+}
+//# sourceMappingURL=chart-extra-legend.js.map

package/core/chart-api/chart-extra-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-extra-legend.js","sourceRoot":"","sources":["../../../../src/core/chart-api/chart-extra-legend.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type Highcharts from \"highcharts\";\n\nimport { ChartSeriesMarker, ChartSeriesMarkerType } from \"../../internal/components/series-marker\";\nimport { fireNonCancelableEvent } from \"../../internal/events\";\nimport AsyncStore from \"../../internal/utils/async-store\";\nimport { getChartSeries } from \"../../internal/utils/chart-series\";\nimport { isEqualArrays } from \"../../internal/utils/utils\";\nimport { CoreChartProps } from \"../interfaces\";\nimport { getChartLegendItems, getPointId, getSeriesId } from \"../utils\";\nimport { ChartExtraContext } from \"./chart-extra-context\";\n\n// The reactive state is used to propagate changes in legend items to the core legend React component.\nexport interface ReactiveLegendState {\n  items: readonly CoreChartProps.LegendItem[];\n}\n\n// Chart helper that implements custom legend behaviors.\nexport class ChartExtraLegend extends AsyncStore<ReactiveLegendState> {\n  private context: ChartExtraContext;\n  private visibilityMode: \"internal\" | \"external\" = \"external\";\n\n  constructor(context: ChartExtraContext) {\n    super({ items: [] });\n    this.context = context;\n  }\n\n  public onChartRender = () => {\n    this.initLegend();\n    this.updateItemsVisibility();\n  };\n\n  // If visible items are explicitly provided, we use them to update visibility of chart's series or points (by ID).\n  // If not provided, the visibility state is managed internally.\n  public updateItemsVisibility = () => {\n    if (this.context.state.visibleItems) {\n      this.visibilityMode = \"external\";\n      updateItemsVisibility(this.context.chart(), this.get().items, this.context.state.visibleItems);\n    } else {\n      this.visibilityMode = \"internal\";\n    }\n  };\n\n  // A callback to be called when items visibility changes from the outside or from the legend.\n  public onItemVisibilityChange = (visibleItems: readonly string[], { isApiCall }: { isApiCall: boolean }) => {\n    const currentItems = this.get().items;\n    const updatedItems = currentItems.map((i) => ({ ...i, visible: visibleItems.includes(i.id) }));\n    if (this.visibilityMode === \"internal\") {\n      this.updateLegendItems(updatedItems);\n      updateItemsVisibility(this.context.chart(), this.get().items, visibleItems);\n    }\n    fireNonCancelableEvent(this.context.handlers.onVisibleItemsChange, { items: updatedItems, isApiCall });\n  };\n\n  // Updates legend highlight state when chart's point is highlighted.\n  public onHighlightPoint = (point: Highcharts.Point) => {\n    const visibleItems = point.series.type === \"pie\" ? [getPointId(point)] : [getSeriesId(point.series)];\n    this.onHighlightItems(visibleItems);\n  };\n\n  // Updates legend highlight state when chart's group of points is highlighted.\n  public onHighlightGroup = (group: readonly Highcharts.Point[]) => {\n    const visibleItems = group.map((point) => getSeriesId(point.series));\n    this.onHighlightItems(visibleItems);\n  };\n\n  // Updates legend highlight state given an explicit list of item IDs. This is used to update state\n  // when a legend item gets hovered or focused.\n  public onHighlightItems = (highlightedItems: readonly string[]) => {\n    const currentItems = this.get().items;\n    const updatedItems = currentItems.map(({ ...i }) => ({ ...i, highlighted: highlightedItems.includes(i.id) }));\n    this.updateLegendItems(updatedItems);\n  };\n\n  // Clears legend highlight state.\n  public onClearHighlight = () => {\n    const nextItems = this.get().items.map(({ ...item }) => ({ ...item, highlighted: false }));\n    this.updateLegendItems(nextItems);\n  };\n\n  private initLegend = () => {\n    const itemSpecs = getChartLegendItems(this.context.chart());\n    const legendItems = itemSpecs.map(({ id, name, color, markerType, visible }) => {\n      const marker = this.renderMarker(markerType, color, visible);\n      return { id, name, marker, visible, highlighted: false };\n    });\n    this.updateLegendItems(legendItems);\n  };\n\n  private updateLegendItems = (nextItems: CoreChartProps.LegendItem[]) => {\n    function isLegendItemsEqual(a: CoreChartProps.LegendItem, b: CoreChartProps.LegendItem) {\n      return (\n        a.id === b.id &&\n        a.name === b.name &&\n        a.marker === b.marker &&\n        a.visible === b.visible &&\n        a.highlighted === b.highlighted\n      );\n    }\n    if (!isEqualArrays(this.get().items, nextItems, isLegendItemsEqual)) {\n      this.set(() => ({ items: nextItems }));\n    }\n  };\n\n  // The chart markers derive from type and color and are cached to avoid unnecessary renders,\n  // and allow comparing them by reference.\n  private markersCache = new Map<string, React.ReactNode>();\n  public renderMarker(type: ChartSeriesMarkerType, color: string, visible = true): React.ReactNode {\n    const key = `${type}:${color}:${visible}`;\n    const marker = this.markersCache.get(key) ?? <ChartSeriesMarker type={type} color={color} visible={visible} />;\n    this.markersCache.set(key, marker);\n    return marker;\n  }\n}\n\nfunction updateItemsVisibility(\n  chart: Highcharts.Chart,\n  legendItems: readonly CoreChartProps.LegendItem[],\n  visibleItems?: readonly string[],\n) {\n  const availableItemsSet = new Set(legendItems.map((i) => i.id));\n  const visibleItemsSet = new Set(visibleItems);\n\n  let updatesCounter = 0;\n  const getVisibleAndCount = (id: string, visible: boolean) => {\n    const nextVisible = visibleItemsSet.has(id);\n    updatesCounter += nextVisible !== visible ? 1 : 0;\n    return nextVisible;\n  };\n\n  for (const series of getChartSeries(chart.series)) {\n    if (availableItemsSet.has(getSeriesId(series))) {\n      series.setVisible(getVisibleAndCount(getSeriesId(series), series.visible), false);\n    }\n    for (const point of series.data) {\n      if (typeof point.setVisible === \"function\" && availableItemsSet.has(getPointId(point))) {\n        point.setVisible(getVisibleAndCount(getPointId(point), point.visible), false);\n      }\n    }\n  }\n\n  // The call `seriesOrPoint.setVisible(visible, false)` does not trigger the chart redraw, as it would otherwise\n  // impact the performance. Instead, we trigger the redraw explicitly, if any change to visibility has been made.\n  if (updatesCounter > 0) {\n    chart.redraw();\n  }\n}\n"]}

package/core/chart-api/chart-extra-navigation.d.ts

@@ -0,0 +1,84 @@
+import type Highcharts from "highcharts";
+import { ChartExtraContext } from "./chart-extra-context";
+export interface ChartExtraNavigationHandlers {
+    onFocusChart(): void;
+    onFocusPoint(point: Highcharts.Point, group: readonly Highcharts.Point[]): void;
+    onFocusGroup(group: readonly Highcharts.Point[]): void;
+    onBlur(): void;
+    onActivatePoint(point: Highcharts.Point, group: readonly Highcharts.Point[]): void;
+    onActivateGroup(group: readonly Highcharts.Point[]): void;
+}
+export type FocusedState = FocusedStateChart | FocusedStateGroup | FocusedStatePoint;
+interface FocusedStateChart {
+    type: "chart";
+}
+interface FocusedStateGroup {
+    type: "group";
+    group: readonly Highcharts.Point[];
+}
+interface FocusedStatePoint {
+    type: "point";
+    point: Highcharts.Point;
+    group: readonly Highcharts.Point[];
+}
+export declare class ChartExtraNavigation {
+    private context;
+    private handlers;
+    private focusOutline;
+    private applicationElement;
+    private focusedState;
+    private ignoreFocus;
+    constructor(context: ChartExtraContext, handlers: ChartExtraNavigationHandlers);
+    onChartDestroy(): void;
+    setApplication: (element: null | HTMLElement) => void;
+    focusApplication(point: null | Highcharts.Point, group: readonly Highcharts.Point[]): void;
+    announceChart(ariaLabel: string): void;
+    announceElement(ariaLabel: string, pinned: boolean): void;
+    private announce;
+    private onFocus;
+    private onBlur;
+    private onKeyDown;
+    private onKeyDownChart;
+    private onKeyDownGroup;
+    private onKeyDownPoint;
+    private moveToFirstGroup;
+    private moveToLastGroup;
+    private moveToNextGroup;
+    private moveToPrevGroup;
+    private moveToParentGroup;
+    private moveToChart;
+    private moveToFirstInGroup;
+    private moveToLastInGroup;
+    private moveToPrevInGroup;
+    private moveToNextInGroup;
+    private moveToFirstInSeries;
+    private moveToLastInSeries;
+    private moveToNextInSeries;
+    private moveToPrevInSeries;
+    private moveToNextPageGroup;
+    private moveToPrevPageGroup;
+    private moveToNextPageInSeries;
+    private moveToPrevPageInSeries;
+    private activateGroup;
+    private activatePoint;
+    private focusChart;
+    private focusGroup;
+    private focusPoint;
+    private get allX();
+    private getAllXInSeries;
+    private getPointsByX;
+    private findMatchingGroup;
+    private findFirstGroup;
+    private findLastGroup;
+    private findNextGroup;
+    private findPrevGroup;
+    private findNextPageGroup;
+    private findPrevPageGroup;
+    private findFirstPointInSeries;
+    private findLastPointInSeries;
+    private findNextPointInSeries;
+    private findPrevPointInSeries;
+    private findNextPagePointInSeries;
+    private findPrevPagePointInSeries;
+}
+export {};