@cloudscape-design/chart-components 1.0.0

package/core/interfaces.d.ts

@@ -0,0 +1,436 @@
+/// <reference types="react" />
+import type Highcharts from "highcharts";
+import type * as InternalComponentTypes from "../internal/components/interfaces";
+import { type NonCancelableEventHandler } from "../internal/events";
+/**
+ * This interface includes common public chart properties, applicable for all chart types.
+ */
+export interface BaseChartOptions {
+    /**
+     * The Highcharts instance, which can be obtained using `import Highcharts from "highcharts"`.
+     * Supported Highcharts versions: 12.
+     */
+    highcharts: null | object;
+    /**
+     * Custom content that renders when `highcharts=null`. It renders a spinner if not defined.
+     */
+    fallback?: React.ReactNode;
+    /**
+     * The height of the chart plot in pixels. It does not include legend and filter.
+     */
+    chartHeight?: number;
+    /**
+     * The chart automatically adjusts its height to fill the parent container when this property is set.
+     */
+    fitHeight?: boolean;
+    /**
+     * Defines the minimum allowed height of the chart plot. Use this when `fitHeight=true` to
+     * prevent the chart plot from becoming too small to display its content. When the parent
+     * container is shorter than the minimum height, a vertical scrollbar appears automatically.
+     */
+    chartMinHeight?: number;
+    /**
+     * Defines the minimum allowed width of the chart plot. When the parent container is narrower than the
+     * minimum width, the horizontal scrollbar is automatically added.
+     */
+    chartMinWidth?: number;
+    /**
+     * Defines the ARIA label for the chart container.
+     * This property corresponds to [lang.chartContainerLabel](https://api.highcharts.com/highcharts/lang.accessibility.chartContainerLabel),
+     * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).
+     */
+    ariaLabel?: string;
+    /**
+     * Defines the ARIA description of the chart container.
+     * This property corresponds to [accessibility.description](https://api.highcharts.com/highcharts/accessibility.description),
+     * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).
+     */
+    ariaDescription?: string;
+    /**
+     * Defines chart legend options, including:
+     * * `enabled` (optional, boolean) - Hides legend when set to `false`.
+     * * `title` (optional, string) - Visible label, shown above the legend.
+     * * `actions` (optional, slot) - A slot before the legend that can be used to render custom actions.
+     */
+    legend?: BaseLegendOptions;
+    /**
+     * Defines options to represent empty, no-match, loading, and error state of the chart, including:
+     * * `statusType` (optional, "finished" | "loading" | "error") - Specifies the current status of loading data.
+     * * `empty` (optional, ReactNode) - Content displayed when the chart data is empty.
+     * * `noMatch` (optional, ReactNode) - Content displayed when there is no data to display due to the built-in filtering.
+     * * `loading` (optional, ReactNode) - Content displayed when `statusType="loading"`. If omitted, the default loading state
+     * is shown, using `i18n.loadingText` or built-in i18n.
+     * * `error` (optional, ReactNode) - Content displayed when `statusType="error"`. If omitted, the default error state
+     * is shown, using `i18n.errorText` and `i18n.recoveryText` (when `onRecoveryClick` is provided), or built-in i18n.
+     * * `onRecoveryClick` (optional, function) - Called when the user clicks the recovery button that appears when using default error
+     * state, and only if `onRecoveryClick` is provided. Use this to enable the user to retry a failed request or provide another option
+     * for the user to recover from the error.
+     */
+    noData?: BaseNoDataOptions;
+    /**
+     * Defines options for filtering in the chart, including:
+     * * `seriesFilter` (optional, boolean) - Displays default series filter at the top of the chart.
+     * * `additionalFilters` (optional, slot) - A slot for custom chart filters at the top of the chart.
+     */
+    filter?: BaseFilterOptions;
+}
+export interface BaseLegendOptions {
+    enabled?: boolean;
+    title?: string;
+    actions?: React.ReactNode;
+}
+export interface BaseNoDataOptions {
+    statusType?: "finished" | "loading" | "error";
+    empty?: React.ReactNode;
+    error?: React.ReactNode;
+    loading?: React.ReactNode;
+    noMatch?: React.ReactNode;
+    onRecoveryClick?: NonCancelableEventHandler;
+}
+export interface BaseTooltipDetail {
+    key: React.ReactNode;
+    value: React.ReactNode;
+}
+export interface BaseI18nStrings {
+    loadingText?: string;
+    errorText?: string;
+    recoveryText?: string;
+    seriesFilterLabel?: string;
+    seriesFilterPlaceholder?: string;
+    seriesFilterSelectedAriaLabel?: string;
+    legendAriaLabel?: string;
+    detailPopoverDismissAriaLabel?: string;
+    chartRoleDescription?: string;
+}
+export interface WithCartesianI18nStrings {
+    /**
+     * An object that contains all of the localized strings required by the component.
+     * @i18n
+     *
+     * Available properties:
+     * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to "loading".
+     * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to "error".
+     * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.
+     * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.
+     * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.
+     * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.
+     * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.
+     * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.
+     * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. "interactive chart".
+     * * `xAxisRoleDescription` (optional, string) - Accessible role description of the x axis, e.g. "x axis".
+     * * `yAxisRoleDescription` (optional, string) - Accessible role description of the y axis, e.g. "y axis".
+     */
+    i18nStrings?: CartesianI18nStrings;
+}
+export interface WithPieI18nStrings {
+    /**
+     * An object that contains all of the localized strings required by the component.
+     * @i18n
+     *
+     * Available properties:
+     * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to "loading".
+     * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to "error".
+     * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.
+     * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.
+     * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.
+     * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.
+     * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.
+     * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.
+     * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. "interactive chart".
+     * * `segmentRoleDescription` (optional, string) - Accessible role description of the segment.
+     */
+    i18nStrings?: PieI18nStrings;
+}
+export interface CartesianI18nStrings extends BaseI18nStrings {
+    xAxisRoleDescription?: string;
+    yAxisRoleDescription?: string;
+}
+export interface PieI18nStrings extends BaseI18nStrings {
+    segmentRoleDescription?: string;
+}
+export interface BaseFilterOptions {
+    seriesFilter?: boolean;
+    additionalFilters?: React.ReactNode;
+}
+export interface BaseTooltipPointFormatted {
+    key?: React.ReactNode;
+    value?: React.ReactNode;
+    description?: React.ReactNode;
+    expandable?: boolean;
+    subItems?: ReadonlyArray<{
+        key: React.ReactNode;
+        value: React.ReactNode;
+    }>;
+}
+export interface AreaSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "area";
+    data: readonly PointDataItemType[];
+}
+export interface AreaSplineSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "areaspline";
+    data: readonly PointDataItemType[];
+}
+export interface ColumnSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "column";
+    data: readonly PointDataItemType[];
+}
+export interface LineSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "line";
+    data: readonly PointDataItemType[];
+}
+export interface SplineSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "spline";
+    data: readonly PointDataItemType[];
+}
+export interface ScatterSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "scatter";
+    data: readonly PointDataItemType[];
+    marker?: PointMarkerOptions;
+}
+export interface ErrorBarSeriesOptions extends Omit<BaseCartesianSeriesOptions, "name"> {
+    type: "errorbar";
+    name?: string;
+    data: readonly RangeDataItemOptions[];
+    linkedTo: string;
+}
+export interface XThresholdSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "x-threshold";
+    value: number;
+}
+export interface YThresholdSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "y-threshold";
+    value: number;
+}
+export interface PieSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "pie";
+    data: readonly PieSegmentOptions[];
+}
+export interface DonutSeriesOptions extends BaseCartesianSeriesOptions {
+    type: "donut";
+    data: readonly PieSegmentOptions[];
+}
+export interface PieSegmentOptions {
+    y: number | null;
+    id?: string;
+    name: string;
+    color?: string;
+}
+export type PointDataItemType = null | number | PointDataItemOptions;
+export interface PointDataItemOptions {
+    x?: number;
+    y: number | null;
+}
+export interface RangeDataItemOptions {
+    x?: number;
+    low: number;
+    high: number;
+}
+interface BaseCartesianSeriesOptions {
+    id?: string;
+    name: string;
+    color?: string;
+}
+interface PointMarkerOptions {
+    symbol?: "circle" | "diamond" | "square" | "triangle" | "triangle-down";
+}
+export interface CoreCartesianOptions {
+    /**
+     * When set to `true`, adds a visual emphasis on the zero baseline axis.
+     */
+    emphasizeBaseline?: boolean;
+    /**
+     * Controls the placement of the vertical axis title.
+     * When set to "side", displays the title along the axis line.
+     */
+    verticalAxisTitlePlacement?: "top" | "side";
+}
+export interface CoreChartProps extends Pick<BaseChartOptions, "highcharts" | "fallback" | "fitHeight" | "chartHeight" | "chartMinHeight" | "chartMinWidth" | "ariaLabel" | "ariaDescription" | "filter" | "noData">, CoreCartesianOptions {
+    /**
+     * The Highcharts options. Cloudscape injects custom styles and settings, but all can be
+     * overridden with explicitly provided options. An exception is event handlers - those are
+     * not overridden, but merged with Cloudscape event handlers so that both are getting called.
+     */
+    options: CoreChartProps.ChartOptions;
+    /**
+     * The Cloudscape tooltip, that comes with a vertical cursor when used on cartesian series.
+     * The tooltip content is only shown when `getContent` property is defined, which is called
+     * for each visited { x, y } point.
+     */
+    tooltip?: CoreChartProps.TooltipOptions;
+    /**
+     * A custom slot above the chart plot, chart's axis title, and filter.
+     */
+    header?: CoreChartProps.HeaderOptions;
+    /**
+     * Prop for passing a custom navigation control component to be rendered with the chart.
+     * Use this property to add timeline navigation, range selectors, or other custom navigation elements.
+     */
+    navigator?: React.ReactNode;
+    /**
+     * A custom slot below the chart plot and legend.
+     */
+    footer?: CoreChartProps.FooterOptions;
+    /**
+     * Chart legend options.
+     */
+    legend?: CoreChartProps.LegendOptions;
+    /**
+     * The callback to init the chart's API when it is ready. The API includes the Highcharts chart object, and
+     * additional Cloudscape methods.
+     */
+    callback?: (chart: CoreChartProps.ChartAPI) => void;
+    /**
+     * This is used to provide a test-utils selector. Do not use this property to provide custom styles.
+     */
+    className?: string;
+    /**
+     * IDs of visible series or points.
+     */
+    visibleItems?: readonly string[];
+    /**
+     * Called when a legend item is highlighted.
+     */
+    onLegendItemHighlight?: NonCancelableEventHandler<CoreChartProps.LegendItemHighlightDetail>;
+    /**
+     * Called when series/points visibility changes due to user interaction with legend or filter.
+     */
+    onVisibleItemsChange?: NonCancelableEventHandler<CoreChartProps.VisibleItemsChangeDetail>;
+    /**
+     * Called whenever chart tooltip is rendered to provide content for tooltip's header, body, and (optional) footer.
+     */
+    getTooltipContent?: CoreChartProps.GetTooltipContent;
+    /**
+     * Called whenever a legend item is hovered to provide content for legend tooltip's header, body, and (optional) footer.
+     * If not provided, no tooltip will be displayed.
+     */
+    getLegendTooltipContent?: CoreChartProps.GetLegendTooltipContent;
+    /**
+     * Called whenever chart point or group is highlighted.
+     */
+    onHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightChangeDetail>;
+    /**
+     * Called whenever chart point or group loses highlight.
+     */
+    onClearHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightClearDetail>;
+    /**
+     * Use Cloudscape keyboard navigation.
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * An object that contains all of the localized strings required by the component.
+     * @i18n
+     */
+    i18nStrings?: CartesianI18nStrings & PieI18nStrings;
+}
+export declare namespace CoreChartProps {
+    interface ChartAPI {
+        chart: Highcharts.Chart;
+        highcharts: typeof Highcharts;
+        highlightItems(itemIds: readonly string[]): void;
+        setItemsVisible(itemIds: readonly string[]): void;
+        highlightChartPoint(point: Highcharts.Point): void;
+        highlightChartGroup(group: readonly Highcharts.Point[]): void;
+        clearChartHighlight(): void;
+    }
+    type ChartOptions = Omit<Highcharts.Options, "xAxis" | "yAxis"> & {
+        xAxis?: XAxisOptions | XAxisOptions[];
+        yAxis?: YAxisOptions | YAxisOptions[];
+    };
+    type XAxisOptions = Highcharts.XAxisOptions & {
+        valueFormatter?: (value: null | number) => string;
+    };
+    type YAxisOptions = Highcharts.YAxisOptions & {
+        valueFormatter?: (value: null | number) => string;
+    };
+    interface HeaderOptions {
+        content: React.ReactNode;
+    }
+    interface FooterOptions {
+        content: React.ReactNode;
+    }
+    interface LegendOptions extends BaseLegendOptions {
+        bottomMaxHeight?: number;
+        position?: "bottom" | "side";
+    }
+    type LegendItem = InternalComponentTypes.LegendItem;
+    type LegendTooltipContent = InternalComponentTypes.LegendTooltipContent;
+    type GetLegendTooltipContent = InternalComponentTypes.GetLegendTooltipContent;
+    type GetLegendTooltipContentProps = InternalComponentTypes.GetLegendTooltipContentProps;
+    interface TooltipOptions {
+        enabled?: boolean;
+        placement?: "middle" | "outside" | "target";
+        size?: "small" | "medium" | "large";
+    }
+    type GetTooltipContent = (props: GetTooltipContentProps) => TooltipContentRenderer;
+    interface GetTooltipContentProps {
+        point: null | Highcharts.Point;
+        group: readonly Highcharts.Point[];
+    }
+    interface TooltipContentRenderer {
+        point?: (props: TooltipPointProps) => TooltipPointFormatted;
+        details?: (props: TooltipDetailsProps) => readonly TooltipDetail[];
+        header?: (props: TooltipSlotProps) => React.ReactNode;
+        body?: (props: TooltipSlotProps) => React.ReactNode;
+        footer?: (props: TooltipSlotProps) => React.ReactNode;
+    }
+    type TooltipPointFormatted = BaseTooltipPointFormatted;
+    interface TooltipContentItem {
+        point: Highcharts.Point;
+        errorRanges: Highcharts.Point[];
+    }
+    interface TooltipPointProps {
+        item: TooltipContentItem;
+    }
+    interface TooltipSlotProps {
+        x: number;
+        items: TooltipContentItem[];
+    }
+    interface TooltipDetailsProps {
+        point: Highcharts.Point;
+    }
+    type TooltipDetail = BaseTooltipDetail;
+    interface LegendItemHighlightDetail {
+        item: LegendItem;
+    }
+    interface VisibleItemsChangeDetail {
+        items: readonly LegendItem[];
+        isApiCall: boolean;
+    }
+    interface HighlightChangeDetail {
+        point: null | Highcharts.Point;
+        group: readonly Highcharts.Point[];
+        isApiCall: boolean;
+    }
+    interface HighlightClearDetail {
+        isApiCall: boolean;
+    }
+    type I18nStrings = CartesianI18nStrings & PieI18nStrings;
+}
+export interface CoreLegendProps {
+    items: readonly CoreLegendProps.Item[];
+    title?: string;
+    ariaLabel?: string;
+    actions?: React.ReactNode;
+    alignment?: "horizontal" | "vertical";
+    onClearHighlight?: NonCancelableEventHandler;
+    onItemHighlight?: NonCancelableEventHandler<CoreLegendProps.ItemHighlightDetail>;
+    onVisibleItemsChange?: NonCancelableEventHandler<CoreLegendProps.VisibleItemsChangeDetail>;
+    getLegendTooltipContent?: CoreLegendProps.GetTooltipContent;
+}
+export declare namespace CoreLegendProps {
+    type Item = InternalComponentTypes.LegendItem;
+    type GetTooltipContent = InternalComponentTypes.GetLegendTooltipContent;
+    interface ItemHighlightDetail {
+        item: Item;
+    }
+    interface VisibleItemsChangeDetail {
+        items: readonly string[];
+    }
+}
+export interface Rect {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+}
+export {};

package/core/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/core/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/core/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","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 type * as InternalComponentTypes from \"../internal/components/interfaces\";\nimport { type NonCancelableEventHandler } from \"../internal/events\";\n\n// All charts take `highcharts` instance, that can be served statically or dynamically.\n// Although it has to be of type Highcharts, the TS type we use is `null | object`, so\n// that it is ignored by the documenter.\n\n/**\n * This interface includes common public chart properties, applicable for all chart types.\n */\nexport interface BaseChartOptions {\n  /**\n   * The Highcharts instance, which can be obtained using `import Highcharts from \"highcharts\"`.\n   * Supported Highcharts versions: 12.\n   */\n  highcharts: null | object;\n\n  /**\n   * Custom content that renders when `highcharts=null`. It renders a spinner if not defined.\n   */\n  fallback?: React.ReactNode;\n\n  /**\n   * The height of the chart plot in pixels. It does not include legend and filter.\n   */\n  chartHeight?: number;\n\n  /**\n   * The chart automatically adjusts its height to fill the parent container when this property is set.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Defines the minimum allowed height of the chart plot. Use this when `fitHeight=true` to\n   * prevent the chart plot from becoming too small to display its content. When the parent\n   * container is shorter than the minimum height, a vertical scrollbar appears automatically.\n   */\n  chartMinHeight?: number;\n\n  /**\n   * Defines the minimum allowed width of the chart plot. When the parent container is narrower than the\n   * minimum width, the horizontal scrollbar is automatically added.\n   */\n  chartMinWidth?: number;\n\n  /**\n   * Defines the ARIA label for the chart container.\n   * This property corresponds to [lang.chartContainerLabel](https://api.highcharts.com/highcharts/lang.accessibility.chartContainerLabel),\n   * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).\n   */\n  ariaLabel?: string;\n\n  /**\n   * Defines the ARIA description of the chart container.\n   * This property corresponds to [accessibility.description](https://api.highcharts.com/highcharts/accessibility.description),\n   * and requires the [accessibility module](https://www.highcharts.com/docs/accessibility/accessibility-module).\n   */\n  ariaDescription?: string;\n\n  /**\n   * Defines chart legend options, including:\n   * * `enabled` (optional, boolean) - Hides legend when set to `false`.\n   * * `title` (optional, string) - Visible label, shown above the legend.\n   * * `actions` (optional, slot) - A slot before the legend that can be used to render custom actions.\n   */\n  legend?: BaseLegendOptions;\n\n  /**\n   * Defines options to represent empty, no-match, loading, and error state of the chart, including:\n   * * `statusType` (optional, \"finished\" | \"loading\" | \"error\") - Specifies the current status of loading data.\n   * * `empty` (optional, ReactNode) - Content displayed when the chart data is empty.\n   * * `noMatch` (optional, ReactNode) - Content displayed when there is no data to display due to the built-in filtering.\n   * * `loading` (optional, ReactNode) - Content displayed when `statusType=\"loading\"`. If omitted, the default loading state\n   * is shown, using `i18n.loadingText` or built-in i18n.\n   * * `error` (optional, ReactNode) - Content displayed when `statusType=\"error\"`. If omitted, the default error state\n   * is shown, using `i18n.errorText` and `i18n.recoveryText` (when `onRecoveryClick` is provided), or built-in i18n.\n   * * `onRecoveryClick` (optional, function) - Called when the user clicks the recovery button that appears when using default error\n   * state, and only if `onRecoveryClick` is provided. Use this to enable the user to retry a failed request or provide another option\n   * for the user to recover from the error.\n   */\n  noData?: BaseNoDataOptions;\n\n  /**\n   * Defines options for filtering in the chart, including:\n   * * `seriesFilter` (optional, boolean) - Displays default series filter at the top of the chart.\n   * * `additionalFilters` (optional, slot) - A slot for custom chart filters at the top of the chart.\n   */\n  filter?: BaseFilterOptions;\n}\n\nexport interface BaseLegendOptions {\n  enabled?: boolean;\n  title?: string;\n  actions?: React.ReactNode;\n}\n\nexport interface BaseNoDataOptions {\n  statusType?: \"finished\" | \"loading\" | \"error\";\n  empty?: React.ReactNode;\n  error?: React.ReactNode;\n  loading?: React.ReactNode;\n  noMatch?: React.ReactNode;\n  onRecoveryClick?: NonCancelableEventHandler;\n}\n\nexport interface BaseTooltipDetail {\n  key: React.ReactNode;\n  value: React.ReactNode;\n}\n\nexport interface BaseI18nStrings {\n  loadingText?: string;\n  errorText?: string;\n  recoveryText?: string;\n  seriesFilterLabel?: string;\n  seriesFilterPlaceholder?: string;\n  seriesFilterSelectedAriaLabel?: string;\n  legendAriaLabel?: string;\n  detailPopoverDismissAriaLabel?: string;\n  chartRoleDescription?: string;\n}\n\nexport interface WithCartesianI18nStrings {\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   *\n   * Available properties:\n   * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to \"loading\".\n   * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to \"error\".\n   * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.\n   * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.\n   * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.\n   * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.\n   * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.\n   * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.\n   * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. \"interactive chart\".\n   * * `xAxisRoleDescription` (optional, string) - Accessible role description of the x axis, e.g. \"x axis\".\n   * * `yAxisRoleDescription` (optional, string) - Accessible role description of the y axis, e.g. \"y axis\".\n   */\n  i18nStrings?: CartesianI18nStrings;\n}\n\nexport interface WithPieI18nStrings {\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   *\n   * Available properties:\n   * * `loadingText` (optional, string) - Text, displayed when the chart is loading, i.e. when `noData.statusType` is set to \"loading\".\n   * * `errorText` (optional, string) - Text, displayed when the chart is in error state, i.e. when `noData.statusType` is set to \"error\".\n   * * `recoveryText` (optional, string) - Text for the recovery button, displayed next to the error text.\n   * * `seriesFilterLabel` (optional, string) - Text for the visible label of the default series filter.\n   * * `seriesFilterPlaceholder` (optional, string) - Text for the default series filter placeholder.\n   * * `seriesFilterSelectedAriaLabel` (optional, string) - ARIA label of the default series filter which is appended to any option that is selected.\n   * * `legendAriaLabel` (optional, string) - ARIA label that is associated with the legend in case there is no visible `legend.title` defined.\n   * * `detailPopoverDismissAriaLabel` (optional, string) - ARIA label for the details popover dismiss button.\n   * * `chartRoleDescription` (optional, string) - Accessible role description of the chart plot area, e.g. \"interactive chart\".\n   * * `segmentRoleDescription` (optional, string) - Accessible role description of the segment.\n   */\n  i18nStrings?: PieI18nStrings;\n}\n\nexport interface CartesianI18nStrings extends BaseI18nStrings {\n  xAxisRoleDescription?: string;\n  yAxisRoleDescription?: string;\n}\n\nexport interface PieI18nStrings extends BaseI18nStrings {\n  segmentRoleDescription?: string;\n}\n\nexport interface BaseFilterOptions {\n  seriesFilter?: boolean;\n  additionalFilters?: React.ReactNode;\n}\n\nexport interface BaseTooltipPointFormatted {\n  key?: React.ReactNode;\n  value?: React.ReactNode;\n  description?: React.ReactNode;\n  expandable?: boolean;\n  subItems?: ReadonlyArray<{ key: React.ReactNode; value: React.ReactNode }>;\n}\n\nexport interface AreaSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"area\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface AreaSplineSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"areaspline\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface ColumnSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"column\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface LineSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"line\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface SplineSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"spline\";\n  data: readonly PointDataItemType[];\n}\n\nexport interface ScatterSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"scatter\";\n  data: readonly PointDataItemType[];\n  marker?: PointMarkerOptions;\n}\n\nexport interface ErrorBarSeriesOptions extends Omit<BaseCartesianSeriesOptions, \"name\"> {\n  type: \"errorbar\";\n  name?: string;\n  data: readonly RangeDataItemOptions[];\n  linkedTo: string;\n}\n\nexport interface XThresholdSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"x-threshold\";\n  value: number;\n}\n\nexport interface YThresholdSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"y-threshold\";\n  value: number;\n}\n\nexport interface PieSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"pie\";\n  data: readonly PieSegmentOptions[];\n}\n\nexport interface DonutSeriesOptions extends BaseCartesianSeriesOptions {\n  type: \"donut\";\n  data: readonly PieSegmentOptions[];\n}\n\nexport interface PieSegmentOptions {\n  y: number | null;\n  id?: string;\n  name: string;\n  color?: string;\n}\n\nexport type PointDataItemType = null | number | PointDataItemOptions;\n\nexport interface PointDataItemOptions {\n  x?: number;\n  y: number | null;\n}\n\nexport interface RangeDataItemOptions {\n  x?: number;\n  low: number;\n  high: number;\n}\n\ninterface BaseCartesianSeriesOptions {\n  id?: string;\n  name: string;\n  color?: string;\n}\n\n// The symbols union matches that of Highcharts.PointMarkerOptionsObject\ninterface PointMarkerOptions {\n  symbol?: \"circle\" | \"diamond\" | \"square\" | \"triangle\" | \"triangle-down\";\n}\n\nexport interface CoreCartesianOptions {\n  /**\n   * When set to `true`, adds a visual emphasis on the zero baseline axis.\n   */\n  emphasizeBaseline?: boolean;\n  /**\n   * Controls the placement of the vertical axis title.\n   * When set to \"side\", displays the title along the axis line.\n   */\n  verticalAxisTitlePlacement?: \"top\" | \"side\";\n}\n\nexport interface CoreChartProps\n  extends Pick<\n      BaseChartOptions,\n      | \"highcharts\"\n      | \"fallback\"\n      | \"fitHeight\"\n      | \"chartHeight\"\n      | \"chartMinHeight\"\n      | \"chartMinWidth\"\n      | \"ariaLabel\"\n      | \"ariaDescription\"\n      | \"filter\"\n      | \"noData\"\n    >,\n    CoreCartesianOptions {\n  /**\n   * The Highcharts options. Cloudscape injects custom styles and settings, but all can be\n   * overridden with explicitly provided options. An exception is event handlers - those are\n   * not overridden, but merged with Cloudscape event handlers so that both are getting called.\n   */\n  options: CoreChartProps.ChartOptions;\n  /**\n   * The Cloudscape tooltip, that comes with a vertical cursor when used on cartesian series.\n   * The tooltip content is only shown when `getContent` property is defined, which is called\n   * for each visited { x, y } point.\n   */\n  tooltip?: CoreChartProps.TooltipOptions;\n  /**\n   * A custom slot above the chart plot, chart's axis title, and filter.\n   */\n  header?: CoreChartProps.HeaderOptions;\n  /**\n   * Prop for passing a custom navigation control component to be rendered with the chart.\n   * Use this property to add timeline navigation, range selectors, or other custom navigation elements.\n   */\n  navigator?: React.ReactNode;\n  /**\n   * A custom slot below the chart plot and legend.\n   */\n  footer?: CoreChartProps.FooterOptions;\n  /**\n   * Chart legend options.\n   */\n  legend?: CoreChartProps.LegendOptions;\n  /**\n   * The callback to init the chart's API when it is ready. The API includes the Highcharts chart object, and\n   * additional Cloudscape methods.\n   */\n  callback?: (chart: CoreChartProps.ChartAPI) => void;\n  /**\n   * This is used to provide a test-utils selector. Do not use this property to provide custom styles.\n   */\n  className?: string;\n  /**\n   * IDs of visible series or points.\n   */\n  visibleItems?: readonly string[];\n  /**\n   * Called when a legend item is highlighted.\n   */\n  onLegendItemHighlight?: NonCancelableEventHandler<CoreChartProps.LegendItemHighlightDetail>;\n  /**\n   * Called when series/points visibility changes due to user interaction with legend or filter.\n   */\n  onVisibleItemsChange?: NonCancelableEventHandler<CoreChartProps.VisibleItemsChangeDetail>;\n  /**\n   * Called whenever chart tooltip is rendered to provide content for tooltip's header, body, and (optional) footer.\n   */\n  getTooltipContent?: CoreChartProps.GetTooltipContent;\n  /**\n   * Called whenever a legend item is hovered to provide content for legend tooltip's header, body, and (optional) footer.\n   * If not provided, no tooltip will be displayed.\n   */\n  getLegendTooltipContent?: CoreChartProps.GetLegendTooltipContent;\n  /**\n   * Called whenever chart point or group is highlighted.\n   */\n  onHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightChangeDetail>;\n  /**\n   * Called whenever chart point or group loses highlight.\n   */\n  onClearHighlight?: NonCancelableEventHandler<CoreChartProps.HighlightClearDetail>;\n  /**\n   * Use Cloudscape keyboard navigation.\n   */\n  keyboardNavigation?: boolean;\n  /**\n   * An object that contains all of the localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: CartesianI18nStrings & PieI18nStrings;\n}\n\nexport namespace CoreChartProps {\n  // The API methods allow programmatic triggering of chart's behaviors, some of which are not accessible via React state.\n  // This enables advanced integration scenarios, such as building a custom legend, or making multiple charts synchronized.\n  export interface ChartAPI {\n    chart: Highcharts.Chart;\n    highcharts: typeof Highcharts;\n    highlightItems(itemIds: readonly string[]): void;\n    setItemsVisible(itemIds: readonly string[]): void;\n    highlightChartPoint(point: Highcharts.Point): void;\n    highlightChartGroup(group: readonly Highcharts.Point[]): void;\n    clearChartHighlight(): void;\n  }\n\n  // The extended version of Highcharts.Options. The axes types are extended with Cloudscape value formatter.\n  // We use a custom formatter because we cannot use the built-in Highcharts formatter for our tooltip.\n  export type ChartOptions = Omit<Highcharts.Options, \"xAxis\" | \"yAxis\"> & {\n    xAxis?: XAxisOptions | XAxisOptions[];\n    yAxis?: YAxisOptions | YAxisOptions[];\n  };\n  export type XAxisOptions = Highcharts.XAxisOptions & { valueFormatter?: (value: null | number) => string };\n  export type YAxisOptions = Highcharts.YAxisOptions & { valueFormatter?: (value: null | number) => string };\n\n  export interface HeaderOptions {\n    content: React.ReactNode;\n  }\n  export interface FooterOptions {\n    content: React.ReactNode;\n  }\n\n  export interface LegendOptions extends BaseLegendOptions {\n    bottomMaxHeight?: number;\n    position?: \"bottom\" | \"side\";\n  }\n  export type LegendItem = InternalComponentTypes.LegendItem;\n  export type LegendTooltipContent = InternalComponentTypes.LegendTooltipContent;\n  export type GetLegendTooltipContent = InternalComponentTypes.GetLegendTooltipContent;\n  export type GetLegendTooltipContentProps = InternalComponentTypes.GetLegendTooltipContentProps;\n\n  export interface TooltipOptions {\n    enabled?: boolean;\n    placement?: \"middle\" | \"outside\" | \"target\";\n    size?: \"small\" | \"medium\" | \"large\";\n  }\n\n  export type GetTooltipContent = (props: GetTooltipContentProps) => TooltipContentRenderer;\n  export interface GetTooltipContentProps {\n    point: null | Highcharts.Point;\n    group: readonly Highcharts.Point[];\n  }\n  export interface TooltipContentRenderer {\n    point?: (props: TooltipPointProps) => TooltipPointFormatted;\n    details?: (props: TooltipDetailsProps) => readonly TooltipDetail[];\n    header?: (props: TooltipSlotProps) => React.ReactNode;\n    body?: (props: TooltipSlotProps) => React.ReactNode;\n    footer?: (props: TooltipSlotProps) => React.ReactNode;\n  }\n  export type TooltipPointFormatted = BaseTooltipPointFormatted;\n  export interface TooltipContentItem {\n    point: Highcharts.Point;\n    errorRanges: Highcharts.Point[];\n  }\n  export interface TooltipPointProps {\n    item: TooltipContentItem;\n  }\n  export interface TooltipSlotProps {\n    x: number;\n    items: TooltipContentItem[];\n  }\n\n  export interface TooltipDetailsProps {\n    point: Highcharts.Point;\n  }\n\n  export type TooltipDetail = BaseTooltipDetail;\n\n  export interface LegendItemHighlightDetail {\n    item: LegendItem;\n  }\n  export interface VisibleItemsChangeDetail {\n    items: readonly LegendItem[];\n    isApiCall: boolean;\n  }\n  export interface HighlightChangeDetail {\n    point: null | Highcharts.Point;\n    group: readonly Highcharts.Point[];\n    isApiCall: boolean;\n  }\n  export interface HighlightClearDetail {\n    isApiCall: boolean;\n  }\n\n  export type I18nStrings = CartesianI18nStrings & PieI18nStrings;\n}\n\nexport interface CoreLegendProps {\n  items: readonly CoreLegendProps.Item[];\n  title?: string;\n  ariaLabel?: string;\n  actions?: React.ReactNode;\n  alignment?: \"horizontal\" | \"vertical\";\n  onClearHighlight?: NonCancelableEventHandler;\n  onItemHighlight?: NonCancelableEventHandler<CoreLegendProps.ItemHighlightDetail>;\n  onVisibleItemsChange?: NonCancelableEventHandler<CoreLegendProps.VisibleItemsChangeDetail>;\n  getLegendTooltipContent?: CoreLegendProps.GetTooltipContent;\n}\n\nexport namespace CoreLegendProps {\n  export type Item = InternalComponentTypes.LegendItem;\n  export type GetTooltipContent = InternalComponentTypes.GetLegendTooltipContent;\n  export interface ItemHighlightDetail {\n    item: Item;\n  }\n  export interface VisibleItemsChangeDetail {\n    items: readonly string[];\n  }\n}\n\n// Utility types\n\nexport interface Rect {\n  x: number;\n  y: number;\n  height: number;\n  width: number;\n}\n"]}

package/core/styles.css.js

@@ -0,0 +1,25 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_113qp_14k3e_5",
+  "highcharts-grid-line": "awsui_highcharts-grid-line_113qp_14k3e_8",
+  "root-fit-height": "awsui_root-fit-height_113qp_14k3e_12",
+  "no-data-container": "awsui_no-data-container_113qp_14k3e_16",
+  "no-data": "awsui_no-data_113qp_14k3e_16",
+  "no-data-wrapper": "awsui_no-data-wrapper_113qp_14k3e_34",
+  "no-data-empty": "awsui_no-data-empty_113qp_14k3e_42",
+  "chart-filters": "awsui_chart-filters_113qp_14k3e_46",
+  "chart-filters-series": "awsui_chart-filters-series_113qp_14k3e_52",
+  "axis-vertical-title": "awsui_axis-vertical-title_113qp_14k3e_56",
+  "axis-vertical-title-item": "awsui_axis-vertical-title-item_113qp_14k3e_64",
+  "error-range": "awsui_error-range_113qp_14k3e_71",
+  "tooltip-default-header": "awsui_tooltip-default-header_113qp_14k3e_77",
+  "chart-container-root": "awsui_chart-container-root_113qp_14k3e_83",
+  "chart-container-fit-height": "awsui_chart-container-fit-height_113qp_14k3e_87",
+  "chart-container-min-width": "awsui_chart-container-min-width_113qp_14k3e_93",
+  "chart-plot-and-legend-wrapper": "awsui_chart-plot-and-legend-wrapper_113qp_14k3e_97",
+  "chart-plot-wrapper": "awsui_chart-plot-wrapper_113qp_14k3e_101",
+  "side-legend-container": "awsui_side-legend-container_113qp_14k3e_106",
+  "application": "awsui_application_113qp_14k3e_113"
+};
+  

package/core/styles.scoped.css

@@ -0,0 +1,115 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_113qp_14k3e_5:not(#\9) {
+  position: relative;
+}
+.awsui_root_113qp_14k3e_5 .awsui_highcharts-grid-line_113qp_14k3e_8:not(#\9) {
+  pointer-events: none;
+}
+
+.awsui_root-fit-height_113qp_14k3e_12:not(#\9) {
+  block-size: 100%;
+}
+
+.awsui_no-data-container_113qp_14k3e_16:not(#\9) {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.awsui_no-data_113qp_14k3e_16:not(#\9) {
+  overflow-x: auto;
+  overflow-y: hidden;
+  padding-block: var(--space-static-xs-gnm0mz, 8px);
+  padding-inline: var(--space-static-m-m6qboo, 16px);
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  border-radius: 8px;
+  border: 1px solid var(--color-border-divider-default-nr68jt, #c6c6cd);
+}
+
+.awsui_no-data-wrapper_113qp_14k3e_34:not(#\9) {
+  overflow: hidden;
+  padding-block: var(--space-static-xxs-ns94dp, 4px);
+  padding-inline: var(--space-static-xxs-ns94dp, 4px);
+  border-radius: 8px;
+  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+}
+
+.awsui_no-data-empty_113qp_14k3e_42:not(#\9) {
+  color: var(--color-text-empty-tlohug, #656871);
+}
+
+.awsui_chart-filters_113qp_14k3e_46:not(#\9) {
+  padding-block-end: var(--space-scaled-l-sej05l, 20px);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-scaled-l-sej05l, 20px);
+}
+.awsui_chart-filters-series_113qp_14k3e_52:not(#\9) {
+  flex: 280px 0 1;
+}
+
+.awsui_axis-vertical-title_113qp_14k3e_56:not(#\9) {
+  display: flex;
+  gap: var(--space-static-xs-gnm0mz, 8px);
+  justify-content: space-between;
+  block-size: 24px;
+  margin-bottom: 4px;
+}
+
+.awsui_axis-vertical-title-item_113qp_14k3e_64:not(#\9) {
+  font-weight: bold;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.awsui_error-range_113qp_14k3e_71:not(#\9) {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-scaled-s-8ozaad, 12px);
+}
+
+.awsui_tooltip-default-header_113qp_14k3e_77:not(#\9) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-static-xxs-ns94dp, 4px);
+}
+
+.awsui_chart-container-root_113qp_14k3e_83:not(#\9) {
+  block-size: 100%;
+}
+
+.awsui_chart-container-fit-height_113qp_14k3e_87:not(#\9) {
+  overflow-x: auto;
+  position: absolute;
+  inset: 0;
+}
+
+.awsui_chart-container-min-width_113qp_14k3e_93:not(#\9) {
+  overflow-x: auto;
+}
+
+.awsui_chart-plot-and-legend-wrapper_113qp_14k3e_97:not(#\9) {
+  display: flex;
+}
+
+.awsui_chart-plot-wrapper_113qp_14k3e_101:not(#\9) {
+  position: relative;
+  flex: 1;
+}
+
+.awsui_side-legend-container_113qp_14k3e_106:not(#\9) {
+  flex: 0;
+  overflow-y: auto;
+  max-inline-size: 30%;
+  min-inline-size: max(20%, 150px);
+}
+
+.awsui_application_113qp_14k3e_113:not(#\9) {
+  outline: none;
+}

package/core/styles.selectors.js

@@ -0,0 +1,26 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_113qp_14k3e_5",
+  "highcharts-grid-line": "awsui_highcharts-grid-line_113qp_14k3e_8",
+  "root-fit-height": "awsui_root-fit-height_113qp_14k3e_12",
+  "no-data-container": "awsui_no-data-container_113qp_14k3e_16",
+  "no-data": "awsui_no-data_113qp_14k3e_16",
+  "no-data-wrapper": "awsui_no-data-wrapper_113qp_14k3e_34",
+  "no-data-empty": "awsui_no-data-empty_113qp_14k3e_42",
+  "chart-filters": "awsui_chart-filters_113qp_14k3e_46",
+  "chart-filters-series": "awsui_chart-filters-series_113qp_14k3e_52",
+  "axis-vertical-title": "awsui_axis-vertical-title_113qp_14k3e_56",
+  "axis-vertical-title-item": "awsui_axis-vertical-title-item_113qp_14k3e_64",
+  "error-range": "awsui_error-range_113qp_14k3e_71",
+  "tooltip-default-header": "awsui_tooltip-default-header_113qp_14k3e_77",
+  "chart-container-root": "awsui_chart-container-root_113qp_14k3e_83",
+  "chart-container-fit-height": "awsui_chart-container-fit-height_113qp_14k3e_87",
+  "chart-container-min-width": "awsui_chart-container-min-width_113qp_14k3e_93",
+  "chart-plot-and-legend-wrapper": "awsui_chart-plot-and-legend-wrapper_113qp_14k3e_97",
+  "chart-plot-wrapper": "awsui_chart-plot-wrapper_113qp_14k3e_101",
+  "side-legend-container": "awsui_side-legend-container_113qp_14k3e_106",
+  "application": "awsui_application_113qp_14k3e_113"
+};
+