@cloudscape-design/components 3.0.0

package/area-chart/elements/data-series.js

@@ -0,0 +1,39 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo } from 'react';
+import clsx from 'clsx';
+import { useUniqueId } from '../../internal/hooks/use-unique-id';
+import AreaSeries from './area-series';
+import ThresholdSeries from './threshold-series';
+import styles from '../styles.css.js';
+import { useSelector } from '../model/async-store';
+export default memo(DataSeries);
+function DataSeries(_a) {
+    var model = _a.model;
+    var chartAreaClipPath = useUniqueId('awsui-area-chart__chart-area-');
+    var highlightedX = useSelector(model.interactions, function (state) { return state.highlightedX; });
+    var highlightedSeries = useSelector(model.interactions, function (state) { return state.highlightedSeries; });
+    var useHighlightDimmed = !highlightedX;
+    // Iterating series in the reversed order so that SVG paths overlap correctly.
+    var seriesData = [];
+    for (var seriesIndex = model.series.length - 1; seriesIndex >= 0; seriesIndex--) {
+        if (model.computed.plot.sx[seriesIndex]) {
+            seriesData.push([model.series[seriesIndex], model.computed.plot.sx[seriesIndex] || []]);
+        }
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("defs", { "aria-hidden": "true" },
+            React.createElement("clipPath", { id: chartAreaClipPath },
+                React.createElement("rect", { x: 0, y: 0, width: model.width, height: model.height }))),
+        React.createElement("g", { role: "group" }, seriesData.map(function (_a) {
+            var _b;
+            var series = _a[0], data = _a[1];
+            var isHighlighted = series === highlightedSeries;
+            var isDimmed = !!highlightedSeries && !isHighlighted;
+            return (React.createElement("g", { key: series.title, role: "group", "aria-label": series.title, className: clsx(styles.series, styles["series--".concat(series.type)], (_b = {},
+                    _b[styles['series--highlighted']] = isHighlighted,
+                    _b[styles['series--dimmed']] = useHighlightDimmed && isDimmed,
+                    _b)) }, series.type === 'area' ? (React.createElement(AreaSeries, { data: data, color: model.getInternalSeries(series).color, chartAreaClipPath: chartAreaClipPath })) : (React.createElement(ThresholdSeries, { data: data, xScale: model.computed.xScale, color: model.getInternalSeries(series).color, chartAreaClipPath: chartAreaClipPath }))));
+        }))));
+}
+//# sourceMappingURL=data-series.js.map

package/area-chart/elements/data-series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-series.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/data-series.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\nimport React, { memo } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport AreaSeries from './area-series';\nimport ThresholdSeries from './threshold-series';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\n\nimport styles from '../styles.css.js';\nimport { useSelector } from '../model/async-store';\n\nexport default memo(DataSeries) as typeof DataSeries;\n\nfunction DataSeries<T extends AreaChartProps.DataTypes>({ model }: { model: ChartModel<T> }) {\n  const chartAreaClipPath = useUniqueId('awsui-area-chart__chart-area-');\n\n  const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n  const highlightedSeries = useSelector(model.interactions, state => state.highlightedSeries);\n  const useHighlightDimmed = !highlightedX;\n\n  // Iterating series in the reversed order so that SVG paths overlap correctly.\n  const seriesData: [AreaChartProps.Series<T>, ChartModel.PlotPoint<T>[]][] = [];\n  for (let seriesIndex = model.series.length - 1; seriesIndex >= 0; seriesIndex--) {\n    if (model.computed.plot.sx[seriesIndex]) {\n      seriesData.push([model.series[seriesIndex], model.computed.plot.sx[seriesIndex] || []]);\n    }\n  }\n\n  return (\n    <>\n      <defs aria-hidden=\"true\">\n        <clipPath id={chartAreaClipPath}>\n          <rect x={0} y={0} width={model.width} height={model.height} />\n        </clipPath>\n      </defs>\n      <g role=\"group\">\n        {seriesData.map(([series, data]) => {\n          const isHighlighted = series === highlightedSeries;\n          const isDimmed = !!highlightedSeries && !isHighlighted;\n\n          return (\n            <g\n              key={series.title}\n              role=\"group\"\n              aria-label={series.title}\n              className={clsx(styles.series, styles[`series--${series.type}`], {\n                [styles['series--highlighted']]: isHighlighted,\n                [styles['series--dimmed']]: useHighlightDimmed && isDimmed,\n              })}\n            >\n              {series.type === 'area' ? (\n                <AreaSeries\n                  data={data}\n                  color={model.getInternalSeries(series).color}\n                  chartAreaClipPath={chartAreaClipPath}\n                />\n              ) : (\n                <ThresholdSeries\n                  data={data}\n                  xScale={model.computed.xScale}\n                  color={model.getInternalSeries(series).color}\n                  chartAreaClipPath={chartAreaClipPath}\n                />\n              )}\n            </g>\n          );\n        })}\n      </g>\n    </>\n  );\n}\n"]}

package/area-chart/elements/highlighted-point.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ChartModel } from '../model';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
+    model: ChartModel<any>;
+    ariaLabel?: string | undefined;
+} & React.RefAttributes<SVGGElement>>>;
+export default _default;
+//# sourceMappingURL=highlighted-point.d.ts.map

package/area-chart/elements/highlighted-point.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighted-point.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/highlighted-point.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;;;;;AAGtC,wBAAsD"}

package/area-chart/elements/highlighted-point.js

@@ -0,0 +1,21 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, memo } from 'react';
+import HighlightedPoint from '../../internal/components/cartesian-chart/highlighted-point';
+import { useSelector } from '../model/async-store';
+export default memo(forwardRef(AreaHighlightedPoint));
+function AreaHighlightedPoint(_a, ref) {
+    var model = _a.model, ariaLabel = _a.ariaLabel;
+    var highlightedPoint = useSelector(model.interactions, function (state) { return state.highlightedPoint; });
+    var isPopoverPinned = useSelector(model.interactions, function (state) { return state.isPopoverPinned; });
+    var point = highlightedPoint
+        ? {
+            key: "".concat(highlightedPoint.index.x, ":").concat(highlightedPoint.index.s),
+            x: highlightedPoint.scaled.x,
+            y: highlightedPoint.scaled.y1,
+            color: model.getInternalSeries(model.series[highlightedPoint.index.s]).color
+        }
+        : null;
+    return (React.createElement(HighlightedPoint, { ref: ref, point: point, role: "button", ariaLabel: ariaLabel, ariaHasPopup: true, ariaExpanded: isPopoverPinned }));
+}
+//# sourceMappingURL=highlighted-point.js.map

package/area-chart/elements/highlighted-point.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"highlighted-point.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/highlighted-point.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,gBAAgB,MAAM,6DAA6D,CAAC;AAG3F,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,eAAe,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC,CAAC,CAAC;AAEtD,SAAS,oBAAoB,CAC3B,EAMC,EACD,GAA2B;QANzB,KAAK,WAAA,EACL,SAAS,eAAA;IAOX,IAAM,gBAAgB,GAAG,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,gBAAgB,EAAtB,CAAsB,CAAC,CAAC;IAC1F,IAAM,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,eAAe,EAArB,CAAqB,CAAC,CAAC;IAExF,IAAM,KAAK,GAAG,gBAAgB;QAC5B,CAAC,CAAC;YACE,GAAG,EAAE,UAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC,cAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAE;YAC9D,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;YAC5B,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,EAAE;YAC7B,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;SAC7E;QACH,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,eAAe,GAC7B,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, memo } from 'react';\n\nimport HighlightedPoint from '../../internal/components/cartesian-chart/highlighted-point';\n\nimport { ChartModel } from '../model';\nimport { useSelector } from '../model/async-store';\n\nexport default memo(forwardRef(AreaHighlightedPoint));\n\nfunction AreaHighlightedPoint(\n  {\n    model,\n    ariaLabel,\n  }: {\n    model: ChartModel<any>;\n    ariaLabel?: string;\n  },\n  ref: React.Ref<SVGGElement>\n) {\n  const highlightedPoint = useSelector(model.interactions, state => state.highlightedPoint);\n  const isPopoverPinned = useSelector(model.interactions, state => state.isPopoverPinned);\n\n  const point = highlightedPoint\n    ? {\n        key: `${highlightedPoint.index.x}:${highlightedPoint.index.s}`,\n        x: highlightedPoint.scaled.x,\n        y: highlightedPoint.scaled.y1,\n        color: model.getInternalSeries(model.series[highlightedPoint.index.s]).color,\n      }\n    : null;\n\n  return (\n    <HighlightedPoint\n      ref={ref}\n      point={point}\n      role=\"button\"\n      ariaLabel={ariaLabel}\n      ariaHasPopup={true}\n      ariaExpanded={isPopoverPinned}\n    />\n  );\n}\n"]}

package/area-chart/elements/threshold-series.d.ts

@@ -0,0 +1,12 @@
+import { ChartScale } from '../../internal/components/cartesian-chart/scales';
+import { ChartModel } from '../model';
+export interface ThresholdSeriesProps<T> {
+    data: readonly ChartModel.PlotPoint<T>[];
+    xScale: ChartScale;
+    color: string;
+    chartAreaClipPath: string;
+}
+declare const _default: typeof ThresholdSeries;
+export default _default;
+declare function ThresholdSeries<T>({ data, xScale, color, chartAreaClipPath }: ThresholdSeriesProps<T>): JSX.Element;
+//# sourceMappingURL=threshold-series.d.ts.map

package/area-chart/elements/threshold-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"threshold-series.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/threshold-series.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,oBAAoB,CAAC,CAAC;IACrC,IAAI,EAAE,SAAS,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACzC,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,iBAAiB,EAAE,MAAM,CAAC;CAC3B;;AAED,wBAA+D;AAE/D,iBAAS,eAAe,CAAC,CAAC,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,iBAAiB,EAAE,EAAE,oBAAoB,CAAC,CAAC,CAAC,eAM9F"}

package/area-chart/elements/threshold-series.js

@@ -0,0 +1,13 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo } from 'react';
+export default memo(ThresholdSeries);
+function ThresholdSeries(_a) {
+    var data = _a.data, xScale = _a.xScale, color = _a.color, chartAreaClipPath = _a.chartAreaClipPath;
+    var range = xScale.d3Scale.range();
+    var y = data[0].scaled.y0;
+    var path = { x1: range[0], x2: range[1], y1: y, y2: y };
+    return React.createElement("line", __assign({ "aria-hidden": true, stroke: color, clipPath: "url(#".concat(chartAreaClipPath, ")") }, path));
+}
+//# sourceMappingURL=threshold-series.js.map

package/area-chart/elements/threshold-series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"threshold-series.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/threshold-series.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAWpC,eAAe,IAAI,CAAC,eAAe,CAA2B,CAAC;AAE/D,SAAS,eAAe,CAAI,EAAmE;QAAjE,IAAI,UAAA,EAAE,MAAM,YAAA,EAAE,KAAK,WAAA,EAAE,iBAAiB,uBAAA;IAClE,IAAM,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACrC,IAAM,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;IAC5B,IAAM,IAAI,GAAG,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC;IAE1D,OAAO,sDAAmB,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,eAAQ,iBAAiB,MAAG,IAAM,IAAI,EAAI,CAAC;AACtG,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\nimport { ChartScale } from '../../internal/components/cartesian-chart/scales';\nimport { ChartModel } from '../model';\n\nexport interface ThresholdSeriesProps<T> {\n  data: readonly ChartModel.PlotPoint<T>[];\n  xScale: ChartScale;\n  color: string;\n  chartAreaClipPath: string;\n}\n\nexport default memo(ThresholdSeries) as typeof ThresholdSeries;\n\nfunction ThresholdSeries<T>({ data, xScale, color, chartAreaClipPath }: ThresholdSeriesProps<T>) {\n  const range = xScale.d3Scale.range();\n  const y = data[0].scaled.y0;\n  const path = { x1: range[0], x2: range[1], y1: y, y2: y };\n\n  return <line aria-hidden={true} stroke={color} clipPath={`url(#${chartAreaClipPath})`} {...path} />;\n}\n"]}

package/area-chart/elements/use-highlight-details.d.ts

@@ -0,0 +1,23 @@
+import { CartesianChartProps } from '../../internal/components/cartesian-chart/interfaces';
+import { ChartSeriesDetailItem } from '../../internal/components/chart-series-details';
+import { AreaChartProps } from '../interfaces';
+import { ChartModel } from '../model';
+export interface HighlightDetails {
+    isPopoverPinned: boolean;
+    highlightIndex: number;
+    formattedX: string;
+    seriesTitle: string;
+    formattedY: number | string;
+    seriesDetails: readonly ChartSeriesDetailItem[];
+    totalDetails: readonly ChartSeriesDetailItem[];
+    pointDetails: null | ChartSeriesDetailItem;
+    activeLabel: string;
+}
+export default function useHighlightDetails<T extends AreaChartProps.DataTypes>({ model, xTickFormatter, yTickFormatter, detailTotalFormatter, detailTotalLabel, }: {
+    model: ChartModel<T>;
+    xTickFormatter?: CartesianChartProps.TickFormatter<T>;
+    yTickFormatter?: CartesianChartProps.TickFormatter<number>;
+    detailTotalFormatter?: CartesianChartProps.TickFormatter<number>;
+    detailTotalLabel?: string;
+}): null | HighlightDetails;
+//# sourceMappingURL=use-highlight-details.d.ts.map

package/area-chart/elements/use-highlight-details.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlight-details.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/use-highlight-details.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,MAAM,WAAW,gBAAgB;IAC/B,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAChD,YAAY,EAAE,SAAS,qBAAqB,EAAE,CAAC;IAC/C,YAAY,EAAE,IAAI,GAAG,qBAAqB,CAAC;IAC3C,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC9E,KAAK,EACL,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,gBAAgB,GACjB,EAAE;IACD,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,cAAc,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IACtD,cAAc,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3D,oBAAoB,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,GAAG,IAAI,GAAG,gBAAgB,CAiD1B"}

package/area-chart/elements/use-highlight-details.js

@@ -0,0 +1,50 @@
+import { __spreadArray } from "tslib";
+import { useSelector } from '../model/async-store';
+export default function useHighlightDetails(_a) {
+    var model = _a.model, xTickFormatter = _a.xTickFormatter, yTickFormatter = _a.yTickFormatter, detailTotalFormatter = _a.detailTotalFormatter, detailTotalLabel = _a.detailTotalLabel;
+    var hX = useSelector(model.interactions, function (state) { return state.highlightedX; });
+    var hPoint = useSelector(model.interactions, function (state) { return state.highlightedPoint; });
+    var isPopoverPinned = useSelector(model.interactions, function (state) { return state.isPopoverPinned; });
+    if (!hX) {
+        return null;
+    }
+    var firstPoint = hX[0];
+    var highlightIndex = firstPoint.index.x;
+    var seriesPoints = __spreadArray([], model.computed.plot.xs[highlightIndex], true);
+    var detailsTotal = seriesPoints.reduce(function (total, point) { return total + point.value; }, 0);
+    var formattedX = xTickFormatter ? xTickFormatter(firstPoint.x) : firstPoint.x.toString();
+    var seriesTitle = hPoint ? getInternalSeries(hPoint).title : '';
+    var formattedY = hPoint ? getInternalSeries(hPoint).formatValue(hPoint.value, hPoint.x) : '';
+    var seriesDetails = seriesPoints.map(function (point) {
+        var _a = getInternalSeries(point), title = _a.title, formatValue = _a.formatValue, color = _a.color, markerType = _a.markerType;
+        var isDimmed = Boolean(hPoint) && point !== hPoint;
+        return { key: title, value: formatValue(point.value, point.x), color: color, markerType: markerType, isDimmed: isDimmed };
+    });
+    var totalDetails = [
+        {
+            key: detailTotalLabel || '',
+            value: detailTotalFormatter
+                ? detailTotalFormatter(detailsTotal)
+                : yTickFormatter
+                    ? yTickFormatter(detailsTotal)
+                    : detailsTotal
+        },
+    ];
+    var pointDetails = hPoint ? seriesDetails[hPoint.index.s] : null;
+    var activeLabel = "".concat(seriesTitle, " ").concat(formattedX, " ").concat(formattedY, ", ").concat(totalDetails[0].key, " ").concat(totalDetails[0].value);
+    return {
+        isPopoverPinned: isPopoverPinned,
+        highlightIndex: highlightIndex,
+        formattedX: formattedX,
+        seriesTitle: seriesTitle,
+        formattedY: formattedY,
+        activeLabel: activeLabel,
+        seriesDetails: seriesDetails,
+        totalDetails: totalDetails,
+        pointDetails: pointDetails
+    };
+    function getInternalSeries(point) {
+        return model.getInternalSeries(model.series[point.index.s]);
+    }
+}
+//# sourceMappingURL=use-highlight-details.js.map

package/area-chart/elements/use-highlight-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlight-details.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/use-highlight-details.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CartesianChartProps } from '../../internal/components/cartesian-chart/interfaces';\nimport { ChartSeriesDetailItem } from '../../internal/components/chart-series-details';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport { useSelector } from '../model/async-store';\n\nexport interface HighlightDetails {\n  isPopoverPinned: boolean;\n  highlightIndex: number;\n  formattedX: string;\n  seriesTitle: string;\n  formattedY: number | string;\n  seriesDetails: readonly ChartSeriesDetailItem[];\n  totalDetails: readonly ChartSeriesDetailItem[];\n  pointDetails: null | ChartSeriesDetailItem;\n  activeLabel: string;\n}\n\nexport default function useHighlightDetails<T extends AreaChartProps.DataTypes>({\n  model,\n  xTickFormatter,\n  yTickFormatter,\n  detailTotalFormatter,\n  detailTotalLabel,\n}: {\n  model: ChartModel<T>;\n  xTickFormatter?: CartesianChartProps.TickFormatter<T>;\n  yTickFormatter?: CartesianChartProps.TickFormatter<number>;\n  detailTotalFormatter?: CartesianChartProps.TickFormatter<number>;\n  detailTotalLabel?: string;\n}): null | HighlightDetails {\n  const hX = useSelector(model.interactions, state => state.highlightedX);\n  const hPoint = useSelector(model.interactions, state => state.highlightedPoint);\n  const isPopoverPinned = useSelector(model.interactions, state => state.isPopoverPinned);\n\n  if (!hX) {\n    return null;\n  }\n\n  const [firstPoint] = hX;\n  const highlightIndex = firstPoint.index.x;\n  const seriesPoints = [...model.computed.plot.xs[highlightIndex]];\n  const detailsTotal = seriesPoints.reduce((total, point) => total + point.value, 0);\n  const formattedX = xTickFormatter ? xTickFormatter(firstPoint.x) : firstPoint.x.toString();\n  const seriesTitle = hPoint ? getInternalSeries(hPoint).title : '';\n  const formattedY = hPoint ? getInternalSeries(hPoint).formatValue(hPoint.value, hPoint.x) : '';\n  const seriesDetails = seriesPoints.map(point => {\n    const { title, formatValue, color, markerType } = getInternalSeries(point);\n    const isDimmed = Boolean(hPoint) && point !== hPoint;\n    return { key: title, value: formatValue(point.value, point.x), color, markerType, isDimmed };\n  });\n  const totalDetails = [\n    {\n      key: detailTotalLabel || '',\n      value: detailTotalFormatter\n        ? detailTotalFormatter(detailsTotal)\n        : yTickFormatter\n        ? yTickFormatter(detailsTotal)\n        : detailsTotal,\n    },\n  ];\n  const pointDetails = hPoint ? seriesDetails[hPoint.index.s] : null;\n  const activeLabel = `${seriesTitle} ${formattedX} ${formattedY}, ${totalDetails[0].key} ${totalDetails[0].value}`;\n\n  return {\n    isPopoverPinned,\n    highlightIndex,\n    formattedX,\n    seriesTitle,\n    formattedY,\n    activeLabel,\n    seriesDetails,\n    totalDetails,\n    pointDetails,\n  };\n\n  function getInternalSeries(point: ChartModel.PlotPoint<T>) {\n    return model.getInternalSeries(model.series[point.index.s]);\n  }\n}\n"]}

package/area-chart/elements/vertical-marker.d.ts

@@ -0,0 +1,8 @@
+import { AreaChartProps } from '../interfaces';
+import { ChartModel } from '../model';
+declare const _default: typeof AreaVerticalMarker;
+export default _default;
+declare function AreaVerticalMarker<T extends AreaChartProps.DataTypes>({ model }: {
+    model: ChartModel<T>;
+}): JSX.Element;
+//# sourceMappingURL=vertical-marker.d.ts.map

package/area-chart/elements/vertical-marker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-marker.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/elements/vertical-marker.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;;AAGtC,wBAAqE;AAErE,iBAAS,kBAAkB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,CAAA;CAAE,eAWlG"}

package/area-chart/elements/vertical-marker.js

@@ -0,0 +1,18 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { memo } from 'react';
+import VerticalMarker from '../../internal/components/cartesian-chart/vertical-marker';
+import { useSelector } from '../model/async-store';
+export default memo(AreaVerticalMarker);
+function AreaVerticalMarker(_a) {
+    var model = _a.model;
+    var highlightedX = useSelector(model.interactions, function (state) { return state.highlightedX; });
+    var verticalMarker = (highlightedX || []).map(function (point) { return ({
+        key: "".concat(point.index.x, ":").concat(point.index.s),
+        x: point.scaled.x,
+        y: point.scaled.y1,
+        color: model.getInternalSeries(model.series[point.index.s]).color
+    }); });
+    return React.createElement(VerticalMarker, { height: model.height, points: verticalMarker, ref: model.refs.verticalMarker });
+}
+//# sourceMappingURL=vertical-marker.js.map

package/area-chart/elements/vertical-marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-marker.js","sourceRoot":"","sources":["../../../../src/area-chart/elements/vertical-marker.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAEpC,OAAO,cAAc,MAAM,2DAA2D,CAAC;AAIvF,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,eAAe,IAAI,CAAC,kBAAkB,CAA8B,CAAC;AAErE,SAAS,kBAAkB,CAAqC,EAAmC;QAAjC,KAAK,WAAA;IACrE,IAAM,YAAY,GAAG,WAAW,CAAC,KAAK,CAAC,YAAY,EAAE,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,YAAY,EAAlB,CAAkB,CAAC,CAAC;IAElF,IAAM,cAAc,GAAG,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,UAAA,KAAK,IAAI,OAAA,CAAC;QACxD,GAAG,EAAE,UAAG,KAAK,CAAC,KAAK,CAAC,CAAC,cAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAE;QACxC,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;QACjB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,EAAE;QAClB,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK;KAClE,CAAC,EALuD,CAKvD,CAAC,CAAC;IAEJ,OAAO,oBAAC,cAAc,IAAC,MAAM,EAAE,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,cAAc,GAAI,CAAC;AAC1G,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { memo } from 'react';\n\nimport VerticalMarker from '../../internal/components/cartesian-chart/vertical-marker';\n\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from '../model';\nimport { useSelector } from '../model/async-store';\n\nexport default memo(AreaVerticalMarker) as typeof AreaVerticalMarker;\n\nfunction AreaVerticalMarker<T extends AreaChartProps.DataTypes>({ model }: { model: ChartModel<T> }) {\n  const highlightedX = useSelector(model.interactions, state => state.highlightedX);\n\n  const verticalMarker = (highlightedX || []).map(point => ({\n    key: `${point.index.x}:${point.index.s}`,\n    x: point.scaled.x,\n    y: point.scaled.y1,\n    color: model.getInternalSeries(model.series[point.index.s]).color,\n  }));\n\n  return <VerticalMarker height={model.height} points={verticalMarker} ref={model.refs.verticalMarker} />;\n}\n"]}

package/area-chart/index.d.ts

@@ -0,0 +1,5 @@
+import { AreaChartProps } from './interfaces';
+export { AreaChartProps };
+declare function AreaChart<T extends AreaChartProps.DataTypes>({ height, xScaleType, yScaleType, statusType, detailPopoverSize, i18nStrings, ...props }: AreaChartProps<T>): JSX.Element;
+export default AreaChart;
+//# sourceMappingURL=index.d.ts.map

package/area-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/area-chart/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,iBAAS,SAAS,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EACrD,MAAY,EACZ,UAAqB,EACrB,UAAqB,EACrB,UAAuB,EACvB,iBAA4B,EAC5B,WAAgB,EAChB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,CAAC,CAAC,eAcnB;AAID,eAAe,SAAS,CAAC"}

package/area-chart/index.js

@@ -0,0 +1,15 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalAreaChart from './internal';
+import useBaseComponent from '../internal/hooks/use-base-component';
+function AreaChart(_a) {
+    var _b = _a.height, height = _b === void 0 ? 500 : _b, _c = _a.xScaleType, xScaleType = _c === void 0 ? 'linear' : _c, _d = _a.yScaleType, yScaleType = _d === void 0 ? 'linear' : _d, _e = _a.statusType, statusType = _e === void 0 ? 'finished' : _e, _f = _a.detailPopoverSize, detailPopoverSize = _f === void 0 ? 'medium' : _f, _g = _a.i18nStrings, i18nStrings = _g === void 0 ? {} : _g, props = __rest(_a, ["height", "xScaleType", "yScaleType", "statusType", "detailPopoverSize", "i18nStrings"]);
+    var baseComponentProps = useBaseComponent('AreaChart');
+    return (React.createElement(InternalAreaChart, __assign({ height: height, xScaleType: xScaleType, yScaleType: yScaleType, statusType: statusType, detailPopoverSize: detailPopoverSize, i18nStrings: i18nStrings }, props, baseComponentProps)));
+}
+applyDisplayName(AreaChart, 'AreaChart');
+export default AreaChart;
+//# sourceMappingURL=index.js.map

package/area-chart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/area-chart/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,iBAAiB,MAAM,YAAY,CAAC;AAC3C,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,SAAS,SAAS,CAAqC,EAQnC;IAPlB,IAAA,cAAY,EAAZ,MAAM,mBAAG,GAAG,KAAA,EACZ,kBAAqB,EAArB,UAAU,mBAAG,QAAQ,KAAA,EACrB,kBAAqB,EAArB,UAAU,mBAAG,QAAQ,KAAA,EACrB,kBAAuB,EAAvB,UAAU,mBAAG,UAAU,KAAA,EACvB,yBAA4B,EAA5B,iBAAiB,mBAAG,QAAQ,KAAA,EAC5B,mBAAgB,EAAhB,WAAW,mBAAG,EAAE,KAAA,EACb,KAAK,cAP6C,wFAQtD,CADS;IAER,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzD,OAAO,CACL,oBAAC,iBAAiB,aAChB,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,IACpB,KAAK,EACL,kBAAkB,EACtB,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC;AAEzC,eAAe,SAAS,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\n\nimport { AreaChartProps } from './interfaces';\nimport InternalAreaChart from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { AreaChartProps };\n\nfunction AreaChart<T extends AreaChartProps.DataTypes>({\n  height = 500,\n  xScaleType = 'linear',\n  yScaleType = 'linear',\n  statusType = 'finished',\n  detailPopoverSize = 'medium',\n  i18nStrings = {},\n  ...props\n}: AreaChartProps<T>) {\n  const baseComponentProps = useBaseComponent('AreaChart');\n  return (\n    <InternalAreaChart\n      height={height}\n      xScaleType={xScaleType}\n      yScaleType={yScaleType}\n      statusType={statusType}\n      detailPopoverSize={detailPopoverSize}\n      i18nStrings={i18nStrings}\n      {...props}\n      {...baseComponentProps}\n    />\n  );\n}\n\napplyDisplayName(AreaChart, 'AreaChart');\n\nexport default AreaChart;\n"]}

package/area-chart/interfaces.d.ts

@@ -0,0 +1,51 @@
+import { CartesianChartProps, ChartDataTypes } from '../internal/components/cartesian-chart/interfaces';
+export interface AreaChartProps<T extends AreaChartProps.DataTypes> extends CartesianChartProps<T, AreaChartProps.Series<T>> {
+    /**
+     * Array that represents the source of data for the displayed chart.
+     * Each element can represent an area series, or a threshold, and can have the following properties:
+     *
+     * * `title` (string): A human-readable title for this series
+     * * `type` (string): Series type (`"area"`, or `"threshold"`)
+     * * `data` (Array): An array of data points, represented as objects with `x` and `y` properties. The `x` values must be consistent across all series
+     * * `color` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color
+     * * `valueFormatter` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.
+     */
+    series: ReadonlyArray<AreaChartProps.Series<T>>;
+    /**
+     * An object containing all the necessary localized strings required by the component.
+     */
+    i18nStrings?: AreaChartProps.I18nStrings<T>;
+}
+export declare namespace AreaChartProps {
+    type DataTypes = ChartDataTypes;
+    interface Datum<T> {
+        x: T;
+        y: number;
+    }
+    type Series<T> = AreaSeries<T> | ThresholdSeries;
+    interface AreaSeries<T> {
+        type: 'area';
+        title: string;
+        color?: string;
+        data: T extends unknown ? ReadonlyArray<Datum<T>> : ReadonlyArray<Datum<T>>;
+        valueFormatter?: ValueFormatter<number, T>;
+    }
+    interface ThresholdSeries {
+        type: 'threshold';
+        title: string;
+        color?: string;
+        y: number;
+        valueFormatter?: TickFormatter<number>;
+    }
+    type FilterChangeDetail<T> = CartesianChartProps.FilterChangeDetail<Series<T>>;
+    type HighlightChangeDetail<T> = CartesianChartProps.HighlightChangeDetail<Series<T>>;
+    type TickFormatter<T> = CartesianChartProps.TickFormatter<T>;
+    type ValueFormatter<YType, XType = null> = CartesianChartProps.ValueFormatter<YType, XType>;
+    interface I18nStrings<T> extends CartesianChartProps.I18nStrings<T> {
+        /** The title of the values total in the popover. */
+        detailTotalLabel?: string;
+        /** Function to format the displayed values total. */
+        detailTotalFormatter?: TickFormatter<number>;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/area-chart/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/area-chart/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAExG,MAAM,WAAW,cAAc,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,CAChE,SAAQ,mBAAmB,CAAC,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;IACxD;;;;;;;;;OASG;IACH,MAAM,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEhD;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;CAC7C;AAED,yBAAiB,cAAc,CAAC;IAC9B,KAAY,SAAS,GAAG,cAAc,CAAC;IAEvC,UAAiB,KAAK,CAAC,CAAC;QACtB,CAAC,EAAE,CAAC,CAAC;QACL,CAAC,EAAE,MAAM,CAAC;KACX;IAED,KAAY,MAAM,CAAC,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC;IAExD,UAAiB,UAAU,CAAC,CAAC;QAC3B,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,CAAC,SAAS,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5E,cAAc,CAAC,EAAE,cAAc,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KAC5C;IAED,UAAiB,eAAe;QAC9B,IAAI,EAAE,WAAW,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,CAAC,EAAE,MAAM,CAAC;QACV,cAAc,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KACxC;IAED,KAAY,kBAAkB,CAAC,CAAC,IAAI,mBAAmB,CAAC,kBAAkB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtF,KAAY,qBAAqB,CAAC,CAAC,IAAI,mBAAmB,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5F,KAAY,aAAa,CAAC,CAAC,IAAI,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAEpE,KAAY,cAAc,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,IAAI,mBAAmB,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEnG,UAAiB,WAAW,CAAC,CAAC,CAAE,SAAQ,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC;QACxE,oDAAoD;QACpD,gBAAgB,CAAC,EAAE,MAAM,CAAC;QAC1B,qDAAqD;QACrD,oBAAoB,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;KAC9C;CACF"}

package/area-chart/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/area-chart/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/area-chart/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CartesianChartProps, ChartDataTypes } from '../internal/components/cartesian-chart/interfaces';\n\nexport interface AreaChartProps<T extends AreaChartProps.DataTypes>\n  extends CartesianChartProps<T, AreaChartProps.Series<T>> {\n  /**\n   * Array that represents the source of data for the displayed chart.\n   * Each element can represent an area series, or a threshold, and can have the following properties:\n   *\n   * * `title` (string): A human-readable title for this series\n   * * `type` (string): Series type (`\"area\"`, or `\"threshold\"`)\n   * * `data` (Array): An array of data points, represented as objects with `x` and `y` properties. The `x` values must be consistent across all series\n   * * `color` (string): (Optional) A color hex value for this series. When assigned, it takes priority over the automatically assigned color\n   * * `valueFormatter` (Function): (Optional) A function that formats data values before rendering in the UI, For example, in the details popover.\n   */\n  series: ReadonlyArray<AreaChartProps.Series<T>>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: AreaChartProps.I18nStrings<T>;\n}\n\nexport namespace AreaChartProps {\n  export type DataTypes = ChartDataTypes;\n\n  export interface Datum<T> {\n    x: T;\n    y: number;\n  }\n\n  export type Series<T> = AreaSeries<T> | ThresholdSeries;\n\n  export interface AreaSeries<T> {\n    type: 'area';\n    title: string;\n    color?: string;\n    data: T extends unknown ? ReadonlyArray<Datum<T>> : ReadonlyArray<Datum<T>>;\n    valueFormatter?: ValueFormatter<number, T>;\n  }\n\n  export interface ThresholdSeries {\n    type: 'threshold';\n    title: string;\n    color?: string;\n    y: number;\n    valueFormatter?: TickFormatter<number>;\n  }\n\n  export type FilterChangeDetail<T> = CartesianChartProps.FilterChangeDetail<Series<T>>;\n\n  export type HighlightChangeDetail<T> = CartesianChartProps.HighlightChangeDetail<Series<T>>;\n\n  export type TickFormatter<T> = CartesianChartProps.TickFormatter<T>;\n\n  export type ValueFormatter<YType, XType = null> = CartesianChartProps.ValueFormatter<YType, XType>;\n\n  export interface I18nStrings<T> extends CartesianChartProps.I18nStrings<T> {\n    /** The title of the values total in the popover. */\n    detailTotalLabel?: string;\n    /** Function to format the displayed values total. */\n    detailTotalFormatter?: TickFormatter<number>;\n  }\n}\n"]}

package/area-chart/internal.d.ts

@@ -0,0 +1,7 @@
+import { AreaChartProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { SomeRequired } from '../internal/types';
+declare type InternalAreaChartProps<T extends AreaChartProps.DataTypes> = SomeRequired<AreaChartProps<T>, 'height' | 'xScaleType' | 'yScaleType' | 'statusType' | 'detailPopoverSize' | 'i18nStrings'> & InternalBaseComponentProps;
+export default function InternalAreaChart<T extends AreaChartProps.DataTypes>({ height, xScaleType, yScaleType, xDomain, yDomain, highlightedSeries: controlledHighlightedSeries, visibleSeries: controlledVisibleSeries, series: externalSeries, onFilterChange: controlledOnVisibleChange, onHighlightChange: controlledOnHighlightChange, i18nStrings, ariaLabel, ariaLabelledby, ariaDescription, xTitle, yTitle, hideFilter, additionalFilters, hideLegend, legendTitle, statusType, detailPopoverSize, empty, noMatch, errorText, loadingText, recoveryText, onRecoveryClick, __internalRootRef, ...props }: InternalAreaChartProps<T>): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/area-chart/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/area-chart/internal.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAK9C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,aAAK,sBAAsB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,IAAI,YAAY,CAC5E,cAAc,CAAC,CAAC,CAAC,EACjB,QAAQ,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG,aAAa,CAC5F,GACC,0BAA0B,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,cAAc,CAAC,SAAS,EAAE,EAC5E,MAAM,EACN,UAAU,EACV,UAAU,EACV,OAAO,EACP,OAAO,EACP,iBAAiB,EAAE,2BAA2B,EAC9C,aAAa,EAAE,uBAAuB,EACtC,MAAM,EAAE,cAAc,EACtB,cAAc,EAAE,yBAAyB,EACzC,iBAAiB,EAAE,2BAA2B,EAC9C,WAAW,EACX,SAAS,EACT,cAAc,EACd,eAAe,EACf,MAAM,EACN,MAAM,EACN,UAAU,EACV,iBAAiB,EACjB,UAAU,EACV,WAAW,EACX,UAAU,EACV,iBAAiB,EACjB,KAAK,EACL,OAAO,EACP,SAAS,EACT,WAAW,EACX,YAAY,EACZ,eAAe,EACf,iBAAwB,EACxB,GAAG,KAAK,EACT,EAAE,sBAAsB,CAAC,CAAC,CAAC,eAgI3B"}

package/area-chart/internal.js

@@ -0,0 +1,82 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { isDevelopment } from '../internal/is-development';
+import { getBaseProps } from '../internal/base-component';
+import InternalBox from '../box/internal';
+import ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';
+import AreaChartFilter from './elements/area-chart-filter';
+import AreaChartLegend from './elements/area-chart-legend';
+import InternalSpaceBetween from '../space-between/internal';
+import ChartContainer from './chart-container';
+import cartesianStyles from '../internal/components/cartesian-chart/styles.css.js';
+import styles from './styles.css.js';
+import useChartModel from './model/use-chart-model';
+import useFilterProps from './model/use-filter-props';
+import useHighlightProps from './model/use-highlight-props';
+import { isSeriesValid } from './model/utils';
+import { warnOnce } from '../internal/logging';
+import { nodeContains } from '../internal/utils/dom';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+export default function InternalAreaChart(_a) {
+    var _b, _c;
+    var height = _a.height, xScaleType = _a.xScaleType, yScaleType = _a.yScaleType, xDomain = _a.xDomain, yDomain = _a.yDomain, controlledHighlightedSeries = _a.highlightedSeries, controlledVisibleSeries = _a.visibleSeries, externalSeries = _a.series, controlledOnVisibleChange = _a.onFilterChange, controlledOnHighlightChange = _a.onHighlightChange, i18nStrings = _a.i18nStrings, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescription = _a.ariaDescription, xTitle = _a.xTitle, yTitle = _a.yTitle, hideFilter = _a.hideFilter, additionalFilters = _a.additionalFilters, hideLegend = _a.hideLegend, legendTitle = _a.legendTitle, statusType = _a.statusType, detailPopoverSize = _a.detailPopoverSize, empty = _a.empty, noMatch = _a.noMatch, errorText = _a.errorText, loadingText = _a.loadingText, recoveryText = _a.recoveryText, onRecoveryClick = _a.onRecoveryClick, _d = _a.__internalRootRef, __internalRootRef = _d === void 0 ? null : _d, props = __rest(_a, ["height", "xScaleType", "yScaleType", "xDomain", "yDomain", "highlightedSeries", "visibleSeries", "series", "onFilterChange", "onHighlightChange", "i18nStrings", "ariaLabel", "ariaLabelledby", "ariaDescription", "xTitle", "yTitle", "hideFilter", "additionalFilters", "hideLegend", "legendTitle", "statusType", "detailPopoverSize", "empty", "noMatch", "errorText", "loadingText", "recoveryText", "onRecoveryClick", "__internalRootRef"]);
+    var baseProps = getBaseProps(props);
+    var containerRef = useRef(null);
+    if (isDevelopment) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useEffect(function () {
+            if (!isSeriesValid(externalSeries)) {
+                warnOnce('AreaChart', "The `series` property violates the component's constraints: all `area` " +
+                    'series must have `data` arrays of the same length and with the same x-values.');
+            }
+        }, [externalSeries]);
+    }
+    var _e = useState(0), width = _e[0], setWidth = _e[1];
+    var _f = useFilterProps(externalSeries, controlledVisibleSeries, controlledOnVisibleChange), visibleSeries = _f[0], setVisibleSeries = _f[1];
+    var _g = useHighlightProps(externalSeries, controlledHighlightedSeries, controlledOnHighlightChange), highlightedSeries = _g[0], setHighlightedSeries = _g[1];
+    var model = useChartModel({
+        externalSeries: externalSeries,
+        visibleSeries: visibleSeries,
+        setVisibleSeries: setVisibleSeries,
+        highlightedSeries: highlightedSeries,
+        setHighlightedSeries: setHighlightedSeries,
+        xDomain: xDomain,
+        yDomain: yDomain,
+        xScaleType: xScaleType,
+        yScaleType: yScaleType,
+        height: height,
+        width: width
+    });
+    var _h = getChartStatus({
+        externalData: externalSeries,
+        visibleData: visibleSeries,
+        statusType: statusType
+    }), isEmpty = _h.isEmpty, isNoMatch = _h.isNoMatch, showChart = _h.showChart;
+    var showFilters = statusType === 'finished' && (!isEmpty || isNoMatch);
+    var showLegend = !hideLegend && !isEmpty && statusType === 'finished';
+    var reserveLegendSpace = !showChart && !hideLegend;
+    var reserveFilterSpace = !showChart && !isNoMatch && (!hideFilter || additionalFilters);
+    var onBlur = function (event) {
+        if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {
+            model.handlers.onContainerBlur();
+        }
+    };
+    var mergedRef = useMergeRefs(containerRef, __internalRootRef);
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef, onBlur: onBlur }),
+        showFilters && (React.createElement(InternalBox, { className: cartesianStyles['filter-container'], margin: { bottom: 'l' } },
+            React.createElement(InternalSpaceBetween, { size: "l", direction: "horizontal", className: clsx((_b = {}, _b[styles['has-default-filter']] = !hideFilter, _b)) },
+                !hideFilter && (React.createElement(AreaChartFilter, { model: model, filterLabel: i18nStrings.filterLabel, filterPlaceholder: i18nStrings.filterPlaceholder, filterSelectedAriaLabel: i18nStrings.filterSelectedAriaLabel })),
+                additionalFilters))),
+        React.createElement("div", { className: clsx(styles.content, (_c = {},
+                _c[styles['content--reserve-filter']] = reserveFilterSpace,
+                _c[styles['content--reserve-legend']] = reserveLegendSpace,
+                _c)), style: { minHeight: height } },
+            React.createElement(ChartStatusContainer, { isEmpty: isEmpty, isNoMatch: isNoMatch, showChart: showChart, statusType: statusType, empty: empty, noMatch: noMatch, loadingText: loadingText, errorText: errorText, recoveryText: recoveryText, onRecoveryClick: onRecoveryClick }),
+            showChart && (React.createElement(ChartContainer, { model: model, autoWidth: setWidth, detailPopoverSize: detailPopoverSize, xTitle: xTitle, yTitle: yTitle, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, i18nStrings: i18nStrings }))),
+        showLegend && (React.createElement(InternalBox, { margin: { top: 'm' } },
+            React.createElement(AreaChartLegend, { plotContainerRef: containerRef, model: model, legendTitle: legendTitle, ariaLabel: i18nStrings.legendAriaLabel })))));
+}
+//# sourceMappingURL=internal.js.map

package/area-chart/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/area-chart/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,oBAAoB,EAAE,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AAErG,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAC3D,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,eAAe,MAAM,sDAAsD,CAAC;AACnF,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,cAAc,MAAM,0BAA0B,CAAC;AACtD,OAAO,iBAAiB,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAShE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAqC,EA+BlD;;IA9B1B,IAAA,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,OAAO,aAAA,EACP,OAAO,aAAA,EACY,2BAA2B,uBAAA,EAC/B,uBAAuB,mBAAA,EAC9B,cAAc,YAAA,EACN,yBAAyB,oBAAA,EACtB,2BAA2B,uBAAA,EAC9C,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,eAAe,qBAAA,EACf,MAAM,YAAA,EACN,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,iBAAiB,uBAAA,EACjB,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,UAAU,gBAAA,EACV,iBAAiB,uBAAA,EACjB,KAAK,WAAA,EACL,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,eAAe,qBAAA,EACf,yBAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EACrB,KAAK,cA9BoE,mbA+B7E,CADS;IAER,IAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,IAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,IAAI,aAAa,EAAE;QACjB,sDAAsD;QACtD,SAAS,CAAC;YACR,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,EAAE;gBAClC,QAAQ,CACN,WAAW,EACX,yEAAyE;oBACvE,+EAA+E,CAClF,CAAC;aACH;QACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;KACtB;IAEK,IAAA,KAAoB,QAAQ,CAAC,CAAC,CAAC,EAA9B,KAAK,QAAA,EAAE,QAAQ,QAAe,CAAC;IAChC,IAAA,KAAoC,cAAc,CACtD,cAAc,EACd,uBAAuB,EACvB,yBAAyB,CAC1B,EAJM,aAAa,QAAA,EAAE,gBAAgB,QAIrC,CAAC;IACI,IAAA,KAA4C,iBAAiB,CACjE,cAAc,EACd,2BAA2B,EAC3B,2BAA2B,CAC5B,EAJM,iBAAiB,QAAA,EAAE,oBAAoB,QAI7C,CAAC;IACF,IAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,cAAc,gBAAA;QACd,aAAa,eAAA;QACb,gBAAgB,kBAAA;QAChB,iBAAiB,mBAAA;QACjB,oBAAoB,sBAAA;QACpB,OAAO,SAAA;QACP,OAAO,SAAA;QACP,UAAU,YAAA;QACV,UAAU,YAAA;QACV,MAAM,QAAA;QACN,KAAK,OAAA;KACN,CAAC,CAAC;IAEG,IAAA,KAAoC,cAAc,CAAC;QACvD,YAAY,EAAE,cAAc;QAC5B,WAAW,EAAE,aAAa;QAC1B,UAAU,YAAA;KACX,CAAC,EAJM,OAAO,aAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAInC,CAAC;IACH,IAAM,WAAW,GAAG,UAAU,KAAK,UAAU,IAAI,CAAC,CAAC,OAAO,IAAI,SAAS,CAAC,CAAC;IACzE,IAAM,UAAU,GAAG,CAAC,UAAU,IAAI,CAAC,OAAO,IAAI,UAAU,KAAK,UAAU,CAAC;IACxE,IAAM,kBAAkB,GAAG,CAAC,SAAS,IAAI,CAAC,UAAU,CAAC;IACrD,IAAM,kBAAkB,GAAG,CAAC,SAAS,IAAI,CAAC,SAAS,IAAI,CAAC,CAAC,UAAU,IAAI,iBAAiB,CAAC,CAAC;IAE1F,IAAM,MAAM,GAAG,UAAC,KAAuB;QACrC,IAAI,KAAK,CAAC,aAAa,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,EAAE;YACnF,KAAK,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC;SAClC;IACH,CAAC,CAAC;IAEF,IAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,iBAAiB,CAAC,CAAC;IAEhE,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM;QAClG,WAAW,IAAI,CACd,oBAAC,WAAW,IAAC,SAAS,EAAE,eAAe,CAAC,kBAAkB,CAAC,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;YAClF,oBAAC,oBAAoB,IACnB,IAAI,EAAC,GAAG,EACR,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,IAAI,WAAG,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,CAAC,UAAU,MAAG;gBAE/D,CAAC,UAAU,IAAI,CACd,oBAAC,eAAe,IACd,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,CAAC,WAAW,EACpC,iBAAiB,EAAE,WAAW,CAAC,iBAAiB,EAChD,uBAAuB,EAAE,WAAW,CAAC,uBAAuB,GAC5D,CACH;gBACA,iBAAiB,CACG,CACX,CACf;QAED,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO;gBAC5B,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,kBAAkB;gBACvD,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,kBAAkB;oBACvD,EACF,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE;YAE5B,oBAAC,oBAAoB,IACnB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,eAAe,EAAE,eAAe,GAChC;YACD,SAAS,IAAI,CACZ,oBAAC,cAAc,IACb,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,QAAQ,EACnB,iBAAiB,EAAE,iBAAiB,EACpC,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,GACxB,CACH,CACG;QAEL,UAAU,IAAI,CACb,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE;YAC/B,oBAAC,eAAe,IACd,gBAAgB,EAAE,YAAY,EAC9B,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,WAAW,CAAC,eAAe,GACtC,CACU,CACf,CACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { isDevelopment } from '../internal/is-development';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalBox from '../box/internal';\nimport ChartStatusContainer, { getChartStatus } from '../internal/components/chart-status-container';\n\nimport AreaChartFilter from './elements/area-chart-filter';\nimport AreaChartLegend from './elements/area-chart-legend';\nimport { AreaChartProps } from './interfaces';\nimport InternalSpaceBetween from '../space-between/internal';\nimport ChartContainer from './chart-container';\nimport cartesianStyles from '../internal/components/cartesian-chart/styles.css.js';\nimport styles from './styles.css.js';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport useChartModel from './model/use-chart-model';\nimport useFilterProps from './model/use-filter-props';\nimport useHighlightProps from './model/use-highlight-props';\nimport { isSeriesValid } from './model/utils';\nimport { warnOnce } from '../internal/logging';\nimport { nodeContains } from '../internal/utils/dom';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\n\ntype InternalAreaChartProps<T extends AreaChartProps.DataTypes> = SomeRequired<\n  AreaChartProps<T>,\n  'height' | 'xScaleType' | 'yScaleType' | 'statusType' | 'detailPopoverSize' | 'i18nStrings'\n> &\n  InternalBaseComponentProps;\n\nexport default function InternalAreaChart<T extends AreaChartProps.DataTypes>({\n  height,\n  xScaleType,\n  yScaleType,\n  xDomain,\n  yDomain,\n  highlightedSeries: controlledHighlightedSeries,\n  visibleSeries: controlledVisibleSeries,\n  series: externalSeries,\n  onFilterChange: controlledOnVisibleChange,\n  onHighlightChange: controlledOnHighlightChange,\n  i18nStrings,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescription,\n  xTitle,\n  yTitle,\n  hideFilter,\n  additionalFilters,\n  hideLegend,\n  legendTitle,\n  statusType,\n  detailPopoverSize,\n  empty,\n  noMatch,\n  errorText,\n  loadingText,\n  recoveryText,\n  onRecoveryClick,\n  __internalRootRef = null,\n  ...props\n}: InternalAreaChartProps<T>) {\n  const baseProps = getBaseProps(props);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  if (isDevelopment) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useEffect(() => {\n      if (!isSeriesValid(externalSeries)) {\n        warnOnce(\n          'AreaChart',\n          \"The `series` property violates the component's constraints: all `area` \" +\n            'series must have `data` arrays of the same length and with the same x-values.'\n        );\n      }\n    }, [externalSeries]);\n  }\n\n  const [width, setWidth] = useState(0);\n  const [visibleSeries, setVisibleSeries] = useFilterProps(\n    externalSeries,\n    controlledVisibleSeries,\n    controlledOnVisibleChange\n  );\n  const [highlightedSeries, setHighlightedSeries] = useHighlightProps(\n    externalSeries,\n    controlledHighlightedSeries,\n    controlledOnHighlightChange\n  );\n  const model = useChartModel({\n    externalSeries,\n    visibleSeries,\n    setVisibleSeries,\n    highlightedSeries,\n    setHighlightedSeries,\n    xDomain,\n    yDomain,\n    xScaleType,\n    yScaleType,\n    height,\n    width,\n  });\n\n  const { isEmpty, isNoMatch, showChart } = getChartStatus({\n    externalData: externalSeries,\n    visibleData: visibleSeries,\n    statusType,\n  });\n  const showFilters = statusType === 'finished' && (!isEmpty || isNoMatch);\n  const showLegend = !hideLegend && !isEmpty && statusType === 'finished';\n  const reserveLegendSpace = !showChart && !hideLegend;\n  const reserveFilterSpace = !showChart && !isNoMatch && (!hideFilter || additionalFilters);\n\n  const onBlur = (event: React.FocusEvent) => {\n    if (event.relatedTarget && !nodeContains(containerRef.current, event.relatedTarget)) {\n      model.handlers.onContainerBlur();\n    }\n  };\n\n  const mergedRef = useMergeRefs(containerRef, __internalRootRef);\n\n  return (\n    <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={mergedRef} onBlur={onBlur}>\n      {showFilters && (\n        <InternalBox className={cartesianStyles['filter-container']} margin={{ bottom: 'l' }}>\n          <InternalSpaceBetween\n            size=\"l\"\n            direction=\"horizontal\"\n            className={clsx({ [styles['has-default-filter']]: !hideFilter })}\n          >\n            {!hideFilter && (\n              <AreaChartFilter\n                model={model}\n                filterLabel={i18nStrings.filterLabel}\n                filterPlaceholder={i18nStrings.filterPlaceholder}\n                filterSelectedAriaLabel={i18nStrings.filterSelectedAriaLabel}\n              />\n            )}\n            {additionalFilters}\n          </InternalSpaceBetween>\n        </InternalBox>\n      )}\n\n      <div\n        className={clsx(styles.content, {\n          [styles['content--reserve-filter']]: reserveFilterSpace,\n          [styles['content--reserve-legend']]: reserveLegendSpace,\n        })}\n        style={{ minHeight: height }}\n      >\n        <ChartStatusContainer\n          isEmpty={isEmpty}\n          isNoMatch={isNoMatch}\n          showChart={showChart}\n          statusType={statusType}\n          empty={empty}\n          noMatch={noMatch}\n          loadingText={loadingText}\n          errorText={errorText}\n          recoveryText={recoveryText}\n          onRecoveryClick={onRecoveryClick}\n        />\n        {showChart && (\n          <ChartContainer\n            model={model}\n            autoWidth={setWidth}\n            detailPopoverSize={detailPopoverSize}\n            xTitle={xTitle}\n            yTitle={yTitle}\n            ariaLabel={ariaLabel}\n            ariaLabelledby={ariaLabelledby}\n            ariaDescription={ariaDescription}\n            i18nStrings={i18nStrings}\n          />\n        )}\n      </div>\n\n      {showLegend && (\n        <InternalBox margin={{ top: 'm' }}>\n          <AreaChartLegend\n            plotContainerRef={containerRef}\n            model={model}\n            legendTitle={legendTitle}\n            ariaLabel={i18nStrings.legendAriaLabel}\n          />\n        </InternalBox>\n      )}\n    </div>\n  );\n}\n"]}

package/area-chart/model/async-store.d.ts

@@ -0,0 +1,20 @@
+declare type Selector<S, R> = (state: S) => R;
+declare type Listener<S> = (state: S, prevState: S) => any;
+export interface ReadonlyAsyncStore<S> {
+    get(): S;
+    subscribe<R>(selector: Selector<S, R>, listener: Listener<S>): () => void;
+    unsubscribe(listener: Listener<any>): void;
+}
+export default class AsyncStore<S> implements ReadonlyAsyncStore<S> {
+    _state: S;
+    _listeners: [Selector<S, any>, Listener<any>][];
+    constructor(state: S);
+    get(): S;
+    set(cb: (state: S) => S): void;
+    subscribe<R>(selector: Selector<S, R>, listener: Listener<S>): () => void;
+    unsubscribe(listener: Listener<any>): void;
+}
+export declare function useReaction<S, R>(store: ReadonlyAsyncStore<S>, selector: Selector<S, R>, effect: Listener<R>): void;
+export declare function useSelector<S, R>(store: ReadonlyAsyncStore<S>, selector: Selector<S, R>): R;
+export {};
+//# sourceMappingURL=async-store.d.ts.map

package/area-chart/model/async-store.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"async-store.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/async-store.ts"],"names":[],"mappings":"AAMA,aAAK,QAAQ,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,CAAC;AACtC,aAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,KAAK,GAAG,CAAC;AAEnD,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,GAAG,IAAI,CAAC,CAAC;IACT,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC;IAC1E,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CAC5C;AAED,MAAM,CAAC,OAAO,OAAO,UAAU,CAAC,CAAC,CAAE,YAAW,kBAAkB,CAAC,CAAC,CAAC;IACjE,MAAM,EAAE,CAAC,CAAC;IACV,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,CAAM;gBAEzC,KAAK,EAAE,CAAC;IAIpB,GAAG,IAAI,CAAC;IAIR,GAAG,CAAC,EAAE,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,GAAG,IAAI;IAe9B,SAAS,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAMzE,WAAW,CAAC,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,GAAG,IAAI;CAU3C;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAYnH;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAc3F"}

package/area-chart/model/async-store.js

@@ -0,0 +1,68 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useLayoutEffect, useState } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+import { usePrevious } from '../../internal/hooks/use-previous';
+var AsyncStore = /** @class */ (function () {
+    function AsyncStore(state) {
+        this._listeners = [];
+        this._state = state;
+    }
+    AsyncStore.prototype.get = function () {
+        return this._state;
+    };
+    AsyncStore.prototype.set = function (cb) {
+        var _this = this;
+        var prevState = this._state;
+        var newState = cb(prevState);
+        this._state = newState;
+        unstable_batchedUpdates(function () {
+            for (var _i = 0, _a = _this._listeners; _i < _a.length; _i++) {
+                var _b = _a[_i], selector = _b[0], listener = _b[1];
+                if (selector(prevState) !== selector(newState)) {
+                    listener(newState, prevState);
+                }
+            }
+        });
+    };
+    AsyncStore.prototype.subscribe = function (selector, listener) {
+        var _this = this;
+        this._listeners.push([selector, listener]);
+        return function () { return _this.unsubscribe(listener); };
+    };
+    AsyncStore.prototype.unsubscribe = function (listener) {
+        for (var index = 0; index < this._listeners.length; index++) {
+            var _a = this._listeners[index], storedListener = _a[1];
+            if (storedListener === listener) {
+                this._listeners.splice(index, 1);
+                break;
+            }
+        }
+    };
+    return AsyncStore;
+}());
+export default AsyncStore;
+export function useReaction(store, selector, effect) {
+    useLayoutEffect(function () {
+        var unsubscribe = store.subscribe(selector, function (newState, prevState) {
+            return effect(selector(newState), selector(prevState));
+        });
+        return unsubscribe;
+    }, 
+    // ignoring selector and effect as they are expected to stay constant
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [store]);
+}
+export function useSelector(store, selector) {
+    var _a = useState(selector(store.get())), state = _a[0], setState = _a[1];
+    useReaction(store, selector, function (newState) {
+        setState(newState);
+    });
+    // When store changes we need the state to be updated synchronously to avoid inconsistencies.
+    var prevStore = usePrevious(store);
+    if (prevStore !== null && prevStore !== store) {
+        return selector(store.get());
+    }
+    return state;
+}
+//# sourceMappingURL=async-store.js.map