@cloudscape-design/components 3.0.221 → 3.0.222

package/area-chart/model/compute-chart-props.js.map

@@ -1 +1 @@
-{"version":3,"file":"compute-chart-props.js","sourceRoot":"","sources":["../../../../src/area-chart/model/compute-chart-props.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG5E,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,aAAa,GACd,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAEjG,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAqC,EAgB7E;QAfC,MAAM,YAAA,EACG,eAAe,aAAA,EACf,eAAe,aAAA,EACxB,UAAU,gBAAA,EACV,UAAU,gBAAA,EACV,MAAM,YAAA,EACN,KAAK,WAAA;IAUL,IAAM,OAAO,GAAG,eAAe,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;IAC1D,IAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,IAAM,MAAM,GAAG,IAAI,UAAU,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IAC/D,IAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEhF,IAAM,OAAO,GAAG,eAAe,IAAI,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACtE,IAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,IAAM,MAAM,GAAG,IAAI,iBAAiB,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAC5G,IAAM,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAEhD,IAAM,IAAI,GAAG,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAEvD,OAAO,EAAE,OAAO,SAAA,EAAE,OAAO,SAAA,EAAE,MAAM,QAAA,EAAE,MAAM,QAAA,EAAE,MAAM,QAAA,EAAE,MAAM,QAAA,EAAE,IAAI,MAAA,EAAE,CAAC;AACpE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AreaChartProps } from '../interfaces';\nimport { computePlotPoints, computeDomainX, computeDomainY } from './utils';\n\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport {\n  createXTicks,\n  createYTicks,\n  getXTickCount,\n  getYTickCount,\n} from '../../internal/components/cartesian-chart/ticks';\nimport { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';\n\nexport default function computeChartProps<T extends AreaChartProps.DataTypes>({\n  series,\n  xDomain: externalXDomain,\n  yDomain: externalYDomain,\n  xScaleType,\n  yScaleType,\n  height,\n  width,\n}: {\n  series: readonly AreaChartProps.Series<T>[];\n  xDomain?: XDomain<T>;\n  yDomain?: YDomain;\n  xScaleType: XScaleType;\n  yScaleType: YScaleType;\n  height: number;\n  width: number;\n}) {\n  const xDomain = externalXDomain || computeDomainX(series);\n  const xTickCount = getXTickCount(width);\n  const xScale = new ChartScale(xScaleType, xDomain, [0, width]);\n  const xTicks = xScale.domain.length > 0 ? createXTicks(xScale, xTickCount) : [];\n\n  const yDomain = externalYDomain || computeDomainY(series, yScaleType);\n  const yTickCount = getYTickCount(height);\n  const yScale = new NumericChartScale(yScaleType, yDomain, [height, 0], externalYDomain ? null : yTickCount);\n  const yTicks = createYTicks(yScale, yTickCount);\n\n  const plot = computePlotPoints(series, xScale, yScale);\n\n  return { xDomain, yDomain, xScale, yScale, xTicks, yTicks, plot };\n}\n"]}
+{"version":3,"file":"compute-chart-props.js","sourceRoot":"","sources":["../../../../src/area-chart/model/compute-chart-props.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG5E,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,aAAa,GACd,MAAM,iDAAiD,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAEjG,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAqC,EAC5E,MAAM,EACN,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,eAAe,EACxB,UAAU,EACV,UAAU,EACV,MAAM,EACN,KAAK,GASN;IACC,MAAM,OAAO,GAAG,eAAe,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,MAAM,GAAG,IAAI,UAAU,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;IAC/D,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEhF,MAAM,OAAO,GAAG,eAAe,IAAI,cAAc,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACtE,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;IACzC,MAAM,MAAM,GAAG,IAAI,iBAAiB,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IAC5G,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAEhD,MAAM,IAAI,GAAG,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAEvD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;AACpE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { AreaChartProps } from '../interfaces';\nimport { computePlotPoints, computeDomainX, computeDomainY } from './utils';\n\nimport { XDomain, XScaleType, YDomain, YScaleType } from '../../internal/components/cartesian-chart/interfaces';\nimport {\n  createXTicks,\n  createYTicks,\n  getXTickCount,\n  getYTickCount,\n} from '../../internal/components/cartesian-chart/ticks';\nimport { ChartScale, NumericChartScale } from '../../internal/components/cartesian-chart/scales';\n\nexport default function computeChartProps<T extends AreaChartProps.DataTypes>({\n  series,\n  xDomain: externalXDomain,\n  yDomain: externalYDomain,\n  xScaleType,\n  yScaleType,\n  height,\n  width,\n}: {\n  series: readonly AreaChartProps.Series<T>[];\n  xDomain?: XDomain<T>;\n  yDomain?: YDomain;\n  xScaleType: XScaleType;\n  yScaleType: YScaleType;\n  height: number;\n  width: number;\n}) {\n  const xDomain = externalXDomain || computeDomainX(series);\n  const xTickCount = getXTickCount(width);\n  const xScale = new ChartScale(xScaleType, xDomain, [0, width]);\n  const xTicks = xScale.domain.length > 0 ? createXTicks(xScale, xTickCount) : [];\n\n  const yDomain = externalYDomain || computeDomainY(series, yScaleType);\n  const yTickCount = getYTickCount(height);\n  const yScale = new NumericChartScale(yScaleType, yDomain, [height, 0], externalYDomain ? null : yTickCount);\n  const yTicks = createYTicks(yScale, yTickCount);\n\n  const plot = computePlotPoints(series, xScale, yScale);\n\n  return { xDomain, yDomain, xScale, yScale, xTicks, yTicks, plot };\n}\n"]}

package/area-chart/model/create-series-decorator.js

@@ -2,26 +2,24 @@
 // SPDX-License-Identifier: Apache-2.0
 import createCategoryColorScale from '../../internal/utils/create-category-color-scale';
 export default function createSeriesDecorator(externalSeries) {
-    var colorScale = createCategoryColorScale(externalSeries, function (s) { return s.type === 'threshold'; }, function (s) { return s.color || null; });
-    var decorateSeries = function (s, index) {
-        var title = s.title;
-        var color = colorScale[index];
-        var markerType = s.type === 'area' ? 'hollow-rectangle' : 'dashed';
-        var formatValue = s.type === 'threshold'
-            ? function () { return (s.valueFormatter ? s.valueFormatter(s.y) : s.y); }
-            : function (y, x) { return (s.valueFormatter ? s.valueFormatter(y, x) : y); };
-        return { series: s, title: title, color: color, markerType: markerType, formatValue: formatValue };
+    const colorScale = createCategoryColorScale(externalSeries, s => s.type === 'threshold', s => s.color || null);
+    const decorateSeries = (s, index) => {
+        const title = s.title;
+        const color = colorScale[index];
+        const markerType = s.type === 'area' ? 'hollow-rectangle' : 'dashed';
+        const formatValue = s.type === 'threshold'
+            ? () => (s.valueFormatter ? s.valueFormatter(s.y) : s.y)
+            : (y, x) => (s.valueFormatter ? s.valueFormatter(y, x) : y);
+        return { series: s, title, color, markerType, formatValue };
     };
     // Map external series to internal ones.
-    var mapping = externalSeries.reduce(function (map, series, index) {
+    const mapping = externalSeries.reduce((map, series, index) => {
         map.set(series, decorateSeries(series, index));
         return map;
     }, new Map());
     // It is inconvenient to use internal series everywhere, that's
     // why we also provide a decorator function to get the internal series on demand.
-    var seriesDecorator = function (series) {
-        return mapping.get(series) || decorateSeries(series, externalSeries.length);
-    };
+    const seriesDecorator = (series) => mapping.get(series) || decorateSeries(series, externalSeries.length);
     return seriesDecorator;
 }
 //# sourceMappingURL=create-series-decorator.js.map

package/area-chart/model/create-series-decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-series-decorator.js","sourceRoot":"","sources":["../../../../src/area-chart/model/create-series-decorator.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,wBAAwB,MAAM,kDAAkD,CAAC;AAIxF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAC3C,cAAmD;IAEnD,IAAM,UAAU,GAAG,wBAAwB,CACzC,cAAc,EACd,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,IAAI,KAAK,WAAW,EAAtB,CAAsB,EAC3B,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,KAAK,IAAI,IAAI,EAAf,CAAe,CACrB,CAAC;IAEF,IAAM,cAAc,GAAG,UAAC,CAA2B,EAAE,KAAa;QAChE,IAAM,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QACtB,IAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAChC,IAAM,UAAU,GAAG,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC;QACrE,IAAM,WAAW,GACf,CAAC,CAAC,IAAI,KAAK,WAAW;YACpB,CAAC,CAAC,cAAM,OAAA,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAhD,CAAgD;YACxD,CAAC,CAAC,UAAC,CAAS,EAAE,CAAI,IAAK,OAAA,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAA/C,CAA+C,CAAC;QAE3E,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,OAAA,EAAE,KAAK,OAAA,EAAE,UAAU,YAAA,EAAE,WAAW,aAAA,EAAE,CAAC;IAC9D,CAAC,CAAC;IAEF,wCAAwC;IACxC,IAAM,OAAO,GAAG,cAAc,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,MAAM,EAAE,KAAK;QACvD,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAC/C,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,IAAI,GAAG,EAA0D,CAAC,CAAC;IAEtE,+DAA+D;IAC/D,iFAAiF;IACjF,IAAM,eAAe,GAAG,UAAC,MAAgC;QACvD,OAAA,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC;IAApE,CAAoE,CAAC;IAEvE,OAAO,eAAe,CAAC;AACzB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport createCategoryColorScale from '../../internal/utils/create-category-color-scale';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from './index';\n\nexport default function createSeriesDecorator<T extends AreaChartProps.DataTypes>(\n  externalSeries: readonly AreaChartProps.Series<T>[]\n) {\n  const colorScale = createCategoryColorScale(\n    externalSeries,\n    s => s.type === 'threshold',\n    s => s.color || null\n  );\n\n  const decorateSeries = (s: AreaChartProps.Series<T>, index: number): ChartModel.InternalSeries<T> => {\n    const title = s.title;\n    const color = colorScale[index];\n    const markerType = s.type === 'area' ? 'hollow-rectangle' : 'dashed';\n    const formatValue =\n      s.type === 'threshold'\n        ? () => (s.valueFormatter ? s.valueFormatter(s.y) : s.y)\n        : (y: number, x: T) => (s.valueFormatter ? s.valueFormatter(y, x) : y);\n\n    return { series: s, title, color, markerType, formatValue };\n  };\n\n  // Map external series to internal ones.\n  const mapping = externalSeries.reduce((map, series, index) => {\n    map.set(series, decorateSeries(series, index));\n    return map;\n  }, new Map<AreaChartProps.Series<T>, ChartModel.InternalSeries<T>>());\n\n  // It is inconvenient to use internal series everywhere, that's\n  // why we also provide a decorator function to get the internal series on demand.\n  const seriesDecorator = (series: AreaChartProps.Series<T>): ChartModel.InternalSeries<T> =>\n    mapping.get(series) || decorateSeries(series, externalSeries.length);\n\n  return seriesDecorator;\n}\n"]}
+{"version":3,"file":"create-series-decorator.js","sourceRoot":"","sources":["../../../../src/area-chart/model/create-series-decorator.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,wBAAwB,MAAM,kDAAkD,CAAC;AAIxF,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAC3C,cAAmD;IAEnD,MAAM,UAAU,GAAG,wBAAwB,CACzC,cAAc,EACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,WAAW,EAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,IAAI,IAAI,CACrB,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,CAA2B,EAAE,KAAa,EAAgC,EAAE;QAClG,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC;QACtB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC;QAChC,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,CAAC;QACrE,MAAM,WAAW,GACf,CAAC,CAAC,IAAI,KAAK,WAAW;YACpB,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC,CAAS,EAAE,CAAI,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAE3E,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;IAC9D,CAAC,CAAC;IAEF,wCAAwC;IACxC,MAAM,OAAO,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE;QAC3D,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;QAC/C,OAAO,GAAG,CAAC;IACb,CAAC,EAAE,IAAI,GAAG,EAA0D,CAAC,CAAC;IAEtE,+DAA+D;IAC/D,iFAAiF;IACjF,MAAM,eAAe,GAAG,CAAC,MAAgC,EAAgC,EAAE,CACzF,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,MAAM,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IAEvE,OAAO,eAAe,CAAC;AACzB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport createCategoryColorScale from '../../internal/utils/create-category-color-scale';\nimport { AreaChartProps } from '../interfaces';\nimport { ChartModel } from './index';\n\nexport default function createSeriesDecorator<T extends AreaChartProps.DataTypes>(\n  externalSeries: readonly AreaChartProps.Series<T>[]\n) {\n  const colorScale = createCategoryColorScale(\n    externalSeries,\n    s => s.type === 'threshold',\n    s => s.color || null\n  );\n\n  const decorateSeries = (s: AreaChartProps.Series<T>, index: number): ChartModel.InternalSeries<T> => {\n    const title = s.title;\n    const color = colorScale[index];\n    const markerType = s.type === 'area' ? 'hollow-rectangle' : 'dashed';\n    const formatValue =\n      s.type === 'threshold'\n        ? () => (s.valueFormatter ? s.valueFormatter(s.y) : s.y)\n        : (y: number, x: T) => (s.valueFormatter ? s.valueFormatter(y, x) : y);\n\n    return { series: s, title, color, markerType, formatValue };\n  };\n\n  // Map external series to internal ones.\n  const mapping = externalSeries.reduce((map, series, index) => {\n    map.set(series, decorateSeries(series, index));\n    return map;\n  }, new Map<AreaChartProps.Series<T>, ChartModel.InternalSeries<T>>());\n\n  // It is inconvenient to use internal series everywhere, that's\n  // why we also provide a decorator function to get the internal series on demand.\n  const seriesDecorator = (series: AreaChartProps.Series<T>): ChartModel.InternalSeries<T> =>\n    mapping.get(series) || decorateSeries(series, externalSeries.length);\n\n  return seriesDecorator;\n}\n"]}

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

@@ -1,63 +1,56 @@
-import { __assign, __extends } from "tslib";
 import AsyncStore from './async-store';
-var initialState = Object.freeze({
+const initialState = Object.freeze({
     highlightedX: null,
     highlightedPoint: null,
     highlightedSeries: null,
     legendSeries: null,
-    isPopoverPinned: false
+    isPopoverPinned: false,
 });
-var InteractionsStore = /** @class */ (function (_super) {
-    __extends(InteractionsStore, _super);
-    function InteractionsStore(series, plot) {
-        var _this = _super.call(this, initialState) || this;
-        _this.series = series;
-        _this.plot = plot;
-        return _this;
-    }
-    InteractionsStore.prototype.highlightPoint = function (point) {
-        var _this = this;
-        this.set(function (state) { return (__assign(__assign({}, state), { highlightedX: _this.plot.xy[point.index.x], highlightedPoint: point, highlightedSeries: _this.series[point.index.s], legendSeries: _this.series[point.index.s] })); });
-    };
-    InteractionsStore.prototype.highlightX = function (points) {
-        this.set(function (state) { return (__assign(__assign({}, state), { highlightedX: points, highlightedPoint: null, highlightedSeries: null, legendSeries: null })); });
-    };
-    InteractionsStore.prototype.highlightFirstPoint = function () {
-        var _this = this;
-        this.set(function (state) {
-            var series = state.legendSeries || state.highlightedSeries;
-            var firstSeriesPoint = series && _this._getFirstSeriesPoint(series);
-            var point = state.highlightedPoint || firstSeriesPoint || _this.plot.sx[0][0];
-            return __assign(__assign({}, state), { highlightedX: _this.plot.xy[point.index.x], highlightedPoint: point, highlightedSeries: _this.series[point.index.s], legendSeries: _this.series[point.index.s] });
+export default class InteractionsStore extends AsyncStore {
+    constructor(series, plot) {
+        super(initialState);
+        this.series = series;
+        this.plot = plot;
+    }
+    highlightPoint(point) {
+        this.set(state => (Object.assign(Object.assign({}, state), { highlightedX: this.plot.xy[point.index.x], highlightedPoint: point, highlightedSeries: this.series[point.index.s], legendSeries: this.series[point.index.s] })));
+    }
+    highlightX(points) {
+        this.set(state => (Object.assign(Object.assign({}, state), { highlightedX: points, highlightedPoint: null, highlightedSeries: null, legendSeries: null })));
+    }
+    highlightFirstPoint() {
+        this.set(state => {
+            const series = state.legendSeries || state.highlightedSeries;
+            const firstSeriesPoint = series && this._getFirstSeriesPoint(series);
+            const point = state.highlightedPoint || firstSeriesPoint || this.plot.sx[0][0];
+            return Object.assign(Object.assign({}, state), { highlightedX: this.plot.xy[point.index.x], highlightedPoint: point, highlightedSeries: this.series[point.index.s], legendSeries: this.series[point.index.s] });
         });
-    };
-    InteractionsStore.prototype.highlightSeries = function (s) {
-        this.set(function (state) { return (__assign(__assign({}, state), { highlightedSeries: s, legendSeries: s })); });
-    };
-    InteractionsStore.prototype.clearHighlight = function () {
-        this.set(function (state) { return (__assign(__assign({}, state), { highlightedX: null, highlightedPoint: null, highlightedSeries: null })); });
-    };
-    InteractionsStore.prototype.clearHighlightedLegend = function () {
-        this.set(function (state) { return (__assign(__assign({}, state), { legendSeries: null })); });
-    };
-    InteractionsStore.prototype.clearState = function () {
-        this.set(function () { return initialState; });
-    };
-    InteractionsStore.prototype.pinPopover = function () {
-        this.set(function (state) { return (__assign(__assign({}, state), { isPopoverPinned: true })); });
-    };
-    InteractionsStore.prototype.unpinPopover = function () {
-        this.set(function (state) { return (__assign(__assign({}, state), { isPopoverPinned: false })); });
-    };
-    InteractionsStore.prototype.togglePopoverPin = function () {
-        this.set(function (state) { return (__assign(__assign({}, state), { isPopoverPinned: !state.isPopoverPinned })); });
-    };
-    InteractionsStore.prototype._getFirstSeriesPoint = function (s) {
-        var seriesIndex = this.series.indexOf(s);
-        var firstSeriesPoint = (this.plot.sx[seriesIndex] || [])[0];
+    }
+    highlightSeries(s) {
+        this.set(state => (Object.assign(Object.assign({}, state), { highlightedSeries: s, legendSeries: s })));
+    }
+    clearHighlight() {
+        this.set(state => (Object.assign(Object.assign({}, state), { highlightedX: null, highlightedPoint: null, highlightedSeries: null })));
+    }
+    clearHighlightedLegend() {
+        this.set(state => (Object.assign(Object.assign({}, state), { legendSeries: null })));
+    }
+    clearState() {
+        this.set(() => initialState);
+    }
+    pinPopover() {
+        this.set(state => (Object.assign(Object.assign({}, state), { isPopoverPinned: true })));
+    }
+    unpinPopover() {
+        this.set(state => (Object.assign(Object.assign({}, state), { isPopoverPinned: false })));
+    }
+    togglePopoverPin() {
+        this.set(state => (Object.assign(Object.assign({}, state), { isPopoverPinned: !state.isPopoverPinned })));
+    }
+    _getFirstSeriesPoint(s) {
+        const seriesIndex = this.series.indexOf(s);
+        const [firstSeriesPoint] = this.plot.sx[seriesIndex] || [];
         return firstSeriesPoint || null;
-    };
-    return InteractionsStore;
-}(AsyncStore));
-export default InteractionsStore;
+    }
+}
 //# sourceMappingURL=interactions-store.js.map

package/area-chart/model/interactions-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"interactions-store.js","sourceRoot":"","sources":["../../../../src/area-chart/model/interactions-store.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 { ChartModel } from './index';\nimport { AreaChartProps } from '../interfaces';\n\nimport AsyncStore from './async-store';\n\nconst initialState = Object.freeze({\n  highlightedX: null,\n  highlightedPoint: null,\n  highlightedSeries: null,\n  legendSeries: null,\n  isPopoverPinned: false,\n});\n\nexport default class InteractionsStore<T extends AreaChartProps.DataTypes> extends AsyncStore<\n  ChartModel.InteractionsState<T>\n> {\n  series: readonly AreaChartProps.Series<T>[];\n  plot: ChartModel.ComputedProps<T>['plot'];\n\n  constructor(series: readonly AreaChartProps.Series<T>[], plot: ChartModel.ComputedProps<T>['plot']) {\n    super(initialState);\n\n    this.series = series;\n    this.plot = plot;\n  }\n\n  highlightPoint(point: ChartModel.PlotPoint<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedX: this.plot.xy[point.index.x],\n      highlightedPoint: point,\n      highlightedSeries: this.series[point.index.s],\n      legendSeries: this.series[point.index.s],\n    }));\n  }\n\n  highlightX(points: readonly ChartModel.PlotPoint<T>[]) {\n    this.set(state => ({\n      ...state,\n      highlightedX: points,\n      highlightedPoint: null,\n      highlightedSeries: null,\n      legendSeries: null,\n    }));\n  }\n\n  highlightFirstPoint() {\n    this.set(state => {\n      const series = state.legendSeries || state.highlightedSeries;\n      const firstSeriesPoint = series && this._getFirstSeriesPoint(series);\n      const point = state.highlightedPoint || firstSeriesPoint || this.plot.sx[0][0];\n      return {\n        ...state,\n        highlightedX: this.plot.xy[point.index.x],\n        highlightedPoint: point,\n        highlightedSeries: this.series[point.index.s],\n        legendSeries: this.series[point.index.s],\n      };\n    });\n  }\n\n  highlightSeries(s: null | AreaChartProps.Series<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedSeries: s,\n      legendSeries: s,\n    }));\n  }\n\n  clearHighlight() {\n    this.set(state => ({\n      ...state,\n      highlightedX: null,\n      highlightedPoint: null,\n      highlightedSeries: null,\n    }));\n  }\n  clearHighlightedLegend() {\n    this.set(state => ({\n      ...state,\n      legendSeries: null,\n    }));\n  }\n\n  clearState() {\n    this.set(() => initialState);\n  }\n\n  pinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: true }));\n  }\n\n  unpinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: false }));\n  }\n\n  togglePopoverPin() {\n    this.set(state => ({ ...state, isPopoverPinned: !state.isPopoverPinned }));\n  }\n\n  _getFirstSeriesPoint(s: AreaChartProps.Series<T>): null | ChartModel.PlotPoint<T> {\n    const seriesIndex = this.series.indexOf(s);\n    const [firstSeriesPoint] = this.plot.sx[seriesIndex] || [];\n    return firstSeriesPoint || null;\n  }\n}\n"]}
+{"version":3,"file":"interactions-store.js","sourceRoot":"","sources":["../../../../src/area-chart/model/interactions-store.ts"],"names":[],"mappings":"AAKA,OAAO,UAAU,MAAM,eAAe,CAAC;AAEvC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC;IACjC,YAAY,EAAE,IAAI;IAClB,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,IAAI;IACvB,YAAY,EAAE,IAAI;IAClB,eAAe,EAAE,KAAK;CACvB,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,iBAAsD,SAAQ,UAElF;IAIC,YAAY,MAA2C,EAAE,IAAyC;QAChG,KAAK,CAAC,YAAY,CAAC,CAAC;QAEpB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;IAED,cAAc,CAAC,KAA8B;QAC3C,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCACb,KAAK,KACR,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EACzC,gBAAgB,EAAE,KAAK,EACvB,iBAAiB,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAC7C,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IACxC,CAAC,CAAC;IACN,CAAC;IAED,UAAU,CAAC,MAA0C;QACnD,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCACb,KAAK,KACR,YAAY,EAAE,MAAM,EACpB,gBAAgB,EAAE,IAAI,EACtB,iBAAiB,EAAE,IAAI,EACvB,YAAY,EAAE,IAAI,IAClB,CAAC,CAAC;IACN,CAAC;IAED,mBAAmB;QACjB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;YACf,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,iBAAiB,CAAC;YAC7D,MAAM,gBAAgB,GAAG,MAAM,IAAI,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC;YACrE,MAAM,KAAK,GAAG,KAAK,CAAC,gBAAgB,IAAI,gBAAgB,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC/E,uCACK,KAAK,KACR,YAAY,EAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EACzC,gBAAgB,EAAE,KAAK,EACvB,iBAAiB,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,EAC7C,YAAY,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IACxC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;IAED,eAAe,CAAC,CAAkC;QAChD,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCACb,KAAK,KACR,iBAAiB,EAAE,CAAC,EACpB,YAAY,EAAE,CAAC,IACf,CAAC,CAAC;IACN,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCACb,KAAK,KACR,YAAY,EAAE,IAAI,EAClB,gBAAgB,EAAE,IAAI,EACtB,iBAAiB,EAAE,IAAI,IACvB,CAAC,CAAC;IACN,CAAC;IACD,sBAAsB;QACpB,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCACb,KAAK,KACR,YAAY,EAAE,IAAI,IAClB,CAAC,CAAC;IACN,CAAC;IAED,UAAU;QACR,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC;IAC/B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCAAM,KAAK,KAAE,eAAe,EAAE,IAAI,IAAG,CAAC,CAAC;IAC3D,CAAC;IAED,YAAY;QACV,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCAAM,KAAK,KAAE,eAAe,EAAE,KAAK,IAAG,CAAC,CAAC;IAC5D,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,iCAAM,KAAK,KAAE,eAAe,EAAE,CAAC,KAAK,CAAC,eAAe,IAAG,CAAC,CAAC;IAC7E,CAAC;IAED,oBAAoB,CAAC,CAA2B;QAC9C,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAC3C,MAAM,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC3D,OAAO,gBAAgB,IAAI,IAAI,CAAC;IAClC,CAAC;CACF","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { ChartModel } from './index';\nimport { AreaChartProps } from '../interfaces';\n\nimport AsyncStore from './async-store';\n\nconst initialState = Object.freeze({\n  highlightedX: null,\n  highlightedPoint: null,\n  highlightedSeries: null,\n  legendSeries: null,\n  isPopoverPinned: false,\n});\n\nexport default class InteractionsStore<T extends AreaChartProps.DataTypes> extends AsyncStore<\n  ChartModel.InteractionsState<T>\n> {\n  series: readonly AreaChartProps.Series<T>[];\n  plot: ChartModel.ComputedProps<T>['plot'];\n\n  constructor(series: readonly AreaChartProps.Series<T>[], plot: ChartModel.ComputedProps<T>['plot']) {\n    super(initialState);\n\n    this.series = series;\n    this.plot = plot;\n  }\n\n  highlightPoint(point: ChartModel.PlotPoint<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedX: this.plot.xy[point.index.x],\n      highlightedPoint: point,\n      highlightedSeries: this.series[point.index.s],\n      legendSeries: this.series[point.index.s],\n    }));\n  }\n\n  highlightX(points: readonly ChartModel.PlotPoint<T>[]) {\n    this.set(state => ({\n      ...state,\n      highlightedX: points,\n      highlightedPoint: null,\n      highlightedSeries: null,\n      legendSeries: null,\n    }));\n  }\n\n  highlightFirstPoint() {\n    this.set(state => {\n      const series = state.legendSeries || state.highlightedSeries;\n      const firstSeriesPoint = series && this._getFirstSeriesPoint(series);\n      const point = state.highlightedPoint || firstSeriesPoint || this.plot.sx[0][0];\n      return {\n        ...state,\n        highlightedX: this.plot.xy[point.index.x],\n        highlightedPoint: point,\n        highlightedSeries: this.series[point.index.s],\n        legendSeries: this.series[point.index.s],\n      };\n    });\n  }\n\n  highlightSeries(s: null | AreaChartProps.Series<T>) {\n    this.set(state => ({\n      ...state,\n      highlightedSeries: s,\n      legendSeries: s,\n    }));\n  }\n\n  clearHighlight() {\n    this.set(state => ({\n      ...state,\n      highlightedX: null,\n      highlightedPoint: null,\n      highlightedSeries: null,\n    }));\n  }\n  clearHighlightedLegend() {\n    this.set(state => ({\n      ...state,\n      legendSeries: null,\n    }));\n  }\n\n  clearState() {\n    this.set(() => initialState);\n  }\n\n  pinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: true }));\n  }\n\n  unpinPopover() {\n    this.set(state => ({ ...state, isPopoverPinned: false }));\n  }\n\n  togglePopoverPin() {\n    this.set(state => ({ ...state, isPopoverPinned: !state.isPopoverPinned }));\n  }\n\n  _getFirstSeriesPoint(s: AreaChartProps.Series<T>): null | ChartModel.PlotPoint<T> {\n    const seriesIndex = this.series.indexOf(s);\n    const [firstSeriesPoint] = this.plot.sx[seriesIndex] || [];\n    return firstSeriesPoint || null;\n  }\n}\n"]}

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

@@ -8,37 +8,36 @@ import createSeriesDecorator from './create-series-decorator';
 import InteractionsStore from './interactions-store';
 import { useStableEventHandler } from '../../internal/hooks/use-stable-event-handler';
 import { throttle } from '../../internal/utils/throttle';
-var MAX_HOVER_MARGIN = 6;
-var SVG_HOVER_THROTTLE = 25;
-var POPOVER_DEADZONE = 12;
+const MAX_HOVER_MARGIN = 6;
+const SVG_HOVER_THROTTLE = 25;
+const POPOVER_DEADZONE = 12;
 // 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, popoverRef = _a.popoverRef;
+export default function useChartModel({ externalSeries: allSeries, visibleSeries: series, setVisibleSeries, highlightedSeries, setHighlightedSeries, xDomain, yDomain, xScaleType, yScaleType, height, width, popoverRef, }) {
     // 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 () {
+    const plotRef = useRef(null);
+    const containerRef = useRef(null);
+    const verticalMarkerRef = useRef(null);
+    const stableSetVisibleSeries = useStableEventHandler(setVisibleSeries);
+    const model = useMemo(() => {
         // Compute scales, ticks and two-dimensional plots.
-        var computed = computeChartProps({
-            series: series,
-            xDomain: xDomain,
-            yDomain: yDomain,
-            xScaleType: xScaleType,
-            yScaleType: yScaleType,
-            height: height,
-            width: width
+        const computed = computeChartProps({
+            series,
+            xDomain,
+            yDomain,
+            xScaleType,
+            yScaleType,
+            height,
+            width,
         });
         // A store for chart interactions that don't require plot recomputation.
-        var interactions = new InteractionsStore(series, computed.plot);
-        var containsMultipleSeries = interactions.series.length > 1;
+        const interactions = new InteractionsStore(series, computed.plot);
+        const containsMultipleSeries = interactions.series.length > 1;
         // A series decorator to provide extra props such as color and marker type.
-        var getInternalSeries = createSeriesDecorator(allSeries);
-        var isMouseOverPopover = function (clientX, clientY) {
+        const getInternalSeries = createSeriesDecorator(allSeries);
+        const isMouseOverPopover = (clientX, clientY) => {
             var _a;
             if ((_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.firstChild) {
-                var popoverPosition = popoverRef.current.firstChild.getBoundingClientRect();
+                const popoverPosition = popoverRef.current.firstChild.getBoundingClientRect();
                 if (clientX > popoverPosition.x - POPOVER_DEADZONE &&
                     clientX < popoverPosition.x + popoverPosition.width + POPOVER_DEADZONE &&
                     clientY > popoverPosition.y - POPOVER_DEADZONE &&
@@ -50,7 +49,7 @@ export default function useChartModel(_a) {
         };
         // 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) {
+        const onSVGMouseMoveThrottled = throttle((clientX, clientY) => {
             // No hover logic when the popover is pinned or no data available.
             if (interactions.get().isPopoverPinned ||
                 !plotRef.current ||
@@ -58,11 +57,11 @@ export default function useChartModel(_a) {
                 isMouseOverPopover(clientX, clientY)) {
                 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; });
+            const svgRect = plotRef.current.svg.getBoundingClientRect();
+            const offsetX = clientX - svgRect.left;
+            const offsetY = clientY - svgRect.top;
+            const closestX = findClosest(interactions.plot.xy, offsetX, xPoints => xPoints[0].scaled.x);
+            const closestPoint = findClosest(closestX, offsetY, point => 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 &&
@@ -73,12 +72,9 @@ export default function useChartModel(_a) {
                 interactions.highlightX(closestX);
             }
         }, SVG_HOVER_THROTTLE);
-        var onSVGMouseMove = function (_a) {
-            var clientX = _a.clientX, clientY = _a.clientY;
-            return onSVGMouseMoveThrottled(clientX, clientY);
-        };
+        const onSVGMouseMove = ({ clientX, clientY }) => onSVGMouseMoveThrottled(clientX, clientY);
         // A callback for svg mouseout to clear all highlights.
-        var onSVGMouseOut = function (event) {
+        const onSVGMouseOut = (event) => {
             // Because the mouseover is throttled, in can occur slightly after the mouseout,
             // neglecting its effect; cancelling the throttled function prevents that.
             onSVGMouseMoveThrottled.cancel();
@@ -93,53 +89,53 @@ export default function useChartModel(_a) {
             }
         };
         // A callback for svg click to pin/unpin the popover.
-        var onSVGMouseDown = function (event) {
+        const onSVGMouseDown = (event) => {
             interactions.togglePopoverPin();
             event.preventDefault();
         };
-        var moveWithinXAxis = function (direction) {
+        const moveWithinXAxis = (direction) => {
             if (interactions.get().highlightedPoint) {
                 return moveWithinSeries(direction);
             }
             else if (containsMultipleSeries) {
-                var highlightedX = interactions.get().highlightedX;
+                const { highlightedX } = interactions.get();
                 if (highlightedX) {
-                    var currentXIndex = highlightedX[0].index.x;
-                    var nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);
+                    const currentXIndex = highlightedX[0].index.x;
+                    const nextXIndex = circleIndex(currentXIndex + direction, [0, interactions.plot.xy.length - 1]);
                     interactions.highlightX(interactions.plot.xy[nextXIndex]);
                 }
             }
         };
         // A helper function to highlight the next or previous point within selected series.
-        var moveWithinSeries = function (direction) {
+        const moveWithinSeries = (direction) => {
             // Can only use motion when a particular point is highlighted.
-            var point = interactions.get().highlightedPoint;
+            const point = interactions.get().highlightedPoint;
             if (!point) {
                 return;
             }
             // Take the index of the currently highlighted series.
-            var sIndex = point.index.s;
+            const 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]);
+            const 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 within the selected column.
-        var moveBetweenSeries = function (direction) {
-            var point = interactions.get().highlightedPoint;
+        const moveBetweenSeries = (direction) => {
+            const point = interactions.get().highlightedPoint;
             if (!point) {
-                var highlightedX = interactions.get().highlightedX;
+                const { highlightedX } = interactions.get();
                 if (highlightedX) {
-                    var xIndex_1 = highlightedX[0].index.x;
-                    var points = interactions.plot.xy[xIndex_1];
-                    var yIndex = direction === 1 ? 0 : points.length - 1;
+                    const xIndex = highlightedX[0].index.x;
+                    const points = interactions.plot.xy[xIndex];
+                    const yIndex = direction === 1 ? 0 : points.length - 1;
                     interactions.highlightPoint(points[yIndex]);
                 }
                 return;
             }
             // Take the index of the currently highlighted column.
-            var xIndex = point.index.x;
-            var currentYIndex = point.index.y;
+            const xIndex = point.index.x;
+            const currentYIndex = point.index.y;
             if (containsMultipleSeries &&
                 ((currentYIndex === 0 && direction === -1) ||
                     (currentYIndex === interactions.plot.xy[xIndex].length - 1 && direction === 1))) {
@@ -147,14 +143,14 @@ export default function useChartModel(_a) {
             }
             else {
                 // Take the incremented(circularly) y-index of the currently highlighted point.
-                var nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);
+                const nextYIndex = circleIndex(currentYIndex + direction, [0, interactions.plot.xy[xIndex].length - 1]);
                 // Highlight the next point using x:y grouped data.
                 interactions.highlightPoint(interactions.plot.xy[xIndex][nextYIndex]);
             }
         };
         // A callback for svg keydown to enable motions and popover pin with the keyboard.
-        var onSVGKeyDown = function (event) {
-            var keyCode = event.keyCode;
+        const onSVGKeyDown = (event) => {
+            const keyCode = event.keyCode;
             if (keyCode !== KeyCode.up &&
                 keyCode !== KeyCode.right &&
                 keyCode !== KeyCode.down &&
@@ -182,15 +178,15 @@ export default function useChartModel(_a) {
                 interactions.pinPopover();
             }
         };
-        var highlightFirstX = function () {
+        const highlightFirstX = () => {
             interactions.highlightX(interactions.plot.xy[0]);
         };
         // A callback for svg focus to highlight series.
-        var onSVGFocus = function (_event, trigger) {
+        const onSVGFocus = (_event, trigger) => {
             // When focus is caused by a click event nothing is expected as clicks are handled separately.
             if (trigger === 'keyboard') {
-                var _a = interactions.get(), highlightedX = _a.highlightedX, highlightedPoint = _a.highlightedPoint, highlightedSeries_1 = _a.highlightedSeries, legendSeries = _a.legendSeries;
-                if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries_1 && !legendSeries) {
+                const { highlightedX, highlightedPoint, highlightedSeries, legendSeries } = interactions.get();
+                if (containsMultipleSeries && !highlightedX && !highlightedPoint && !highlightedSeries && !legendSeries) {
                     highlightFirstX();
                 }
                 else if (!highlightedX) {
@@ -199,25 +195,25 @@ export default function useChartModel(_a) {
             }
         };
         // A callback for svg blur to clear all highlights unless the popover is pinned.
-        var onSVGBlur = function () {
+        const onSVGBlur = () => {
             // 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) {
+        const onFilterSeries = (series) => {
             stableSetVisibleSeries(series);
         };
-        var onLegendHighlight = function (series) {
+        const onLegendHighlight = (series) => {
             interactions.highlightSeries(series);
         };
-        var onPopoverDismiss = function (outsideClick) {
+        const onPopoverDismiss = (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 () {
+                setTimeout(() => {
                     if (interactions.get().highlightedPoint || interactions.get().highlightedX) {
                         plotRef.current.focusApplication();
                     }
@@ -228,16 +224,16 @@ export default function useChartModel(_a) {
                 }, 0);
             }
         };
-        var onContainerBlur = function () {
+        const onContainerBlur = () => {
             interactions.clearState();
         };
-        var onDocumentKeyDown = function (event) {
+        const onDocumentKeyDown = (event) => {
             if (event.key === 'Escape') {
                 interactions.clearHighlight();
                 interactions.clearHighlightedLegend();
             }
         };
-        var onPopoverLeave = function (event) {
+        const onPopoverLeave = (event) => {
             if (plotRef.current.svg.contains(event.relatedTarget) || interactions.get().isPopoverPinned) {
                 return;
             }
@@ -245,39 +241,39 @@ export default function useChartModel(_a) {
             interactions.clearHighlightedLegend();
         };
         return {
-            width: width,
-            height: height,
-            series: series,
-            allSeries: allSeries,
-            getInternalSeries: getInternalSeries,
-            computed: computed,
-            interactions: interactions,
+            width,
+            height,
+            series,
+            allSeries,
+            getInternalSeries,
+            computed,
+            interactions,
             handlers: {
-                onSVGMouseMove: onSVGMouseMove,
-                onSVGMouseOut: onSVGMouseOut,
-                onSVGMouseDown: onSVGMouseDown,
-                onSVGKeyDown: onSVGKeyDown,
-                onSVGFocus: onSVGFocus,
-                onSVGBlur: onSVGBlur,
-                onFilterSeries: onFilterSeries,
-                onLegendHighlight: onLegendHighlight,
-                onPopoverDismiss: onPopoverDismiss,
-                onContainerBlur: onContainerBlur,
-                onDocumentKeyDown: onDocumentKeyDown,
-                onPopoverLeave: onPopoverLeave
+                onSVGMouseMove,
+                onSVGMouseOut,
+                onSVGMouseDown,
+                onSVGKeyDown,
+                onSVGFocus,
+                onSVGBlur,
+                onFilterSeries,
+                onLegendHighlight,
+                onPopoverDismiss,
+                onContainerBlur,
+                onDocumentKeyDown,
+                onPopoverLeave,
             },
             refs: {
                 plot: plotRef,
                 container: containerRef,
                 verticalMarker: verticalMarkerRef,
-                popoverRef: popoverRef
-            }
+                popoverRef,
+            },
         };
     }, [allSeries, series, xDomain, yDomain, xScaleType, yScaleType, height, width, stableSetVisibleSeries, popoverRef]);
     // Notify client when series highlight change.
-    useReaction(model.interactions, function (state) { return state.highlightedSeries; }, setHighlightedSeries);
+    useReaction(model.interactions, state => state.highlightedSeries, setHighlightedSeries);
     // Update interactions store when series highlight in a controlled way.
-    useEffect(function () {
+    useEffect(() => {
         if (highlightedSeries !== model.interactions.get().highlightedSeries) {
             model.interactions.highlightSeries(highlightedSeries);
         }