@cloudscape-design/chart-components 1.0.0

package/pie-chart/chart-inner-area.js

@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useRef } from "react";
+import * as Styles from "../internal/chart-styles";
+import { getChartSeries } from "../internal/utils/chart-series";
+import testClasses from "./test-classes/styles.css.js";
+export function useInnerArea(series, innerAreaProps) {
+    const hasDonutSeries = series.some((s) => s.type === "donut");
+    const innerAreaRef = useRef(new ChartInnerDescriptions());
+    const onChartRender = function () {
+        innerAreaRef.current.destroy();
+        if (hasDonutSeries && findVisibleSeries(this.series).length > 0) {
+            innerAreaRef.current.create(innerAreaProps, this);
+        }
+    };
+    return { onChartRender };
+}
+class ChartInnerDescriptions {
+    constructor() {
+        this.titleElement = null;
+        this.descriptionElement = null;
+    }
+    create({ innerAreaTitle, innerAreaDescription }, chart) {
+        var _a, _b;
+        const centerX = chart.plotLeft + getChartSeries(chart.series)[0].center[0];
+        const centerY = chart.plotTop + getChartSeries(chart.series)[0].center[1];
+        if (innerAreaTitle) {
+            this.titleElement = chart.renderer
+                .text(innerAreaTitle, -9999, -9999)
+                .attr({ zIndex: 5, class: testClasses["inner-value"] })
+                .css(Styles.innerAreaTitleCss)
+                .add();
+        }
+        if (innerAreaDescription) {
+            this.descriptionElement = chart.renderer
+                .text(innerAreaDescription, -9999, -9999)
+                .attr({ zIndex: 5, class: testClasses["inner-description"] })
+                .css(Styles.innerAreaDescriptionCss)
+                .add();
+        }
+        const titleBox = (_a = this.titleElement) === null || _a === void 0 ? void 0 : _a.getBBox();
+        const descriptionBox = (_b = this.descriptionElement) === null || _b === void 0 ? void 0 : _b.getBBox();
+        if (titleBox && descriptionBox) {
+            this.titleElement.attr({ x: centerX - titleBox.width / 2, y: centerY - titleBox.height / 4 });
+            this.descriptionElement.attr({ x: centerX - descriptionBox.width / 2, y: centerY + descriptionBox.height / 2 });
+        }
+        else if (titleBox) {
+            this.titleElement.attr({ x: centerX - titleBox.width / 2, y: centerY + titleBox.height / 4 });
+        }
+        else if (descriptionBox) {
+            this.descriptionElement.attr({ x: centerX - descriptionBox.width / 2, y: centerY + descriptionBox.height / 4 });
+        }
+    }
+    destroy() {
+        var _a, _b;
+        (_a = this.titleElement) === null || _a === void 0 ? void 0 : _a.destroy();
+        (_b = this.descriptionElement) === null || _b === void 0 ? void 0 : _b.destroy();
+    }
+}
+function findVisibleSeries(series) {
+    return series.filter((s) => s.visible && s.data.some((d) => d.y !== null && d.visible));
+}
+//# sourceMappingURL=chart-inner-area.js.map

package/pie-chart/chart-inner-area.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-inner-area.js","sourceRoot":"","sources":["../../../src/pie-chart/chart-inner-area.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 { useRef } from \"react\";\nimport type Highcharts from \"highcharts\";\n\nimport * as Styles from \"../internal/chart-styles\";\nimport { getChartSeries } from \"../internal/utils/chart-series\";\nimport { PieChartProps } from \"./interfaces\";\n\nimport testClasses from \"./test-classes/styles.css.js\";\n\ninterface InnerAreaProps {\n  innerAreaTitle?: string;\n  innerAreaDescription?: string;\n}\n\nexport function useInnerArea(series: readonly PieChartProps.SeriesOptions[], innerAreaProps: InnerAreaProps) {\n  const hasDonutSeries = series.some((s) => s.type === \"donut\");\n  const innerAreaRef = useRef(new ChartInnerDescriptions());\n  const onChartRender: Highcharts.ChartRenderCallbackFunction = function () {\n    innerAreaRef.current.destroy();\n    if (hasDonutSeries && findVisibleSeries(this.series).length > 0) {\n      innerAreaRef.current.create(innerAreaProps, this);\n    }\n  };\n  return { onChartRender };\n}\n\nclass ChartInnerDescriptions {\n  private titleElement: null | Highcharts.SVGElement = null;\n  private descriptionElement: null | Highcharts.SVGElement = null;\n\n  public create({ innerAreaTitle, innerAreaDescription }: InnerAreaProps, chart: Highcharts.Chart) {\n    const centerX = chart.plotLeft + getChartSeries(chart.series)[0].center[0];\n    const centerY = chart.plotTop + getChartSeries(chart.series)[0].center[1];\n\n    if (innerAreaTitle) {\n      this.titleElement = chart.renderer\n        .text(innerAreaTitle, -9999, -9999)\n        .attr({ zIndex: 5, class: testClasses[\"inner-value\"] })\n        .css(Styles.innerAreaTitleCss)\n        .add();\n    }\n    if (innerAreaDescription) {\n      this.descriptionElement = chart.renderer\n        .text(innerAreaDescription, -9999, -9999)\n        .attr({ zIndex: 5, class: testClasses[\"inner-description\"] })\n        .css(Styles.innerAreaDescriptionCss)\n        .add();\n    }\n\n    const titleBox = this.titleElement?.getBBox();\n    const descriptionBox = this.descriptionElement?.getBBox();\n\n    if (titleBox && descriptionBox) {\n      this.titleElement!.attr({ x: centerX - titleBox.width / 2, y: centerY - titleBox.height / 4 });\n      this.descriptionElement!.attr({ x: centerX - descriptionBox.width / 2, y: centerY + descriptionBox.height / 2 });\n    } else if (titleBox) {\n      this.titleElement!.attr({ x: centerX - titleBox.width / 2, y: centerY + titleBox.height / 4 });\n    } else if (descriptionBox) {\n      this.descriptionElement!.attr({ x: centerX - descriptionBox.width / 2, y: centerY + descriptionBox.height / 4 });\n    }\n  }\n\n  public destroy() {\n    this.titleElement?.destroy();\n    this.descriptionElement?.destroy();\n  }\n}\n\nfunction findVisibleSeries(series: Highcharts.Series[]) {\n  return series.filter((s) => s.visible && s.data.some((d) => d.y !== null && d.visible));\n}\n"]}

package/pie-chart/chart-pie-internal.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
+import { SomeRequired } from "../internal/utils/utils";
+import { PieChartProps } from "./interfaces";
+interface InternalPieChartProps extends InternalBaseComponentProps, Omit<PieChartProps, "series"> {
+    series: readonly PieChartProps.SeriesOptions[];
+    tooltip: SomeRequired<PieChartProps.TooltipOptions, "enabled" | "size">;
+    legend: SomeRequired<PieChartProps.LegendOptions, "enabled">;
+}
+export declare const InternalPieChart: import("react").ForwardRefExoticComponent<InternalPieChartProps & import("react").RefAttributes<PieChartProps.Ref>>;
+export {};

package/pie-chart/chart-pie-internal.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { useControllableState } from "@cloudscape-design/component-toolkit";
+import { InternalCoreChart } from "../core/chart-core";
+import { getOptionsId } from "../core/utils";
+import * as Styles from "../internal/chart-styles";
+import { fireNonCancelableEvent } from "../internal/events";
+import { useInnerArea } from "./chart-inner-area";
+import testClasses from "./test-classes/styles.css.js";
+export const InternalPieChart = forwardRef(({ series: originalSeries, tooltip, ...props }, ref) => {
+    const apiRef = useRef(null);
+    // When visibleSegments and onVisibleSegmentsChange are provided - the segments visibility can be controlled from the outside.
+    // Otherwise - the component handles segments visibility using its internal state.
+    useControllableState(props.visibleSegments, props.onVisibleSegmentsChange, undefined, {
+        componentName: "PieChart",
+        propertyName: "visibleSegments",
+        changeHandlerName: "onVisibleSegmentsChange",
+    });
+    const allSegmentIds = originalSeries.flatMap((s) => s.data.map((d) => getOptionsId(d)));
+    const onVisibleSegmentsChange = ({ detail: { items } }) => {
+        const visibleSegments = items.filter((i) => i.visible).map((i) => i.id);
+        fireNonCancelableEvent(props.onVisibleSegmentsChange, { visibleSegments });
+    };
+    // Converting donut series to Highcharts pie series.
+    const series = originalSeries.map((s) => {
+        const data = s.data;
+        const style = s.type === "pie" ? Styles.pieSeries : Styles.donutSeries;
+        return { ...s, type: "pie", data, ...style };
+    });
+    // Pie chart imperative API.
+    useImperativeHandle(ref, () => ({
+        setVisibleSegments: (visibleSegmentsIds) => { var _a; return (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.setItemsVisible(visibleSegmentsIds); },
+        showAllSegments: () => { var _a; return (_a = apiRef.current) === null || _a === void 0 ? void 0 : _a.setItemsVisible(allSegmentIds); },
+    }));
+    // Get inner area title and description for donut chart.
+    const innerArea = useInnerArea(originalSeries, props);
+    // We convert pie tooltip options to the core chart's getTooltipContent callback,
+    // ensuring no internal types are exposed to the consumer-defined render functions.
+    const getTooltipContent = () => {
+        const transformDetailsProps = ({ point, }) => {
+            var _a, _b, _c;
+            return {
+                totalValue: (_a = point.total) !== null && _a !== void 0 ? _a : 0,
+                segmentValue: (_b = point.y) !== null && _b !== void 0 ? _b : 0,
+                segmentId: getOptionsId(point.options),
+                segmentName: (_c = point.name) !== null && _c !== void 0 ? _c : "",
+            };
+        };
+        const transformSlotProps = (props) => {
+            const point = props.items[0].point;
+            return transformDetailsProps({ point });
+        };
+        return {
+            header: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.header) ? (props) => tooltip.header(transformSlotProps(props)) : undefined,
+            details: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.details) ? (props) => tooltip.details(transformDetailsProps(props)) : undefined,
+            body: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.body) ? (props) => tooltip.body(transformSlotProps(props)) : undefined,
+            footer: (tooltip === null || tooltip === void 0 ? void 0 : tooltip.footer) ? (props) => tooltip.footer(transformSlotProps(props)) : undefined,
+        };
+    };
+    // Convert pie segment props to Highcharts segment data labels.
+    const segmentDataLabels = {
+        position: "left",
+        formatter() {
+            var _a, _b, _c;
+            const { segmentTitle, segmentDescription } = props;
+            const segmentProps = {
+                // For pie series, we expect y, total, and name to be always present, and y to be non-null for any visible segment.
+                // However, these are optional in Highcharts types, so we need to do a fallback.
+                totalValue: (_a = this.total) !== null && _a !== void 0 ? _a : 0,
+                segmentValue: (_b = this.y) !== null && _b !== void 0 ? _b : 0,
+                segmentId: this.options.id,
+                segmentName: (_c = this.options.name) !== null && _c !== void 0 ? _c : "",
+            };
+            const title = segmentTitle ? segmentTitle(segmentProps) : this.name;
+            const description = segmentDescription === null || segmentDescription === void 0 ? void 0 : segmentDescription(segmentProps);
+            if (title || description) {
+                return renderToStaticMarkup(_jsxs("text", { children: [title ? _jsx("tspan", { children: title }) : null, _jsx("br", {}), description ? _jsx("tspan", { style: Styles.segmentDescriptionCss, children: description }) : null] }));
+            }
+            return null;
+        },
+        useHTML: false,
+    };
+    const highchartsOptions = {
+        chart: {
+            events: {
+                render(event) {
+                    innerArea.onChartRender.call(this, event);
+                },
+            },
+        },
+        plotOptions: {
+            pie: {
+                dataLabels: segmentDataLabels,
+            },
+        },
+        series,
+    };
+    return (_jsx(InternalCoreChart, { ...props, callback: (api) => (apiRef.current = api), options: highchartsOptions, tooltip: tooltip, getTooltipContent: getTooltipContent, visibleItems: props.visibleSegments, onVisibleItemsChange: onVisibleSegmentsChange, className: testClasses.root }));
+});
+//# sourceMappingURL=chart-pie-internal.js.map

package/pie-chart/chart-pie-internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-internal.js","sourceRoot":"","sources":["../../../src/pie-chart/chart-pie-internal.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 { forwardRef, useImperativeHandle, useRef } from \"react\";\nimport { renderToStaticMarkup } from \"react-dom/server\";\nimport type Highcharts from \"highcharts\";\n\nimport { useControllableState } from \"@cloudscape-design/component-toolkit\";\n\nimport { InternalCoreChart } from \"../core/chart-core\";\nimport { CoreChartProps } from \"../core/interfaces\";\nimport { getOptionsId } from \"../core/utils\";\nimport { InternalBaseComponentProps } from \"../internal/base-component/use-base-component\";\nimport * as Styles from \"../internal/chart-styles\";\nimport { fireNonCancelableEvent } from \"../internal/events\";\nimport { SomeRequired, Writeable } from \"../internal/utils/utils\";\nimport { useInnerArea } from \"./chart-inner-area\";\nimport { PieChartProps } from \"./interfaces\";\n\nimport testClasses from \"./test-classes/styles.css.js\";\n\ninterface InternalPieChartProps extends InternalBaseComponentProps, Omit<PieChartProps, \"series\"> {\n  series: readonly PieChartProps.SeriesOptions[];\n  tooltip: SomeRequired<PieChartProps.TooltipOptions, \"enabled\" | \"size\">;\n  legend: SomeRequired<PieChartProps.LegendOptions, \"enabled\">;\n}\n\nexport const InternalPieChart = forwardRef(\n  ({ series: originalSeries, tooltip, ...props }: InternalPieChartProps, ref: React.Ref<PieChartProps.Ref>) => {\n    const apiRef = useRef<null | CoreChartProps.ChartAPI>(null);\n\n    // When visibleSegments and onVisibleSegmentsChange are provided - the segments visibility can be controlled from the outside.\n    // Otherwise - the component handles segments visibility using its internal state.\n    useControllableState(props.visibleSegments, props.onVisibleSegmentsChange, undefined, {\n      componentName: \"PieChart\",\n      propertyName: \"visibleSegments\",\n      changeHandlerName: \"onVisibleSegmentsChange\",\n    });\n    const allSegmentIds = originalSeries.flatMap((s) => s.data.map((d) => getOptionsId(d)));\n    const onVisibleSegmentsChange: CoreChartProps[\"onVisibleItemsChange\"] = ({ detail: { items } }) => {\n      const visibleSegments = items.filter((i) => i.visible).map((i) => i.id);\n      fireNonCancelableEvent(props.onVisibleSegmentsChange, { visibleSegments });\n    };\n\n    // Converting donut series to Highcharts pie series.\n    const series: Highcharts.SeriesOptionsType[] = originalSeries.map((s) => {\n      const data = s.data as Writeable<PieChartProps.PieSegmentOptions[]>;\n      const style = s.type === \"pie\" ? Styles.pieSeries : Styles.donutSeries;\n      return { ...s, type: \"pie\", data, ...style };\n    });\n\n    // Pie chart imperative API.\n    useImperativeHandle(ref, () => ({\n      setVisibleSegments: (visibleSegmentsIds) => apiRef.current?.setItemsVisible(visibleSegmentsIds),\n      showAllSegments: () => apiRef.current?.setItemsVisible(allSegmentIds),\n    }));\n\n    // Get inner area title and description for donut chart.\n    const innerArea = useInnerArea(originalSeries, props);\n\n    // We convert pie tooltip options to the core chart's getTooltipContent callback,\n    // ensuring no internal types are exposed to the consumer-defined render functions.\n    const getTooltipContent: CoreChartProps[\"getTooltipContent\"] = () => {\n      const transformDetailsProps = ({\n        point,\n      }: CoreChartProps.TooltipDetailsProps): PieChartProps.TooltipDetailsRenderProps => {\n        return {\n          totalValue: point.total ?? 0,\n          segmentValue: point.y ?? 0,\n          segmentId: getOptionsId(point.options),\n          segmentName: point.name ?? \"\",\n        };\n      };\n      const transformSlotProps = (props: CoreChartProps.TooltipSlotProps): PieChartProps.TooltipDetailsRenderProps => {\n        const point = props.items[0].point;\n        return transformDetailsProps({ point });\n      };\n      return {\n        header: tooltip?.header ? (props) => tooltip.header!(transformSlotProps(props)) : undefined,\n        details: tooltip?.details ? (props) => tooltip.details!(transformDetailsProps(props)) : undefined,\n        body: tooltip?.body ? (props) => tooltip.body!(transformSlotProps(props)) : undefined,\n        footer: tooltip?.footer ? (props) => tooltip.footer!(transformSlotProps(props)) : undefined,\n      };\n    };\n\n    // Convert pie segment props to Highcharts segment data labels.\n    const segmentDataLabels:\n      | Highcharts.SeriesPieDataLabelsOptionsObject\n      | Highcharts.SeriesPieDataLabelsOptionsObject[] = {\n      position: \"left\",\n      formatter() {\n        const { segmentTitle, segmentDescription } = props;\n        const segmentProps = {\n          // For pie series, we expect y, total, and name to be always present, and y to be non-null for any visible segment.\n          // However, these are optional in Highcharts types, so we need to do a fallback.\n          totalValue: this.total ?? 0,\n          segmentValue: this.y ?? 0,\n          segmentId: this.options.id,\n          segmentName: this.options.name ?? \"\",\n        };\n        const title = segmentTitle ? segmentTitle(segmentProps) : this.name;\n        const description = segmentDescription?.(segmentProps);\n        if (title || description) {\n          return renderToStaticMarkup(\n            <text>\n              {title ? <tspan>{title}</tspan> : null}\n              <br />\n              {description ? <tspan style={Styles.segmentDescriptionCss}>{description}</tspan> : null}\n            </text>,\n          );\n        }\n        return null;\n      },\n      useHTML: false,\n    };\n\n    const highchartsOptions: Highcharts.Options = {\n      chart: {\n        events: {\n          render(event) {\n            innerArea.onChartRender.call(this, event);\n          },\n        },\n      },\n      plotOptions: {\n        pie: {\n          dataLabels: segmentDataLabels,\n        },\n      },\n      series,\n    };\n\n    return (\n      <InternalCoreChart\n        {...props}\n        callback={(api) => (apiRef.current = api)}\n        options={highchartsOptions}\n        tooltip={tooltip}\n        getTooltipContent={getTooltipContent}\n        visibleItems={props.visibleSegments}\n        onVisibleItemsChange={onVisibleSegmentsChange}\n        className={testClasses.root}\n      />\n    );\n  },\n);\n"]}

package/pie-chart/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PieChartProps } from "./interfaces";
+export type { PieChartProps };
+declare const PieChart: import("react").ForwardRefExoticComponent<PieChartProps & import("react").RefAttributes<PieChartProps.Ref>>;
+export default PieChart;

package/pie-chart/index.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { forwardRef } from "react";
+import { getDataAttributes } from "../internal/base-component/get-data-attributes";
+import useBaseComponent from "../internal/base-component/use-base-component";
+import { applyDisplayName } from "../internal/utils/apply-display-name";
+import { InternalPieChart } from "./chart-pie-internal";
+const PieChart = forwardRef(({ fitHeight = false, ...props }, ref) => {
+    // We transform options before propagating them to the internal chart to ensure only those
+    // defined in the component's contract can be propagated down to the underlying Highcharts.
+    // Additionally, we assign all default options, including the nested ones.
+    const series = transformSeries(props.series);
+    const tooltip = transformTooltip(props.tooltip);
+    const legend = transformLegend(props.legend);
+    const baseComponentProps = useBaseComponent("PieChart", { props: { fitHeight } });
+    return (_jsx(InternalPieChart, { ref: ref, ...props, fitHeight: fitHeight, series: series, tooltip: tooltip, legend: legend, ...getDataAttributes(props), ...baseComponentProps }));
+});
+applyDisplayName(PieChart, "PieChart");
+export default PieChart;
+function transformSeries(series) {
+    if (!series) {
+        return [];
+    }
+    switch (series.type) {
+        case "pie":
+        case "donut":
+            return [
+                { type: series.type, id: series.id, name: series.name, color: series.color, data: transformData(series.data) },
+            ];
+    }
+}
+function transformData(data) {
+    return data.map((d) => ({ id: d.id, name: d.name, color: d.color, y: d.y }));
+}
+function transformTooltip(tooltip) {
+    var _a, _b;
+    return {
+        ...tooltip,
+        enabled: (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enabled) !== null && _a !== void 0 ? _a : true,
+        size: (_b = tooltip === null || tooltip === void 0 ? void 0 : tooltip.size) !== null && _b !== void 0 ? _b : "medium",
+    };
+}
+function transformLegend(legend) {
+    var _a;
+    return { ...legend, enabled: (_a = legend === null || legend === void 0 ? void 0 : legend.enabled) !== null && _a !== void 0 ? _a : true };
+}
+//# sourceMappingURL=index.js.map

package/pie-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pie-chart/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AACnF,OAAO,gBAAgB,MAAM,+CAA+C,CAAC;AAC7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAKxD,MAAM,QAAQ,GAAG,UAAU,CAAC,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAiB,EAAE,GAAiC,EAAE,EAAE;IAChH,0FAA0F;IAC1F,2FAA2F;IAC3F,0EAA0E;IAC1E,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7C,MAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAChD,MAAM,MAAM,GAAG,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAE7C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;IAElF,OAAO,CACL,KAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,KACJ,KAAK,EACT,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,KACV,iBAAiB,CAAC,KAAK,CAAC,KACxB,kBAAkB,GACtB,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AAEvC,eAAe,QAAQ,CAAC;AAExB,SAAS,eAAe,CAAC,MAA0C;IACjE,IAAI,CAAC,MAAM,EAAE;QACX,OAAO,EAAE,CAAC;KACX;IACD,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,KAAK,CAAC;QACX,KAAK,OAAO;YACV,OAAO;gBACL,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;aAC/G,CAAC;KACL;AACH,CAAC;AAED,SAAS,aAAa,CAAC,IAAgD;IACrE,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/E,CAAC;AAED,SAAS,gBAAgB,CACvB,OAAsC;;IAEtC,OAAO;QACL,GAAG,OAAO;QACV,OAAO,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,mCAAI,IAAI;QACjC,IAAI,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,mCAAI,QAAQ;KAChC,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,MAAoC;;IAC3D,OAAO,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,OAAO,mCAAI,IAAI,EAAE,CAAC;AACzD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { forwardRef } from \"react\";\n\nimport { getDataAttributes } from \"../internal/base-component/get-data-attributes\";\nimport useBaseComponent from \"../internal/base-component/use-base-component\";\nimport { applyDisplayName } from \"../internal/utils/apply-display-name\";\nimport { SomeRequired } from \"../internal/utils/utils\";\nimport { InternalPieChart } from \"./chart-pie-internal\";\nimport { PieChartProps } from \"./interfaces\";\n\nexport type { PieChartProps };\n\nconst PieChart = forwardRef(({ fitHeight = false, ...props }: PieChartProps, ref: React.Ref<PieChartProps.Ref>) => {\n  // We transform options before propagating them to the internal chart to ensure only those\n  // defined in the component's contract can be propagated down to the underlying Highcharts.\n  // Additionally, we assign all default options, including the nested ones.\n  const series = transformSeries(props.series);\n  const tooltip = transformTooltip(props.tooltip);\n  const legend = transformLegend(props.legend);\n\n  const baseComponentProps = useBaseComponent(\"PieChart\", { props: { fitHeight } });\n\n  return (\n    <InternalPieChart\n      ref={ref}\n      {...props}\n      fitHeight={fitHeight}\n      series={series}\n      tooltip={tooltip}\n      legend={legend}\n      {...getDataAttributes(props)}\n      {...baseComponentProps}\n    />\n  );\n});\n\napplyDisplayName(PieChart, \"PieChart\");\n\nexport default PieChart;\n\nfunction transformSeries(series: null | PieChartProps.SeriesOptions): readonly PieChartProps.SeriesOptions[] {\n  if (!series) {\n    return [];\n  }\n  switch (series.type) {\n    case \"pie\":\n    case \"donut\":\n      return [\n        { type: series.type, id: series.id, name: series.name, color: series.color, data: transformData(series.data) },\n      ];\n  }\n}\n\nfunction transformData(data: readonly PieChartProps.PieSegmentOptions[]): readonly PieChartProps.PieSegmentOptions[] {\n  return data.map((d) => ({ id: d.id, name: d.name, color: d.color, y: d.y }));\n}\n\nfunction transformTooltip(\n  tooltip?: PieChartProps.TooltipOptions,\n): SomeRequired<PieChartProps.TooltipOptions, \"enabled\" | \"size\"> {\n  return {\n    ...tooltip,\n    enabled: tooltip?.enabled ?? true,\n    size: tooltip?.size ?? \"medium\",\n  };\n}\n\nfunction transformLegend(legend?: PieChartProps.LegendOptions): SomeRequired<PieChartProps.LegendOptions, \"enabled\"> {\n  return { ...legend, enabled: legend?.enabled ?? true };\n}\n"]}

package/pie-chart/interfaces.d.ts

@@ -0,0 +1,101 @@
+/// <reference types="react" />
+import * as CoreTypes from "../core/interfaces";
+import { NonCancelableEventHandler } from "../internal/events";
+export interface PieChartProps extends CoreTypes.BaseChartOptions, CoreTypes.WithPieI18nStrings {
+    /**
+     * Defines series options of the chart.
+     * This property corresponds to [series](https://api.highcharts.com/highcharts/series), and extends it
+     * with an additional "donut" series type.
+     *
+     * Supported series types:
+     * * [pie](https://api.highcharts.com/highcharts/series.pie).
+     * * donut - the pie series with predefined inner radius.
+     */
+    series: null | PieChartProps.SeriesOptions;
+    /**
+     * Defines tooltip options of the chart, including:
+     * * `enabled` - (optional, boolean) - Hides the tooltip when set to false.
+     * * `size` - (optional, "small" | "medium" | "large") - Specifies max tooltip size.
+     * * `details` - (optional, function) - Provides a list of key-value pairs as tooltip's body.
+     * * `header` - (optional, function) - Renders a custom tooltip header.
+     * * `body` - (optional, function) - Renders a custom tooltip body.
+     * * `footer` - (optional, function) - Renders a custom tooltip footer.
+     */
+    tooltip?: PieChartProps.TooltipOptions;
+    /**
+     * Specifies which segments to show using their IDs. By default, all segments are visible and managed by the component.
+     * If a segment doesn't have an ID, its name is used. When using this property, manage state updates with `onVisibleSegmentsChange`.
+     */
+    visibleSegments?: readonly string[];
+    /**
+     * A callback function, triggered when segments visibility changes as a result of user interaction with the legend or filter.
+     */
+    onVisibleSegmentsChange?: NonCancelableEventHandler<{
+        visibleSegments: string[];
+    }>;
+    /**
+     * A function that determines the title of a segment displayed on the chart. The title appears above the segment
+     * description defined by `segmentDescription`. By default, it displays the segment name. You can hide the title
+     * by returning an empty string from the function.
+     */
+    segmentTitle?: (props: PieChartProps.SegmentTitleRenderProps) => string;
+    /**
+     * A function determining the segment description displayed on the chart below the segment title.
+     */
+    segmentDescription?: (props: PieChartProps.SegmentDescriptionRenderProps) => string;
+    /**
+     * Title displayed in the donut chart's inner area.
+     */
+    innerAreaTitle?: string;
+    /**
+     * Description text displayed in the donut chart's inner area.
+     */
+    innerAreaDescription?: string;
+}
+export declare namespace PieChartProps {
+    export interface Ref {
+        /**
+         * Controls segments visibility and works with both controlled and uncontrolled visibility modes.
+         */
+        setVisibleSegments(visibleSegments: readonly string[]): void;
+        /**
+         * Functions similarly to `setVisibleSeries`, but applies to all series and doesn't require series IDs as input.
+         * Use this when implementing clear-filter actions in no-match states.
+         */
+        showAllSegments(): void;
+    }
+    export type SeriesOptions = PieSeriesOptions | DonutSeriesOptions;
+    export type PieSeriesOptions = CoreTypes.PieSeriesOptions;
+    export type DonutSeriesOptions = CoreTypes.DonutSeriesOptions;
+    export type PieSegmentOptions = CoreTypes.PieSegmentOptions;
+    export interface TooltipOptions {
+        enabled?: boolean;
+        size?: "small" | "medium" | "large";
+        details?: (props: TooltipDetailsRenderProps) => readonly TooltipDetail[];
+        header?: (props: TooltipHeaderRenderProps) => React.ReactNode;
+        body?: (props: TooltipBodyRenderProps) => React.ReactNode;
+        footer?: (props: TooltipFooterRenderProps) => React.ReactNode;
+    }
+    export type TooltipDetailsRenderProps = TooltipSlotRenderProps;
+    export type TooltipHeaderRenderProps = TooltipSlotRenderProps;
+    export type TooltipBodyRenderProps = TooltipSlotRenderProps;
+    export type TooltipFooterRenderProps = TooltipSlotRenderProps;
+    interface TooltipSlotRenderProps {
+        segmentId?: string;
+        segmentName: string;
+        segmentValue: number;
+        totalValue: number;
+    }
+    export type TooltipDetail = CoreTypes.BaseTooltipDetail;
+    export type SegmentTitleRenderProps = SegmentDescriptionRenderProps;
+    export interface SegmentDescriptionRenderProps {
+        segmentId?: string;
+        segmentName: string;
+        segmentValue: number;
+        totalValue: number;
+    }
+    export type LegendOptions = CoreTypes.BaseLegendOptions;
+    export type FilterOptions = CoreTypes.BaseFilterOptions;
+    export type NoDataOptions = CoreTypes.BaseNoDataOptions;
+    export {};
+}

package/pie-chart/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/pie-chart/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/pie-chart/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 * as CoreTypes from \"../core/interfaces\";\nimport { NonCancelableEventHandler } from \"../internal/events\";\n\n// PieChartProps is the type for PieChart React component properties. Unlike in Highcharts API,\n// we pass options directly to the component, instead of grouping them all into a single \"options\" property.\n// We do still organize related options in groups, e.g.: \"SeriesOptions\", \"TooltipOptions\".\nexport interface PieChartProps extends CoreTypes.BaseChartOptions, CoreTypes.WithPieI18nStrings {\n  /**\n   * Defines series options of the chart.\n   * This property corresponds to [series](https://api.highcharts.com/highcharts/series), and extends it\n   * with an additional \"donut\" series type.\n   *\n   * Supported series types:\n   * * [pie](https://api.highcharts.com/highcharts/series.pie).\n   * * donut - the pie series with predefined inner radius.\n   */\n  series: null | PieChartProps.SeriesOptions;\n\n  /**\n   * Defines tooltip options of the chart, including:\n   * * `enabled` - (optional, boolean) - Hides the tooltip when set to false.\n   * * `size` - (optional, \"small\" | \"medium\" | \"large\") - Specifies max tooltip size.\n   * * `details` - (optional, function) - Provides a list of key-value pairs as tooltip's body.\n   * * `header` - (optional, function) - Renders a custom tooltip header.\n   * * `body` - (optional, function) - Renders a custom tooltip body.\n   * * `footer` - (optional, function) - Renders a custom tooltip footer.\n   */\n  tooltip?: PieChartProps.TooltipOptions;\n\n  /**\n   * Specifies which segments to show using their IDs. By default, all segments are visible and managed by the component.\n   * If a segment doesn't have an ID, its name is used. When using this property, manage state updates with `onVisibleSegmentsChange`.\n   */\n  visibleSegments?: readonly string[];\n\n  /**\n   * A callback function, triggered when segments visibility changes as a result of user interaction with the legend or filter.\n   */\n  onVisibleSegmentsChange?: NonCancelableEventHandler<{ visibleSegments: string[] }>;\n\n  /**\n   * A function that determines the title of a segment displayed on the chart. The title appears above the segment\n   * description defined by `segmentDescription`. By default, it displays the segment name. You can hide the title\n   * by returning an empty string from the function.\n   */\n  segmentTitle?: (props: PieChartProps.SegmentTitleRenderProps) => string;\n\n  /**\n   * A function determining the segment description displayed on the chart below the segment title.\n   */\n  segmentDescription?: (props: PieChartProps.SegmentDescriptionRenderProps) => string;\n\n  /**\n   * Title displayed in the donut chart's inner area.\n   */\n  innerAreaTitle?: string;\n\n  /**\n   * Description text displayed in the donut chart's inner area.\n   */\n  innerAreaDescription?: string;\n}\n\nexport namespace PieChartProps {\n  export interface Ref {\n    /**\n     * Controls segments visibility and works with both controlled and uncontrolled visibility modes.\n     */\n    setVisibleSegments(visibleSegments: readonly string[]): void;\n    /**\n     * Functions similarly to `setVisibleSeries`, but applies to all series and doesn't require series IDs as input.\n     * Use this when implementing clear-filter actions in no-match states.\n     */\n    showAllSegments(): void;\n  }\n\n  export type SeriesOptions = PieSeriesOptions | DonutSeriesOptions;\n\n  export type PieSeriesOptions = CoreTypes.PieSeriesOptions;\n\n  export type DonutSeriesOptions = CoreTypes.DonutSeriesOptions;\n\n  export type PieSegmentOptions = CoreTypes.PieSegmentOptions;\n\n  export interface TooltipOptions {\n    enabled?: boolean;\n    size?: \"small\" | \"medium\" | \"large\";\n    details?: (props: TooltipDetailsRenderProps) => readonly TooltipDetail[];\n    header?: (props: TooltipHeaderRenderProps) => React.ReactNode;\n    body?: (props: TooltipBodyRenderProps) => React.ReactNode;\n    footer?: (props: TooltipFooterRenderProps) => React.ReactNode;\n  }\n\n  export type TooltipDetailsRenderProps = TooltipSlotRenderProps;\n  export type TooltipHeaderRenderProps = TooltipSlotRenderProps;\n  export type TooltipBodyRenderProps = TooltipSlotRenderProps;\n  export type TooltipFooterRenderProps = TooltipSlotRenderProps;\n  interface TooltipSlotRenderProps {\n    segmentId?: string;\n    segmentName: string;\n    segmentValue: number;\n    totalValue: number;\n  }\n\n  export type TooltipDetail = CoreTypes.BaseTooltipDetail;\n\n  export type SegmentTitleRenderProps = SegmentDescriptionRenderProps;\n  export interface SegmentDescriptionRenderProps {\n    segmentId?: string;\n    segmentName: string;\n    segmentValue: number;\n    totalValue: number;\n  }\n\n  export type LegendOptions = CoreTypes.BaseLegendOptions;\n\n  export type FilterOptions = CoreTypes.BaseFilterOptions;\n\n  export type NoDataOptions = CoreTypes.BaseNoDataOptions;\n}\n"]}

package/pie-chart/test-classes/styles.css.js

@@ -0,0 +1,8 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_w23ep_1jii0_5",
+  "inner-value": "awsui_inner-value_w23ep_1jii0_6",
+  "inner-description": "awsui_inner-description_w23ep_1jii0_7"
+};
+  

package/pie-chart/test-classes/styles.scoped.css

@@ -0,0 +1,9 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_w23ep_1jii0_5:not(#\9),
+.awsui_inner-value_w23ep_1jii0_6:not(#\9),
+.awsui_inner-description_w23ep_1jii0_7:not(#\9) {
+  /* used in test-utils */
+}

package/pie-chart/test-classes/styles.selectors.js

@@ -0,0 +1,9 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_w23ep_1jii0_5",
+  "inner-value": "awsui_inner-value_w23ep_1jii0_6",
+  "inner-description": "awsui_inner-description_w23ep_1jii0_7"
+};
+  

package/test-utils/dom/cartesian-chart/index.d.ts

@@ -0,0 +1,14 @@
+import { ElementWrapper } from "@cloudscape-design/test-utils-core/dom";
+import BaseChartWrapper from "../internal/base";
+import { CartesianChartTooltipWrapper } from "./tooltip";
+export default class CartesianChartWrapper extends BaseChartWrapper {
+    static rootSelector: string;
+    /**
+     * Finds chart's tooltip when visible.
+     */
+    findTooltip(): null | CartesianChartTooltipWrapper;
+    /**
+     * Finds series elements. Use this to assert the number of visible series.
+     */
+    findSeries(): Array<ElementWrapper>;
+}

package/test-utils/dom/cartesian-chart/index.js

@@ -0,0 +1,24 @@
+"use strict";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+Object.defineProperty(exports, "__esModule", { value: true });
+const base_1 = require("../internal/base");
+const tooltip_1 = require("./tooltip");
+const styles_selectors_js_1 = require("../../../cartesian-chart/test-classes/styles.selectors.js");
+class CartesianChartWrapper extends base_1.default {
+    /**
+     * Finds chart's tooltip when visible.
+     */
+    findTooltip() {
+        return this.findComponent(`.${tooltip_1.CartesianChartTooltipWrapper.rootSelector}`, tooltip_1.CartesianChartTooltipWrapper);
+    }
+    /**
+     * Finds series elements. Use this to assert the number of visible series.
+     */
+    findSeries() {
+        return this.findAllByClassName("highcharts-series");
+    }
+}
+exports.default = CartesianChartWrapper;
+CartesianChartWrapper.rootSelector = styles_selectors_js_1.default.root;
+//# sourceMappingURL=index.js.map

package/test-utils/dom/cartesian-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/cartesian-chart/index.ts"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;;AAItC,2CAAgD;AAChD,uCAAyD;AAEzD,mGAAoF;AAEpF,MAAqB,qBAAsB,SAAQ,cAAgB;IAGjE;;OAEG;IACI,WAAW;QAChB,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,sCAA4B,CAAC,YAAY,EAAE,EAAE,sCAA4B,CAAC,CAAC;IAC3G,CAAC;IAED;;OAEG;IACI,UAAU;QACf,OAAO,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;IACtD,CAAC;;AAfH,wCAgBC;AAfQ,kCAAY,GAAW,6BAAW,CAAC,IAAI,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ElementWrapper } from \"@cloudscape-design/test-utils-core/dom\";\n\nimport BaseChartWrapper from \"../internal/base\";\nimport { CartesianChartTooltipWrapper } from \"./tooltip\";\n\nimport testClasses from \"../../../cartesian-chart/test-classes/styles.selectors.js\";\n\nexport default class CartesianChartWrapper extends BaseChartWrapper {\n  static rootSelector: string = testClasses.root;\n\n  /**\n   * Finds chart's tooltip when visible.\n   */\n  public findTooltip(): null | CartesianChartTooltipWrapper {\n    return this.findComponent(`.${CartesianChartTooltipWrapper.rootSelector}`, CartesianChartTooltipWrapper);\n  }\n\n  /**\n   * Finds series elements. Use this to assert the number of visible series.\n   */\n  public findSeries(): Array<ElementWrapper> {\n    return this.findAllByClassName(\"highcharts-series\");\n  }\n}\n"]}

package/test-utils/dom/cartesian-chart/tooltip.d.ts

@@ -0,0 +1,28 @@
+import ChartTooltipWrapper from "@cloudscape-design/components/test-utils/dom/internal/chart-tooltip";
+import { ComponentWrapper, ElementWrapper } from "@cloudscape-design/test-utils-core/dom";
+export declare class CartesianChartTooltipWrapper extends ChartTooltipWrapper {
+    /**
+     * Finds matched tooltip points.
+     */
+    findPoints(): PointDetailsItemWrapper[];
+}
+export declare class PointDetailsSubItemWrapper extends ComponentWrapper {
+    /**
+     * Finds tooltip point key.
+     */
+    findKey(): ElementWrapper;
+    /**
+     * Finds tooltip point value.
+     */
+    findValue(): ElementWrapper;
+    /**
+     * Finds tooltip point description when defined.
+     */
+    findDescription(): null | ElementWrapper;
+}
+export declare class PointDetailsItemWrapper extends PointDetailsSubItemWrapper {
+    /**
+     * Finds point sub-items when defined.
+     */
+    findSubItems(): Array<PointDetailsSubItemWrapper>;
+}

package/test-utils/dom/cartesian-chart/tooltip.js

@@ -0,0 +1,48 @@
+"use strict";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PointDetailsItemWrapper = exports.PointDetailsSubItemWrapper = exports.CartesianChartTooltipWrapper = void 0;
+const chart_tooltip_1 = require("@cloudscape-design/components/test-utils/dom/internal/chart-tooltip");
+const dom_1 = require("@cloudscape-design/test-utils-core/dom");
+const styles_selectors_js_1 = require("../../../internal/components/series-details/test-classes/styles.selectors.js");
+class CartesianChartTooltipWrapper extends chart_tooltip_1.default {
+    /**
+     * Finds matched tooltip points.
+     */
+    findPoints() {
+        return this.findAll(`.${styles_selectors_js_1.default["list-item"]}`).map((wrapper) => new PointDetailsItemWrapper(wrapper.getElement()));
+    }
+}
+exports.CartesianChartTooltipWrapper = CartesianChartTooltipWrapper;
+class PointDetailsSubItemWrapper extends dom_1.ComponentWrapper {
+    /**
+     * Finds tooltip point key.
+     */
+    findKey() {
+        return this.findByClassName(styles_selectors_js_1.default.key);
+    }
+    /**
+     * Finds tooltip point value.
+     */
+    findValue() {
+        return this.findByClassName(styles_selectors_js_1.default.value);
+    }
+    /**
+     * Finds tooltip point description when defined.
+     */
+    findDescription() {
+        return this.findByClassName(styles_selectors_js_1.default.description);
+    }
+}
+exports.PointDetailsSubItemWrapper = PointDetailsSubItemWrapper;
+class PointDetailsItemWrapper extends PointDetailsSubItemWrapper {
+    /**
+     * Finds point sub-items when defined.
+     */
+    findSubItems() {
+        return this.findAll(`.${styles_selectors_js_1.default["inner-list-item"]}`).map((wrapper) => new PointDetailsSubItemWrapper(wrapper.getElement()));
+    }
+}
+exports.PointDetailsItemWrapper = PointDetailsItemWrapper;
+//# sourceMappingURL=tooltip.js.map

package/test-utils/dom/cartesian-chart/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/cartesian-chart/tooltip.ts"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;;;AAEtC,uGAAsG;AACtG,gEAA0F;AAE1F,sHAAoH;AAEpH,MAAa,4BAA6B,SAAQ,uBAAmB;IACnE;;OAEG;IACH,UAAU;QACR,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,6BAAwB,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,GAAG,CAClE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,uBAAuB,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAC/D,CAAC;IACJ,CAAC;CACF;AATD,oEASC;AAED,MAAa,0BAA2B,SAAQ,sBAAgB;IAC9D;;OAEG;IACH,OAAO;QACL,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAwB,CAAC,GAAG,CAAE,CAAC;IAC7D,CAAC;IAED;;OAEG;IACH,SAAS;QACP,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAwB,CAAC,KAAK,CAAE,CAAC;IAC/D,CAAC;IAED;;OAEG;IACH,eAAe;QACb,OAAO,IAAI,CAAC,eAAe,CAAC,6BAAwB,CAAC,WAAW,CAAC,CAAC;IACpE,CAAC;CACF;AArBD,gEAqBC;AAED,MAAa,uBAAwB,SAAQ,0BAA0B;IACrE;;OAEG;IACH,YAAY;QACV,OAAO,IAAI,CAAC,OAAO,CAAC,IAAI,6BAAwB,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC,GAAG,CACxE,CAAC,OAAO,EAAE,EAAE,CAAC,IAAI,0BAA0B,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC,CAClE,CAAC;IACJ,CAAC;CACF;AATD,0DASC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport ChartTooltipWrapper from \"@cloudscape-design/components/test-utils/dom/internal/chart-tooltip\";\nimport { ComponentWrapper, ElementWrapper } from \"@cloudscape-design/test-utils-core/dom\";\n\nimport seriesDetailsTestClasses from \"../../../internal/components/series-details/test-classes/styles.selectors.js\";\n\nexport class CartesianChartTooltipWrapper extends ChartTooltipWrapper {\n  /**\n   * Finds matched tooltip points.\n   */\n  findPoints() {\n    return this.findAll(`.${seriesDetailsTestClasses[\"list-item\"]}`).map(\n      (wrapper) => new PointDetailsItemWrapper(wrapper.getElement()),\n    );\n  }\n}\n\nexport class PointDetailsSubItemWrapper extends ComponentWrapper {\n  /**\n   * Finds tooltip point key.\n   */\n  findKey(): ElementWrapper {\n    return this.findByClassName(seriesDetailsTestClasses.key)!;\n  }\n\n  /**\n   * Finds tooltip point value.\n   */\n  findValue(): ElementWrapper {\n    return this.findByClassName(seriesDetailsTestClasses.value)!;\n  }\n\n  /**\n   * Finds tooltip point description when defined.\n   */\n  findDescription(): null | ElementWrapper {\n    return this.findByClassName(seriesDetailsTestClasses.description);\n  }\n}\n\nexport class PointDetailsItemWrapper extends PointDetailsSubItemWrapper {\n  /**\n   * Finds point sub-items when defined.\n   */\n  findSubItems(): Array<PointDetailsSubItemWrapper> {\n    return this.findAll(`.${seriesDetailsTestClasses[\"inner-list-item\"]}`).map(\n      (wrapper) => new PointDetailsSubItemWrapper(wrapper.getElement()),\n    );\n  }\n}\n"]}

package/test-utils/dom/index.d.ts

@@ -0,0 +1,46 @@
+import { ElementWrapper } from "@cloudscape-design/test-utils-core/dom";
+export { ElementWrapper };
+import CartesianChartWrapper from "./cartesian-chart";
+import PieChartWrapper from "./pie-chart";
+export { CartesianChartWrapper, PieChartWrapper };
+declare module "@cloudscape-design/test-utils-core/dist/dom" {
+    interface ElementWrapper {
+        /**
+         * Returns the wrapper of the first cartesian chart that matches the specified CSS selector.
+         * If no CSS selector is specified, returns the wrapper of the first cartesian chart.
+         * If no matching chart is found, returns `null`.
+         *
+         * @param {string} [selector] CSS Selector
+         * @returns {CartesianChartWrapper | null}
+         */
+        findCartesianHighcharts(selector?: string): CartesianChartWrapper | null;
+        /**
+         * Returns the wrapper of the first pie chart that matches the specified CSS selector.
+         * If no CSS selector is specified, returns the wrapper of the first pie chart.
+         * If no matching chart is found, returns `null`.
+         *
+         * @param {string} [selector] CSS Selector
+         * @returns {PieChartWrapper | null}
+         */
+        findPieHighcharts(selector?: string): PieChartWrapper | null;
+        /**
+         * Returns an array of cartesian chart wrappers that matches the specified CSS selector.
+         * If no CSS selector is specified, returns all cartesian charts inside the current wrapper.
+         * If no matching chart is found, returns an empty array.
+         *
+         * @param {string} [selector] CSS Selector
+         * @returns {CartesianChartWrapper[]}
+         */
+        findAllCartesianHighcharts(selector?: string): Array<CartesianChartWrapper>;
+        /**
+         * Returns an array of pie chart wrappers that matches the specified CSS selector.
+         * If no CSS selector is specified, returns all pie charts inside the current wrapper.
+         * If no matching chart is found, returns an empty array.
+         *
+         * @param {string} [selector] CSS Selector
+         * @returns {PieChartWrapper[]}
+         */
+        findAllPieHighcharts(selector?: string): Array<PieChartWrapper>;
+    }
+}
+export default function wrapper(root?: Element): ElementWrapper<Element>;