@cloudscape-design/components 3.0.220 → 3.0.222

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

@@ -5,38 +5,33 @@ import clsx from 'clsx';
 import { matchesX, getKeyValue } from './utils';
 import styles from './styles.css.js';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-export default function BarSeries(_a) {
-    var _b;
-    var axis = _a.axis, series = _a.series, color = _a.color, xScale = _a.xScale, yScale = _a.yScale, highlighted = _a.highlighted, dimmed = _a.dimmed, highlightedGroupIndex = _a.highlightedGroupIndex, stackedBarOffsets = _a.stackedBarOffsets, totalSeriesCount = _a.totalSeriesCount, seriesIndex = _a.seriesIndex, plotSize = _a.plotSize, chartAreaClipPath = _a.chartAreaClipPath;
-    var isRefresh = useVisualRefresh();
-    var xCoordinates = useMemo(function () {
+export default function BarSeries({ axis, series, color, xScale, yScale, highlighted, dimmed, highlightedGroupIndex, stackedBarOffsets, totalSeriesCount, seriesIndex, plotSize, chartAreaClipPath, }) {
+    const isRefresh = useVisualRefresh();
+    const xCoordinates = useMemo(() => {
         var _a;
         if (series.type !== 'bar' || !xScale.isCategorical()) {
             return [];
         }
-        var yContinuosScale = yScale.d3Scale;
-        var xPoints = series.data.map(function (_a) {
-            var x = _a.x;
-            return xScale.d3Scale(x) || NaN;
-        });
-        var zeroY = (_a = yScale.d3Scale(0)) !== null && _a !== void 0 ? _a : NaN;
-        var baseY = isFinite(zeroY) ? Math.min(plotSize, zeroY) : plotSize;
-        var barWidth = xScale.d3Scale.bandwidth();
-        var PADDING = 4;
-        var MINWIDTH = 4;
+        const yContinuosScale = yScale.d3Scale;
+        const xPoints = series.data.map(({ x }) => xScale.d3Scale(x) || NaN);
+        const zeroY = (_a = yScale.d3Scale(0)) !== null && _a !== void 0 ? _a : NaN;
+        const baseY = isFinite(zeroY) ? Math.min(plotSize, zeroY) : plotSize;
+        let barWidth = xScale.d3Scale.bandwidth();
+        const PADDING = 4;
+        const MINWIDTH = 4;
         if (!stackedBarOffsets && totalSeriesCount > 1) {
             // Regular grouped bars
             barWidth = (barWidth - (totalSeriesCount - 1) * PADDING) / totalSeriesCount;
             barWidth = Math.max(barWidth, MINWIDTH);
         }
-        return xPoints.map(function (x, i) {
+        return xPoints.map((x, i) => {
             var _a, _b;
-            var d = series.data[i];
-            var barX = x;
-            var yValue = d.y;
+            const d = series.data[i];
+            let barX = x;
+            let yValue = d.y;
             if (stackedBarOffsets) {
                 // Stacked bars
-                var offsetMap = d.y < 0 ? stackedBarOffsets.negativeOffsets : stackedBarOffsets.positiveOffsets;
+                const offsetMap = d.y < 0 ? stackedBarOffsets.negativeOffsets : stackedBarOffsets.positiveOffsets;
                 yValue = d.y + (offsetMap[getKeyValue(d.x)] || 0);
             }
             else if (totalSeriesCount > 1) {
@@ -49,21 +44,17 @@ export default function BarSeries(_a) {
                 x: barX,
                 y: (_a = yContinuosScale(yValue)) !== null && _a !== void 0 ? _a : NaN,
                 width: barWidth,
-                height: Math.abs(((_b = yContinuosScale(d.y)) !== null && _b !== void 0 ? _b : NaN) - baseY)
+                height: Math.abs(((_b = yContinuosScale(d.y)) !== null && _b !== void 0 ? _b : NaN) - baseY),
             };
         });
     }, [series, xScale, yScale, plotSize, stackedBarOffsets, totalSeriesCount, seriesIndex]);
-    var highlightedXValue = highlightedGroupIndex !== null ? xScale.domain[highlightedGroupIndex] : null;
-    return (React.createElement("g", { "aria-label": series.title, clipPath: "url(#".concat(chartAreaClipPath, ")"), className: clsx(styles.series, styles['series--bar'], (_b = {},
-            _b[styles['series--highlighted']] = highlighted,
-            _b[styles['series--dimmed']] = dimmed,
-            _b)) }, xCoordinates.map(function (_a, i) {
-        var _b;
-        var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
-        return isFinite(x) &&
-            isFinite(height) && (React.createElement("rect", { key: "bar-".concat(i), fill: color, x: axis === 'x' ? x : y - height, y: axis === 'x' ? y : x, width: axis === 'x' ? width : height, height: axis === 'x' ? height : width, rx: isRefresh ? '4px' : '0px', className: clsx(styles.series__rect, (_b = {},
-                _b[styles['series--dimmed']] = highlightedXValue !== null && !matchesX(highlightedXValue, series.data[i].x),
-                _b)) }));
-    })));
+    const highlightedXValue = highlightedGroupIndex !== null ? xScale.domain[highlightedGroupIndex] : null;
+    return (React.createElement("g", { "aria-label": series.title, clipPath: `url(#${chartAreaClipPath})`, className: clsx(styles.series, styles['series--bar'], {
+            [styles['series--highlighted']]: highlighted,
+            [styles['series--dimmed']]: dimmed,
+        }) }, xCoordinates.map(({ x, y, width, height }, i) => isFinite(x) &&
+        isFinite(height) && (React.createElement("rect", { key: `bar-${i}`, fill: color, x: axis === 'x' ? x : y - height, y: axis === 'x' ? y : x, width: axis === 'x' ? width : height, height: axis === 'x' ? height : width, rx: isRefresh ? '4px' : '0px', className: clsx(styles.series__rect, {
+            [styles['series--dimmed']]: highlightedXValue !== null && !matchesX(highlightedXValue, series.data[i].x),
+        }) })))));
 }
 //# sourceMappingURL=bar-series.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"bar-series.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-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';\nimport { ScaleContinuousNumeric, ScaleTime } from '../internal/vendor/d3-scale';\n\nimport { ChartScale, NumericChartScale } from '../internal/components/cartesian-chart/scales';\nimport { ChartDataTypes, MixedLineBarChartProps } from './interfaces';\nimport { matchesX, getKeyValue, StackedOffsets } from './utils';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nexport interface BarSeriesProps<T> {\n  axis: 'x' | 'y';\n\n  series: MixedLineBarChartProps.BarDataSeries<T>;\n\n  color: string;\n  totalSeriesCount: number;\n  seriesIndex: number;\n\n  xScale: ChartScale;\n  yScale: NumericChartScale;\n\n  plotSize: number;\n  chartAreaClipPath: string;\n\n  highlighted: boolean;\n  dimmed: boolean;\n  highlightedGroupIndex: number | null;\n\n  // Contains the cumulative offset for each x value in a stacked bar chart\n  stackedBarOffsets?: StackedOffsets;\n}\n\nexport default function BarSeries<T extends ChartDataTypes>({\n  axis,\n  series,\n  color,\n  xScale,\n  yScale,\n  highlighted,\n  dimmed,\n  highlightedGroupIndex,\n  stackedBarOffsets,\n  totalSeriesCount,\n  seriesIndex,\n  plotSize,\n  chartAreaClipPath,\n}: BarSeriesProps<T>) {\n  const isRefresh = useVisualRefresh();\n\n  const xCoordinates = useMemo(() => {\n    if (series.type !== 'bar' || !xScale.isCategorical()) {\n      return [];\n    }\n\n    const yContinuosScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number> = yScale.d3Scale;\n    const xPoints = (series.data as ReadonlyArray<MixedLineBarChartProps.Datum<ChartDataTypes>>).map(\n      ({ x }) => xScale.d3Scale(x) || NaN\n    );\n\n    const zeroY = yScale.d3Scale(0) ?? NaN;\n    const baseY = isFinite(zeroY) ? Math.min(plotSize, zeroY) : plotSize;\n\n    let barWidth = xScale.d3Scale.bandwidth();\n\n    const PADDING = 4;\n    const MINWIDTH = 4;\n\n    if (!stackedBarOffsets && totalSeriesCount > 1) {\n      // Regular grouped bars\n      barWidth = (barWidth - (totalSeriesCount - 1) * PADDING) / totalSeriesCount;\n      barWidth = Math.max(barWidth, MINWIDTH);\n    }\n\n    return xPoints.map((x, i) => {\n      const d = series.data[i];\n      let barX = x;\n      let yValue = d.y;\n\n      if (stackedBarOffsets) {\n        // Stacked bars\n        const offsetMap = d.y < 0 ? stackedBarOffsets.negativeOffsets : stackedBarOffsets.positiveOffsets;\n        yValue = d.y + (offsetMap[getKeyValue(d.x)] || 0);\n      } else if (totalSeriesCount > 1) {\n        // Regular grouped bars\n        barX += seriesIndex * (barWidth + PADDING);\n      }\n\n      // Account for negative values growing \"down\" instead of \"up\"\n      yValue = yValue < 0 ? yValue - d.y : yValue;\n\n      return {\n        x: barX,\n        y: yContinuosScale(yValue) ?? NaN,\n        width: barWidth,\n        height: Math.abs((yContinuosScale(d.y) ?? NaN) - baseY),\n      };\n    });\n  }, [series, xScale, yScale, plotSize, stackedBarOffsets, totalSeriesCount, seriesIndex]);\n\n  const highlightedXValue = highlightedGroupIndex !== null ? xScale.domain[highlightedGroupIndex] : null;\n\n  return (\n    <g\n      aria-label={series.title}\n      clipPath={`url(#${chartAreaClipPath})`}\n      className={clsx(styles.series, styles['series--bar'], {\n        [styles['series--highlighted']]: highlighted,\n        [styles['series--dimmed']]: dimmed,\n      })}\n    >\n      {xCoordinates.map(\n        ({ x, y, width, height }, i) =>\n          isFinite(x) &&\n          isFinite(height) && (\n            <rect\n              key={`bar-${i}`}\n              fill={color}\n              x={axis === 'x' ? x : y - height}\n              y={axis === 'x' ? y : x}\n              width={axis === 'x' ? width : height}\n              height={axis === 'x' ? height : width}\n              rx={isRefresh ? '4px' : '0px'}\n              className={clsx(styles.series__rect, {\n                [styles['series--dimmed']]:\n                  highlightedXValue !== null && !matchesX(highlightedXValue, series.data[i].x),\n              })}\n            />\n          )\n      )}\n    </g>\n  );\n}\n"]}
+{"version":3,"file":"bar-series.js","sourceRoot":"","sources":["../../../src/mixed-line-bar-chart/bar-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';\nimport { ScaleContinuousNumeric, ScaleTime } from '../internal/vendor/d3-scale';\n\nimport { ChartScale, NumericChartScale } from '../internal/components/cartesian-chart/scales';\nimport { ChartDataTypes, MixedLineBarChartProps } from './interfaces';\nimport { matchesX, getKeyValue, StackedOffsets } from './utils';\nimport styles from './styles.css.js';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nexport interface BarSeriesProps<T> {\n  axis: 'x' | 'y';\n\n  series: MixedLineBarChartProps.BarDataSeries<T>;\n\n  color: string;\n  totalSeriesCount: number;\n  seriesIndex: number;\n\n  xScale: ChartScale;\n  yScale: NumericChartScale;\n\n  plotSize: number;\n  chartAreaClipPath: string;\n\n  highlighted: boolean;\n  dimmed: boolean;\n  highlightedGroupIndex: number | null;\n\n  // Contains the cumulative offset for each x value in a stacked bar chart\n  stackedBarOffsets?: StackedOffsets;\n}\n\nexport default function BarSeries<T extends ChartDataTypes>({\n  axis,\n  series,\n  color,\n  xScale,\n  yScale,\n  highlighted,\n  dimmed,\n  highlightedGroupIndex,\n  stackedBarOffsets,\n  totalSeriesCount,\n  seriesIndex,\n  plotSize,\n  chartAreaClipPath,\n}: BarSeriesProps<T>) {\n  const isRefresh = useVisualRefresh();\n\n  const xCoordinates = useMemo(() => {\n    if (series.type !== 'bar' || !xScale.isCategorical()) {\n      return [];\n    }\n\n    const yContinuosScale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number> = yScale.d3Scale;\n    const xPoints = (series.data as ReadonlyArray<MixedLineBarChartProps.Datum<ChartDataTypes>>).map(\n      ({ x }) => xScale.d3Scale(x) || NaN\n    );\n\n    const zeroY = yScale.d3Scale(0) ?? NaN;\n    const baseY = isFinite(zeroY) ? Math.min(plotSize, zeroY) : plotSize;\n\n    let barWidth = xScale.d3Scale.bandwidth();\n\n    const PADDING = 4;\n    const MINWIDTH = 4;\n\n    if (!stackedBarOffsets && totalSeriesCount > 1) {\n      // Regular grouped bars\n      barWidth = (barWidth - (totalSeriesCount - 1) * PADDING) / totalSeriesCount;\n      barWidth = Math.max(barWidth, MINWIDTH);\n    }\n\n    return xPoints.map((x, i) => {\n      const d = series.data[i];\n      let barX = x;\n      let yValue = d.y;\n\n      if (stackedBarOffsets) {\n        // Stacked bars\n        const offsetMap = d.y < 0 ? stackedBarOffsets.negativeOffsets : stackedBarOffsets.positiveOffsets;\n        yValue = d.y + (offsetMap[getKeyValue(d.x)] || 0);\n      } else if (totalSeriesCount > 1) {\n        // Regular grouped bars\n        barX += seriesIndex * (barWidth + PADDING);\n      }\n\n      // Account for negative values growing \"down\" instead of \"up\"\n      yValue = yValue < 0 ? yValue - d.y : yValue;\n\n      return {\n        x: barX,\n        y: yContinuosScale(yValue) ?? NaN,\n        width: barWidth,\n        height: Math.abs((yContinuosScale(d.y) ?? NaN) - baseY),\n      };\n    });\n  }, [series, xScale, yScale, plotSize, stackedBarOffsets, totalSeriesCount, seriesIndex]);\n\n  const highlightedXValue = highlightedGroupIndex !== null ? xScale.domain[highlightedGroupIndex] : null;\n\n  return (\n    <g\n      aria-label={series.title}\n      clipPath={`url(#${chartAreaClipPath})`}\n      className={clsx(styles.series, styles['series--bar'], {\n        [styles['series--highlighted']]: highlighted,\n        [styles['series--dimmed']]: dimmed,\n      })}\n    >\n      {xCoordinates.map(\n        ({ x, y, width, height }, i) =>\n          isFinite(x) &&\n          isFinite(height) && (\n            <rect\n              key={`bar-${i}`}\n              fill={color}\n              x={axis === 'x' ? x : y - height}\n              y={axis === 'x' ? y : x}\n              width={axis === 'x' ? width : height}\n              height={axis === 'x' ? height : width}\n              rx={isRefresh ? '4px' : '0px'}\n              className={clsx(styles.series__rect, {\n                [styles['series--dimmed']]:\n                  highlightedXValue !== null && !matchesX(highlightedXValue, series.data[i].x),\n              })}\n            />\n          )\n      )}\n    </g>\n  );\n}\n"]}

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

@@ -29,74 +29,71 @@ import { usePopover } from './hooks/use-popover';
 import styles from './styles.css.js';
 import useContainerWidth from '../internal/utils/use-container-width';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
-var LEFT_LABELS_MARGIN = 16;
-var BOTTOM_LABELS_OFFSET = 12;
+const LEFT_LABELS_MARGIN = 16;
+const BOTTOM_LABELS_OFFSET = 12;
 export default function ChartContainer(_a) {
     var _b, _c;
-    var plotHeight = _a.height, series = _a.series, visibleSeries = _a.visibleSeries, highlightedSeries = _a.highlightedSeries, onHighlightChange = _a.onHighlightChange, highlightedPoint = _a.highlightedPoint, setHighlightedPoint = _a.setHighlightedPoint, highlightedGroupIndex = _a.highlightedGroupIndex, setHighlightedGroupIndex = _a.setHighlightedGroupIndex, _d = _a.detailPopoverSize, detailPopoverSize = _d === void 0 ? 'medium' : _d, _e = _a.stackedBars, stackedBars = _e === void 0 ? false : _e, _f = _a.horizontalBars, horizontalBars = _f === void 0 ? false : _f, xScaleType = _a.xScaleType, yScaleType = _a.yScaleType, xTickFormatter = _a.xTickFormatter, yTickFormatter = _a.yTickFormatter, emphasizeBaselineAxis = _a.emphasizeBaselineAxis, xTitle = _a.xTitle, yTitle = _a.yTitle, ariaLabel = _a.ariaLabel, ariaLabelledby = _a.ariaLabelledby, ariaDescription = _a.ariaDescription, _g = _a.i18nStrings, i18nStrings = _g === void 0 ? {} : _g, plotContainerRef = _a.plotContainerRef, props = __rest(_a, ["height", "series", "visibleSeries", "highlightedSeries", "onHighlightChange", "highlightedPoint", "setHighlightedPoint", "highlightedGroupIndex", "setHighlightedGroupIndex", "detailPopoverSize", "stackedBars", "horizontalBars", "xScaleType", "yScaleType", "xTickFormatter", "yTickFormatter", "emphasizeBaselineAxis", "xTitle", "yTitle", "ariaLabel", "ariaLabelledby", "ariaDescription", "i18nStrings", "plotContainerRef"]);
-    var plotRef = useRef(null);
-    var verticalMarkerRef = useRef(null);
-    var _h = useState(0), leftLabelsWidth = _h[0], setLeftLabelsWidth = _h[1];
-    var _j = useState(0), bottomLabelsHeight = _j[0], setBottomLabelsHeight = _j[1];
-    var _k = useState(null), verticalMarkerX = _k[0], setVerticalMarkerX = _k[1];
-    var _l = useContainerWidth(500), containerWidth = _l[0], containerMeasureRef = _l[1];
-    var plotWidth = containerWidth ? containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN : 500;
-    var containerRefObject = useRef(null);
-    var containerRef = useMergeRefs(containerMeasureRef, containerRefObject);
-    var popoverRef = useRef(null);
-    var isRefresh = useVisualRefresh();
-    var linesOnly = series.every(function (_a) {
-        var series = _a.series;
-        return series.type === 'line' || series.type === 'threshold';
-    });
-    var xDomain = (props.xDomain || computeDomainX(series, xScaleType));
-    var yDomain = (props.yDomain || computeDomainY(series, yScaleType, stackedBars));
-    var xTickCount = getXTickCount(plotWidth);
-    var yTickCount = getYTickCount(plotHeight);
-    var rangeBottomTop = [0, plotHeight];
-    var rangeTopBottom = [plotHeight, 0];
-    var rangeLeftRight = [0, plotWidth];
-    var xScale = new ChartScale(xScaleType, xDomain, horizontalBars ? rangeBottomTop : rangeLeftRight, linesOnly);
-    var yScale = new NumericChartScale(yScaleType, yDomain, horizontalBars ? rangeLeftRight : rangeTopBottom, props.yDomain ? null : yTickCount);
-    var xTicks = createXTicks(xScale, xTickCount);
-    var yTicks = createYTicks(yScale, yTickCount);
+    var { height: plotHeight, series, visibleSeries, highlightedSeries, onHighlightChange, highlightedPoint, setHighlightedPoint, highlightedGroupIndex, setHighlightedGroupIndex, detailPopoverSize = 'medium', stackedBars = false, horizontalBars = false, xScaleType, yScaleType, xTickFormatter, yTickFormatter, emphasizeBaselineAxis, xTitle, yTitle, ariaLabel, ariaLabelledby, ariaDescription, i18nStrings = {}, plotContainerRef } = _a, props = __rest(_a, ["height", "series", "visibleSeries", "highlightedSeries", "onHighlightChange", "highlightedPoint", "setHighlightedPoint", "highlightedGroupIndex", "setHighlightedGroupIndex", "detailPopoverSize", "stackedBars", "horizontalBars", "xScaleType", "yScaleType", "xTickFormatter", "yTickFormatter", "emphasizeBaselineAxis", "xTitle", "yTitle", "ariaLabel", "ariaLabelledby", "ariaDescription", "i18nStrings", "plotContainerRef"]);
+    const plotRef = useRef(null);
+    const verticalMarkerRef = useRef(null);
+    const [leftLabelsWidth, setLeftLabelsWidth] = useState(0);
+    const [bottomLabelsHeight, setBottomLabelsHeight] = useState(0);
+    const [verticalMarkerX, setVerticalMarkerX] = useState(null);
+    const [containerWidth, containerMeasureRef] = useContainerWidth(500);
+    const plotWidth = containerWidth ? containerWidth - leftLabelsWidth - LEFT_LABELS_MARGIN : 500;
+    const containerRefObject = useRef(null);
+    const containerRef = useMergeRefs(containerMeasureRef, containerRefObject);
+    const popoverRef = useRef(null);
+    const isRefresh = useVisualRefresh();
+    const linesOnly = series.every(({ series }) => series.type === 'line' || series.type === 'threshold');
+    const xDomain = (props.xDomain || computeDomainX(series, xScaleType));
+    const yDomain = (props.yDomain || computeDomainY(series, yScaleType, stackedBars));
+    const xTickCount = getXTickCount(plotWidth);
+    const yTickCount = getYTickCount(plotHeight);
+    const rangeBottomTop = [0, plotHeight];
+    const rangeTopBottom = [plotHeight, 0];
+    const rangeLeftRight = [0, plotWidth];
+    const xScale = new ChartScale(xScaleType, xDomain, horizontalBars ? rangeBottomTop : rangeLeftRight, linesOnly);
+    const yScale = new NumericChartScale(yScaleType, yDomain, horizontalBars ? rangeLeftRight : rangeTopBottom, props.yDomain ? null : yTickCount);
+    const xTicks = createXTicks(xScale, xTickCount);
+    const yTicks = createYTicks(yScale, yTickCount);
     /**
      * Interactions
      */
-    var highlightedPointRef = useRef(null);
-    var highlightedGroupRef = useRef(null);
-    var _m = useState(false), isPlotFocused = _m[0], setPlotFocused = _m[1];
+    const highlightedPointRef = useRef(null);
+    const highlightedGroupRef = useRef(null);
+    const [isPlotFocused, setPlotFocused] = useState(false);
     // Some chart components are rendered against "x" or "y" axes,
     // When "horizontalBars" is enabled, the axes are inverted.
-    var x = !horizontalBars ? 'x' : 'y';
-    var y = !horizontalBars ? 'y' : 'x';
-    var xy = {
+    const x = !horizontalBars ? 'x' : 'y';
+    const y = !horizontalBars ? 'y' : 'x';
+    const xy = {
         ticks: { x: xTicks, y: yTicks },
         scale: { x: xScale, y: yScale },
         tickFormatter: { x: xTickFormatter, y: yTickFormatter },
         title: { x: xTitle, y: yTitle },
-        ariaRoleDescription: { x: i18nStrings.xAxisAriaRoleDescription, y: i18nStrings.yAxisAriaRoleDescription }
+        ariaRoleDescription: { x: i18nStrings.xAxisAriaRoleDescription, y: i18nStrings.yAxisAriaRoleDescription },
     };
-    var scaledSeries = makeScaledSeries(visibleSeries, xScale, yScale);
-    var barGroups = makeScaledBarGroups(visibleSeries, xScale, plotWidth, plotHeight, y);
-    var _o = usePopover(), isPopoverOpen = _o.isPopoverOpen, isPopoverPinned = _o.isPopoverPinned, showPopover = _o.showPopover, pinPopover = _o.pinPopover, dismissPopover = _o.dismissPopover;
+    const scaledSeries = makeScaledSeries(visibleSeries, xScale, yScale);
+    const barGroups = makeScaledBarGroups(visibleSeries, xScale, plotWidth, plotHeight, y);
+    const { isPopoverOpen, isPopoverPinned, showPopover, pinPopover, dismissPopover } = usePopover();
     // Allows to add a delay between popover is dismissed and handlers are enabled to prevent immediate popover reopening.
-    var _p = useState(!isPopoverPinned), isHandlersDisabled = _p[0], setHandlersDisabled = _p[1];
-    useEffect(function () {
+    const [isHandlersDisabled, setHandlersDisabled] = useState(!isPopoverPinned);
+    useEffect(() => {
         if (isPopoverPinned) {
             setHandlersDisabled(true);
         }
         else {
-            var timeoutId_1 = setTimeout(function () { return setHandlersDisabled(false); }, 25);
-            return function () { return clearTimeout(timeoutId_1); };
+            const timeoutId = setTimeout(() => setHandlersDisabled(false), 25);
+            return () => clearTimeout(timeoutId);
         }
     }, [isPopoverPinned]);
-    var highlightSeries = useCallback(function (series) {
+    const highlightSeries = useCallback((series) => {
         if (series !== highlightedSeries) {
             onHighlightChange(series);
         }
     }, [highlightedSeries, onHighlightChange]);
-    var highlightPoint = useCallback(function (point) {
+    const highlightPoint = useCallback((point) => {
         var _a, _b;
         setHighlightedGroupIndex(null);
         setHighlightedPoint(point);
@@ -104,66 +101,66 @@ export default function ChartContainer(_a) {
             highlightSeries(point.series);
             setVerticalMarkerX({
                 scaledX: point.x,
-                label: (_b = (_a = point.datum) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : null
+                label: (_b = (_a = point.datum) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : null,
             });
         }
     }, [setHighlightedGroupIndex, setHighlightedPoint, highlightSeries]);
-    var clearAllHighlights = useCallback(function () {
+    const clearAllHighlights = useCallback(() => {
         setHighlightedPoint(null);
         highlightSeries(null);
         setHighlightedGroupIndex(null);
     }, [highlightSeries, setHighlightedGroupIndex, setHighlightedPoint]);
     // Highlight all points at a given X in a line chart
-    var highlightX = useCallback(function (marker) {
+    const highlightX = useCallback((marker) => {
         if (marker) {
             clearAllHighlights();
         }
         setVerticalMarkerX(marker);
     }, [clearAllHighlights]);
     // Highlight all points and bars at a given X index in a mixed line and bar chart
-    var highlightGroup = useCallback(function (groupIndex) {
+    const highlightGroup = useCallback((groupIndex) => {
         highlightSeries(null);
         setHighlightedPoint(null);
         setHighlightedGroupIndex(groupIndex);
     }, [highlightSeries, setHighlightedPoint, setHighlightedGroupIndex]);
-    var clearHighlightedSeries = useCallback(function () {
+    const clearHighlightedSeries = useCallback(() => {
         clearAllHighlights();
         dismissPopover();
     }, [dismissPopover, clearAllHighlights]);
-    var _q = useNavigation({
-        series: series,
-        visibleSeries: visibleSeries,
-        scaledSeries: scaledSeries,
-        barGroups: barGroups,
-        xScale: xScale,
-        yScale: yScale,
-        highlightedPoint: highlightedPoint,
-        highlightedGroupIndex: highlightedGroupIndex,
-        highlightedSeries: highlightedSeries,
-        isHandlersDisabled: isHandlersDisabled,
-        pinPopover: pinPopover,
-        highlightSeries: highlightSeries,
-        highlightGroup: highlightGroup,
-        highlightPoint: highlightPoint,
-        highlightX: highlightX,
-        clearHighlightedSeries: clearHighlightedSeries,
-        verticalMarkerX: verticalMarkerX
-    }), isGroupNavigation = _q.isGroupNavigation, handlers = __rest(_q, ["isGroupNavigation"]);
-    var _r = useMouseHover({
-        scaledSeries: scaledSeries,
-        barGroups: barGroups,
-        plotRef: plotRef,
-        popoverRef: popoverRef,
-        highlightPoint: highlightPoint,
-        highlightGroup: highlightGroup,
-        clearHighlightedSeries: clearHighlightedSeries,
-        isGroupNavigation: isGroupNavigation,
-        isHandlersDisabled: isHandlersDisabled,
-        highlightX: highlightX
-    }), onSVGMouseMove = _r.onSVGMouseMove, onSVGMouseOut = _r.onSVGMouseOut, onPopoverLeave = _r.onPopoverLeave;
+    const _d = useNavigation({
+        series,
+        visibleSeries,
+        scaledSeries,
+        barGroups,
+        xScale,
+        yScale,
+        highlightedPoint,
+        highlightedGroupIndex,
+        highlightedSeries,
+        isHandlersDisabled,
+        pinPopover,
+        highlightSeries,
+        highlightGroup,
+        highlightPoint,
+        highlightX,
+        clearHighlightedSeries,
+        verticalMarkerX,
+    }), { isGroupNavigation } = _d, handlers = __rest(_d, ["isGroupNavigation"]);
+    const { onSVGMouseMove, onSVGMouseOut, onPopoverLeave } = useMouseHover({
+        scaledSeries,
+        barGroups,
+        plotRef,
+        popoverRef,
+        highlightPoint,
+        highlightGroup,
+        clearHighlightedSeries,
+        isGroupNavigation,
+        isHandlersDisabled,
+        highlightX,
+    });
     // There are multiple ways to indicate what X is selected.
     // TODO: make a uniform verticalMarkerX state to fit all use-cases.
-    var highlightedX = useMemo(function () {
+    const highlightedX = useMemo(() => {
         var _a, _b;
         if (highlightedGroupIndex !== null) {
             return barGroups[highlightedGroupIndex].x;
@@ -173,27 +170,27 @@ export default function ChartContainer(_a) {
         }
         return (_b = (_a = highlightedPoint === null || highlightedPoint === void 0 ? void 0 : highlightedPoint.datum) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : null;
     }, [highlightedPoint, verticalMarkerX, highlightedGroupIndex, barGroups]);
-    useEffect(function () {
-        var onKeyDown = function (event) {
+    useEffect(() => {
+        const onKeyDown = (event) => {
             if (event.key === 'Escape') {
                 dismissPopover();
             }
         };
         document.addEventListener('keydown', onKeyDown);
-        return function () { return document.removeEventListener('keydown', onKeyDown); };
+        return () => document.removeEventListener('keydown', onKeyDown);
     }, [dismissPopover]);
-    useLayoutEffect(function () {
+    useLayoutEffect(() => {
         if (highlightedX !== null || highlightedPoint !== null) {
             showPopover();
         }
     }, [highlightedX, highlightedPoint, showPopover]);
-    var onPopoverDismiss = function (outsideClick) {
+    const onPopoverDismiss = (outsideClick) => {
         dismissPopover();
         if (!outsideClick) {
             // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.
-            setTimeout(function () {
+            setTimeout(() => {
                 var _a, _b;
-                var isSomeInnerElementFocused = highlightedPoint || highlightedGroupIndex !== null || verticalMarkerX;
+                const isSomeInnerElementFocused = highlightedPoint || highlightedGroupIndex !== null || verticalMarkerX;
                 if (isSomeInnerElementFocused) {
                     (_a = plotRef.current) === null || _a === void 0 ? void 0 : _a.focusApplication();
                 }
@@ -207,7 +204,7 @@ export default function ChartContainer(_a) {
             setVerticalMarkerX(null);
         }
     };
-    var onSVGMouseDown = function (e) {
+    const onSVGMouseDown = (e) => {
         if (isPopoverOpen) {
             if (isPopoverPinned) {
                 dismissPopover();
@@ -221,7 +218,7 @@ export default function ChartContainer(_a) {
             showPopover();
         }
     };
-    var onSVGFocus = function (event, trigger) {
+    const onSVGFocus = (event, trigger) => {
         setPlotFocused(true);
         if (trigger === 'keyboard') {
             handlers.onFocus();
@@ -230,10 +227,10 @@ export default function ChartContainer(_a) {
             // noop: clicks are handled separately
         }
     };
-    var onSVGBlur = function (event) {
+    const onSVGBlur = (event) => {
         var _a;
         setPlotFocused(false);
-        var blurTarget = event.relatedTarget || event.target;
+        const blurTarget = event.relatedTarget || event.target;
         if (blurTarget === null ||
             !(blurTarget instanceof Element) ||
             !nodeContains(containerRefObject.current, blurTarget)) {
@@ -247,78 +244,66 @@ export default function ChartContainer(_a) {
             }
         }
     };
-    var onSVGKeyDown = handlers.onKeyDown;
-    var xOffset = xScale.isCategorical() ? Math.max(0, xScale.d3Scale.bandwidth() - 1) / 2 : 0;
-    var verticalLineX = null;
+    const onSVGKeyDown = handlers.onKeyDown;
+    const xOffset = xScale.isCategorical() ? Math.max(0, xScale.d3Scale.bandwidth() - 1) / 2 : 0;
+    let verticalLineX = null;
     if (verticalMarkerX !== null) {
         verticalLineX = verticalMarkerX.scaledX;
     }
     else if (isGroupNavigation && highlightedGroupIndex !== null) {
-        var x_1 = (_b = xScale.d3Scale(barGroups[highlightedGroupIndex].x)) !== null && _b !== void 0 ? _b : null;
-        if (x_1 !== null) {
-            verticalLineX = xOffset + x_1;
+        const x = (_b = xScale.d3Scale(barGroups[highlightedGroupIndex].x)) !== null && _b !== void 0 ? _b : null;
+        if (x !== null) {
+            verticalLineX = xOffset + x;
         }
     }
-    var point = useMemo(function () {
-        return highlightedPoint
-            ? {
-                key: "".concat(highlightedPoint.x, "-").concat(highlightedPoint.y),
-                x: highlightedPoint.x,
-                y: highlightedPoint.y,
-                color: highlightedPoint.color
-            }
-            : null;
-    }, [highlightedPoint]);
-    var verticalMarkers = useMemo(function () {
-        return verticalLineX !== null
-            ? scaledSeries
-                .filter(function (_a) {
-                var x = _a.x, y = _a.y;
-                return (x === verticalLineX || isNaN(x)) && !isNaN(y);
-            })
-                .map(function (_a, index) {
-                var x = _a.x, y = _a.y, color = _a.color;
-                return ({
-                    key: "".concat(index, "-").concat(x, "-").concat(y),
-                    x: !horizontalBars ? verticalLineX || 0 : y,
-                    y: !horizontalBars ? y : verticalLineX || 0,
-                    color: color
-                });
-            })
-            : [];
-    }, [scaledSeries, verticalLineX, horizontalBars]);
-    var highlightedElementRef = isGroupNavigation
+    const point = useMemo(() => highlightedPoint
+        ? {
+            key: `${highlightedPoint.x}-${highlightedPoint.y}`,
+            x: highlightedPoint.x,
+            y: highlightedPoint.y,
+            color: highlightedPoint.color,
+        }
+        : null, [highlightedPoint]);
+    const verticalMarkers = useMemo(() => verticalLineX !== null
+        ? scaledSeries
+            .filter(({ x, y }) => (x === verticalLineX || isNaN(x)) && !isNaN(y))
+            .map(({ x, y, color }, index) => ({
+            key: `${index}-${x}-${y}`,
+            x: !horizontalBars ? verticalLineX || 0 : y,
+            y: !horizontalBars ? y : verticalLineX || 0,
+            color: color,
+        }))
+        : [], [scaledSeries, verticalLineX, horizontalBars]);
+    const highlightedElementRef = isGroupNavigation
         ? highlightedGroupRef
         : highlightedPoint
             ? highlightedPointRef
             : verticalMarkerRef;
-    var highlightDetails = useMemo(function () {
+    const highlightDetails = useMemo(() => {
         if (highlightedX === null) {
             return null;
         }
         // When series point is highlighted show the corresponding series and matching x-thresholds.
         if (highlightedPoint) {
-            var seriesToShow = visibleSeries.filter(function (series) { return series.series === (highlightedPoint === null || highlightedPoint === void 0 ? void 0 : highlightedPoint.series) || isXThreshold(series.series); });
+            const seriesToShow = visibleSeries.filter(series => series.series === (highlightedPoint === null || highlightedPoint === void 0 ? void 0 : highlightedPoint.series) || isXThreshold(series.series));
             return formatHighlighted(highlightedX, seriesToShow, xTickFormatter);
         }
         // Otherwise - show all visible series details.
         return formatHighlighted(highlightedX, visibleSeries, xTickFormatter);
     }, [highlightedX, highlightedPoint, visibleSeries, xTickFormatter]);
-    var activeAriaLabel = useMemo(function () {
-        return highlightDetails
-            ? "".concat(highlightDetails.position, ", ").concat(highlightDetails.details.map(function (d) { return d.key + ' ' + d.value; }).join(','))
-            : '';
-    }, [highlightDetails]);
+    const activeAriaLabel = useMemo(() => highlightDetails
+        ? `${highlightDetails.position}, ${highlightDetails.details.map(d => d.key + ' ' + d.value).join(',')}`
+        : '', [highlightDetails]);
     // Live region is used when nothing is focused e.g. when hovering.
-    var activeLiveRegion = activeAriaLabel && !highlightedPoint && highlightedGroupIndex === null ? activeAriaLabel : '';
-    var isLineXKeyboardFocused = isPlotFocused && !highlightedPoint && verticalMarkerX;
+    const activeLiveRegion = activeAriaLabel && !highlightedPoint && highlightedGroupIndex === null ? activeAriaLabel : '';
+    const isLineXKeyboardFocused = isPlotFocused && !highlightedPoint && verticalMarkerX;
     return (React.createElement("div", { className: styles['chart-container'], ref: containerRef },
         React.createElement(AxisLabel, { axis: y, position: "left", title: xy.title[y] }),
         React.createElement("div", { className: styles['chart-container__horizontal'] },
             React.createElement(LabelsMeasure, { ticks: xy.ticks[y], scale: xy.scale[y], tickFormatter: xy.tickFormatter[y], autoWidth: setLeftLabelsWidth }),
             React.createElement("div", { className: styles['chart-container__vertical'] },
                 React.createElement(ChartPlot, { ref: plotRef, width: plotWidth, height: plotHeight, offsetBottom: bottomLabelsHeight, isClickable: isPopoverOpen && !isPopoverPinned, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescription: ariaDescription, ariaRoleDescription: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.chartAriaRoleDescription, ariaLiveRegion: activeLiveRegion, activeElementRef: highlightedElementRef, activeElementKey: isPlotFocused &&
-                        ((_c = highlightedGroupIndex === null || highlightedGroupIndex === void 0 ? void 0 : highlightedGroupIndex.toString()) !== null && _c !== void 0 ? _c : (isLineXKeyboardFocused ? "point-index-".concat(handlers.xIndex) : point === null || point === void 0 ? void 0 : point.key)), activeElementFocusOffset: isGroupNavigation ? 0 : isLineXKeyboardFocused ? { x: 8, y: 0 } : 3, onMouseMove: onSVGMouseMove, onMouseOut: onSVGMouseOut, onMouseDown: onSVGMouseDown, onFocus: onSVGFocus, onBlur: onSVGBlur, onKeyDown: onSVGKeyDown },
+                        ((_c = highlightedGroupIndex === null || highlightedGroupIndex === void 0 ? void 0 : highlightedGroupIndex.toString()) !== null && _c !== void 0 ? _c : (isLineXKeyboardFocused ? `point-index-${handlers.xIndex}` : point === null || point === void 0 ? void 0 : point.key)), activeElementFocusOffset: isGroupNavigation ? 0 : isLineXKeyboardFocused ? { x: 8, y: 0 } : 3, onMouseMove: onSVGMouseMove, onMouseOut: onSVGMouseOut, onMouseDown: onSVGMouseDown, onFocus: onSVGFocus, onBlur: onSVGBlur, onKeyDown: onSVGKeyDown },
                     React.createElement(LeftLabels, { axis: y, ticks: xy.ticks[y], scale: xy.scale[y], tickFormatter: xy.tickFormatter[y], title: xy.title[y], ariaRoleDescription: xy.ariaRoleDescription[y], width: plotWidth, height: plotHeight }),
                     horizontalBars && React.createElement(VerticalGridLines, { scale: yScale, ticks: yTicks, height: plotHeight }),
                     emphasizeBaselineAxis && linesOnly && (React.createElement(EmphasizedBaseline, { axis: x, scale: yScale, width: plotWidth, height: plotHeight })),