@cloudscape-design/components-themeable 3.0.0

package/internal/template/area-chart/model/use-chart-model.js

@@ -0,0 +1,216 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { findClosest, circleIndex, throttle } from './utils';
+import { nodeContains } from '../../internal/utils/dom';
+import { KeyCode } from '../../internal/keycode';
+import { useReaction } from './async-store';
+import computeChartProps from './compute-chart-props';
+import createSeriesDecorator from './create-series-decorator';
+import InteractionsStore from './interactions-store';
+import { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';
+var MAX_HOVER_MARGIN = 6;
+var SVG_HOVER_THROTTLE = 25;
+// Represents the core the chart logic, including the model of all allowed user interactions.
+export default function useChartModel(_a) {
+    var allSeries = _a.externalSeries, series = _a.visibleSeries, setVisibleSeries = _a.setVisibleSeries, highlightedSeries = _a.highlightedSeries, setHighlightedSeries = _a.setHighlightedSeries, xDomain = _a.xDomain, yDomain = _a.yDomain, xScaleType = _a.xScaleType, yScaleType = _a.yScaleType, height = _a.height, width = _a.width;
+    // Chart elements refs used in handlers.
+    var plotRef = useRef(null);
+    var containerRef = useRef(null);
+    var verticalMarkerRef = useRef(null);
+    var stableSetVisibleSeries = useStableEventHandler(setVisibleSeries);
+    var model = useMemo(function () {
+        // Compute scales, ticks and two-dimensional plots.
+        var computed = computeChartProps({
+            series: series,
+            xDomain: xDomain,
+            yDomain: yDomain,
+            xScaleType: xScaleType,
+            yScaleType: yScaleType,
+            height: height,
+            width: width
+        });
+        // A store for chart interactions that don't require plot recomputation.
+        var interactions = new InteractionsStore(series, computed.plot);
+        // A series decorator to provide extra props such as color and marker type.
+        var getInternalSeries = createSeriesDecorator(allSeries);
+        // A Callback for svg mouseover to hover the plot points.
+        // Throttling is necessary for a substantially smoother customer experience.
+        var onSVGMouseMoveThrottled = throttle(function (clientX, clientY) {
+            // No hover logic when the popover is pinned or no data available.
+            if (interactions.get().isPopoverPinned || !plotRef.current || interactions.plot.xy.length === 0) {
+                return;
+            }
+            var svgRect = plotRef.current.svg.getBoundingClientRect();
+            var offsetX = clientX - svgRect.left;
+            var offsetY = clientY - svgRect.top;
+            var closestX = findClosest(interactions.plot.xy, offsetX, function (xPoints) { return xPoints[0].scaled.x; });
+            var closestPoint = findClosest(closestX, offsetY, function (point) { return point.scaled.y1; });
+            // If close enough to the point - highlight the point and its column.
+            // If not - only highlight the closest column.
+            if (Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&
+                Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN) {
+                interactions.highlightPoint(closestPoint);
+            }
+            else {
+                interactions.highlightX(closestX);
+            }
+        }, SVG_HOVER_THROTTLE);
+        var onSVGMouseMove = function (_a) {
+            var clientX = _a.clientX, clientY = _a.clientY;
+            return onSVGMouseMoveThrottled(clientX, clientY);
+        };
+        // A callback for svg mouseout to clear all highlights.
+        var onSVGMouseOut = function (event) {
+            // Because the mouseover is throttled, in can occur slightly after the mouseout,
+            // neglecting its effect; cancelling the throttled function prevents that.
+            onSVGMouseMoveThrottled.cancel();
+            // No hover logic when the popover is pinned.
+            if (interactions.get().isPopoverPinned) {
+                return;
+            }
+            // Check if the target is contained within svg to allow hovering on the popover body.
+            if (!nodeContains(plotRef.current.svg, event.relatedTarget)) {
+                interactions.clearHighlightedLegend();
+                interactions.clearHighlight();
+            }
+        };
+        // A callback for svg click to pin/unpin the popover.
+        var onSVGMouseDown = function () {
+            interactions.togglePopoverPin();
+        };
+        // A helper function to highlight the next or previous point within selected series.
+        var moveWithinSeries = function (direction) {
+            // Can only use motion when a particular point is highlighted.
+            var point = interactions.get().highlightedPoint;
+            if (!point) {
+                return;
+            }
+            // Take the index of the currently highlighted series.
+            var sIndex = point.index.s;
+            // Take the incremented(circularly) x-index of the currently highlighted point.
+            var xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);
+            // Highlight the next point using x:s grouped data.
+            interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);
+        };
+        // A helper function to highlight the next or previous point withing selected column.
+        var moveBetweenSeries = function (direction) {
+            // Can only use motion when a particular point is highlighted.
+            var point = interactions.get().highlightedPoint;
+            if (!point) {
+                return;
+            }
+            // Take the index of the currently highlighted column.
+            var xIndex = point.index.x;
+            // Take the incremented(circularly) y-index of the currently highlighted point.
+            var yIndex = circleIndex(point.index.y + direction, [0, interactions.plot.xy[xIndex].length - 1]);
+            // Highlight the next point using x:y grouped data.
+            interactions.highlightPoint(interactions.plot.xy[xIndex][yIndex]);
+        };
+        // A callback for svg keydown to enable motions and popover pin with the keyboard.
+        var onSVGKeyDown = 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;
+            }
+            // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.
+            event.preventDefault();
+            // No keydown logic when the popover is pinned.
+            if (interactions.get().isPopoverPinned) {
+                return;
+            }
+            // Move up/down.
+            if (keyCode === KeyCode.down || keyCode === KeyCode.up) {
+                moveBetweenSeries(keyCode === KeyCode.down ? -1 : 1);
+            }
+            // Move left/right.
+            else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {
+                moveWithinSeries(keyCode === KeyCode.right ? 1 : -1);
+            }
+            // Pin popover.
+            else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {
+                interactions.pinPopover();
+            }
+        };
+        // A callback for svg focus to highlight series.
+        var onSVGFocus = function (_event, trigger) {
+            // When focus is caused by a click event nothing is expected as clicks are handled separately.
+            // Otherwise, select the first series point.
+            if (trigger === 'keyboard') {
+                interactions.highlightFirstPoint();
+            }
+        };
+        // A callback for svg blur to clear all highlights unless the popover is pinned.
+        var onSVGBlur = function () {
+            // Pinned popover stays pinned even if the focus is lost.
+            // If blur is not caused by the popover, forget the previously highlighted point.
+            if (!interactions.get().isPopoverPinned) {
+                interactions.clearHighlight();
+            }
+        };
+        var onFilterSeries = function (series) {
+            stableSetVisibleSeries(series);
+        };
+        var onLegendHighlight = function (series) {
+            interactions.highlightSeries(series);
+        };
+        var onPopoverDismiss = function (outsideClick) {
+            interactions.unpinPopover();
+            // Return focus back to the application or plot (when no point is highlighted).
+            if (!outsideClick) {
+                // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.
+                setTimeout(function () {
+                    if (interactions.get().highlightedPoint) {
+                        plotRef.current.focusApplication();
+                    }
+                    else {
+                        interactions.clearHighlight();
+                        plotRef.current.focusPlot();
+                    }
+                }, 0);
+            }
+        };
+        var onContainerBlur = function () {
+            interactions.clearState();
+        };
+        return {
+            width: width,
+            height: height,
+            series: series,
+            allSeries: allSeries,
+            getInternalSeries: getInternalSeries,
+            computed: computed,
+            interactions: interactions,
+            handlers: {
+                onSVGMouseMove: onSVGMouseMove,
+                onSVGMouseOut: onSVGMouseOut,
+                onSVGMouseDown: onSVGMouseDown,
+                onSVGKeyDown: onSVGKeyDown,
+                onSVGFocus: onSVGFocus,
+                onSVGBlur: onSVGBlur,
+                onFilterSeries: onFilterSeries,
+                onLegendHighlight: onLegendHighlight,
+                onPopoverDismiss: onPopoverDismiss,
+                onContainerBlur: onContainerBlur
+            },
+            refs: {
+                plot: plotRef,
+                container: containerRef,
+                verticalMarker: verticalMarkerRef
+            }
+        };
+    }, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries]);
+    // Notify client when series highlight change.
+    useReaction(model.interactions, function (state) { return state.highlightedSeries; }, setHighlightedSeries);
+    // Update interactions store when series highlight in a controlled way.
+    useEffect(function () {
+        if (highlightedSeries !== model.interactions.get().highlightedSeries) {
+            model.interactions.highlightSeries(highlightedSeries);
+        }
+    }, [model, highlightedSeries]);
+    return model;
+}
+//# sourceMappingURL=use-chart-model.js.map

package/internal/template/area-chart/model/use-chart-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-chart-model.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-chart-model.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 { AreaChartProps } from '../interfaces';\nimport React, { useEffect, useMemo, useRef } from 'react';\nimport { findClosest, circleIndex, throttle } from './utils';\n\nimport { nodeContains } from '../../internal/utils/dom';\nimport { KeyCode } from '../../internal/keycode';\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport { useReaction } from './async-store';\nimport computeChartProps from './compute-chart-props';\nimport createSeriesDecorator from './create-series-decorator';\nimport InteractionsStore from './interactions-store';\nimport { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';\nimport { ChartModel } from './index';\nimport { ChartPlotRef } from '../../internal/components/chart-plot';\n\nconst MAX_HOVER_MARGIN = 6;\nconst SVG_HOVER_THROTTLE = 25;\n\ninterface UseChartModelProps<T extends AreaChartProps.DataTypes> {\n  externalSeries: readonly AreaChartProps.Series<T>[];\n  visibleSeries: readonly AreaChartProps.Series<T>[];\n  setVisibleSeries: (series: readonly AreaChartProps.Series<T>[]) => void;\n  highlightedSeries: null | AreaChartProps.Series<T>;\n  setHighlightedSeries: (series: null | AreaChartProps.Series<T>) => void;\n  xDomain?: XDomain<T>;\n  yDomain?: YDomain;\n  xScaleType: XScaleType;\n  yScaleType: YScaleType;\n  height: number;\n  width: number;\n}\n\n// Represents the core the chart logic, including the model of all allowed user interactions.\nexport default function useChartModel<T extends AreaChartProps.DataTypes>({\n  externalSeries: allSeries,\n  visibleSeries: series,\n  setVisibleSeries,\n  highlightedSeries,\n  setHighlightedSeries,\n  xDomain,\n  yDomain,\n  xScaleType,\n  yScaleType,\n  height,\n  width,\n}: UseChartModelProps<T>): ChartModel<T> {\n  // Chart elements refs used in handlers.\n  const plotRef = useRef<ChartPlotRef>(null);\n  const containerRef = useRef<HTMLDivElement>(null);\n  const verticalMarkerRef = useRef<SVGLineElement>(null);\n\n  const stableSetVisibleSeries = useStableEventHandler(setVisibleSeries);\n\n  const model = useMemo(() => {\n    // Compute scales, ticks and two-dimensional plots.\n    const computed = computeChartProps({\n      series,\n      xDomain,\n      yDomain,\n      xScaleType,\n      yScaleType,\n      height,\n      width,\n    });\n\n    // A store for chart interactions that don't require plot recomputation.\n    const interactions = new InteractionsStore(series, computed.plot);\n\n    // A series decorator to provide extra props such as color and marker type.\n    const getInternalSeries = createSeriesDecorator(allSeries);\n\n    // A Callback for svg mouseover to hover the plot points.\n    // Throttling is necessary for a substantially smoother customer experience.\n    const onSVGMouseMoveThrottled = throttle((clientX: number, clientY: number) => {\n      // No hover logic when the popover is pinned or no data available.\n      if (interactions.get().isPopoverPinned || !plotRef.current || interactions.plot.xy.length === 0) {\n        return;\n      }\n\n      const svgRect = plotRef.current.svg.getBoundingClientRect();\n      const offsetX = clientX - svgRect.left;\n      const offsetY = clientY - svgRect.top;\n\n      const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);\n      const closestPoint = findClosest(closestX, offsetY, point => point.scaled.y1);\n\n      // If close enough to the point - highlight the point and its column.\n      // If not - only highlight the closest column.\n      if (\n        Math.abs(offsetX - closestPoint.scaled.x) < MAX_HOVER_MARGIN &&\n        Math.abs(offsetY - closestPoint.scaled.y1) < MAX_HOVER_MARGIN\n      ) {\n        interactions.highlightPoint(closestPoint);\n      } else {\n        interactions.highlightX(closestX);\n      }\n    }, SVG_HOVER_THROTTLE);\n\n    const onSVGMouseMove = ({ clientX, clientY }: React.MouseEvent<SVGElement, MouseEvent>) =>\n      onSVGMouseMoveThrottled(clientX, clientY);\n\n    // A callback for svg mouseout to clear all highlights.\n    const onSVGMouseOut = (event: React.MouseEvent<SVGElement, MouseEvent>) => {\n      // Because the mouseover is throttled, in can occur slightly after the mouseout,\n      // neglecting its effect; cancelling the throttled function prevents that.\n      onSVGMouseMoveThrottled.cancel();\n\n      // No hover logic when the popover is pinned.\n      if (interactions.get().isPopoverPinned) {\n        return;\n      }\n\n      // Check if the target is contained within svg to allow hovering on the popover body.\n      if (!nodeContains(plotRef.current!.svg, event.relatedTarget as Element)) {\n        interactions.clearHighlightedLegend();\n        interactions.clearHighlight();\n      }\n    };\n\n    // A callback for svg click to pin/unpin the popover.\n    const onSVGMouseDown = () => {\n      interactions.togglePopoverPin();\n    };\n\n    // A helper function to highlight the next or previous point within selected series.\n    const moveWithinSeries = (direction: -1 | 1) => {\n      // Can only use motion when a particular point is highlighted.\n      const point = interactions.get().highlightedPoint;\n      if (!point) {\n        return;\n      }\n\n      // Take the index of the currently highlighted series.\n      const sIndex = point.index.s;\n      // Take the incremented(circularly) x-index of the currently highlighted point.\n      const xIndex = circleIndex(point.index.x + direction, [0, interactions.plot.xs.length - 1]);\n      // Highlight the next point using x:s grouped data.\n      interactions.highlightPoint(interactions.plot.xs[xIndex][sIndex]);\n    };\n\n    // A helper function to highlight the next or previous point withing selected column.\n    const moveBetweenSeries = (direction: -1 | 1) => {\n      // Can only use motion when a particular point is highlighted.\n      const point = interactions.get().highlightedPoint;\n      if (!point) {\n        return;\n      }\n\n      // Take the index of the currently highlighted column.\n      const xIndex = point.index.x;\n      // Take the incremented(circularly) y-index of the currently highlighted point.\n      const yIndex = circleIndex(point.index.y + direction, [0, interactions.plot.xy[xIndex].length - 1]);\n      // Highlight the next point using x:y grouped data.\n      interactions.highlightPoint(interactions.plot.xy[xIndex][yIndex]);\n    };\n\n    // A callback for svg keydown to enable motions and popover pin with the keyboard.\n    const onSVGKeyDown = (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      // Preventing default fixes an issue in Safari+VO when VO additionally interprets arrow keys as its commands.\n      event.preventDefault();\n\n      // No keydown logic when the popover is pinned.\n      if (interactions.get().isPopoverPinned) {\n        return;\n      }\n\n      // Move up/down.\n      if (keyCode === KeyCode.down || keyCode === KeyCode.up) {\n        moveBetweenSeries(keyCode === KeyCode.down ? -1 : 1);\n      }\n      // Move left/right.\n      else if (keyCode === KeyCode.left || keyCode === KeyCode.right) {\n        moveWithinSeries(keyCode === KeyCode.right ? 1 : -1);\n      }\n      // Pin popover.\n      else if (keyCode === KeyCode.enter || keyCode === KeyCode.space) {\n        interactions.pinPopover();\n      }\n    };\n\n    // A callback for svg focus to highlight series.\n    const onSVGFocus = (_event: React.FocusEvent, trigger: 'mouse' | 'keyboard') => {\n      // When focus is caused by a click event nothing is expected as clicks are handled separately.\n      // Otherwise, select the first series point.\n      if (trigger === 'keyboard') {\n        interactions.highlightFirstPoint();\n      }\n    };\n\n    // A callback for svg blur to clear all highlights unless the popover is pinned.\n    const onSVGBlur = () => {\n      // Pinned popover stays pinned even if the focus is lost.\n      // If blur is not caused by the popover, forget the previously highlighted point.\n      if (!interactions.get().isPopoverPinned) {\n        interactions.clearHighlight();\n      }\n    };\n\n    const onFilterSeries = (series: readonly AreaChartProps.Series<T>[]) => {\n      stableSetVisibleSeries(series);\n    };\n\n    const onLegendHighlight = (series: null | AreaChartProps.Series<T>) => {\n      interactions.highlightSeries(series);\n    };\n\n    const onPopoverDismiss = (outsideClick?: boolean) => {\n      interactions.unpinPopover();\n\n      // Return focus back to the application or plot (when no point is highlighted).\n      if (!outsideClick) {\n        // The delay is needed to bypass focus events caused by click or keypress needed to unpin the popover.\n        setTimeout(() => {\n          if (interactions.get().highlightedPoint) {\n            plotRef.current!.focusApplication();\n          } else {\n            interactions.clearHighlight();\n            plotRef.current!.focusPlot();\n          }\n        }, 0);\n      }\n    };\n\n    const onContainerBlur = () => {\n      interactions.clearState();\n    };\n\n    return {\n      width,\n      height,\n      series,\n      allSeries,\n      getInternalSeries,\n      computed,\n      interactions,\n      handlers: {\n        onSVGMouseMove,\n        onSVGMouseOut,\n        onSVGMouseDown,\n        onSVGKeyDown,\n        onSVGFocus,\n        onSVGBlur,\n        onFilterSeries,\n        onLegendHighlight,\n        onPopoverDismiss,\n        onContainerBlur,\n      },\n      refs: {\n        plot: plotRef,\n        container: containerRef,\n        verticalMarker: verticalMarkerRef,\n      },\n    };\n  }, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries]);\n\n  // Notify client when series highlight change.\n  useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);\n\n  // Update interactions store when series highlight in a controlled way.\n  useEffect(() => {\n    if (highlightedSeries !== model.interactions.get().highlightedSeries) {\n      model.interactions.highlightSeries(highlightedSeries);\n    }\n  }, [model, highlightedSeries]);\n\n  return model;\n}\n"]}

package/internal/template/area-chart/model/use-filter-props.d.ts

@@ -0,0 +1,6 @@
+import { NonCancelableEventHandler } from '../../internal/events';
+import { AreaChartProps } from '../interfaces';
+declare type FilterProps<T> = [readonly AreaChartProps.Series<T>[], (series: readonly AreaChartProps.Series<T>[]) => void];
+export default function useFilterProps<T>(series: readonly AreaChartProps.Series<T>[], controlledVisibleSeries?: readonly AreaChartProps.Series<T>[], controlledOnVisibleChange?: NonCancelableEventHandler<AreaChartProps.FilterChangeDetail<T>>): FilterProps<T>;
+export {};
+//# sourceMappingURL=use-filter-props.d.ts.map

package/internal/template/area-chart/model/use-filter-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-filter-props.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/use-filter-props.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAE1F,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,aAAK,WAAW,CAAC,CAAC,IAAI,CAAC,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,CAAC;AAGnH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EACtC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAC3C,uBAAuB,CAAC,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAC7D,yBAAyB,CAAC,EAAE,yBAAyB,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,GAC1F,WAAW,CAAC,CAAC,CAAC,CA8BhB"}

package/internal/template/area-chart/model/use-filter-props.js

@@ -0,0 +1,26 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect } from 'react';
+import { fireNonCancelableEvent } from '../../internal/events';
+import { useControllable } from '../../internal/hooks/use-controllable';
+// Provides controlled or uncontrolled props to filter chart series.
+export default function useFilterProps(series, controlledVisibleSeries, controlledOnVisibleChange) {
+    var _a = useControllable(controlledVisibleSeries, controlledOnVisibleChange, series, {
+        componentName: 'AreaChart',
+        controlledProp: 'visibleSeries',
+        changeHandler: 'onFilterChange'
+    }), _b = _a[0], visibleSeries = _b === void 0 ? [] : _b, setVisibleSeriesState = _a[1];
+    var setVisibleSeries = useCallback(function (selectedSeries) {
+        setVisibleSeriesState(selectedSeries);
+        fireNonCancelableEvent(controlledOnVisibleChange, { visibleSeries: selectedSeries });
+    }, [controlledOnVisibleChange, setVisibleSeriesState]);
+    // Reset filter if series change.
+    useEffect(function () {
+        var newVisibleSeries = visibleSeries.filter(function (s) { return series.indexOf(s) !== -1; });
+        if (newVisibleSeries.length !== visibleSeries.length) {
+            setVisibleSeries(newVisibleSeries);
+        }
+    }, [series, visibleSeries, setVisibleSeries]);
+    return [visibleSeries, setVisibleSeries];
+}
+//# sourceMappingURL=use-filter-props.js.map

package/internal/template/area-chart/model/use-filter-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-filter-props.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-filter-props.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAA6B,MAAM,uBAAuB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAKxE,oEAAoE;AACpE,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,MAA2C,EAC3C,uBAA6D,EAC7D,yBAA2F;IAErF,IAAA,KAA8C,eAAe,CACjE,uBAAuB,EACvB,yBAAyB,EACzB,MAAM,EACN;QACE,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,eAAe;QAC/B,aAAa,EAAE,gBAAgB;KAChC,CACF,EATM,UAAkB,EAAlB,aAAa,mBAAG,EAAE,KAAA,EAAE,qBAAqB,QAS/C,CAAC;IAEF,IAAM,gBAAgB,GAAG,WAAW,CAClC,UAAC,cAAmD;QAClD,qBAAqB,CAAC,cAAc,CAAC,CAAC;QACtC,sBAAsB,CAAC,yBAAyB,EAAE,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC,CAAC;IACvF,CAAC,EACD,CAAC,yBAAyB,EAAE,qBAAqB,CAAC,CACnD,CAAC;IAEF,iCAAiC;IACjC,SAAS,CAAC;QACR,IAAM,gBAAgB,GAAG,aAAa,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAxB,CAAwB,CAAC,CAAC;QAE7E,IAAI,gBAAgB,CAAC,MAAM,KAAK,aAAa,CAAC,MAAM,EAAE;YACpD,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;SACpC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAE9C,OAAO,CAAC,aAAa,EAAE,gBAAgB,CAAC,CAAC;AAC3C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect } from 'react';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { AreaChartProps } from '../interfaces';\n\ntype FilterProps<T> = [readonly AreaChartProps.Series<T>[], (series: readonly AreaChartProps.Series<T>[]) => void];\n\n// Provides controlled or uncontrolled props to filter chart series.\nexport default function useFilterProps<T>(\n  series: readonly AreaChartProps.Series<T>[],\n  controlledVisibleSeries?: readonly AreaChartProps.Series<T>[],\n  controlledOnVisibleChange?: NonCancelableEventHandler<AreaChartProps.FilterChangeDetail<T>>\n): FilterProps<T> {\n  const [visibleSeries = [], setVisibleSeriesState] = useControllable(\n    controlledVisibleSeries,\n    controlledOnVisibleChange,\n    series,\n    {\n      componentName: 'AreaChart',\n      controlledProp: 'visibleSeries',\n      changeHandler: 'onFilterChange',\n    }\n  );\n\n  const setVisibleSeries = useCallback(\n    (selectedSeries: readonly AreaChartProps.Series<T>[]) => {\n      setVisibleSeriesState(selectedSeries);\n      fireNonCancelableEvent(controlledOnVisibleChange, { visibleSeries: selectedSeries });\n    },\n    [controlledOnVisibleChange, setVisibleSeriesState]\n  );\n\n  // Reset filter if series change.\n  useEffect(() => {\n    const newVisibleSeries = visibleSeries.filter(s => series.indexOf(s) !== -1);\n\n    if (newVisibleSeries.length !== visibleSeries.length) {\n      setVisibleSeries(newVisibleSeries);\n    }\n  }, [series, visibleSeries, setVisibleSeries]);\n\n  return [visibleSeries, setVisibleSeries];\n}\n"]}

package/internal/template/area-chart/model/use-highlight-props.d.ts

@@ -0,0 +1,6 @@
+import { NonCancelableEventHandler } from '../../internal/events';
+import { AreaChartProps } from '../interfaces';
+declare type HighlightProps<T> = [null | AreaChartProps.Series<T>, (s: null | AreaChartProps.Series<T>) => void];
+export default function useHighlightProps<T>(series: readonly AreaChartProps.Series<T>[], controlledHighlightedSeries?: null | AreaChartProps.Series<T>, controlledOnHighlightChange?: NonCancelableEventHandler<AreaChartProps.HighlightChangeDetail<T>>): HighlightProps<T>;
+export {};
+//# sourceMappingURL=use-highlight-props.d.ts.map

package/internal/template/area-chart/model/use-highlight-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlight-props.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/use-highlight-props.ts"],"names":[],"mappings":"AAGA,OAAO,EAA0B,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAE1F,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,aAAK,cAAc,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC;AAGzG,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,CAAC,EACzC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAC3C,2BAA2B,CAAC,EAAE,IAAI,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAC7D,2BAA2B,CAAC,EAAE,yBAAyB,CAAC,cAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAC/F,cAAc,CAAC,CAAC,CAAC,CAgCnB"}

package/internal/template/area-chart/model/use-highlight-props.js

@@ -0,0 +1,28 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useCallback, useEffect } from 'react';
+import { fireNonCancelableEvent } from '../../internal/events';
+import { useControllable } from '../../internal/hooks/use-controllable';
+// Provides controlled or uncontrolled props to highlight chart elements.
+export default function useHighlightProps(series, controlledHighlightedSeries, controlledOnHighlightChange) {
+    var _a = useControllable(controlledHighlightedSeries, controlledOnHighlightChange, null, {
+        componentName: 'AreaChart',
+        controlledProp: 'highlightedSeries',
+        changeHandler: 'onHighlightChange'
+    }), _b = _a[0], highlightedSeries = _b === void 0 ? null : _b, setHighlightedSeries = _a[1];
+    var notifyHighlightedSeries = useCallback(function (s) {
+        fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSeries: s });
+    }, [controlledOnHighlightChange]);
+    // Reset highlights if series change.
+    useEffect(function () {
+        if (controlledHighlightedSeries) {
+            var highlightedSeriesIndex = series.indexOf(controlledHighlightedSeries);
+            if (highlightedSeriesIndex === -1) {
+                setHighlightedSeries(null);
+                notifyHighlightedSeries(null);
+            }
+        }
+    }, [series, controlledHighlightedSeries, setHighlightedSeries, notifyHighlightedSeries]);
+    return [highlightedSeries, notifyHighlightedSeries];
+}
+//# sourceMappingURL=use-highlight-props.js.map

package/internal/template/area-chart/model/use-highlight-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-highlight-props.js","sourceRoot":"","sources":["../../../../src/area-chart/model/use-highlight-props.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAA6B,MAAM,uBAAuB,CAAC;AAC1F,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAKxE,yEAAyE;AACzE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,MAA2C,EAC3C,2BAA6D,EAC7D,2BAAgG;IAE1F,IAAA,KAAmD,eAAe,CACtE,2BAA2B,EAC3B,2BAA2B,EAC3B,IAAI,EACJ;QACE,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,mBAAmB;QACnC,aAAa,EAAE,mBAAmB;KACnC,CACF,EATM,UAAwB,EAAxB,iBAAiB,mBAAG,IAAI,KAAA,EAAE,oBAAoB,QASpD,CAAC;IAEF,IAAM,uBAAuB,GAAG,WAAW,CACzC,UAAC,CAAkC;QACjC,sBAAsB,CAAC,2BAA2B,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAE,CAAC,CAAC;IAChF,CAAC,EACD,CAAC,2BAA2B,CAAC,CAC9B,CAAC;IAEF,qCAAqC;IACrC,SAAS,CAAC;QACR,IAAI,2BAA2B,EAAE;YAC/B,IAAM,sBAAsB,GAAG,MAAM,CAAC,OAAO,CAAC,2BAA2B,CAAC,CAAC;YAE3E,IAAI,sBAAsB,KAAK,CAAC,CAAC,EAAE;gBACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC;gBAC3B,uBAAuB,CAAC,IAAI,CAAC,CAAC;aAC/B;SACF;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,EAAE,oBAAoB,EAAE,uBAAuB,CAAC,CAAC,CAAC;IAEzF,OAAO,CAAC,iBAAiB,EAAE,uBAAuB,CAAC,CAAC;AACtD,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useCallback, useEffect } from 'react';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { AreaChartProps } from '../interfaces';\n\ntype HighlightProps<T> = [null | AreaChartProps.Series<T>, (s: null | AreaChartProps.Series<T>) => void];\n\n// Provides controlled or uncontrolled props to highlight chart elements.\nexport default function useHighlightProps<T>(\n  series: readonly AreaChartProps.Series<T>[],\n  controlledHighlightedSeries?: null | AreaChartProps.Series<T>,\n  controlledOnHighlightChange?: NonCancelableEventHandler<AreaChartProps.HighlightChangeDetail<T>>\n): HighlightProps<T> {\n  const [highlightedSeries = null, setHighlightedSeries] = useControllable(\n    controlledHighlightedSeries,\n    controlledOnHighlightChange,\n    null,\n    {\n      componentName: 'AreaChart',\n      controlledProp: 'highlightedSeries',\n      changeHandler: 'onHighlightChange',\n    }\n  );\n\n  const notifyHighlightedSeries = useCallback(\n    (s: null | AreaChartProps.Series<T>) => {\n      fireNonCancelableEvent(controlledOnHighlightChange, { highlightedSeries: s });\n    },\n    [controlledOnHighlightChange]\n  );\n\n  // Reset highlights if series change.\n  useEffect(() => {\n    if (controlledHighlightedSeries) {\n      const highlightedSeriesIndex = series.indexOf(controlledHighlightedSeries);\n\n      if (highlightedSeriesIndex === -1) {\n        setHighlightedSeries(null);\n        notifyHighlightedSeries(null);\n      }\n    }\n  }, [series, controlledHighlightedSeries, setHighlightedSeries, notifyHighlightedSeries]);\n\n  return [highlightedSeries, notifyHighlightedSeries];\n}\n"]}

package/internal/template/area-chart/model/utils.d.ts

@@ -0,0 +1,21 @@
+import { AreaChartProps } from '../interfaces';
+import { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';
+import { ChartDataTypes, XDomain, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';
+import { ChartModel } from './index';
+interface ThrottledFunction<F extends (...args: any) => any> {
+    (...args: Parameters<F>): void;
+    cancel(): void;
+}
+export declare function computeDomainX<T extends ChartDataTypes>(series: readonly AreaChartProps.Series<T>[]): XDomain<T>;
+export declare function computeDomainY<T>(series: readonly AreaChartProps.Series<T>[], scaleType: YScaleType): YDomain;
+export declare function computePlotPoints<T>(series: readonly AreaChartProps.Series<T>[], xScale: ChartScale, yScale: NumericChartScale): {
+    xy: ChartModel.PlotPoint<T>[][];
+    xs: ChartModel.PlotPoint<T>[][];
+    sx: ChartModel.PlotPoint<T>[][];
+};
+export declare function findClosest<T>(sortedArray: readonly T[], target: number, getter: (item: T) => number): T;
+export declare function circleIndex(index: number, [from, to]: [number, number]): number;
+export declare function throttle<F extends (...args: any) => any>(func: F, delay: number): ThrottledFunction<F>;
+export declare function isSeriesValid<T>(series: readonly AreaChartProps.Series<T>[]): boolean;
+export {};
+//# sourceMappingURL=utils.d.ts.map

package/internal/template/area-chart/model/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/area-chart/model/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,sDAAsD,CAAC;AACpH,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,UAAU,iBAAiB,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG;IACzD,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC/B,MAAM,IAAI,IAAI,CAAC;CAChB;AAQD,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,EAAE,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAG,OAAO,CAAC,CAAC,CAAC,CAkBhH;AAGD,wBAAgB,cAAc,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,SAAS,EAAE,UAAU,GAAG,OAAO,CAqC7G;AAID,wBAAgB,iBAAiB,CAAC,CAAC,EACjC,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAC3C,MAAM,EAAE,UAAU,EAClB,MAAM,EAAE,iBAAiB,GACxB;IACD,EAAE,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAChC,EAAE,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAChC,EAAE,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;CACjC,CA6DA;AAGD,wBAAgB,WAAW,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,GAAG,CAAC,CAsBxG;AAGD,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,CAQ/E;AAGD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,KAAK,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAkDtG;AAGD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,SAAS,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,WAc3E"}

package/internal/template/area-chart/model/utils.js

@@ -0,0 +1,264 @@
+// A sufficiently small value.
+// The Number.EPSILON is not available in the target ECMA version.
+// See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILON
+var EPSILON = 0.0000000000001;
+// When x-domain is not set explicitly - guess it based on the available data.
+export function computeDomainX(series) {
+    var xValues = getXValues(series);
+    if (xValues.length === 0) {
+        return [];
+    }
+    // Assuming categorical domain.
+    // In that case, all values are to be included.
+    if (typeof xValues[0] === 'string') {
+        return uniq(xValues);
+    }
+    // For non-categorical domain find min and max bounds.
+    return xValues.reduce(function (_a, x) {
+        var min = _a[0], max = _a[1];
+        return [x < min ? x : min, max < x ? x : max];
+    }, [xValues[0], xValues[0]]);
+}
+// When y-domain is not set explicitly - guess it based on the available data and series.
+export function computeDomainY(series, scaleType) {
+    var min = Number.POSITIVE_INFINITY;
+    var max = Number.NEGATIVE_INFINITY;
+    // Find the min and max for threshold series.
+    series.forEach(function (s) {
+        if (s.type === 'threshold') {
+            min = Math.min(min, s.y);
+            max = Math.max(max, s.y);
+        }
+    });
+    // Find the min and max for area series considering their stacking.
+    getXValues(series).forEach(function (_, xIndex) {
+        var _a;
+        // Maintains the prev stack level.
+        var stackY = scaleType === 'linear' ? 0 : EPSILON;
+        for (var _i = 0, series_1 = series; _i < series_1.length; _i++) {
+            var s = series_1[_i];
+            if (s.type === 'area') {
+                stackY = stackY + (((_a = s.data[xIndex]) === null || _a === void 0 ? void 0 : _a.y) || 0);
+                min = Math.min(min, stackY);
+                max = Math.max(max, stackY);
+            }
+        }
+    });
+    // If min/max is not overridden than either series or series data is empty.
+    if (min === Number.POSITIVE_INFINITY) {
+        return [];
+    }
+    // Log scales can't start from 0, so, if possible, start from 1.
+    if (scaleType === 'log' && min === 0 && max > 1) {
+        return [1, max];
+    }
+    return [min, max];
+}
+// For given data, series and scales, compute all points and group them as
+// x:y, x:series and series:x to allow constant time access to the required point or subset.
+export function computePlotPoints(series, xScale, yScale) {
+    var xValues = getXValues(series);
+    // Lookup for xy[xIndex][yIndex]
+    var xy = [];
+    // Lookup for xs[xIndex][seriesIndex]
+    var xs = [];
+    // Lookup for sx[seriesIndex][xIndex]
+    var sx = [];
+    // Filter out the data which is beyond the plot for whatever reason.
+    getVisibleData(xValues, xScale).forEach(function (_a, xIndex) {
+        var x = _a.x, scaledX = _a.scaledX;
+        // Maintains the prev stack level. Starting from epsilon to not break log scales.
+        var stackY = yScale.scaleType === 'linear' ? 0 : EPSILON;
+        // A column of series points related to the same x.
+        var points = [];
+        // Collect the points, leaving y-index as 0 for now.
+        series.forEach(function (s, sIndex) {
+            var _a;
+            if (s.type === 'threshold') {
+                var scaledY = yScale.d3Scale(s.y) || 0;
+                points.push({
+                    x: x,
+                    y0: s.y,
+                    y1: s.y,
+                    scaled: { x: scaledX, y0: scaledY, y1: scaledY },
+                    index: { x: xIndex, s: sIndex, y: 0 },
+                    value: 0
+                });
+            }
+            else {
+                var value = ((_a = s.data[xIndex]) === null || _a === void 0 ? void 0 : _a.y) || 0;
+                var y0 = stackY;
+                var y1 = stackY + value;
+                points.push({
+                    x: x,
+                    y0: y0,
+                    y1: y1,
+                    scaled: { x: scaledX, y0: yScale.d3Scale(y0) || 0, y1: yScale.d3Scale(y1) || 0 },
+                    index: { x: xIndex, s: sIndex, y: 0 },
+                    value: value
+                });
+                stackY = y1;
+            }
+        });
+        // Sort points by y and insert the missing y-index.
+        points
+            .sort(function (p1, p2) { return p1.y1 - p2.y1; })
+            .forEach(function (point, index) {
+            point.index.y = index;
+            // Insert the points to the respective two-dimensional lookup arrays.
+            insertIntoMatrix(xy, point.index.x, point.index.y, point);
+            insertIntoMatrix(xs, point.index.x, point.index.s, point);
+            insertIntoMatrix(sx, point.index.s, point.index.x, point);
+        });
+    });
+    return { xy: xy, xs: xs, sx: sx };
+}
+// Finds the closest point in the sorted array.
+export function findClosest(sortedArray, target, getter) {
+    // The method guarantees to return a point hence empty arrays are not allowed.
+    if (sortedArray.length === 0) {
+        throw new Error('Invariant violation: array is empty.');
+    }
+    var isAscending = getter(sortedArray[0]) < getter(sortedArray[sortedArray.length - 1]);
+    var compare = function (x) { return (isAscending ? getter(x) < target : getter(x) > target); };
+    var delta = function (x) { return Math.abs(getter(x) - target); };
+    // Use binary search to find the closest value in a sorted array.
+    var lo = 0;
+    var hi = sortedArray.length - 1;
+    while (hi - lo > 1) {
+        var mid = Math.floor((lo + hi) / 2);
+        if (compare(sortedArray[mid])) {
+            lo = mid;
+        }
+        else {
+            hi = mid;
+        }
+    }
+    return delta(sortedArray[lo]) < delta(sortedArray[hi]) ? sortedArray[lo] : sortedArray[hi];
+}
+// Returns given index if it is in range or the opposite range boundary otherwise.
+export function circleIndex(index, _a) {
+    var from = _a[0], to = _a[1];
+    if (index < from) {
+        return to;
+    }
+    if (index > to) {
+        return from;
+    }
+    return index;
+}
+// Delays function execution
+export function throttle(func, delay) {
+    var pending = null;
+    var lastInvokeTime = null;
+    var timerId = null;
+    // Runs on every animation frame until timer stopped.
+    function pendingFunc() {
+        if (pending && lastInvokeTime !== null) {
+            var time = Date.now();
+            var shouldInvoke = time - lastInvokeTime >= delay;
+            if (shouldInvoke) {
+                func.apply(pending["this"], pending.args);
+                lastInvokeTime = time;
+                pending = null;
+            }
+            else {
+                startTimer();
+            }
+        }
+    }
+    function startTimer() {
+        if (timerId) {
+            cancelAnimationFrame(timerId);
+        }
+        timerId = requestAnimationFrame(pendingFunc);
+    }
+    // Decorated client function with delay mechanism.
+    function throttled() {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        if (lastInvokeTime === null) {
+            func.apply(this, args);
+            lastInvokeTime = Date.now();
+        }
+        else {
+            pending = { "this": this, args: args };
+            startTimer();
+        }
+    }
+    // Prevents delayed function from execution when no longer needed.
+    throttled.cancel = function () {
+        if (timerId) {
+            cancelAnimationFrame(timerId);
+        }
+        pending = null;
+        lastInvokeTime = null;
+        timerId = null;
+    };
+    return throttled;
+}
+// Compares all x-values between series to ensure they are consistent.
+export function isSeriesValid(series) {
+    var _a;
+    var sampleXValues = getXValues(series);
+    for (var _i = 0, series_2 = series; _i < series_2.length; _i++) {
+        var s = series_2[_i];
+        if (s.type === 'area') {
+            for (var i = 0; i < Math.max(s.data.length, sampleXValues.length); i++) {
+                if (((_a = s.data[i]) === null || _a === void 0 ? void 0 : _a.x) !== sampleXValues[i]) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+// Takes first area series x-values as all data x-values are to match across series.
+function getXValues(series) {
+    for (var _i = 0, series_3 = series; _i < series_3.length; _i++) {
+        var s = series_3[_i];
+        if (s.type === 'area') {
+            return s.data.map(function (_a) {
+                var x = _a.x;
+                return x;
+            });
+        }
+    }
+    return [];
+}
+// Returns data that is visible in the given scale.
+function getVisibleData(data, xScale) {
+    var scaledOffsetX = xScale.isCategorical() ? Math.max(0, xScale.d3Scale.bandwidth() - 1) / 2 : 0;
+    var visibleData = [];
+    for (var _i = 0, data_1 = data; _i < data_1.length; _i++) {
+        var x = data_1[_i];
+        var scaledX = xScale.d3Scale(x);
+        if (scaledX !== undefined) {
+            visibleData.push({ x: x, scaledX: scaledX + scaledOffsetX });
+        }
+    }
+    return visibleData;
+}
+// Inserts given value into a two-dimensional array.
+function insertIntoMatrix(matrix, row, col, value) {
+    if (!matrix[row]) {
+        matrix[row] = [];
+    }
+    matrix[row][col] = value;
+}
+// Creates new array with only unique elements of the given array.
+function uniq(arr) {
+    var set = new Set();
+    var uniqArray = [];
+    for (var _i = 0, arr_1 = arr; _i < arr_1.length; _i++) {
+        var value = arr_1[_i];
+        if (!set.has(value)) {
+            set.add(value);
+            uniqArray.push(value);
+        }
+    }
+    return uniqArray;
+}
+//# sourceMappingURL=utils.js.map