@cloudscape-design/chart-components 1.0.0

package/core/chart-api/index.js

@@ -0,0 +1,383 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef } from "react";
+import { fireNonCancelableEvent } from "../../internal/events";
+import { getChartSeries } from "../../internal/utils/chart-series";
+import { getSeriesData } from "../../internal/utils/series-data";
+import { getChartAccessibleDescription, getGroupAccessibleDescription, getPointAccessibleDescription, isXThreshold, } from "../utils";
+import { ChartExtraAxisTitles } from "./chart-extra-axis-titles";
+import { createChartContext, updateChartContext } from "./chart-extra-context";
+import { ChartExtraHighlight } from "./chart-extra-highlight";
+import { ChartExtraLegend } from "./chart-extra-legend";
+import { ChartExtraNavigation } from "./chart-extra-navigation";
+import { ChartExtraNodata } from "./chart-extra-nodata";
+import { ChartExtraPointer } from "./chart-extra-pointer";
+import { ChartExtraTooltip } from "./chart-extra-tooltip";
+// The API helper injects Cloudscape custom behaviors, and returns the API instance that comes with
+// reactive state and handlers to be assigned as Highcharts options, used by Cloudscape components
+// (tooltip, legend, and other), or exposed as public core chart API.
+export function useChartAPI(settings, handlers, state) {
+    // The API helper instance defines many pieces of internal state with different lifecycles, most
+    // of which are not be invalidated when the hook re-renders, or properties change. That is why we
+    // create the instance once, when the component is mounted.
+    const api = useRef(new ChartAPI(settings, handlers, state)).current;
+    // The consumer-defined properties can still change during the component lifecycle. We propagate the
+    // changes by updating the helper's context directly. That is fine for most of the properties, as those
+    // are only used in event-based callbacks, and require nothing to recompute when there is a change.
+    useEffect(() => {
+        api.context.settings = settings;
+        api.context.handlers = handlers;
+        api.context.state = state;
+    });
+    // The only property that does require notifying the helper when it changes, is the visible items state.
+    // We stringify the visible items array so that it is compared by value, and the effect is only fired when
+    // there is an actual change to the visible items, including items order.
+    const visibleItemsIndex = state.visibleItems ? state.visibleItems.join("::") : null;
+    useEffect(() => {
+        // When visibleItemsIndex === null, it means the visible items state is managed internally inside the helper,
+        // so no need to call the API method.
+        // The api.updateItemsVisibility() can only be used once the chart is initialized, so we check for api.ready.
+        // The initialization happens after the first React render, so the chart is expected to not be ready when the
+        // effect is called for the first time. This is fine, as the initial visibility state is handled by the helper.
+        // The code below is needed to notify the helper any time the visible items state changes.
+        if (api.ready && visibleItemsIndex !== null) {
+            api.updateItemsVisibility();
+        }
+    }, [api, visibleItemsIndex]);
+    // Run cleanup code when the component unmounts.
+    useEffect(() => () => api.onChartDestroy(), [api]);
+    return api;
+}
+// The main chart helper that provides customizations to Highcharts, including tooltip, legend, keyboard navigation, and more.
+// It is split into multiple dedicated (chart-extra) helpers (highlight, tooltip, navigation, and other), most of which define
+// internal state, and have a lifecycle based on Highcharts render event.
+// The helper code has a shared context, which includes the consumer settings, visible items state, and derived state, computed
+// from Highcharts.Chart on each render, and reused for downstream computations for better efficiency.
+export class ChartAPI {
+    constructor(settings, handlers, state) {
+        this.context = createChartContext();
+        this.chartExtraHighlight = new ChartExtraHighlight(this.context);
+        this.chartExtraTooltip = new ChartExtraTooltip(this.context);
+        this.chartExtraNavigation = new ChartExtraNavigation(this.context, this.navigationHandlers);
+        this.chartExtraPointer = new ChartExtraPointer(this.context, this.pointerHandlers);
+        this.chartExtraLegend = new ChartExtraLegend(this.context);
+        this.chartExtraNodata = new ChartExtraNodata(this.context);
+        this.chartExtraAxisTitles = new ChartExtraAxisTitles(this.context);
+        // There is no cleanup or destroy event in Highcharts options, so we define a custom one
+        // to be used when the React component unmounts.
+        this.onChartDestroy = () => {
+            this.chartExtraNavigation.onChartDestroy();
+            this.chartExtraPointer.onChartDestroy();
+            this.chartExtraTooltip.onChartDestroy();
+        };
+        // References to SVG elements used for tooltip placement.
+        this.getTargetTrack = this.chartExtraTooltip.getTargetTrack.bind(this.chartExtraTooltip);
+        this.getGroupTrack = this.chartExtraTooltip.getGroupTrack.bind(this.chartExtraTooltip);
+        // Legend marker renderer.
+        this.renderMarker = this.chartExtraLegend.renderMarker.bind(this.chartExtraLegend);
+        // Callbacks assigned to the tooltip.
+        this.onMouseEnterTooltip = this.chartExtraPointer.onMouseEnterTooltip.bind(this.chartExtraPointer);
+        this.onMouseLeaveTooltip = this.chartExtraPointer.onMouseLeaveTooltip.bind(this.chartExtraPointer);
+        this.onDismissTooltip = (outsideClick) => {
+            const { pinned, point, group } = this.chartExtraTooltip.get();
+            if (pinned) {
+                this.chartExtraTooltip.hideTooltip();
+                // The chart highlight is preserved while the tooltip is pinned. We need to clear it manually here, for the case
+                // when the pointer lands outside the chart after the tooltip is dismissed, so that the mouse-out event won't fire.
+                this.clearChartHighlight({ isApiCall: false });
+                // If the tooltip was not dismissed by clicking outside, we bring focus to the point or group, that was
+                // associated with the tooltip, so that we user can continue keyboard navigation from that spot.
+                if (!outsideClick) {
+                    this.chartExtraNavigation.focusApplication(point, group);
+                }
+            }
+        };
+        // Reference to the role="application" element used for navigation.
+        this.setApplication = this.chartExtraNavigation.setApplication.bind(this.chartExtraNavigation);
+        // A callback to notify the helper when items visibility state changes.
+        this.updateItemsVisibility = this.chartExtraLegend.updateItemsVisibility.bind(this.chartExtraLegend);
+        // A callback used by the legend and filter components when series/segments visibility changes.
+        this.onItemVisibilityChange = (items) => this.chartExtraLegend.onItemVisibilityChange(items, { isApiCall: false });
+        // Callbacks used by the legend component when items highlight state changes.
+        this.onHighlightChartItems = (itemIds) => {
+            if (!this.isTooltipPinned) {
+                this.chartExtraHighlight.highlightChartItems(itemIds);
+                this.chartExtraLegend.onHighlightItems(itemIds);
+            }
+        };
+        this.onClearChartItemsHighlight = () => {
+            if (!this.isTooltipPinned) {
+                this.chartExtraHighlight.clearChartItemsHighlight();
+                this.chartExtraLegend.onClearHighlight();
+            }
+        };
+        // 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.
+        this.highlightChartItems = (itemIds) => {
+            if (!this.isTooltipPinned) {
+                this.chartExtraHighlight.highlightChartItems(itemIds);
+                this.chartExtraLegend.onHighlightItems(itemIds);
+            }
+        };
+        this.setItemsVisible = (visibleItemsIds, { isApiCall }) => {
+            this.chartExtraLegend.onItemVisibilityChange(visibleItemsIds, { isApiCall });
+        };
+        this.highlightChartPoint = (point, { isApiCall }) => {
+            if (!this.isTooltipPinned) {
+                this.highlightActions(point, { isApiCall });
+            }
+        };
+        this.highlightChartGroup = (group, { isApiCall }) => {
+            if (!this.isTooltipPinned) {
+                this.highlightActions(group, { isApiCall });
+            }
+        };
+        this.clearChartHighlight = ({ isApiCall }) => {
+            if (!this.isTooltipPinned) {
+                this.clearHighlightActions({ isApiCall });
+            }
+        };
+        this.pinTooltipOnPoint = (point) => {
+            const currentPoint = this.chartExtraTooltip.get().point;
+            const currentGroup = this.chartExtraTooltip.get().group;
+            const positionsMatch = isPointsPositionsEqual(currentPoint !== null && currentPoint !== void 0 ? currentPoint : currentGroup[0], point);
+            // If the previously hovered and now clicked positions match, and the the tooltip wasn't
+            // dismissed just a moment ago, we make the tooltip pinned in this position.
+            if (positionsMatch && !this.chartExtraTooltip.tooltipLock) {
+                this.highlightActions(point, { isApiCall: false });
+                this.chartExtraTooltip.pinTooltip();
+            }
+            // If the tooltip was just dismissed, it means this happened by clicking somewhere in the plot area.
+            // If the clicked position differs from the one that was pinned - we show tooltip in the new position.
+            else if (!positionsMatch && this.chartExtraTooltip.tooltipLock) {
+                this.highlightActions(point, { isApiCall: false, overrideTooltipLock: true });
+            }
+        };
+        this.pinTooltipOnGroup = (group) => {
+            const currentPoint = this.chartExtraTooltip.get().point;
+            const currentGroup = this.chartExtraTooltip.get().group;
+            const positionsMatch = isPointsPositionsEqual(currentPoint !== null && currentPoint !== void 0 ? currentPoint : currentGroup[0], group[0]);
+            // If the previously hovered and now clicked positions match, and the the tooltip wasn't
+            // dismissed just a moment ago, we make the tooltip pinned in this position.
+            if (positionsMatch && !this.chartExtraTooltip.tooltipLock) {
+                this.highlightActions(group, { isApiCall: false });
+                this.chartExtraTooltip.pinTooltip();
+            }
+            // If the tooltip was just dismissed, it means this happened by clicking somewhere in the plot area.
+            // If the clicked position differs from the one that was pinned - we show tooltip in the new position.
+            else if (!positionsMatch && this.chartExtraTooltip.tooltipLock) {
+                this.highlightActions(group, { isApiCall: false, overrideTooltipLock: true });
+            }
+        };
+        this.clearHighlightActions = ({ isApiCall }) => {
+            if (!this.isTooltipPinned) {
+                // Update Highcharts elements state.
+                this.chartExtraHighlight.clearChartItemsHighlight();
+                // Update tooltip and legend state.
+                this.chartExtraTooltip.hideTooltip();
+                this.chartExtraLegend.onClearHighlight();
+                // Notify the consumer that a clear-highlight action was made.
+                fireNonCancelableEvent(this.context.handlers.onClearHighlight, { isApiCall });
+            }
+        };
+        this.context.settings = settings;
+        this.context.handlers = handlers;
+        this.context.state = state;
+    }
+    // The ready() returns true if the chart is initialized and helper methods are safe to use (after Highcharts triggers onChartRender).
+    // Using any of the helper methods before the chart is initialized will result in an exception.
+    get ready() {
+        return !!this.context.chartOrNull;
+    }
+    // The Highcharts options to be merged with the rest of the configuration defined in the chart-core.
+    getOptions() {
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const chartAPI = this;
+        const onChartLoad = function () {
+            chartAPI.chartExtraPointer.onChartLoad(this);
+        };
+        const onChartRender = function () {
+            updateChartContext(chartAPI.context, this);
+            chartAPI.chartExtraHighlight.onChartRender();
+            chartAPI.chartExtraLegend.onChartRender();
+            chartAPI.chartExtraNodata.onChartRender();
+            chartAPI.chartExtraAxisTitles.onChartRender();
+            chartAPI.handleDestroyedPoints();
+            chartAPI.resetColorCounter();
+            chartAPI.showMarkersForIsolatedPoints();
+        };
+        const onChartClick = function () {
+            chartAPI.chartExtraPointer.onChartClick(this.hoverPoint);
+        };
+        const onSeriesPointMouseOver = function () {
+            chartAPI.chartExtraPointer.onSeriesPointMouseOver(this);
+        };
+        const onSeriesPointMouseOut = function () {
+            chartAPI.chartExtraPointer.onSeriesPointMouseOut();
+        };
+        const onSeriesPointClick = function () {
+            chartAPI.chartExtraPointer.onSeriesPointClick(this);
+        };
+        return {
+            onChartLoad,
+            onChartRender,
+            onChartClick,
+            onSeriesPointMouseOver,
+            onSeriesPointMouseOut,
+            onSeriesPointClick,
+        };
+    }
+    // Reactive state stores.
+    get tooltipStore() {
+        return this.chartExtraTooltip;
+    }
+    get legendStore() {
+        return this.chartExtraLegend;
+    }
+    get nodataStore() {
+        return this.chartExtraNodata;
+    }
+    get axisTitlesStore() {
+        return this.chartExtraAxisTitles;
+    }
+    get publicApi() {
+        return {
+            highlightItems: (itemIds) => this.highlightChartItems(itemIds),
+            setItemsVisible: (visibleItemIds) => this.setItemsVisible(visibleItemIds, { isApiCall: true }),
+            highlightChartPoint: (point) => this.highlightChartPoint(point, { isApiCall: true }),
+            highlightChartGroup: (group) => this.highlightChartGroup(group, { isApiCall: true }),
+            clearChartHighlight: () => this.clearChartHighlight({ isApiCall: true }),
+        };
+    }
+    // A set of callbacks required for keyboard navigation.
+    get navigationHandlers() {
+        return {
+            onFocusChart: () => {
+                this.clearChartHighlight({ isApiCall: false });
+                this.chartExtraNavigation.announceChart(getChartAccessibleDescription(this.context.chart()));
+            },
+            onFocusGroup: (group) => {
+                this.highlightActions(group, { isApiCall: false, overrideTooltipLock: true });
+                this.chartExtraNavigation.announceElement(getGroupAccessibleDescription(group), false);
+            },
+            onFocusPoint: (point) => {
+                const labels = this.context.settings.labels;
+                this.highlightActions(point, { isApiCall: false, overrideTooltipLock: true });
+                this.chartExtraNavigation.announceElement(getPointAccessibleDescription(point, labels), false);
+            },
+            onBlur: () => this.clearChartHighlight({ isApiCall: false }),
+            onActivateGroup: () => {
+                const current = this.chartExtraTooltip.get();
+                if (current.group.length > 0) {
+                    this.chartExtraTooltip.pinTooltip();
+                    this.chartExtraNavigation.announceElement(getGroupAccessibleDescription(current.group), true);
+                }
+            },
+            onActivatePoint: () => {
+                const current = this.chartExtraTooltip.get();
+                if (current.point) {
+                    const labels = this.context.settings.labels;
+                    this.chartExtraTooltip.pinTooltip();
+                    this.chartExtraNavigation.announceElement(getPointAccessibleDescription(current.point, labels), true);
+                }
+            },
+        };
+    }
+    // A set of callbacks required for pointer navigation.
+    get pointerHandlers() {
+        return {
+            onPointHover: (point) => {
+                this.highlightChartPoint(point, { isApiCall: false });
+            },
+            onGroupHover: (group) => {
+                this.highlightChartGroup(group, { isApiCall: false });
+            },
+            onHoverLost: () => {
+                this.clearChartHighlight({ isApiCall: false });
+            },
+            onPointClick: (point) => {
+                this.pinTooltipOnPoint(point);
+            },
+            onGroupClick: (group) => {
+                this.pinTooltipOnGroup(group);
+            },
+        };
+    }
+    // Area- or line series can be defined with just a single point, or include missing data (y=null) in such
+    // a way, that certain points become isolated. As we prefer the markers to not be shown for area- and line
+    // series by default, those points become invisible, unless hovered. To fix this, we use the function below,
+    // that finds isolates points and overrides the marker.enabled configuration for those.
+    // See: https://github.com/highcharts/highcharts/issues/1210.
+    showMarkersForIsolatedPoints() {
+        var _a, _b, _c, _d, _e;
+        let shouldRedraw = false;
+        for (const s of this.context.chart().series) {
+            const seriesData = getSeriesData(s.data);
+            for (let i = 0; i < seriesData.length; i++) {
+                const isEligibleSeries = !isXThreshold(s) && s.type !== "scatter" && !((_a = seriesData[i].options.marker) === null || _a === void 0 ? void 0 : _a.enabled);
+                if (isEligibleSeries &&
+                    (((_b = seriesData[i - 1]) === null || _b === void 0 ? void 0 : _b.y) === undefined || ((_c = seriesData[i - 1]) === null || _c === void 0 ? void 0 : _c.y) === null) &&
+                    (((_d = seriesData[i + 1]) === null || _d === void 0 ? void 0 : _d.y) === undefined || ((_e = seriesData[i + 1]) === null || _e === void 0 ? void 0 : _e.y) === null)) {
+                    seriesData[i].update({ marker: { enabled: true } }, false);
+                    shouldRedraw = true;
+                }
+            }
+        }
+        if (shouldRedraw) {
+            this.context.chart().redraw();
+        }
+    }
+    // Highcharts sometimes destroys points upon re-rendering. As result, the already stored points can get
+    // replaced by `{ destroyed: true }`. This can affect the tooltip state, making the component crash when
+    // obtaining data from points, or making it hidden yet pinned, so not visible on hover until a click is made.
+    // To prevent these issues, on each render we check for destroyed points in the tooltip state, and proactively
+    // hide the tooltip if found. The behavior is only observed during the initial chart loading, and is not expected
+    // to cause UX issues with the tooltip being closed unexpectedly.
+    // See: https://github.com/highcharts/highcharts/issues/23175.
+    handleDestroyedPoints() {
+        const tooltipState = this.chartExtraTooltip.get();
+        if (tooltipState.group.some((p) => !p.series)) {
+            this.chartExtraTooltip.hideTooltip();
+        }
+    }
+    // We reset color counter so that when a series is removed and then added back - it will
+    // have the same color as before, not the next one in the color sequence.
+    // See: https://github.com/highcharts/highcharts/issues/23077.
+    resetColorCounter() {
+        const chart = this.context.chart();
+        if ("colorCounter" in chart && typeof chart.colorCounter === "number") {
+            chart.colorCounter = getChartSeries(chart.series).length;
+        }
+    }
+    highlightActions(target, { isApiCall, overrideTooltipLock }) {
+        const point = Array.isArray(target) ? null : target;
+        const group = Array.isArray(target) ? target : this.context.derived.getPointsByX(target.x);
+        if (!this.isTooltipPinned) {
+            // Update Highcharts elements state.
+            if (point) {
+                this.chartExtraHighlight.highlightChartPoint(point);
+            }
+            else {
+                this.chartExtraHighlight.highlightChartGroup(group);
+            }
+            // Update tooltip and legend state.
+            if (point) {
+                this.chartExtraLegend.onHighlightPoint(point);
+                this.chartExtraTooltip.showTooltipOnPoint(point, group, overrideTooltipLock);
+            }
+            else {
+                this.chartExtraLegend.onHighlightGroup(group);
+                this.chartExtraTooltip.showTooltipOnGroup(group, overrideTooltipLock);
+            }
+            // Notify the consumer that a highlight action was made.
+            fireNonCancelableEvent(this.context.handlers.onHighlight, { point, group, isApiCall });
+        }
+    }
+    get isTooltipPinned() {
+        return this.chartExtraTooltip.get().pinned;
+    }
+}
+function isPointsPositionsEqual(current, next) {
+    return (current === null || current === void 0 ? void 0 : current.x) === (next === null || next === void 0 ? void 0 : next.x) && (current === null || current === void 0 ? void 0 : current.y) === (next === null || next === void 0 ? void 0 : next.y);
+}
+//# sourceMappingURL=index.js.map

package/core/chart-api/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/chart-api/index.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 { useEffect, useRef } from \"react\";\nimport type Highcharts from \"highcharts\";\n\nimport { fireNonCancelableEvent } from \"../../internal/events\";\nimport { ReadonlyAsyncStore } from \"../../internal/utils/async-store\";\nimport { getChartSeries } from \"../../internal/utils/chart-series\";\nimport { getSeriesData } from \"../../internal/utils/series-data\";\nimport { Writeable } from \"../../internal/utils/utils\";\nimport {\n  getChartAccessibleDescription,\n  getGroupAccessibleDescription,\n  getPointAccessibleDescription,\n  isXThreshold,\n} from \"../utils\";\nimport { ChartExtraAxisTitles, ReactiveAxisTitlesState } from \"./chart-extra-axis-titles\";\nimport { ChartExtraContext, createChartContext, updateChartContext } from \"./chart-extra-context\";\nimport { ChartExtraHighlight } from \"./chart-extra-highlight\";\nimport { ChartExtraLegend, ReactiveLegendState } from \"./chart-extra-legend\";\nimport { ChartExtraNavigation, ChartExtraNavigationHandlers } from \"./chart-extra-navigation\";\nimport { ChartExtraNodata, ReactiveNodataState } from \"./chart-extra-nodata\";\nimport { ChartExtraPointer, ChartExtraPointerHandlers } from \"./chart-extra-pointer\";\nimport { ChartExtraTooltip, ReactiveTooltipState } from \"./chart-extra-tooltip\";\n\n// The API helper injects Cloudscape custom behaviors, and returns the API instance that comes with\n// reactive state and handlers to be assigned as Highcharts options, used by Cloudscape components\n// (tooltip, legend, and other), or exposed as public core chart API.\nexport function useChartAPI(\n  settings: ChartExtraContext.Settings,\n  handlers: ChartExtraContext.Handlers,\n  state: ChartExtraContext.State,\n) {\n  // The API helper instance defines many pieces of internal state with different lifecycles, most\n  // of which are not be invalidated when the hook re-renders, or properties change. That is why we\n  // create the instance once, when the component is mounted.\n  const api = useRef(new ChartAPI(settings, handlers, state)).current;\n  // The consumer-defined properties can still change during the component lifecycle. We propagate the\n  // changes by updating the helper's context directly. That is fine for most of the properties, as those\n  // are only used in event-based callbacks, and require nothing to recompute when there is a change.\n  useEffect(() => {\n    api.context.settings = settings;\n    api.context.handlers = handlers;\n    api.context.state = state;\n  });\n\n  // The only property that does require notifying the helper when it changes, is the visible items state.\n  // We stringify the visible items array so that it is compared by value, and the effect is only fired when\n  // there is an actual change to the visible items, including items order.\n  const visibleItemsIndex = state.visibleItems ? state.visibleItems.join(\"::\") : null;\n  useEffect(() => {\n    // When visibleItemsIndex === null, it means the visible items state is managed internally inside the helper,\n    // so no need to call the API method.\n    // The api.updateItemsVisibility() can only be used once the chart is initialized, so we check for api.ready.\n    // The initialization happens after the first React render, so the chart is expected to not be ready when the\n    // effect is called for the first time. This is fine, as the initial visibility state is handled by the helper.\n    // The code below is needed to notify the helper any time the visible items state changes.\n    if (api.ready && visibleItemsIndex !== null) {\n      api.updateItemsVisibility();\n    }\n  }, [api, visibleItemsIndex]);\n\n  // Run cleanup code when the component unmounts.\n  useEffect(() => () => api.onChartDestroy(), [api]);\n\n  return api;\n}\n\n// The main chart helper that provides customizations to Highcharts, including tooltip, legend, keyboard navigation, and more.\n// It is split into multiple dedicated (chart-extra) helpers (highlight, tooltip, navigation, and other), most of which define\n// internal state, and have a lifecycle based on Highcharts render event.\n// The helper code has a shared context, which includes the consumer settings, visible items state, and derived state, computed\n// from Highcharts.Chart on each render, and reused for downstream computations for better efficiency.\nexport class ChartAPI {\n  public context = createChartContext();\n  private chartExtraHighlight = new ChartExtraHighlight(this.context);\n  private chartExtraTooltip = new ChartExtraTooltip(this.context);\n  private chartExtraNavigation = new ChartExtraNavigation(this.context, this.navigationHandlers);\n  private chartExtraPointer = new ChartExtraPointer(this.context, this.pointerHandlers);\n  private chartExtraLegend = new ChartExtraLegend(this.context);\n  private chartExtraNodata = new ChartExtraNodata(this.context);\n  private chartExtraAxisTitles = new ChartExtraAxisTitles(this.context);\n\n  constructor(\n    settings: ChartExtraContext.Settings,\n    handlers: ChartExtraContext.Handlers,\n    state: ChartExtraContext.State,\n  ) {\n    this.context.settings = settings;\n    this.context.handlers = handlers;\n    this.context.state = state;\n  }\n\n  // The ready() returns true if the chart is initialized and helper methods are safe to use (after Highcharts triggers onChartRender).\n  // Using any of the helper methods before the chart is initialized will result in an exception.\n  public get ready() {\n    return !!this.context.chartOrNull;\n  }\n\n  // The Highcharts options to be merged with the rest of the configuration defined in the chart-core.\n  public getOptions() {\n    // eslint-disable-next-line @typescript-eslint/no-this-alias\n    const chartAPI = this;\n    const onChartLoad: Highcharts.ChartLoadCallbackFunction = function (this) {\n      chartAPI.chartExtraPointer.onChartLoad(this);\n    };\n    const onChartRender: Highcharts.ChartRenderCallbackFunction = function (this) {\n      updateChartContext(chartAPI.context, this);\n      chartAPI.chartExtraHighlight.onChartRender();\n      chartAPI.chartExtraLegend.onChartRender();\n      chartAPI.chartExtraNodata.onChartRender();\n      chartAPI.chartExtraAxisTitles.onChartRender();\n      chartAPI.handleDestroyedPoints();\n      chartAPI.resetColorCounter();\n      chartAPI.showMarkersForIsolatedPoints();\n    };\n    const onChartClick: Highcharts.ChartClickCallbackFunction = function () {\n      chartAPI.chartExtraPointer.onChartClick(this.hoverPoint);\n    };\n    const onSeriesPointMouseOver: Highcharts.PointMouseOverCallbackFunction = function () {\n      chartAPI.chartExtraPointer.onSeriesPointMouseOver(this);\n    };\n    const onSeriesPointMouseOut: Highcharts.PointMouseOutCallbackFunction = function () {\n      chartAPI.chartExtraPointer.onSeriesPointMouseOut();\n    };\n    const onSeriesPointClick: Highcharts.PointClickCallbackFunction = function () {\n      chartAPI.chartExtraPointer.onSeriesPointClick(this);\n    };\n    return {\n      onChartLoad,\n      onChartRender,\n      onChartClick,\n      onSeriesPointMouseOver,\n      onSeriesPointMouseOut,\n      onSeriesPointClick,\n    };\n  }\n\n  // There is no cleanup or destroy event in Highcharts options, so we define a custom one\n  // to be used when the React component unmounts.\n  public onChartDestroy = () => {\n    this.chartExtraNavigation.onChartDestroy();\n    this.chartExtraPointer.onChartDestroy();\n    this.chartExtraTooltip.onChartDestroy();\n  };\n\n  // Reactive state stores.\n  public get tooltipStore() {\n    return this.chartExtraTooltip as ReadonlyAsyncStore<ReactiveTooltipState>;\n  }\n  public get legendStore() {\n    return this.chartExtraLegend as ReadonlyAsyncStore<ReactiveLegendState>;\n  }\n  public get nodataStore() {\n    return this.chartExtraNodata as ReadonlyAsyncStore<ReactiveNodataState>;\n  }\n  public get axisTitlesStore() {\n    return this.chartExtraAxisTitles as ReadonlyAsyncStore<ReactiveAxisTitlesState>;\n  }\n\n  // References to SVG elements used for tooltip placement.\n  public getTargetTrack = this.chartExtraTooltip.getTargetTrack.bind(this.chartExtraTooltip);\n  public getGroupTrack = this.chartExtraTooltip.getGroupTrack.bind(this.chartExtraTooltip);\n\n  // Legend marker renderer.\n  public renderMarker = this.chartExtraLegend.renderMarker.bind(this.chartExtraLegend);\n\n  // Callbacks assigned to the tooltip.\n  public onMouseEnterTooltip = this.chartExtraPointer.onMouseEnterTooltip.bind(this.chartExtraPointer);\n  public onMouseLeaveTooltip = this.chartExtraPointer.onMouseLeaveTooltip.bind(this.chartExtraPointer);\n  public onDismissTooltip = (outsideClick?: boolean) => {\n    const { pinned, point, group } = this.chartExtraTooltip.get();\n    if (pinned) {\n      this.chartExtraTooltip.hideTooltip();\n      // The chart highlight is preserved while the tooltip is pinned. We need to clear it manually here, for the case\n      // when the pointer lands outside the chart after the tooltip is dismissed, so that the mouse-out event won't fire.\n      this.clearChartHighlight({ isApiCall: false });\n      // If the tooltip was not dismissed by clicking outside, we bring focus to the point or group, that was\n      // associated with the tooltip, so that we user can continue keyboard navigation from that spot.\n      if (!outsideClick) {\n        this.chartExtraNavigation.focusApplication(point, group);\n      }\n    }\n  };\n\n  // Reference to the role=\"application\" element used for navigation.\n  public setApplication = this.chartExtraNavigation.setApplication.bind(this.chartExtraNavigation);\n\n  // A callback to notify the helper when items visibility state changes.\n  public updateItemsVisibility = this.chartExtraLegend.updateItemsVisibility.bind(this.chartExtraLegend);\n\n  // A callback used by the legend and filter components when series/segments visibility changes.\n  public onItemVisibilityChange = (items: readonly string[]) =>\n    this.chartExtraLegend.onItemVisibilityChange(items, { isApiCall: false });\n\n  // Callbacks used by the legend component when items highlight state changes.\n  public onHighlightChartItems = (itemIds: readonly string[]) => {\n    if (!this.isTooltipPinned) {\n      this.chartExtraHighlight.highlightChartItems(itemIds);\n      this.chartExtraLegend.onHighlightItems(itemIds);\n    }\n  };\n  public onClearChartItemsHighlight = () => {\n    if (!this.isTooltipPinned) {\n      this.chartExtraHighlight.clearChartItemsHighlight();\n      this.chartExtraLegend.onClearHighlight();\n    }\n  };\n\n  // Callbacks used for hover and keyboard navigation, and also exposed to the public API to give the ability\n  // to highlight and show tooltip for the given point or group manually.\n  public highlightChartItems = (itemIds: readonly string[]) => {\n    if (!this.isTooltipPinned) {\n      this.chartExtraHighlight.highlightChartItems(itemIds);\n      this.chartExtraLegend.onHighlightItems(itemIds);\n    }\n  };\n  public setItemsVisible = (visibleItemsIds: readonly string[], { isApiCall }: { isApiCall: boolean }) => {\n    this.chartExtraLegend.onItemVisibilityChange(visibleItemsIds, { isApiCall });\n  };\n  public highlightChartPoint = (point: Highcharts.Point, { isApiCall }: { isApiCall: boolean }) => {\n    if (!this.isTooltipPinned) {\n      this.highlightActions(point, { isApiCall });\n    }\n  };\n  public highlightChartGroup = (group: readonly Highcharts.Point[], { isApiCall }: { isApiCall: boolean }) => {\n    if (!this.isTooltipPinned) {\n      this.highlightActions(group as Writeable<Highcharts.Point[]>, { isApiCall });\n    }\n  };\n  public clearChartHighlight = ({ isApiCall }: { isApiCall: boolean }) => {\n    if (!this.isTooltipPinned) {\n      this.clearHighlightActions({ isApiCall });\n    }\n  };\n  public get publicApi() {\n    return {\n      highlightItems: (itemIds: readonly string[]) => this.highlightChartItems(itemIds),\n      setItemsVisible: (visibleItemIds: readonly string[]) => this.setItemsVisible(visibleItemIds, { isApiCall: true }),\n      highlightChartPoint: (point: Highcharts.Point) => this.highlightChartPoint(point, { isApiCall: true }),\n      highlightChartGroup: (group: readonly Highcharts.Point[]) => this.highlightChartGroup(group, { isApiCall: true }),\n      clearChartHighlight: () => this.clearChartHighlight({ isApiCall: true }),\n    };\n  }\n\n  // A set of callbacks required for keyboard navigation.\n  private get navigationHandlers(): ChartExtraNavigationHandlers {\n    return {\n      onFocusChart: () => {\n        this.clearChartHighlight({ isApiCall: false });\n        this.chartExtraNavigation.announceChart(getChartAccessibleDescription(this.context.chart()));\n      },\n      onFocusGroup: (group: Highcharts.Point[]) => {\n        this.highlightActions(group, { isApiCall: false, overrideTooltipLock: true });\n        this.chartExtraNavigation.announceElement(getGroupAccessibleDescription(group), false);\n      },\n      onFocusPoint: (point: Highcharts.Point) => {\n        const labels = this.context.settings.labels;\n        this.highlightActions(point, { isApiCall: false, overrideTooltipLock: true });\n        this.chartExtraNavigation.announceElement(getPointAccessibleDescription(point, labels), false);\n      },\n      onBlur: () => this.clearChartHighlight({ isApiCall: false }),\n      onActivateGroup: () => {\n        const current = this.chartExtraTooltip.get();\n        if (current.group.length > 0) {\n          this.chartExtraTooltip.pinTooltip();\n          this.chartExtraNavigation.announceElement(getGroupAccessibleDescription(current.group), true);\n        }\n      },\n      onActivatePoint: () => {\n        const current = this.chartExtraTooltip.get();\n        if (current.point) {\n          const labels = this.context.settings.labels;\n          this.chartExtraTooltip.pinTooltip();\n          this.chartExtraNavigation.announceElement(getPointAccessibleDescription(current.point, labels), true);\n        }\n      },\n    };\n  }\n\n  // A set of callbacks required for pointer navigation.\n  private get pointerHandlers(): ChartExtraPointerHandlers {\n    return {\n      onPointHover: (point) => {\n        this.highlightChartPoint(point, { isApiCall: false });\n      },\n      onGroupHover: (group) => {\n        this.highlightChartGroup(group, { isApiCall: false });\n      },\n      onHoverLost: () => {\n        this.clearChartHighlight({ isApiCall: false });\n      },\n      onPointClick: (point) => {\n        this.pinTooltipOnPoint(point);\n      },\n      onGroupClick: (group) => {\n        this.pinTooltipOnGroup(group);\n      },\n    };\n  }\n\n  // Area- or line series can be defined with just a single point, or include missing data (y=null) in such\n  // a way, that certain points become isolated. As we prefer the markers to not be shown for area- and line\n  // series by default, those points become invisible, unless hovered. To fix this, we use the function below,\n  // that finds isolates points and overrides the marker.enabled configuration for those.\n  // See: https://github.com/highcharts/highcharts/issues/1210.\n  private showMarkersForIsolatedPoints() {\n    let shouldRedraw = false;\n    for (const s of this.context.chart().series) {\n      const seriesData = getSeriesData(s.data);\n      for (let i = 0; i < seriesData.length; i++) {\n        const isEligibleSeries = !isXThreshold(s) && s.type !== \"scatter\" && !seriesData[i].options.marker?.enabled;\n        if (\n          isEligibleSeries &&\n          (seriesData[i - 1]?.y === undefined || seriesData[i - 1]?.y === null) &&\n          (seriesData[i + 1]?.y === undefined || seriesData[i + 1]?.y === null)\n        ) {\n          seriesData[i].update({ marker: { enabled: true } }, false);\n          shouldRedraw = true;\n        }\n      }\n    }\n    if (shouldRedraw) {\n      this.context.chart().redraw();\n    }\n  }\n\n  // Highcharts sometimes destroys points upon re-rendering. As result, the already stored points can get\n  // replaced by `{ destroyed: true }`. This can affect the tooltip state, making the component crash when\n  // obtaining data from points, or making it hidden yet pinned, so not visible on hover until a click is made.\n  // To prevent these issues, on each render we check for destroyed points in the tooltip state, and proactively\n  // hide the tooltip if found. The behavior is only observed during the initial chart loading, and is not expected\n  // to cause UX issues with the tooltip being closed unexpectedly.\n  // See: https://github.com/highcharts/highcharts/issues/23175.\n  private handleDestroyedPoints() {\n    const tooltipState = this.chartExtraTooltip.get();\n    if (tooltipState.group.some((p) => !p.series)) {\n      this.chartExtraTooltip.hideTooltip();\n    }\n  }\n\n  // We reset color counter so that when a series is removed and then added back - it will\n  // have the same color as before, not the next one in the color sequence.\n  // See: https://github.com/highcharts/highcharts/issues/23077.\n  private resetColorCounter() {\n    const chart = this.context.chart();\n    if (\"colorCounter\" in chart && typeof chart.colorCounter === \"number\") {\n      chart.colorCounter = getChartSeries(chart.series).length;\n    }\n  }\n\n  private pinTooltipOnPoint = (point: Highcharts.Point) => {\n    const currentPoint = this.chartExtraTooltip.get().point;\n    const currentGroup = this.chartExtraTooltip.get().group;\n    const positionsMatch = isPointsPositionsEqual(currentPoint ?? currentGroup[0], point);\n\n    // If the previously hovered and now clicked positions match, and the the tooltip wasn't\n    // dismissed just a moment ago, we make the tooltip pinned in this position.\n    if (positionsMatch && !this.chartExtraTooltip.tooltipLock) {\n      this.highlightActions(point, { isApiCall: false });\n      this.chartExtraTooltip.pinTooltip();\n    }\n    // If the tooltip was just dismissed, it means this happened by clicking somewhere in the plot area.\n    // If the clicked position differs from the one that was pinned - we show tooltip in the new position.\n    else if (!positionsMatch && this.chartExtraTooltip.tooltipLock) {\n      this.highlightActions(point, { isApiCall: false, overrideTooltipLock: true });\n    }\n  };\n\n  private pinTooltipOnGroup = (group: Highcharts.Point[]) => {\n    const currentPoint = this.chartExtraTooltip.get().point;\n    const currentGroup = this.chartExtraTooltip.get().group;\n    const positionsMatch = isPointsPositionsEqual(currentPoint ?? currentGroup[0], group[0]);\n\n    // If the previously hovered and now clicked positions match, and the the tooltip wasn't\n    // dismissed just a moment ago, we make the tooltip pinned in this position.\n    if (positionsMatch && !this.chartExtraTooltip.tooltipLock) {\n      this.highlightActions(group, { isApiCall: false });\n      this.chartExtraTooltip.pinTooltip();\n    }\n    // If the tooltip was just dismissed, it means this happened by clicking somewhere in the plot area.\n    // If the clicked position differs from the one that was pinned - we show tooltip in the new position.\n    else if (!positionsMatch && this.chartExtraTooltip.tooltipLock) {\n      this.highlightActions(group, { isApiCall: false, overrideTooltipLock: true });\n    }\n  };\n\n  private highlightActions(\n    target: Highcharts.Point | Highcharts.Point[],\n    { isApiCall, overrideTooltipLock }: { isApiCall: boolean; overrideTooltipLock?: boolean },\n  ) {\n    const point = Array.isArray(target) ? null : target;\n    const group = Array.isArray(target) ? target : this.context.derived.getPointsByX(target.x);\n\n    if (!this.isTooltipPinned) {\n      // Update Highcharts elements state.\n      if (point) {\n        this.chartExtraHighlight.highlightChartPoint(point);\n      } else {\n        this.chartExtraHighlight.highlightChartGroup(group);\n      }\n\n      // Update tooltip and legend state.\n      if (point) {\n        this.chartExtraLegend.onHighlightPoint(point);\n        this.chartExtraTooltip.showTooltipOnPoint(point, group, overrideTooltipLock);\n      } else {\n        this.chartExtraLegend.onHighlightGroup(group);\n        this.chartExtraTooltip.showTooltipOnGroup(group, overrideTooltipLock);\n      }\n\n      // Notify the consumer that a highlight action was made.\n      fireNonCancelableEvent(this.context.handlers.onHighlight, { point, group, isApiCall });\n    }\n  }\n\n  private clearHighlightActions = ({ isApiCall }: { isApiCall: boolean }) => {\n    if (!this.isTooltipPinned) {\n      // Update Highcharts elements state.\n      this.chartExtraHighlight.clearChartItemsHighlight();\n\n      // Update tooltip and legend state.\n      this.chartExtraTooltip.hideTooltip();\n      this.chartExtraLegend.onClearHighlight();\n\n      // Notify the consumer that a clear-highlight action was made.\n      fireNonCancelableEvent(this.context.handlers.onClearHighlight, { isApiCall });\n    }\n  };\n\n  private get isTooltipPinned() {\n    return this.chartExtraTooltip.get().pinned;\n  }\n}\n\nfunction isPointsPositionsEqual(current?: Highcharts.Point, next?: Highcharts.Point) {\n  return current?.x === next?.x && current?.y === next?.y;\n}\n"]}

package/core/chart-container.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface ChartContainerProps {
+    chart: (height: undefined | number) => React.ReactNode;
+    verticalAxisTitle?: React.ReactNode;
+    verticalAxisTitlePlacement: "top" | "side";
+    header?: React.ReactNode;
+    filter?: React.ReactNode;
+    navigator?: React.ReactNode;
+    legend?: React.ReactNode;
+    legendBottomMaxHeight?: number;
+    legendPosition: "bottom" | "side";
+    footer?: React.ReactNode;
+    noData?: React.ReactNode;
+    fitHeight?: boolean;
+    chartHeight?: number;
+    chartMinHeight?: number;
+    chartMinWidth?: number;
+}
+export declare function ChartContainer({ chart, verticalAxisTitle, verticalAxisTitlePlacement, header, filter, footer, legend, legendPosition, legendBottomMaxHeight, navigator, noData, fitHeight, chartHeight, chartMinHeight, chartMinWidth, }: ChartContainerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/core/chart-container.js

@@ -0,0 +1,55 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useRef, useState } from "react";
+import clsx from "clsx";
+import { useResizeObserver } from "@cloudscape-design/component-toolkit/internal";
+import * as Styles from "../internal/chart-styles";
+import { DebouncedCall } from "../internal/utils/utils";
+import styles from "./styles.css.js";
+import testClasses from "./test-classes/styles.css.js";
+// Chart container implements the layout for top-level components, including chart plot, legend, and more.
+// It also implements the height- and width overflow behaviors.
+const DEFAULT_CHART_HEIGHT = 400;
+const DEFAULT_CHART_MIN_HEIGHT = 200;
+export function ChartContainer({ chart, verticalAxisTitle, verticalAxisTitlePlacement, header, filter, footer, legend, legendPosition, legendBottomMaxHeight, navigator, noData, fitHeight, chartHeight, chartMinHeight, chartMinWidth, }) {
+    const { refs, measures } = useContainerQueries();
+    // The vertical axis title is rendered above the chart, and is technically not a part of the chart plot.
+    // However, we want to include it to the chart's height computations as it does belong to the chart logically.
+    // We do so by taking the title's constant height into account, when "top" axis placement is chosen.
+    const verticalTitleOffset = Styles.verticalAxisTitleBlockSize + Styles.verticalAxisTitleMargin;
+    const heightOffset = verticalAxisTitlePlacement === "top" ? verticalTitleOffset : 0;
+    const withMinHeight = (height) => Math.max(chartMinHeight !== null && chartMinHeight !== void 0 ? chartMinHeight : DEFAULT_CHART_MIN_HEIGHT, height) - heightOffset;
+    const measuredChartHeight = withMinHeight(measures.chart - measures.header - measures.footer);
+    const effectiveChartHeight = fitHeight ? measuredChartHeight : withMinHeight(chartHeight !== null && chartHeight !== void 0 ? chartHeight : DEFAULT_CHART_HEIGHT);
+    return (_jsxs("div", { ref: refs.chart, className: clsx({
+            [styles["chart-container-fit-height"]]: fitHeight,
+            [styles["chart-container-min-width"]]: chartMinWidth !== undefined,
+        }), children: [_jsxs("div", { ref: refs.header, children: [header, filter] }), legend && legendPosition === "side" ? (_jsxs("div", { className: styles["chart-plot-and-legend-wrapper"], children: [_jsxs("div", { style: { minInlineSize: chartMinWidth !== null && chartMinWidth !== void 0 ? chartMinWidth : 0 }, className: clsx(styles["chart-plot-wrapper"], testClasses["chart-plot-wrapper"]), children: [verticalAxisTitle, chart(effectiveChartHeight), noData] }), _jsx("div", { className: styles["side-legend-container"], style: { maxBlockSize: effectiveChartHeight }, children: legend })] })) : (_jsxs("div", { style: chartMinWidth !== undefined ? { minInlineSize: chartMinWidth } : {}, className: clsx(styles["chart-plot-wrapper"], testClasses["chart-plot-wrapper"]), children: [verticalAxisTitle, chart(effectiveChartHeight), !legend || legendPosition === "bottom" ? noData : null] })), _jsxs("div", { ref: refs.footer, style: chartMinWidth !== undefined ? { minInlineSize: chartMinWidth } : {}, children: [navigator && _jsx("div", { className: testClasses["chart-navigator"], children: navigator }), legend &&
+                        legendPosition === "bottom" &&
+                        (legendBottomMaxHeight ? _jsx("div", { style: { maxHeight: `${legendBottomMaxHeight}px` }, children: legend }) : legend), footer] })] }));
+}
+// This hook combines 3 resize observer and does a small optimization to batch their updates in a single set-state.
+function useContainerQueries() {
+    const [measuresState, setMeasuresState] = useState({ ready: false, chart: 0, header: 0, footer: 0 });
+    const measuresRef = useRef({ ready: false, chart: 0, header: 0, footer: 0 });
+    const measureDebounce = useRef(new DebouncedCall()).current;
+    const setMeasure = (type, value) => {
+        measuresRef.current[type] = value;
+        measureDebounce.call(() => setMeasuresState({ ...measuresRef.current }), 0);
+    };
+    const chartMeasureRef = useRef(null);
+    const getChart = useCallback(() => chartMeasureRef.current, []);
+    useResizeObserver(getChart, (entry) => setMeasure("chart", entry.contentBoxHeight));
+    const headerMeasureRef = useRef(null);
+    const getHeader = useCallback(() => headerMeasureRef.current, []);
+    useResizeObserver(getHeader, (entry) => setMeasure("header", entry.contentBoxHeight));
+    const footerMeasureRef = useRef(null);
+    const getFooter = useCallback(() => footerMeasureRef.current, []);
+    useResizeObserver(getFooter, (entry) => setMeasure("footer", entry.contentBoxHeight));
+    return {
+        refs: { chart: chartMeasureRef, header: headerMeasureRef, footer: footerMeasureRef },
+        measures: measuresState,
+    };
+}
+//# sourceMappingURL=chart-container.js.map

package/core/chart-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-container.js","sourceRoot":"","sources":["../../../src/core/chart-container.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 { useCallback, useRef, useState } from \"react\";\nimport clsx from \"clsx\";\n\nimport { useResizeObserver } from \"@cloudscape-design/component-toolkit/internal\";\n\nimport * as Styles from \"../internal/chart-styles\";\nimport { DebouncedCall } from \"../internal/utils/utils\";\n\nimport styles from \"./styles.css.js\";\nimport testClasses from \"./test-classes/styles.css.js\";\n\n// Chart container implements the layout for top-level components, including chart plot, legend, and more.\n// It also implements the height- and width overflow behaviors.\n\nconst DEFAULT_CHART_HEIGHT = 400;\nconst DEFAULT_CHART_MIN_HEIGHT = 200;\n\ninterface ChartContainerProps {\n  // The header, footer, vertical axis title, and legend are rendered as is, and we measure the height of these components\n  // to compute the available height for the chart plot when fitHeight=true. When there is not enough vertical space, the\n  // container will ensure the overflow behavior.\n  chart: (height: undefined | number) => React.ReactNode;\n  verticalAxisTitle?: React.ReactNode;\n  verticalAxisTitlePlacement: \"top\" | \"side\";\n  header?: React.ReactNode;\n  filter?: React.ReactNode;\n  navigator?: React.ReactNode;\n  legend?: React.ReactNode;\n  legendBottomMaxHeight?: number;\n  legendPosition: \"bottom\" | \"side\";\n  footer?: React.ReactNode;\n  noData?: React.ReactNode;\n  fitHeight?: boolean;\n  chartHeight?: number;\n  chartMinHeight?: number;\n  chartMinWidth?: number;\n}\n\nexport function ChartContainer({\n  chart,\n  verticalAxisTitle,\n  verticalAxisTitlePlacement,\n  header,\n  filter,\n  footer,\n  legend,\n  legendPosition,\n  legendBottomMaxHeight,\n  navigator,\n  noData,\n  fitHeight,\n  chartHeight,\n  chartMinHeight,\n  chartMinWidth,\n}: ChartContainerProps) {\n  const { refs, measures } = useContainerQueries();\n\n  // The vertical axis title is rendered above the chart, and is technically not a part of the chart plot.\n  // However, we want to include it to the chart's height computations as it does belong to the chart logically.\n  // We do so by taking the title's constant height into account, when \"top\" axis placement is chosen.\n  const verticalTitleOffset = Styles.verticalAxisTitleBlockSize + Styles.verticalAxisTitleMargin;\n  const heightOffset = verticalAxisTitlePlacement === \"top\" ? verticalTitleOffset : 0;\n  const withMinHeight = (height: number) => Math.max(chartMinHeight ?? DEFAULT_CHART_MIN_HEIGHT, height) - heightOffset;\n  const measuredChartHeight = withMinHeight(measures.chart - measures.header - measures.footer);\n  const effectiveChartHeight = fitHeight ? measuredChartHeight : withMinHeight(chartHeight ?? DEFAULT_CHART_HEIGHT);\n  return (\n    <div\n      ref={refs.chart}\n      className={clsx({\n        [styles[\"chart-container-fit-height\"]]: fitHeight,\n        [styles[\"chart-container-min-width\"]]: chartMinWidth !== undefined,\n      })}\n    >\n      <div ref={refs.header}>\n        {header}\n        {filter}\n      </div>\n\n      {legend && legendPosition === \"side\" ? (\n        <div className={styles[\"chart-plot-and-legend-wrapper\"]}>\n          <div\n            style={{ minInlineSize: chartMinWidth ?? 0 }}\n            className={clsx(styles[\"chart-plot-wrapper\"], testClasses[\"chart-plot-wrapper\"])}\n          >\n            {verticalAxisTitle}\n            {chart(effectiveChartHeight)}\n            {noData}\n          </div>\n          <div className={styles[\"side-legend-container\"]} style={{ maxBlockSize: effectiveChartHeight }}>\n            {legend}\n          </div>\n        </div>\n      ) : (\n        <div\n          style={chartMinWidth !== undefined ? { minInlineSize: chartMinWidth } : {}}\n          className={clsx(styles[\"chart-plot-wrapper\"], testClasses[\"chart-plot-wrapper\"])}\n        >\n          {verticalAxisTitle}\n          {chart(effectiveChartHeight)}\n          {!legend || legendPosition === \"bottom\" ? noData : null}\n        </div>\n      )}\n\n      <div ref={refs.footer} style={chartMinWidth !== undefined ? { minInlineSize: chartMinWidth } : {}}>\n        {navigator && <div className={testClasses[\"chart-navigator\"]}>{navigator}</div>}\n        {legend &&\n          legendPosition === \"bottom\" &&\n          (legendBottomMaxHeight ? <div style={{ maxHeight: `${legendBottomMaxHeight}px` }}>{legend}</div> : legend)}\n        {footer}\n      </div>\n    </div>\n  );\n}\n\n// This hook combines 3 resize observer and does a small optimization to batch their updates in a single set-state.\nfunction useContainerQueries() {\n  const [measuresState, setMeasuresState] = useState({ ready: false, chart: 0, header: 0, footer: 0 });\n  const measuresRef = useRef({ ready: false, chart: 0, header: 0, footer: 0 });\n  const measureDebounce = useRef(new DebouncedCall()).current;\n  const setMeasure = (type: \"chart\" | \"header\" | \"footer\", value: number) => {\n    measuresRef.current[type] = value;\n    measureDebounce.call(() => setMeasuresState({ ...measuresRef.current }), 0);\n  };\n\n  const chartMeasureRef = useRef<HTMLDivElement>(null);\n  const getChart = useCallback(() => chartMeasureRef.current, []);\n  useResizeObserver(getChart, (entry) => setMeasure(\"chart\", entry.contentBoxHeight));\n\n  const headerMeasureRef = useRef<HTMLDivElement>(null);\n  const getHeader = useCallback(() => headerMeasureRef.current, []);\n  useResizeObserver(getHeader, (entry) => setMeasure(\"header\", entry.contentBoxHeight));\n\n  const footerMeasureRef = useRef<HTMLDivElement>(null);\n  const getFooter = useCallback(() => footerMeasureRef.current, []);\n  useResizeObserver(getFooter, (entry) => setMeasure(\"footer\", entry.contentBoxHeight));\n\n  return {\n    refs: { chart: chartMeasureRef, header: headerMeasureRef, footer: footerMeasureRef },\n    measures: measuresState,\n  };\n}\n"]}

package/core/chart-core.d.ts

@@ -0,0 +1,7 @@
+import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
+import { CoreChartProps } from "./interfaces";
+/**
+ * CoreChart is the core internal abstraction that accepts the entire set of Highcharts options along
+ * with Cloudscape props to define custom tooltip, no-data, formatters, items visibility, and more.
+ */
+export declare function InternalCoreChart({ options, ariaLabel, ariaDescription, fitHeight, chartHeight, chartMinHeight, chartMinWidth, tooltip: tooltipOptions, noData: noDataOptions, navigator, legend: legendOptions, fallback, callback, emphasizeBaseline, verticalAxisTitlePlacement, i18nStrings, className, header, footer, filter, keyboardNavigation, onHighlight, onLegendItemHighlight, onClearHighlight, onVisibleItemsChange, visibleItems, __internalRootRef, ...rest }: CoreChartProps & InternalBaseComponentProps): import("react/jsx-runtime").JSX.Element;