@cloudscape-design/components 3.0.0

package/mixed-line-bar-chart/chart-legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-legend.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/chart-legend.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAI9D,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAYzC,SAAS,mBAAmB,CAAmC,EAQjC;QAP5B,MAAM,YAAA,EACN,aAAa,mBAAA,EACb,iBAAiB,uBAAA,EACjB,iBAAiB,uBAAA,EACjB,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,gBAAgB,sBAAA;IAEhB,IAAM,WAAW,GAAsE,OAAO,CAAC;QAC7F,OAAO,MAAM;aACV,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAtC,CAAsC,CAAC;aACnD,GAAG,CAAC,UAAC,EAAiB;gBAAf,MAAM,YAAA,EAAE,KAAK,WAAA;YAAO,OAAA,CAAC;gBAC3B,KAAK,EAAE,MAAM,CAAC,KAAK;gBACnB,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC,IAAI,CAAC;gBACjC,KAAK,OAAA;gBACL,KAAK,EAAE,MAAM;aACd,CAAC;QAL0B,CAK1B,CAAC,CAAC;IACR,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IAE5B,OAAO,CACL,oBAAC,WAAW,IACV,MAAM,EAAE,WAAW,EACnB,iBAAiB,EAAE,iBAAiB,IAAI,IAAI,EAC5C,iBAAiB,EAAE,iBAAiB,EACpC,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,GAClC,CACH,CAAC;AACJ,CAAC;AAED,eAAe,mBAAmB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo } from 'react';\n\nimport ChartLegend from '../internal/components/chart-legend';\nimport { ChartFilterProps } from '../internal/components/chart-filter';\n\nimport { ChartDataTypes, MixedLineBarChartProps, InternalChartSeries } from './interfaces';\nimport { chartLegendMap } from './utils';\n\ninterface InternalChartLegendProps<T extends ChartDataTypes> {\n  series: ReadonlyArray<InternalChartSeries<T>>;\n  visibleSeries: ReadonlyArray<MixedLineBarChartProps.ChartSeries<T>>;\n  plotContainerRef: React.RefObject<HTMLDivElement>;\n  highlightedSeries?: MixedLineBarChartProps.ChartSeries<T> | null;\n  onHighlightChange: (series: MixedLineBarChartProps.ChartSeries<T> | null) => void;\n  legendTitle?: string;\n  ariaLabel?: string;\n}\n\nfunction InternalChartLegend<T extends number | string | Date>({\n  series,\n  visibleSeries,\n  highlightedSeries,\n  onHighlightChange,\n  legendTitle,\n  ariaLabel,\n  plotContainerRef,\n}: InternalChartLegendProps<T>) {\n  const legendItems: ChartFilterProps<MixedLineBarChartProps.ChartSeries<T>>['series'] = useMemo(() => {\n    return series\n      .filter(s => visibleSeries.indexOf(s.series) !== -1)\n      .map(({ series, color }) => ({\n        label: series.title,\n        type: chartLegendMap[series.type],\n        color,\n        datum: series,\n      }));\n  }, [series, visibleSeries]);\n\n  return (\n    <ChartLegend<MixedLineBarChartProps.ChartSeries<T>>\n      series={legendItems}\n      highlightedSeries={highlightedSeries || null}\n      onHighlightChange={onHighlightChange}\n      legendTitle={legendTitle}\n      ariaLabel={ariaLabel}\n      plotContainerRef={plotContainerRef}\n    />\n  );\n}\n\nexport default InternalChartLegend;\n"]}

package/mixed-line-bar-chart/chart-popover.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ChartDataTypes, MixedLineBarChartProps } from './interfaces';
+import { HighlightDetails } from './format-highlighted';
+export interface MixedChartPopoverProps<T extends ChartDataTypes> {
+    containerRef: React.RefObject<HTMLDivElement>;
+    trackRef: React.RefObject<SVGElement>;
+    isOpen: boolean;
+    isPinned: boolean;
+    highlightDetails: null | HighlightDetails;
+    onDismiss(): void;
+    size: MixedLineBarChartProps<T>['detailPopoverSize'];
+    dismissAriaLabel?: string;
+}
+export default function MixedChartPopover<T extends ChartDataTypes>({ containerRef, trackRef, isOpen, isPinned, highlightDetails, onDismiss, size, dismissAriaLabel, }: MixedChartPopoverProps<T>): JSX.Element;
+//# sourceMappingURL=chart-popover.d.ts.map

package/mixed-line-bar-chart/chart-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-popover.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/chart-popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAItE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAExD,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,cAAc;IAC9D,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IACtC,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,IAAI,GAAG,gBAAgB,CAAC;IAC1C,SAAS,IAAI,IAAI,CAAC;IAClB,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,SAAS,cAAc,EAAE,EAClE,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,SAAS,EACT,IAAe,EACf,gBAAgB,GACjB,EAAE,sBAAsB,CAAC,CAAC,CAAC,eAuB3B"}

package/mixed-line-bar-chart/chart-popover.js

@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import ChartPopover from '../internal/components/chart-popover';
+import ChartSeriesDetails from '../internal/components/chart-series-details';
+import styles from './styles.css.js';
+import { Transition } from '../internal/components/transition';
+export default function MixedChartPopover(_a) {
+    var containerRef = _a.containerRef, trackRef = _a.trackRef, isOpen = _a.isOpen, isPinned = _a.isPinned, highlightDetails = _a.highlightDetails, onDismiss = _a.onDismiss, _b = _a.size, size = _b === void 0 ? 'medium' : _b, dismissAriaLabel = _a.dismissAriaLabel;
+    return (React.createElement(Transition, { "in": isOpen }, function (state, ref) { return (React.createElement("div", { ref: ref, className: clsx(state === 'exiting' && styles.exiting) }, (isOpen || state !== 'exited') && highlightDetails && (React.createElement(ChartPopover, { title: highlightDetails.position, trackRef: trackRef, trackKey: highlightDetails.position, dismissButton: isPinned, dismissAriaLabel: dismissAriaLabel, onDismiss: onDismiss, container: containerRef.current, size: size },
+        React.createElement(ChartSeriesDetails, { details: highlightDetails.details }))))); }));
+}
+//# sourceMappingURL=chart-popover.js.map

package/mixed-line-bar-chart/chart-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-popover.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/chart-popover.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,sCAAsC,CAAC;AAChE,OAAO,kBAAkB,MAAM,6CAA6C,CAAC;AAG7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAc/D,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAA2B,EASxC;QAR1B,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,gBAAgB,sBAAA,EAChB,SAAS,eAAA,EACT,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,gBAAgB,sBAAA;IAEhB,OAAO,CACL,oBAAC,UAAU,IAAC,IAAE,EAAE,MAAM,IACnB,UAAC,KAAK,EAAE,GAAG,IAAK,OAAA,CACf,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,IAClE,CAAC,MAAM,IAAI,KAAK,KAAK,QAAQ,CAAC,IAAI,gBAAgB,IAAI,CACrD,oBAAC,YAAY,IACX,KAAK,EAAE,gBAAgB,CAAC,QAAQ,EAChC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,EACnC,aAAa,EAAE,QAAQ,EACvB,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,YAAY,CAAC,OAAO,EAC/B,IAAI,EAAE,IAAI;QAEV,oBAAC,kBAAkB,IAAC,OAAO,EAAE,gBAAgB,CAAC,OAAO,GAAI,CAC5C,CAChB,CACG,CACP,EAjBgB,CAiBhB,CACU,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport ChartPopover from '../internal/components/chart-popover';\nimport ChartSeriesDetails from '../internal/components/chart-series-details';\nimport { ChartDataTypes, MixedLineBarChartProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { Transition } from '../internal/components/transition';\nimport { HighlightDetails } from './format-highlighted';\n\nexport interface MixedChartPopoverProps<T extends ChartDataTypes> {\n  containerRef: React.RefObject<HTMLDivElement>;\n  trackRef: React.RefObject<SVGElement>;\n  isOpen: boolean;\n  isPinned: boolean;\n  highlightDetails: null | HighlightDetails;\n  onDismiss(): void;\n  size: MixedLineBarChartProps<T>['detailPopoverSize'];\n  dismissAriaLabel?: string;\n}\n\nexport default function MixedChartPopover<T extends ChartDataTypes>({\n  containerRef,\n  trackRef,\n  isOpen,\n  isPinned,\n  highlightDetails,\n  onDismiss,\n  size = 'medium',\n  dismissAriaLabel,\n}: MixedChartPopoverProps<T>) {\n  return (\n    <Transition in={isOpen}>\n      {(state, ref) => (\n        <div ref={ref} className={clsx(state === 'exiting' && styles.exiting)}>\n          {(isOpen || state !== 'exited') && highlightDetails && (\n            <ChartPopover\n              title={highlightDetails.position}\n              trackRef={trackRef}\n              trackKey={highlightDetails.position}\n              dismissButton={isPinned}\n              dismissAriaLabel={dismissAriaLabel}\n              onDismiss={onDismiss}\n              container={containerRef.current}\n              size={size}\n            >\n              <ChartSeriesDetails details={highlightDetails.details} />\n            </ChartPopover>\n          )}\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}

package/mixed-line-bar-chart/data-series.d.ts

@@ -0,0 +1,16 @@
+import { ChartScale, NumericChartScale } from '../internal/components/cartesian-chart/scales';
+import { ChartDataTypes, InternalChartSeries, MixedLineBarChartProps } from './interfaces';
+export interface DataSeriesProps<T> {
+    axis: 'x' | 'y';
+    plotHeight: number;
+    plotWidth: number;
+    highlightedSeries: MixedLineBarChartProps.ChartSeries<T> | null;
+    highlightedGroupIndex: number | null;
+    stackedBars: boolean;
+    isGroupNavigation: boolean;
+    visibleSeries: ReadonlyArray<InternalChartSeries<T>>;
+    xScale: ChartScale;
+    yScale: NumericChartScale;
+}
+export default function DataSeries<T extends ChartDataTypes>({ axis, plotHeight, plotWidth, highlightedGroupIndex, highlightedSeries, stackedBars, isGroupNavigation, visibleSeries, xScale, yScale, }: DataSeriesProps<T>): JSX.Element;
+//# sourceMappingURL=data-series.d.ts.map

package/mixed-line-bar-chart/data-series.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-series.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/data-series.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAG9F,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAK3F,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAC;IAEhB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAElB,iBAAiB,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAChE,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IAErC,WAAW,EAAE,OAAO,CAAC;IACrB,iBAAiB,EAAE,OAAO,CAAC;IAE3B,aAAa,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;CAC3B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,CAAC,SAAS,cAAc,EAAE,EAC3D,IAAI,EACJ,UAAU,EACV,SAAS,EACT,qBAAqB,EACrB,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,MAAM,EACN,MAAM,GACP,EAAE,eAAe,CAAC,CAAC,CAAC,eA8EpB"}

package/mixed-line-bar-chart/data-series.js

@@ -0,0 +1,49 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import LineSeries from './line-series';
+import BarSeries from './bar-series';
+import styles from './styles.css.js';
+import { calculateOffsetMaps } from './utils';
+export default function DataSeries(_a) {
+    var axis = _a.axis, plotHeight = _a.plotHeight, plotWidth = _a.plotWidth, highlightedGroupIndex = _a.highlightedGroupIndex, highlightedSeries = _a.highlightedSeries, stackedBars = _a.stackedBars, isGroupNavigation = _a.isGroupNavigation, visibleSeries = _a.visibleSeries, xScale = _a.xScale, yScale = _a.yScale;
+    var chartAreaClipPath = useUniqueId('awsui-mixed-line-bar-chart__chart-area-');
+    var stackedBarOffsetMaps = useMemo(function () {
+        if (!stackedBars) {
+            return [];
+        }
+        var barData = [];
+        visibleSeries.forEach(function (_a) {
+            var series = _a.series;
+            if (series.type === 'bar') {
+                barData.push(series.data);
+            }
+        });
+        return calculateOffsetMaps(barData);
+    }, [visibleSeries, stackedBars]);
+    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: plotWidth, height: plotHeight }))),
+        React.createElement("g", { "aria-hidden": isGroupNavigation ? true : undefined, role: "group" }, visibleSeries.map(function (_a, index) {
+            var _b;
+            var series = _a.series, color = _a.color;
+            var isHighlighted = series === highlightedSeries;
+            var isDimmed = !!highlightedSeries && !isHighlighted;
+            switch (series.type) {
+                case 'line':
+                case 'threshold': {
+                    return (React.createElement("g", { key: index, 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']] = isDimmed,
+                            _b)) },
+                        React.createElement(LineSeries, { axis: axis, series: series, color: color, xScale: xScale, yScale: yScale, chartAreaClipPath: chartAreaClipPath })));
+                }
+                case 'bar':
+                    return (React.createElement(BarSeries, { key: index, axis: axis, series: series, color: color, totalSeriesCount: visibleSeries.filter(function (s) { return s.series.type === 'bar'; }).length, seriesIndex: index, xScale: xScale, yScale: yScale, plotSize: axis === 'y' ? plotWidth : plotHeight, highlighted: isHighlighted, dimmed: isDimmed, chartAreaClipPath: chartAreaClipPath, stackedBarOffsets: stackedBarOffsetMaps[index], highlightedGroupIndex: highlightedGroupIndex }));
+            }
+        }))));
+}
+//# sourceMappingURL=data-series.js.map

package/mixed-line-bar-chart/data-series.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-series.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/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, { useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { ChartScale, NumericChartScale } from '../internal/components/cartesian-chart/scales';\nimport LineSeries from './line-series';\nimport BarSeries from './bar-series';\nimport { ChartDataTypes, InternalChartSeries, MixedLineBarChartProps } from './interfaces';\n\nimport styles from './styles.css.js';\nimport { calculateOffsetMaps, StackedOffsets } from './utils';\n\nexport interface DataSeriesProps<T> {\n  axis: 'x' | 'y';\n\n  plotHeight: number;\n  plotWidth: number;\n\n  highlightedSeries: MixedLineBarChartProps.ChartSeries<T> | null;\n  highlightedGroupIndex: number | null;\n\n  stackedBars: boolean;\n  isGroupNavigation: boolean;\n\n  visibleSeries: ReadonlyArray<InternalChartSeries<T>>;\n  xScale: ChartScale;\n  yScale: NumericChartScale;\n}\n\nexport default function DataSeries<T extends ChartDataTypes>({\n  axis,\n  plotHeight,\n  plotWidth,\n  highlightedGroupIndex,\n  highlightedSeries,\n  stackedBars,\n  isGroupNavigation,\n  visibleSeries,\n  xScale,\n  yScale,\n}: DataSeriesProps<T>) {\n  const chartAreaClipPath = useUniqueId('awsui-mixed-line-bar-chart__chart-area-');\n\n  const stackedBarOffsetMaps: StackedOffsets[] = useMemo(() => {\n    if (!stackedBars) {\n      return [];\n    }\n\n    const barData: Array<readonly MixedLineBarChartProps.Datum<ChartDataTypes>[]> = [];\n    visibleSeries.forEach(({ series }) => {\n      if (series.type === 'bar') {\n        barData.push(series.data);\n      }\n    });\n    return calculateOffsetMaps(barData);\n  }, [visibleSeries, stackedBars]);\n\n  return (\n    <>\n      <defs aria-hidden=\"true\">\n        <clipPath id={chartAreaClipPath}>\n          <rect x={0} y={0} width={plotWidth} height={plotHeight} />\n        </clipPath>\n      </defs>\n      <g aria-hidden={isGroupNavigation ? true : undefined} role=\"group\">\n        {visibleSeries.map(({ series, color }, index) => {\n          const isHighlighted = series === highlightedSeries;\n          const isDimmed = !!highlightedSeries && !isHighlighted;\n\n          switch (series.type) {\n            case 'line':\n            case 'threshold': {\n              return (\n                <g\n                  key={index}\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']]: isDimmed,\n                  })}\n                >\n                  <LineSeries\n                    axis={axis}\n                    series={series}\n                    color={color}\n                    xScale={xScale}\n                    yScale={yScale}\n                    chartAreaClipPath={chartAreaClipPath}\n                  />\n                </g>\n              );\n            }\n\n            case 'bar':\n              return (\n                <BarSeries\n                  key={index}\n                  axis={axis}\n                  series={series}\n                  color={color}\n                  totalSeriesCount={visibleSeries.filter(s => s.series.type === 'bar').length}\n                  seriesIndex={index}\n                  xScale={xScale}\n                  yScale={yScale}\n                  plotSize={axis === 'y' ? plotWidth : plotHeight}\n                  highlighted={isHighlighted}\n                  dimmed={isDimmed}\n                  chartAreaClipPath={chartAreaClipPath}\n                  stackedBarOffsets={stackedBarOffsetMaps[index]}\n                  highlightedGroupIndex={highlightedGroupIndex}\n                />\n              );\n          }\n        })}\n      </g>\n    </>\n  );\n}\n"]}

package/mixed-line-bar-chart/format-highlighted.d.ts

@@ -0,0 +1,12 @@
+import { ChartDataTypes, InternalChartSeries } from './interfaces';
+import { ChartSeriesDetailItem } from '../internal/components/chart-series-details';
+import { CartesianChartProps } from '../internal/components/cartesian-chart/interfaces';
+export interface HighlightDetails {
+    position: string;
+    details: ChartSeriesDetailItem[];
+}
+/**
+ * Formats provided x-position and its corresponding series values.
+ */
+export default function formatPosition<T extends ChartDataTypes>(position: T, series: readonly InternalChartSeries<T>[], xTickFormatter?: CartesianChartProps.TickFormatter<T>): HighlightDetails;
+//# sourceMappingURL=format-highlighted.d.ts.map

package/mixed-line-bar-chart/format-highlighted.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-highlighted.d.ts","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/format-highlighted.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,mDAAmD,CAAC;AAGxF,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,SAAS,cAAc,EAC7D,QAAQ,EAAE,CAAC,EACX,MAAM,EAAE,SAAS,mBAAmB,CAAC,CAAC,CAAC,EAAE,EACzC,cAAc,CAAC,EAAE,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC,GACpD,gBAAgB,CAYlB"}

package/mixed-line-bar-chart/format-highlighted.js

@@ -0,0 +1,39 @@
+import { matchesX } from './utils';
+/**
+ * Formats provided x-position and its corresponding series values.
+ */
+export default function formatPosition(position, series, xTickFormatter) {
+    var formattedPosition = xTickFormatter ? xTickFormatter(position) : position.toString();
+    var details = [];
+    series.forEach(function (s) {
+        var detail = getSeriesDetail(s, position);
+        if (detail) {
+            details.push(detail);
+        }
+    });
+    return { position: formattedPosition, details: details };
+}
+function getSeriesDetail(internalSeries, targetX) {
+    var series = internalSeries.series, color = internalSeries.color;
+    if (series.type === 'threshold') {
+        return {
+            key: series.title,
+            value: series.valueFormatter ? series.valueFormatter(series.y) : series.y,
+            color: color,
+            markerType: 'dashed'
+        };
+    }
+    for (var _i = 0, _a = series.data; _i < _a.length; _i++) {
+        var d = _a[_i];
+        if (matchesX(targetX, d.x)) {
+            return {
+                key: series.title,
+                value: series.valueFormatter ? series.valueFormatter(d.y, targetX) : d.y,
+                color: color,
+                markerType: series.type === 'line' ? 'line' : 'rectangle'
+            };
+        }
+    }
+    return null;
+}
+//# sourceMappingURL=format-highlighted.js.map

package/mixed-line-bar-chart/format-highlighted.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-highlighted.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/format-highlighted.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAOnC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,QAAW,EACX,MAAyC,EACzC,cAAqD;IAErD,IAAM,iBAAiB,GAAG,cAAc,CAAC,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;IAE1F,IAAM,OAAO,GAA4B,EAAE,CAAC;IAC5C,MAAM,CAAC,OAAO,CAAC,UAAA,CAAC;QACd,IAAM,MAAM,GAAG,eAAe,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC5C,IAAI,MAAM,EAAE;YACV,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;SACtB;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,OAAO,SAAA,EAAE,CAAC;AAClD,CAAC;AAED,SAAS,eAAe,CAAI,cAAsC,EAAE,OAAU;IACpE,IAAA,MAAM,GAAY,cAAc,OAA1B,EAAE,KAAK,GAAK,cAAc,MAAnB,CAAoB;IAEzC,IAAI,MAAM,CAAC,IAAI,KAAK,WAAW,EAAE;QAC/B,OAAO;YACL,GAAG,EAAE,MAAM,CAAC,KAAK;YACjB,KAAK,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;YACzE,KAAK,OAAA;YACL,UAAU,EAAE,QAAQ;SACrB,CAAC;KACH;IAED,KAAgB,UAAW,EAAX,KAAA,MAAM,CAAC,IAAI,EAAX,cAAW,EAAX,IAAW,EAAE;QAAxB,IAAM,CAAC,SAAA;QACV,IAAI,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE;YAC1B,OAAO;gBACL,GAAG,EAAE,MAAM,CAAC,KAAK;gBACjB,KAAK,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACxE,KAAK,OAAA;gBACL,UAAU,EAAE,MAAM,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW;aAC1D,CAAC;SACH;KACF;IAED,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartDataTypes, InternalChartSeries } from './interfaces';\nimport { ChartSeriesDetailItem } from '../internal/components/chart-series-details';\nimport { CartesianChartProps } from '../internal/components/cartesian-chart/interfaces';\nimport { matchesX } from './utils';\n\nexport interface HighlightDetails {\n  position: string;\n  details: ChartSeriesDetailItem[];\n}\n\n/**\n * Formats provided x-position and its corresponding series values.\n */\nexport default function formatPosition<T extends ChartDataTypes>(\n  position: T,\n  series: readonly InternalChartSeries<T>[],\n  xTickFormatter?: CartesianChartProps.TickFormatter<T>\n): HighlightDetails {\n  const formattedPosition = xTickFormatter ? xTickFormatter(position) : position.toString();\n\n  const details: ChartSeriesDetailItem[] = [];\n  series.forEach(s => {\n    const detail = getSeriesDetail(s, position);\n    if (detail) {\n      details.push(detail);\n    }\n  });\n\n  return { position: formattedPosition, details };\n}\n\nfunction getSeriesDetail<T>(internalSeries: InternalChartSeries<T>, targetX: T): ChartSeriesDetailItem | null {\n  const { series, color } = internalSeries;\n\n  if (series.type === 'threshold') {\n    return {\n      key: series.title,\n      value: series.valueFormatter ? series.valueFormatter(series.y) : series.y,\n      color,\n      markerType: 'dashed',\n    };\n  }\n\n  for (const d of series.data) {\n    if (matchesX(targetX, d.x)) {\n      return {\n        key: series.title,\n        value: series.valueFormatter ? series.valueFormatter(d.y, targetX) : d.y,\n        color,\n        markerType: series.type === 'line' ? 'line' : 'rectangle',\n      };\n    }\n  }\n\n  return null;\n}\n"]}

package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts

@@ -0,0 +1,21 @@
+import { ScaledBarGroup } from '../make-scaled-bar-groups';
+import { ScaledPoint } from '../make-scaled-series';
+import { ChartPlotRef } from '../../internal/components/chart-plot';
+import { MixedLineBarChartProps } from '../interfaces';
+export interface UseMouseHoverProps<T> {
+    plotRef: React.RefObject<ChartPlotRef>;
+    scaledSeries: ReadonlyArray<ScaledPoint<T>>;
+    barGroups: ScaledBarGroup<T>[];
+    highlightSeries: (series: MixedLineBarChartProps.ChartSeries<T> | null) => void;
+    highlightPoint: (point: ScaledPoint<T> | null) => void;
+    highlightGroup: (groupIndex: number) => void;
+    clearHighlightedSeries: () => void;
+    isGroupNavigation: boolean;
+    isHandlersDisabled: boolean;
+}
+export declare function useMouseHover<T>({ plotRef, scaledSeries, barGroups, highlightSeries, highlightPoint, highlightGroup, clearHighlightedSeries, isGroupNavigation, isHandlersDisabled, }: UseMouseHoverProps<T>): {
+    verticalMarkerLeft: number | null;
+    onSVGMouseMove: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+    onSVGMouseOut: (event: React.MouseEvent<SVGElement, MouseEvent>) => void;
+};
+//# sourceMappingURL=use-mouse-hover.d.ts.map

package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mouse-hover.d.ts","sourceRoot":"","sources":["../../../../src/mixed-line-bar-chart/hooks/use-mouse-hover.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAIvD,MAAM,WAAW,kBAAkB,CAAC,CAAC;IACnC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IACvC,YAAY,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,eAAe,EAAE,CAAC,MAAM,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAChF,cAAc,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,sBAAsB,EAAE,MAAM,IAAI,CAAC;IACnC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,EAC/B,OAAO,EACP,YAAY,EACZ,SAAS,EACT,eAAe,EACf,cAAc,EACd,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,kBAAkB,CAAC,CAAC,CAAC;;4BAwDS,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC;2BAUzC,gBAAgB,CAAC,UAAU,EAAE,UAAU,CAAC;EAiBvE"}

package/mixed-line-bar-chart/hooks/use-mouse-hover.js

@@ -0,0 +1,76 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from 'react';
+import { nodeContains } from '../../internal/utils/dom';
+import styles from '../styles.css.js';
+var MAX_HOVER_MARGIN = 6;
+export function useMouseHover(_a) {
+    var plotRef = _a.plotRef, scaledSeries = _a.scaledSeries, barGroups = _a.barGroups, highlightSeries = _a.highlightSeries, highlightPoint = _a.highlightPoint, highlightGroup = _a.highlightGroup, clearHighlightedSeries = _a.clearHighlightedSeries, isGroupNavigation = _a.isGroupNavigation, isHandlersDisabled = _a.isHandlersDisabled;
+    var _b = useState(null), verticalMarkerLeft = _b[0], setVerticalMarkerLeft = _b[1];
+    var onSeriesMouseMove = function (event) {
+        var svgRect = event.target.getBoundingClientRect();
+        var offsetX = event.clientX - svgRect.left;
+        var offsetY = event.clientY - svgRect.top;
+        var closestX = scaledSeries
+            .map(function (v) { return v.x; })
+            .reduce(function (prev, curr) { return (Math.abs(curr - offsetX) < Math.abs(prev - offsetX) ? curr : prev); }, -Infinity);
+        var closestY = scaledSeries
+            .filter(function (v) { return v.x === closestX || v.series.type === 'threshold'; })
+            .map(function (v) { return v.y; })
+            .reduce(function (prev, curr) { return (Math.abs(curr - offsetY) < Math.abs(prev - offsetY) ? curr : prev); }, -Infinity);
+        if (isFinite(closestX)) {
+            setVerticalMarkerLeft(closestX);
+            if (isFinite(closestY) &&
+                Math.abs(offsetX - closestX) < MAX_HOVER_MARGIN &&
+                Math.abs(offsetY - closestY) < MAX_HOVER_MARGIN) {
+                var _a = scaledSeries.filter(function (s) { return (s.x === closestX || s.series.type === 'threshold') && s.y === closestY; })[0], color = _a.color, datum = _a.datum, series = _a.series;
+                highlightSeries(series);
+                highlightPoint({ x: closestX, y: closestY, color: color, datum: datum, series: series });
+            }
+            else {
+                highlightSeries(null);
+                highlightPoint(null);
+            }
+        }
+    };
+    var onGroupMouseMove = function (event) {
+        var svgRect = event.target.getBoundingClientRect();
+        var offsetX = event.clientX - svgRect.left;
+        var offsetY = event.clientY - svgRect.top;
+        // If hovering over some group - highlight it.
+        for (var groupIndex = 0; groupIndex < barGroups.length; groupIndex++) {
+            var _a = barGroups[groupIndex].position, x = _a.x, y = _a.y, width = _a.width, height = _a.height;
+            if (x <= offsetX && offsetX <= x + width && y <= offsetY && offsetY <= y + height) {
+                highlightGroup(groupIndex);
+                return;
+            }
+        }
+        // Otherwise - clear the highlight.
+        clearHighlightedSeries();
+    };
+    var onSVGMouseMove = function (event) {
+        if (event.target === plotRef.current.svg && !isHandlersDisabled) {
+            if (isGroupNavigation) {
+                onGroupMouseMove(event);
+            }
+            else if (scaledSeries.length > 0) {
+                onSeriesMouseMove(event);
+            }
+        }
+    };
+    var onSVGMouseOut = function (event) {
+        if (isHandlersDisabled) {
+            return;
+        }
+        if (!nodeContains(plotRef.current.svg, event.relatedTarget) ||
+            // `classList` is not supported on IE11 for SVG elements
+            ((event.relatedTarget && event.relatedTarget.getAttribute('class')) || '')
+                .split(' ')
+                .indexOf(styles.series) > -1) {
+            setVerticalMarkerLeft(null);
+            clearHighlightedSeries();
+        }
+    };
+    return { verticalMarkerLeft: verticalMarkerLeft, onSVGMouseMove: onSVGMouseMove, onSVGMouseOut: onSVGMouseOut };
+}
+//# sourceMappingURL=use-mouse-hover.js.map

package/mixed-line-bar-chart/hooks/use-mouse-hover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-mouse-hover.js","sourceRoot":"","sources":["../../../../src/mixed-line-bar-chart/hooks/use-mouse-hover.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 { useState } from 'react';\nimport { nodeContains } from '../../internal/utils/dom';\n\nimport { ScaledBarGroup } from '../make-scaled-bar-groups';\nimport { ScaledPoint } from '../make-scaled-series';\n\nimport styles from '../styles.css.js';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\nimport { MixedLineBarChartProps } from '../interfaces';\n\nconst MAX_HOVER_MARGIN = 6;\n\nexport interface UseMouseHoverProps<T> {\n  plotRef: React.RefObject<ChartPlotRef>;\n  scaledSeries: ReadonlyArray<ScaledPoint<T>>;\n  barGroups: ScaledBarGroup<T>[];\n  highlightSeries: (series: MixedLineBarChartProps.ChartSeries<T> | null) => void;\n  highlightPoint: (point: ScaledPoint<T> | null) => void;\n  highlightGroup: (groupIndex: number) => void;\n  clearHighlightedSeries: () => void;\n  isGroupNavigation: boolean;\n  isHandlersDisabled: boolean;\n}\n\nexport function useMouseHover<T>({\n  plotRef,\n  scaledSeries,\n  barGroups,\n  highlightSeries,\n  highlightPoint,\n  highlightGroup,\n  clearHighlightedSeries,\n  isGroupNavigation,\n  isHandlersDisabled,\n}: UseMouseHoverProps<T>) {\n  const [verticalMarkerLeft, setVerticalMarkerLeft] = useState<number | null>(null);\n\n  const onSeriesMouseMove = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n    const svgRect = (event.target as SVGElement).getBoundingClientRect();\n    const offsetX = event.clientX - svgRect.left;\n    const offsetY = event.clientY - svgRect.top;\n\n    const closestX = scaledSeries\n      .map(v => v.x)\n      .reduce((prev, curr) => (Math.abs(curr - offsetX) < Math.abs(prev - offsetX) ? curr : prev), -Infinity);\n\n    const closestY = scaledSeries\n      .filter(v => v.x === closestX || v.series.type === 'threshold')\n      .map(v => v.y)\n      .reduce((prev, curr) => (Math.abs(curr - offsetY) < Math.abs(prev - offsetY) ? curr : prev), -Infinity);\n\n    if (isFinite(closestX)) {\n      setVerticalMarkerLeft(closestX);\n      if (\n        isFinite(closestY) &&\n        Math.abs(offsetX - closestX) < MAX_HOVER_MARGIN &&\n        Math.abs(offsetY - closestY) < MAX_HOVER_MARGIN\n      ) {\n        const [{ color, datum, series }] = scaledSeries.filter(\n          s => (s.x === closestX || s.series.type === 'threshold') && s.y === closestY\n        );\n        highlightSeries(series);\n        highlightPoint({ x: closestX, y: closestY, color, datum, series });\n      } else {\n        highlightSeries(null);\n        highlightPoint(null);\n      }\n    }\n  };\n\n  const onGroupMouseMove = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n    const svgRect = (event.target as SVGElement).getBoundingClientRect();\n    const offsetX = event.clientX - svgRect.left;\n    const offsetY = event.clientY - svgRect.top;\n\n    // If hovering over some group - highlight it.\n    for (let groupIndex = 0; groupIndex < barGroups.length; groupIndex++) {\n      const {\n        position: { x, y, width, height },\n      } = barGroups[groupIndex];\n\n      if (x <= offsetX && offsetX <= x + width && y <= offsetY && offsetY <= y + height) {\n        highlightGroup(groupIndex);\n        return;\n      }\n    }\n    // Otherwise - clear the highlight.\n    clearHighlightedSeries();\n  };\n\n  const onSVGMouseMove = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n    if (event.target === plotRef.current!.svg && !isHandlersDisabled) {\n      if (isGroupNavigation) {\n        onGroupMouseMove(event);\n      } else if (scaledSeries.length > 0) {\n        onSeriesMouseMove(event);\n      }\n    }\n  };\n\n  const onSVGMouseOut = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n    if (isHandlersDisabled) {\n      return;\n    }\n    if (\n      !nodeContains(plotRef.current!.svg, event.relatedTarget as Element) ||\n      // `classList` is not supported on IE11 for SVG elements\n      ((event.relatedTarget && (event.relatedTarget as Element).getAttribute('class')) || '')\n        .split(' ')\n        .indexOf(styles.series) > -1\n    ) {\n      setVerticalMarkerLeft(null);\n      clearHighlightedSeries();\n    }\n  };\n\n  return { verticalMarkerLeft, onSVGMouseMove, onSVGMouseOut };\n}\n"]}

package/mixed-line-bar-chart/hooks/use-navigation.d.ts

@@ -0,0 +1,26 @@
+import { ChartContainerProps } from '../chart-container';
+import { ChartDataTypes, MixedLineBarChartProps } from '../interfaces';
+import { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';
+import { ScaledPoint } from '../make-scaled-series';
+import { ScaledBarGroup } from '../make-scaled-bar-groups';
+export declare type UseNavigationProps<T extends ChartDataTypes> = Pick<ChartContainerProps<T>, 'highlightedSeries' | 'series' | 'visibleSeries'> & {
+    xScale: ChartScale;
+    yScale: NumericChartScale;
+    barGroups: ScaledBarGroup<T>[];
+    scaledSeries: ReadonlyArray<ScaledPoint<T>>;
+    highlightedPoint: ScaledPoint<T> | null;
+    highlightedGroupIndex: number | null;
+    legendSeries: null | MixedLineBarChartProps.ChartSeries<T>;
+    isHandlersDisabled: boolean;
+    pinPopover(pinned?: boolean): void;
+    highlightSeries(series: MixedLineBarChartProps.ChartSeries<T> | null): void;
+    highlightGroup(groupIndex: number): void;
+    highlightPoint(point: ScaledPoint<T> | null): void;
+    clearHighlightedSeries(): void;
+};
+export declare function useNavigation<T extends ChartDataTypes>({ series, visibleSeries, scaledSeries, barGroups, xScale, yScale, highlightedPoint, highlightedGroupIndex, highlightedSeries, legendSeries, isHandlersDisabled, pinPopover, highlightSeries, highlightGroup, highlightPoint, }: UseNavigationProps<T>): {
+    isGroupNavigation: boolean;
+    onFocus: () => void;
+    onKeyDown: (event: React.KeyboardEvent) => void;
+};
+//# sourceMappingURL=use-navigation.d.ts.map

package/mixed-line-bar-chart/hooks/use-navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigation.d.ts","sourceRoot":"","sources":["../../../../src/mixed-line-bar-chart/hooks/use-navigation.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAEjG,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3D,oBAAY,kBAAkB,CAAC,CAAC,SAAS,cAAc,IAAI,IAAI,CAC7D,mBAAmB,CAAC,CAAC,CAAC,EACtB,mBAAmB,GAAG,QAAQ,GAAG,eAAe,CACjD,GAAG;IACF,MAAM,EAAE,UAAU,CAAC;IACnB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,YAAY,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;IAE5C,gBAAgB,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACxC,qBAAqB,EAAE,MAAM,GAAG,IAAI,CAAC;IACrC,YAAY,EAAE,IAAI,GAAG,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;IAC3D,kBAAkB,EAAE,OAAO,CAAC;IAE5B,UAAU,CAAC,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACnC,eAAe,CAAC,MAAM,EAAE,sBAAsB,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5E,cAAc,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IACzC,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACnD,sBAAsB,IAAI,IAAI,CAAC;CAChC,CAAC;AAEF,wBAAgB,aAAa,CAAC,CAAC,SAAS,cAAc,EAAE,EACtD,MAAM,EACN,aAAa,EACb,YAAY,EACZ,SAAS,EACT,MAAM,EACN,MAAM,EACN,gBAAgB,EAChB,qBAAqB,EACrB,iBAAiB,EACjB,YAAY,EACZ,kBAAkB,EAClB,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,GACf,EAAE,kBAAkB,CAAC,CAAC,CAAC;;;uBAwLZ,mBAAmB;EA+B9B"}

package/mixed-line-bar-chart/hooks/use-navigation.js

@@ -0,0 +1,210 @@
+import { __assign } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useMemo, useState } from 'react';
+import { KeyCode } from '../../internal/keycode';
+import { findNavigableSeries, nextValidDomainIndex } from '../utils';
+export function useNavigation(_a) {
+    var series = _a.series, visibleSeries = _a.visibleSeries, scaledSeries = _a.scaledSeries, barGroups = _a.barGroups, xScale = _a.xScale, yScale = _a.yScale, highlightedPoint = _a.highlightedPoint, highlightedGroupIndex = _a.highlightedGroupIndex, highlightedSeries = _a.highlightedSeries, legendSeries = _a.legendSeries, isHandlersDisabled = _a.isHandlersDisabled, pinPopover = _a.pinPopover, highlightSeries = _a.highlightSeries, highlightGroup = _a.highlightGroup, highlightPoint = _a.highlightPoint;
+    var _b = useState(null), targetX = _b[0], setTargetX = _b[1];
+    // There are two different types of navigation:
+    // 1) Group navigation for any chart that contains a bar series
+    // 2) Line navigation for any chart that only contains lines and thresholds
+    var isGroupNavigation = visibleSeries.some(function (_a) {
+        var series = _a.series;
+        return series.type === 'bar';
+    });
+    // Make a list of series that can be navigated between. Bar series are treated as one.
+    var navigableSeries = useMemo(function () { return findNavigableSeries(visibleSeries); }, [visibleSeries]).navigableSeries;
+    var onBarGroupFocus = function () {
+        var groupIndex = highlightedGroupIndex !== null && highlightedGroupIndex !== void 0 ? highlightedGroupIndex : 0;
+        setTargetX(xScale.domain[groupIndex]);
+        highlightGroup(groupIndex);
+    };
+    var onLineGroupFocus = function () {
+        var _a, _b, _c;
+        if (!highlightedSeries || !highlightedPoint) {
+            var targetSeries = (_c = (_a = highlightedSeries !== null && highlightedSeries !== void 0 ? highlightedSeries : legendSeries) !== null && _a !== void 0 ? _a : (_b = series[0]) === null || _b === void 0 ? void 0 : _b.series) !== null && _c !== void 0 ? _c : null;
+            highlightSeries(targetSeries);
+            for (var _i = 0, scaledSeries_1 = scaledSeries; _i < scaledSeries_1.length; _i++) {
+                var scaledS = scaledSeries_1[_i];
+                if (scaledS.series === targetSeries) {
+                    highlightPoint(scaledS);
+                    return;
+                }
+            }
+        }
+    };
+    var onFocus = function () {
+        if (isGroupNavigation) {
+            onBarGroupFocus();
+        }
+        else {
+            onLineGroupFocus();
+        }
+    };
+    var moveBetweenSeries = useCallback(function (direction) {
+        var _a, _b, _c;
+        if (isGroupNavigation) {
+            return;
+        }
+        var xOffset = xScale.isCategorical() ? Math.max(0, xScale.d3Scale.bandwidth() - 1) / 2 : 0;
+        var MAX_SERIES_INDEX = navigableSeries.length - 1;
+        // Find the index of the currently highlighted series (if any)
+        var previousSeriesIndex = -1;
+        if (highlightedSeries) {
+            previousSeriesIndex = navigableSeries.indexOf(highlightedSeries);
+        }
+        // Move forwards or backwards to the new series
+        var nextSeriesIndex = 0;
+        if (previousSeriesIndex !== -1) {
+            nextSeriesIndex = previousSeriesIndex + direction;
+            if (nextSeriesIndex > MAX_SERIES_INDEX) {
+                nextSeriesIndex = 0;
+            }
+            else if (nextSeriesIndex < 0) {
+                nextSeriesIndex = MAX_SERIES_INDEX;
+            }
+        }
+        var nextSeries = navigableSeries[nextSeriesIndex];
+        var nextInternalSeries = series.filter(function (_a) {
+            var series = _a.series;
+            return series === nextSeries;
+        })[0];
+        // 2. Find point in the next series
+        var targetXPoint = ((_a = xScale.d3Scale(targetX)) !== null && _a !== void 0 ? _a : NaN) + xOffset;
+        if (!isFinite(targetXPoint)) {
+            targetXPoint = 0;
+        }
+        if (nextSeries.type === 'line') {
+            var nextSeriesData = nextSeries.data;
+            var lookingForScaled_1 = targetXPoint; // scaled X in previous series
+            var nextPoint = nextSeriesData
+                // scale all points in series
+                .map(function (d) { return ({
+                x: (xScale.d3Scale(d.x) || 0) + xOffset,
+                y: yScale.d3Scale(d.y) || 0,
+                datum: d
+            }); })
+                // find the closest point to previous X
+                .reduce(function (prev, curr) { return (Math.abs(curr.x - lookingForScaled_1) < Math.abs(prev.x - lookingForScaled_1) ? curr : prev); }, { x: -Infinity, y: -Infinity });
+            highlightSeries(nextSeries);
+            highlightPoint(__assign(__assign({}, nextPoint), { color: nextInternalSeries.color, series: nextSeries }));
+        }
+        else if (nextSeries.type === 'threshold') {
+            var scaledTargetIndex = scaledSeries.map(function (it) { var _a; return ((_a = it.datum) === null || _a === void 0 ? void 0 : _a.x) || null; }).indexOf(targetX);
+            highlightSeries(nextSeries);
+            highlightPoint({
+                x: targetXPoint,
+                y: (_b = yScale.d3Scale(nextSeries.y)) !== null && _b !== void 0 ? _b : NaN,
+                color: nextInternalSeries.color,
+                series: nextSeries,
+                datum: (_c = scaledSeries[scaledTargetIndex]) === null || _c === void 0 ? void 0 : _c.datum
+            });
+        }
+    }, [
+        isGroupNavigation,
+        xScale,
+        navigableSeries,
+        highlightedSeries,
+        scaledSeries,
+        series,
+        targetX,
+        highlightSeries,
+        highlightPoint,
+        yScale,
+    ]);
+    var moveWithinSeries = useCallback(function (direction) {
+        var _a;
+        var series = highlightedSeries || visibleSeries[0].series;
+        var previousPoint = highlightedPoint || scaledSeries[0];
+        if (series.type === 'line') {
+            // find previous point in series
+            var indexOfPreviousPoint = (previousPoint === null || previousPoint === void 0 ? void 0 : previousPoint.datum)
+                ? series.data.indexOf(previousPoint.datum)
+                : 0;
+            var nextPointIndex = circleIndex(indexOfPreviousPoint + direction, [0, series.data.length - 1]);
+            var nextPoint_1 = series.data[nextPointIndex];
+            // find scaled next point
+            var nextPointScaled = scaledSeries.filter(function (s) { return s.datum === nextPoint_1; })[0] || null;
+            setTargetX(nextPoint_1.x);
+            highlightSeries(series);
+            highlightPoint(nextPointScaled);
+        }
+        else if (series.type === 'threshold') {
+            var scaledThresholdSeries = scaledSeries.filter(function (it) { return it.series === series; })[0];
+            var scaledDataSeries = scaledSeries.filter(function (it) { return it.datum; });
+            var indexOfPreviousPoint = scaledDataSeries.map(function (it) { return it.x; }).indexOf(previousPoint.x);
+            var nextPointIndex = circleIndex(indexOfPreviousPoint + direction, [0, scaledDataSeries.length - 1]);
+            setTargetX(((_a = scaledDataSeries[nextPointIndex].datum) === null || _a === void 0 ? void 0 : _a.x) || null);
+            highlightSeries(series);
+            highlightPoint(__assign(__assign({}, scaledThresholdSeries), { datum: scaledDataSeries[nextPointIndex].datum, x: scaledDataSeries[nextPointIndex].x }));
+        }
+        else if (series.type === 'bar') {
+            var xDomain = xScale.domain;
+            var MAX_GROUP_INDEX = xDomain.length - 1;
+            var nextGroupIndex = 0;
+            if (highlightedGroupIndex !== null) {
+                // find next group
+                nextGroupIndex = highlightedGroupIndex + direction;
+                if (nextGroupIndex > MAX_GROUP_INDEX) {
+                    nextGroupIndex = 0;
+                }
+                else if (nextGroupIndex < 0) {
+                    nextGroupIndex = MAX_GROUP_INDEX;
+                }
+            }
+            var nextDomainIndex = nextValidDomainIndex(nextGroupIndex, barGroups, direction);
+            setTargetX(xDomain[nextDomainIndex]);
+            highlightGroup(nextDomainIndex);
+        }
+    }, [
+        highlightedSeries,
+        visibleSeries,
+        highlightedPoint,
+        scaledSeries,
+        highlightSeries,
+        highlightPoint,
+        xScale.domain,
+        highlightedGroupIndex,
+        barGroups,
+        highlightGroup,
+    ]);
+    var onKeyDown = useCallback(function (event) {
+        var keyCode = event.keyCode;
+        if (keyCode !== KeyCode.up &&
+            keyCode !== KeyCode.right &&
+            keyCode !== KeyCode.down &&
+            keyCode !== KeyCode.left &&
+            keyCode !== KeyCode.space &&
+            keyCode !== KeyCode.enter) {
+            return;
+        }
+        event.preventDefault();
+        if (isHandlersDisabled) {
+            return;
+        }
+        if (keyCode === KeyCode.down || keyCode === KeyCode.up) {
+            moveBetweenSeries(keyCode === KeyCode.down ? 1 : -1);
+        }
+        else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {
+            moveWithinSeries(keyCode === KeyCode.right ? 1 : -1);
+        }
+        else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {
+            pinPopover();
+        }
+    }, [moveWithinSeries, moveBetweenSeries, isHandlersDisabled, pinPopover]);
+    return { isGroupNavigation: isGroupNavigation, onFocus: onFocus, onKeyDown: onKeyDown };
+}
+// Returns given index if it is in range or the opposite range boundary otherwise.
+function circleIndex(index, _a) {
+    var from = _a[0], to = _a[1];
+    if (index < from) {
+        return to;
+    }
+    if (index > to) {
+        return from;
+    }
+    return index;
+}
+//# sourceMappingURL=use-navigation.js.map

package/mixed-line-bar-chart/hooks/use-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navigation.js","sourceRoot":"","sources":["../../../../src/mixed-line-bar-chart/hooks/use-navigation.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 { useCallback, useMemo, useState } from 'react';\nimport { KeyCode } from '../../internal/keycode';\nimport { ChartContainerProps } from '../chart-container';\nimport { ChartDataTypes, MixedLineBarChartProps } from '../interfaces';\nimport { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';\nimport { findNavigableSeries, nextValidDomainIndex } from '../utils';\nimport { ScaledPoint } from '../make-scaled-series';\nimport { ScaledBarGroup } from '../make-scaled-bar-groups';\n\nexport type UseNavigationProps<T extends ChartDataTypes> = Pick<\n  ChartContainerProps<T>,\n  'highlightedSeries' | 'series' | 'visibleSeries'\n> & {\n  xScale: ChartScale;\n  yScale: NumericChartScale;\n  barGroups: ScaledBarGroup<T>[];\n  scaledSeries: ReadonlyArray<ScaledPoint<T>>;\n\n  highlightedPoint: ScaledPoint<T> | null;\n  highlightedGroupIndex: number | null;\n  legendSeries: null | MixedLineBarChartProps.ChartSeries<T>;\n  isHandlersDisabled: boolean;\n\n  pinPopover(pinned?: boolean): void;\n  highlightSeries(series: MixedLineBarChartProps.ChartSeries<T> | null): void;\n  highlightGroup(groupIndex: number): void;\n  highlightPoint(point: ScaledPoint<T> | null): void;\n  clearHighlightedSeries(): void;\n};\n\nexport function useNavigation<T extends ChartDataTypes>({\n  series,\n  visibleSeries,\n  scaledSeries,\n  barGroups,\n  xScale,\n  yScale,\n  highlightedPoint,\n  highlightedGroupIndex,\n  highlightedSeries,\n  legendSeries,\n  isHandlersDisabled,\n  pinPopover,\n  highlightSeries,\n  highlightGroup,\n  highlightPoint,\n}: UseNavigationProps<T>) {\n  const [targetX, setTargetX] = useState<T | null>(null);\n\n  // There are two different types of navigation:\n  // 1) Group navigation for any chart that contains a bar series\n  // 2) Line navigation for any chart that only contains lines and thresholds\n  const isGroupNavigation = visibleSeries.some(({ series }) => series.type === 'bar');\n\n  // Make a list of series that can be navigated between. Bar series are treated as one.\n  const { navigableSeries } = useMemo(() => findNavigableSeries(visibleSeries), [visibleSeries]);\n\n  const onBarGroupFocus = () => {\n    const groupIndex = highlightedGroupIndex ?? 0;\n    setTargetX((xScale.domain as T[])[groupIndex]);\n    highlightGroup(groupIndex);\n  };\n\n  const onLineGroupFocus = () => {\n    if (!highlightedSeries || !highlightedPoint) {\n      const targetSeries = highlightedSeries ?? legendSeries ?? series[0]?.series ?? null;\n      highlightSeries(targetSeries);\n      for (const scaledS of scaledSeries) {\n        if (scaledS.series === targetSeries) {\n          highlightPoint(scaledS);\n          return;\n        }\n      }\n    }\n  };\n\n  const onFocus = () => {\n    if (isGroupNavigation) {\n      onBarGroupFocus();\n    } else {\n      onLineGroupFocus();\n    }\n  };\n\n  const moveBetweenSeries = useCallback(\n    (direction: number) => {\n      if (isGroupNavigation) {\n        return;\n      }\n\n      const xOffset = xScale.isCategorical() ? Math.max(0, xScale.d3Scale.bandwidth() - 1) / 2 : 0;\n      const MAX_SERIES_INDEX = navigableSeries.length - 1;\n\n      // Find the index of the currently highlighted series (if any)\n      let previousSeriesIndex = -1;\n      if (highlightedSeries) {\n        previousSeriesIndex = navigableSeries.indexOf(highlightedSeries);\n      }\n\n      // Move forwards or backwards to the new series\n      let nextSeriesIndex = 0;\n      if (previousSeriesIndex !== -1) {\n        nextSeriesIndex = previousSeriesIndex + direction;\n        if (nextSeriesIndex > MAX_SERIES_INDEX) {\n          nextSeriesIndex = 0;\n        } else if (nextSeriesIndex < 0) {\n          nextSeriesIndex = MAX_SERIES_INDEX;\n        }\n      }\n\n      const nextSeries = navigableSeries[nextSeriesIndex];\n      const nextInternalSeries = series.filter(({ series }) => series === nextSeries)[0];\n\n      // 2. Find point in the next series\n      let targetXPoint = (xScale.d3Scale(targetX as any) ?? NaN) + xOffset;\n      if (!isFinite(targetXPoint)) {\n        targetXPoint = 0;\n      }\n\n      if (nextSeries.type === 'line') {\n        const nextSeriesData = nextSeries.data as ReadonlyArray<MixedLineBarChartProps.Datum<T>>;\n        const lookingForScaled = targetXPoint; // scaled X in previous series\n\n        const nextPoint = nextSeriesData\n          // scale all points in series\n          .map(d => ({\n            x: (xScale.d3Scale(d.x as any) || 0) + xOffset,\n            y: yScale.d3Scale(d.y) || 0,\n            datum: d,\n          }))\n          // find the closest point to previous X\n          .reduce(\n            (prev, curr) => (Math.abs(curr.x - lookingForScaled) < Math.abs(prev.x - lookingForScaled) ? curr : prev),\n            { x: -Infinity, y: -Infinity }\n          );\n\n        highlightSeries(nextSeries);\n        highlightPoint({ ...nextPoint, color: nextInternalSeries.color, series: nextSeries });\n      } else if (nextSeries.type === 'threshold') {\n        const scaledTargetIndex = scaledSeries.map(it => it.datum?.x || null).indexOf(targetX);\n        highlightSeries(nextSeries);\n        highlightPoint({\n          x: targetXPoint,\n          y: yScale.d3Scale(nextSeries.y) ?? NaN,\n          color: nextInternalSeries.color,\n          series: nextSeries,\n          datum: scaledSeries[scaledTargetIndex]?.datum,\n        });\n      }\n    },\n    [\n      isGroupNavigation,\n      xScale,\n      navigableSeries,\n      highlightedSeries,\n      scaledSeries,\n      series,\n      targetX,\n      highlightSeries,\n      highlightPoint,\n      yScale,\n    ]\n  );\n\n  const moveWithinSeries = useCallback(\n    (direction: number) => {\n      const series = highlightedSeries || visibleSeries[0].series;\n      const previousPoint = highlightedPoint || scaledSeries[0];\n\n      if (series.type === 'line') {\n        // find previous point in series\n        const indexOfPreviousPoint = previousPoint?.datum\n          ? (series.data as ReadonlyArray<MixedLineBarChartProps.Datum<T>>).indexOf(previousPoint.datum)\n          : 0;\n        const nextPointIndex = circleIndex(indexOfPreviousPoint + direction, [0, series.data.length - 1]);\n        const nextPoint = series.data[nextPointIndex];\n\n        // find scaled next point\n        const nextPointScaled = scaledSeries.filter(s => s.datum === nextPoint)[0] || null;\n\n        setTargetX(nextPoint.x as T);\n        highlightSeries(series);\n        highlightPoint(nextPointScaled);\n      } else if (series.type === 'threshold') {\n        const [scaledThresholdSeries] = scaledSeries.filter(it => it.series === series);\n        const scaledDataSeries = scaledSeries.filter(it => it.datum);\n        const indexOfPreviousPoint = scaledDataSeries.map(it => it.x).indexOf(previousPoint.x);\n        const nextPointIndex = circleIndex(indexOfPreviousPoint + direction, [0, scaledDataSeries.length - 1]);\n        setTargetX(scaledDataSeries[nextPointIndex].datum?.x || null);\n        highlightSeries(series);\n        highlightPoint({\n          ...scaledThresholdSeries,\n          datum: scaledDataSeries[nextPointIndex].datum,\n          x: scaledDataSeries[nextPointIndex].x,\n        });\n      } else if (series.type === 'bar') {\n        const xDomain = xScale.domain as T[];\n        const MAX_GROUP_INDEX = xDomain.length - 1;\n\n        let nextGroupIndex = 0;\n        if (highlightedGroupIndex !== null) {\n          // find next group\n          nextGroupIndex = highlightedGroupIndex + direction;\n          if (nextGroupIndex > MAX_GROUP_INDEX) {\n            nextGroupIndex = 0;\n          } else if (nextGroupIndex < 0) {\n            nextGroupIndex = MAX_GROUP_INDEX;\n          }\n        }\n\n        const nextDomainIndex = nextValidDomainIndex(nextGroupIndex, barGroups, direction);\n        setTargetX(xDomain[nextDomainIndex]);\n        highlightGroup(nextDomainIndex);\n      }\n    },\n    [\n      highlightedSeries,\n      visibleSeries,\n      highlightedPoint,\n      scaledSeries,\n      highlightSeries,\n      highlightPoint,\n      xScale.domain,\n      highlightedGroupIndex,\n      barGroups,\n      highlightGroup,\n    ]\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      const keyCode = event.keyCode;\n      if (\n        keyCode !== KeyCode.up &&\n        keyCode !== KeyCode.right &&\n        keyCode !== KeyCode.down &&\n        keyCode !== KeyCode.left &&\n        keyCode !== KeyCode.space &&\n        keyCode !== KeyCode.enter\n      ) {\n        return;\n      }\n\n      event.preventDefault();\n\n      if (isHandlersDisabled) {\n        return;\n      }\n\n      if (keyCode === KeyCode.down || keyCode === KeyCode.up) {\n        moveBetweenSeries(keyCode === KeyCode.down ? 1 : -1);\n      } else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {\n        moveWithinSeries(keyCode === KeyCode.right ? 1 : -1);\n      } else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n        pinPopover();\n      }\n    },\n    [moveWithinSeries, moveBetweenSeries, isHandlersDisabled, pinPopover]\n  );\n\n  return { isGroupNavigation, onFocus, onKeyDown };\n}\n\n// Returns given index if it is in range or the opposite range boundary otherwise.\nfunction circleIndex(index: number, [from, to]: [number, number]): number {\n  if (index < from) {\n    return to;\n  }\n  if (index > to) {\n    return from;\n  }\n  return index;\n}\n"]}