@elastic/charts 57.0.1 → 58.1.0

package/dist/chart_types/heatmap/layout/viewmodel/viewmodel.js

@@ -1,111 +1,83 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isRasterTimeScale = exports.isValueInRanges = exports.shapeViewModel = exports.clampWithOffset = void 0;
-var d3_scale_1 = require("d3-scale");
-var color_library_wrappers_1 = require("../../../../common/color_library_wrappers");
-var fill_text_color_1 = require("../../../../common/fill_text_color");
-var panel_utils_1 = require("../../../../common/panel_utils");
-var text_utils_1 = require("../../../../common/text_utils");
-var constants_1 = require("../../../../scales/constants");
-var elasticsearch_1 = require("../../../../utils/chrono/elasticsearch");
-var common_1 = require("../../../../utils/common");
-var dimensions_1 = require("../../../../utils/dimensions");
-var logger_1 = require("../../../../utils/logger");
+const d3_scale_1 = require("d3-scale");
+const color_library_wrappers_1 = require("../../../../common/color_library_wrappers");
+const fill_text_color_1 = require("../../../../common/fill_text_color");
+const panel_utils_1 = require("../../../../common/panel_utils");
+const text_utils_1 = require("../../../../common/text_utils");
+const constants_1 = require("../../../../scales/constants");
+const elasticsearch_1 = require("../../../../utils/chrono/elasticsearch");
+const common_1 = require("../../../../utils/common");
+const dimensions_1 = require("../../../../utils/dimensions");
+const logger_1 = require("../../../../utils/logger");
 function getValuesInRange(values, startValue, endValue) {
-    var startIndex = values.indexOf(startValue);
-    var endIndex = Math.min(values.indexOf(endValue) + 1, values.length);
+    const startIndex = values.indexOf(startValue);
+    const endIndex = Math.min(values.indexOf(endValue) + 1, values.length);
     return values.slice(startIndex, endIndex);
 }
 function clampWithOffset(value, lowerBound, upperBound, offset) {
     return (0, common_1.clamp)(value, lowerBound + offset, upperBound + offset) - offset;
 }
 exports.clampWithOffset = clampWithOffset;
-function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, colorScale, smScales, groupBySpec, bandsToHide) {
-    var _c, _d;
-    var heatmapTheme = _a.heatmap, _e = _a.axes, axisTitle = _e.axisTitle, axisPanelTitle = _e.axisPanelTitle, background = _a.background;
-    var chartDimensions = _b.chartDimensions;
-    var table = heatmapTable.table, yValues = heatmapTable.yValues, xValues = heatmapTable.xValues;
-    var gridStrokeWidth = heatmapTheme.grid.stroke.width;
-    var isPointerOverPanel = (0, panel_utils_1.isPointerOverPanelFn)(smScales, chartDimensions, gridStrokeWidth);
-    var boxedYValues = yValues.map(function (value) { return (__assign({ text: spec.yAxisLabelFormatter(value), value: value, isValue: false }, heatmapTheme.yAxisLabel)); });
-    var panelSize = (0, panel_utils_1.getPanelSize)(smScales);
-    var yScale = (0, d3_scale_1.scaleBand)().domain(yValues).range([0, panelSize.height]);
-    var yInvertedScale = (0, d3_scale_1.scaleQuantize)().domain([0, panelSize.height]).range(yValues);
-    var xScale = (0, d3_scale_1.scaleBand)().domain(xValues).range([0, panelSize.width]);
-    var xInvertedScale = (0, d3_scale_1.scaleQuantize)().domain([0, panelSize.width]).range(xValues);
-    var cellWidth = heatmapTheme.cell.maxWidth !== 'fill' && xScale.bandwidth() > heatmapTheme.cell.maxWidth
+function shapeViewModel(textMeasure, spec, { heatmap: heatmapTheme, axes: { axisTitle, axisPanelTitle }, background }, { chartDimensions }, elementSizes, heatmapTable, colorScale, smScales, groupBySpec, bandsToHide) {
+    var _a, _b;
+    const { table, yValues, xValues } = heatmapTable;
+    const gridStrokeWidth = heatmapTheme.grid.stroke.width;
+    const isPointerOverPanel = (0, panel_utils_1.isPointerOverPanelFn)(smScales, chartDimensions, gridStrokeWidth);
+    const boxedYValues = yValues.map((value) => ({
+        text: spec.yAxisLabelFormatter(value),
+        value,
+        isValue: false,
+        ...heatmapTheme.yAxisLabel,
+    }));
+    const panelSize = (0, panel_utils_1.getPanelSize)(smScales);
+    const yScale = (0, d3_scale_1.scaleBand)().domain(yValues).range([0, panelSize.height]);
+    const yInvertedScale = (0, d3_scale_1.scaleQuantize)().domain([0, panelSize.height]).range(yValues);
+    const xScale = (0, d3_scale_1.scaleBand)().domain(xValues).range([0, panelSize.width]);
+    const xInvertedScale = (0, d3_scale_1.scaleQuantize)().domain([0, panelSize.width]).range(xValues);
+    const cellWidth = heatmapTheme.cell.maxWidth !== 'fill' && xScale.bandwidth() > heatmapTheme.cell.maxWidth
         ? heatmapTheme.cell.maxWidth
         : xScale.bandwidth();
-    var cellHeight = yScale.bandwidth();
-    var textXValues = getXTicks(spec, heatmapTheme.xAxisLabel, xScale, heatmapTable.xValues);
-    var padding = heatmapTheme.yAxisLabel.padding;
-    var textYValues = boxedYValues.map(function (d) {
-        return __assign(__assign({}, d), { x: -(0, dimensions_1.pad)(padding, 'right'), y: cellHeight / 2 + (yScale(d.value) || 0), align: 'right' });
+    const cellHeight = yScale.bandwidth();
+    const textXValues = getXTicks(spec, heatmapTheme.xAxisLabel, xScale, heatmapTable.xValues);
+    const { padding } = heatmapTheme.yAxisLabel;
+    const textYValues = boxedYValues.map((d) => {
+        return {
+            ...d,
+            x: -(0, dimensions_1.pad)(padding, 'right'),
+            y: cellHeight / 2 + (yScale(d.value) || 0),
+            align: 'right',
+        };
     });
-    var cellWidthInner = cellWidth - gridStrokeWidth;
-    var cellHeightInner = cellHeight - gridStrokeWidth;
+    const cellWidthInner = cellWidth - gridStrokeWidth;
+    const cellHeightInner = cellHeight - gridStrokeWidth;
     if ((0, color_library_wrappers_1.colorToRgba)(background.color)[3] < 1) {
         logger_1.Logger.expected('Text contrast requires a opaque background color, using fallbackColor', 'an opaque color', background.color);
     }
-    var tableMinFontSize = Infinity;
-    var panelCellMap = table.reduce(function (acc, d) {
+    let tableMinFontSize = Infinity;
+    const panelCellMap = table.reduce((acc, d) => {
         var _a;
-        var x = xScale(String(d.x));
-        var y = yScale(String(d.y));
-        var yIndex = yValues.indexOf(d.y);
+        const x = xScale(String(d.x));
+        const y = yScale(String(d.y));
+        const yIndex = yValues.indexOf(d.y);
         if (!(0, common_1.isFiniteNumber)(x) || !(0, common_1.isFiniteNumber)(y) || yIndex === -1) {
             return acc;
         }
-        var cellBackgroundColor = colorScale(d.value);
-        var panelKey = getPanelKey(d.smHorizontalAccessorValue, d.smVerticalAccessorValue);
-        var cellKey = getCellKey(d.x, d.y);
-        var formattedValue = spec.valueFormatter(d.value);
-        var fontSize = (0, text_utils_1.maximiseFontSize)(textMeasure, formattedValue, heatmapTheme.cell.label, heatmapTheme.cell.label.minFontSize, heatmapTheme.cell.label.maxFontSize, cellWidthInner - 6, cellHeightInner - 6);
+        const cellBackgroundColor = colorScale(d.value);
+        const panelKey = getPanelKey(d.smHorizontalAccessorValue, d.smVerticalAccessorValue);
+        const cellKey = getCellKey(d.x, d.y);
+        const formattedValue = spec.valueFormatter(d.value);
+        const fontSize = (0, text_utils_1.maximiseFontSize)(textMeasure, formattedValue, heatmapTheme.cell.label, heatmapTheme.cell.label.minFontSize, heatmapTheme.cell.label.maxFontSize, cellWidthInner - 6, cellHeightInner - 6);
         tableMinFontSize = Math.min(tableMinFontSize, fontSize);
-        var cellMap = (_a = acc.get(panelKey)) !== null && _a !== void 0 ? _a : new Map();
+        const cellMap = (_a = acc.get(panelKey)) !== null && _a !== void 0 ? _a : new Map();
         if (!acc.has(panelKey))
             acc.set(panelKey, cellMap);
         cellMap.set(cellKey, {
             x: (heatmapTheme.cell.maxWidth !== 'fill' ? x + xScale.bandwidth() / 2 - heatmapTheme.cell.maxWidth / 2 : x) +
                 gridStrokeWidth / 2,
             y: y + gridStrokeWidth / 2,
-            yIndex: yIndex,
+            yIndex,
             width: cellWidthInner,
             height: cellHeightInner,
             datum: d,
@@ -119,102 +91,102 @@ function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, c
             value: d.value,
             visible: !isValueInRanges(d.value, bandsToHide),
             formatted: formattedValue,
-            fontSize: fontSize,
+            fontSize,
             textColor: (0, fill_text_color_1.fillTextColor)(background.fallbackColor, cellBackgroundColor, background.color),
         });
         return acc;
     }, new Map());
-    var getScaledSMValue = function (value, scale) {
+    const getScaledSMValue = (value, scale) => {
         return (0, panel_utils_1.hasSMDomain)(smScales[scale]) ? smScales[scale].scale(value) : 0;
     };
-    var getPanelPointCoordinate = function (value, scale) {
+    const getPanelPointCoordinate = (value, scale) => {
         var _a;
-        var category = (_a = smScales[scale].invert(value)) !== null && _a !== void 0 ? _a : '';
-        var panelOffset = getScaledSMValue(category, scale);
-        var invertedScale = scale === 'horizontal' ? xInvertedScale : yInvertedScale;
+        const category = (_a = smScales[scale].invert(value)) !== null && _a !== void 0 ? _a : '';
+        const panelOffset = getScaledSMValue(category, scale);
+        const invertedScale = scale === 'horizontal' ? xInvertedScale : yInvertedScale;
         return {
-            category: category,
-            panelOffset: panelOffset,
+            category,
+            panelOffset,
             panelPixelValue: value - panelOffset,
             panelValue: invertedScale(value - panelOffset),
         };
     };
-    var getPanelPointCoordinates = function (x, y) {
-        var _a = getPanelPointCoordinate(y, 'vertical'), v = _a.category, panelY = _a.panelValue, panelOffsetY = _a.panelOffset;
-        var _b = getPanelPointCoordinate(x - chartDimensions.left, 'horizontal'), h = _b.category, panelX = _b.panelValue, panelOffsetX = _b.panelOffset;
+    const getPanelPointCoordinates = (x, y) => {
+        const { category: v, panelValue: panelY, panelOffset: panelOffsetY } = getPanelPointCoordinate(y, 'vertical');
+        const { category: h, panelValue: panelX, panelOffset: panelOffsetX, } = getPanelPointCoordinate(x - chartDimensions.left, 'horizontal');
         return {
             x: panelX,
             y: panelY,
-            v: v,
-            h: h,
-            panelOffsetY: panelOffsetY,
-            panelOffsetX: panelOffsetX,
+            v,
+            h,
+            panelOffsetY,
+            panelOffsetX,
         };
     };
-    var pickGridCell = function (x, y) {
+    const pickGridCell = (x, y) => {
         if (x < chartDimensions.left || y < chartDimensions.top)
             return undefined;
         if (x > chartDimensions.width + chartDimensions.left || y > chartDimensions.top + chartDimensions.height)
             return undefined;
-        var xValue = xInvertedScale(x - chartDimensions.left);
-        var yValue = yInvertedScale(y);
+        const xValue = xInvertedScale(x - chartDimensions.left);
+        const yValue = yInvertedScale(y);
         if (xValue === undefined || yValue === undefined)
             return undefined;
         return { x: xValue, y: yValue };
     };
-    var pickQuads = function (x, y) {
+    const pickQuads = (x, y) => {
         var _a;
         if (x > 0 &&
             x < chartDimensions.left &&
             y > chartDimensions.top &&
             y < chartDimensions.top + chartDimensions.height) {
-            var yLabelKey_1 = getPanelPointCoordinates(x - chartDimensions.left, y).y;
-            var yLabelValue = textYValues.find(function (v) { return v.value === yLabelKey_1; });
+            const { y: yLabelKey } = getPanelPointCoordinates(x - chartDimensions.left, y);
+            const yLabelValue = textYValues.find((v) => v.value === yLabelKey);
             if (yLabelValue) {
                 return yLabelValue;
             }
         }
-        if (!isPointerOverPanel({ x: x, y: y })) {
+        if (!isPointerOverPanel({ x, y })) {
             return [];
         }
-        var _b = getPanelPointCoordinates(x, y), panelXValue = _b.x, panelYValue = _b.y, h = _b.h, v = _b.v;
+        const { x: panelXValue, y: panelYValue, h, v } = getPanelPointCoordinates(x, y);
         if (panelXValue === undefined || panelYValue === undefined) {
             return [];
         }
-        var panelKey = getPanelKey(h, v);
-        var cellKey = getCellKey(panelXValue, panelYValue);
-        var cell = (_a = panelCellMap.get(panelKey)) === null || _a === void 0 ? void 0 : _a.get(cellKey);
+        const panelKey = getPanelKey(h, v);
+        const cellKey = getCellKey(panelXValue, panelYValue);
+        const cell = (_a = panelCellMap.get(panelKey)) === null || _a === void 0 ? void 0 : _a.get(cellKey);
         if (cell)
             return [cell];
         return [];
     };
-    var pickDragArea = function (bound) {
-        var _a = __read(bound, 2), start = _a[0], end = _a[1];
-        var left = chartDimensions.left, top = chartDimensions.top;
-        var topLeft = [Math.min(start.x, end.x) - left, Math.min(start.y, end.y) - top];
-        var bottomRight = [Math.max(start.x, end.x) - left, Math.max(start.y, end.y) - top];
-        var _b = getPanelPointCoordinate(start.x - chartDimensions.left, 'horizontal'), smHorizontalAccessorValue = _b.category, horizontalPanelOffset = _b.panelOffset;
-        var _c = getPanelPointCoordinate(start.y, 'vertical'), smVerticalAccessorValue = _c.category, verticalPanelOffset = _c.panelOffset;
-        var panelStartX = clampWithOffset(topLeft[0], 0, panelSize.width, horizontalPanelOffset);
-        var panelStartY = clampWithOffset(topLeft[1], 0, panelSize.height, verticalPanelOffset);
-        var panelEndX = clampWithOffset(bottomRight[0], 0, panelSize.width, horizontalPanelOffset);
-        var panelEndY = clampWithOffset(bottomRight[1], 0, panelSize.height, verticalPanelOffset);
-        var startX = xInvertedScale(panelStartX);
-        var startY = yInvertedScale(panelStartY);
-        var endX = xInvertedScale(panelEndX);
-        var endY = yInvertedScale(panelEndY);
-        var allXValuesInRange = getValuesInRange(xValues, startX, endX);
-        var allYValuesInRange = getValuesInRange(yValues, startY, endY);
-        var invertedXValues = isRasterTimeScale(spec.xScale) && typeof endX === 'number'
+    const pickDragArea = (bound) => {
+        const [start, end] = bound;
+        const { left, top } = chartDimensions;
+        const topLeft = [Math.min(start.x, end.x) - left, Math.min(start.y, end.y) - top];
+        const bottomRight = [Math.max(start.x, end.x) - left, Math.max(start.y, end.y) - top];
+        const { category: smHorizontalAccessorValue, panelOffset: horizontalPanelOffset } = getPanelPointCoordinate(start.x - chartDimensions.left, 'horizontal');
+        const { category: smVerticalAccessorValue, panelOffset: verticalPanelOffset } = getPanelPointCoordinate(start.y, 'vertical');
+        const panelStartX = clampWithOffset(topLeft[0], 0, panelSize.width, horizontalPanelOffset);
+        const panelStartY = clampWithOffset(topLeft[1], 0, panelSize.height, verticalPanelOffset);
+        const panelEndX = clampWithOffset(bottomRight[0], 0, panelSize.width, horizontalPanelOffset);
+        const panelEndY = clampWithOffset(bottomRight[1], 0, panelSize.height, verticalPanelOffset);
+        const startX = xInvertedScale(panelStartX);
+        const startY = yInvertedScale(panelStartY);
+        const endX = xInvertedScale(panelEndX);
+        const endY = yInvertedScale(panelEndY);
+        const allXValuesInRange = getValuesInRange(xValues, startX, endX);
+        const allYValuesInRange = getValuesInRange(yValues, startY, endY);
+        const invertedXValues = isRasterTimeScale(spec.xScale) && typeof endX === 'number'
             ? [startX, (0, elasticsearch_1.addIntervalToTime)(endX, spec.xScale.interval, spec.timeZone)]
-            : __spreadArray([], __read(allXValuesInRange), false);
-        var cells = [];
-        allXValuesInRange.forEach(function (x) {
-            allYValuesInRange.forEach(function (y) {
+            : [...allXValuesInRange];
+        const cells = [];
+        allXValuesInRange.forEach((x) => {
+            allYValuesInRange.forEach((y) => {
                 var _a;
-                var panelKey = getPanelKey(smHorizontalAccessorValue, smVerticalAccessorValue);
-                var cellKey = getCellKey(x, y);
-                var cellValue = (_a = panelCellMap.get(panelKey)) === null || _a === void 0 ? void 0 : _a.get(cellKey);
+                const panelKey = getPanelKey(smHorizontalAccessorValue, smVerticalAccessorValue);
+                const cellKey = getCellKey(x, y);
+                const cellValue = (_a = panelCellMap.get(panelKey)) === null || _a === void 0 ? void 0 : _a.get(cellKey);
                 if (cellValue)
                     cells.push(cellValue);
             });
@@ -223,55 +195,55 @@ function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, c
             cells: cells.filter(Boolean),
             x: invertedXValues,
             y: allYValuesInRange,
-            smHorizontalAccessorValue: smHorizontalAccessorValue,
-            smVerticalAccessorValue: smVerticalAccessorValue,
+            smHorizontalAccessorValue,
+            smVerticalAccessorValue,
         };
     };
-    var pickHighlightedArea = function (x, y, smHorizontalAccessorValue, smVerticalAccessorValue) {
+    const pickHighlightedArea = (x, y, smHorizontalAccessorValue, smVerticalAccessorValue) => {
         var _a, _b;
-        var startValue = x[0];
-        var endValue = x.at(-1);
-        var leftIndex = xValues.indexOf(startValue !== null && startValue !== void 0 ? startValue : NaN);
-        var rightIndex = xValues.indexOf(endValue !== null && endValue !== void 0 ? endValue : NaN) + (isRasterTimeScale(spec.xScale) && x.length > 1 ? 0 : 1);
-        var isRightOutOfRange = rightIndex > xValues.length - 1 || rightIndex < 0;
-        var isLeftOutOfRange = leftIndex > xValues.length - 1 || leftIndex < 0;
-        var startFromScale = xScale((_a = (isLeftOutOfRange ? xValues[0] : xValues[leftIndex])) !== null && _a !== void 0 ? _a : NaN);
-        var endFromScale = xScale((_b = (isRightOutOfRange ? xValues.at(-1) : xValues[rightIndex])) !== null && _b !== void 0 ? _b : NaN);
+        const startValue = x[0];
+        const endValue = x.at(-1);
+        const leftIndex = xValues.indexOf(startValue !== null && startValue !== void 0 ? startValue : NaN);
+        const rightIndex = xValues.indexOf(endValue !== null && endValue !== void 0 ? endValue : NaN) + (isRasterTimeScale(spec.xScale) && x.length > 1 ? 0 : 1);
+        const isRightOutOfRange = rightIndex > xValues.length - 1 || rightIndex < 0;
+        const isLeftOutOfRange = leftIndex > xValues.length - 1 || leftIndex < 0;
+        const startFromScale = xScale((_a = (isLeftOutOfRange ? xValues[0] : xValues[leftIndex])) !== null && _a !== void 0 ? _a : NaN);
+        const endFromScale = xScale((_b = (isRightOutOfRange ? xValues.at(-1) : xValues[rightIndex])) !== null && _b !== void 0 ? _b : NaN);
         if (startFromScale === undefined || endFromScale === undefined) {
             return null;
         }
-        var panelXOffset = (0, common_1.isNil)(smHorizontalAccessorValue)
+        const panelXOffset = (0, common_1.isNil)(smHorizontalAccessorValue)
             ? 0
             : getScaledSMValue(smHorizontalAccessorValue, 'horizontal');
-        var panelYOffset = (0, common_1.isNil)(smVerticalAccessorValue) ? 0 : getScaledSMValue(smVerticalAccessorValue, 'vertical');
-        var xStart = chartDimensions.left + startFromScale + panelXOffset;
-        var width = endFromScale - startFromScale + (isRightOutOfRange || isLeftOutOfRange ? cellWidth : 0);
-        var _c = y
-            .filter(function (v) { return yValues.includes(v); })
-            .reduce(function (acc, current, i) {
+        const panelYOffset = (0, common_1.isNil)(smVerticalAccessorValue) ? 0 : getScaledSMValue(smVerticalAccessorValue, 'vertical');
+        const xStart = chartDimensions.left + startFromScale + panelXOffset;
+        const width = endFromScale - startFromScale + (isRightOutOfRange || isLeftOutOfRange ? cellWidth : 0);
+        const { y: yStart, totalHeight } = y
+            .filter((v) => yValues.includes(v))
+            .reduce((acc, current, i) => {
             if (i === 0) {
                 acc.y = (yScale(current) || 0) + panelYOffset;
             }
             acc.totalHeight += cellHeight;
             return acc;
-        }, { y: 0, totalHeight: 0 }), yStart = _c.y, totalHeight = _c.totalHeight;
+        }, { y: 0, totalHeight: 0 });
         return {
             x: xStart,
             y: yStart,
-            width: width,
+            width,
             height: totalHeight,
         };
     };
-    var pickDragShape = function (bound) {
-        var _a = pickDragArea(bound), x = _a.x, y = _a.y, smHorizontalAccessorValue = _a.smHorizontalAccessorValue, smVerticalAccessorValue = _a.smVerticalAccessorValue;
+    const pickDragShape = (bound) => {
+        const { x, y, smHorizontalAccessorValue, smVerticalAccessorValue } = pickDragArea(bound);
         return pickHighlightedArea(x, y, smHorizontalAccessorValue, smVerticalAccessorValue);
     };
-    var pickCursorBand = function (x) {
+    const pickCursorBand = (x) => {
         var _a, _b;
-        var roundedValue = isRasterTimeScale(spec.xScale) && (0, common_1.isFiniteNumber)(x)
+        const roundedValue = isRasterTimeScale(spec.xScale) && (0, common_1.isFiniteNumber)(x)
             ? (0, elasticsearch_1.roundDateToESInterval)(x, spec.xScale.interval, 'start', spec.timeZone)
             : x;
-        var index = xValues.indexOf(roundedValue);
+        const index = xValues.indexOf(roundedValue);
         return index < 0
             ? undefined
             : {
@@ -281,8 +253,8 @@ function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, c
                 height: chartDimensions.height,
             };
     };
-    var xLines = Array.from({ length: xValues.length + 1 }, function (d, i) {
-        var xAxisExtension = i % elementSizes.xAxisTickCadence === 0 ? 5 : 0;
+    const xLines = Array.from({ length: xValues.length + 1 }, (d, i) => {
+        const xAxisExtension = i % elementSizes.xAxisTickCadence === 0 ? 5 : 0;
         return {
             x1: i * cellWidth,
             x2: i * cellWidth,
@@ -290,25 +262,25 @@ function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, c
             y2: panelSize.height + xAxisExtension,
         };
     });
-    var yLines = Array.from({ length: yValues.length + 1 }, function (d, i) { return ({
+    const yLines = Array.from({ length: yValues.length + 1 }, (d, i) => ({
         x1: 0,
         x2: panelSize.width,
         y1: i * cellHeight,
         y2: i * cellHeight,
-    }); });
-    var axisTitleFont = {
+    }));
+    const axisTitleFont = {
         visible: axisTitle.visible,
         fontFamily: axisTitle.fontFamily,
-        fontStyle: (_c = axisTitle.fontStyle) !== null && _c !== void 0 ? _c : 'normal',
+        fontStyle: (_a = axisTitle.fontStyle) !== null && _a !== void 0 ? _a : 'normal',
         fontVariant: 'normal',
         fontWeight: 'bold',
         textColor: axisTitle.fill,
         fontSize: axisTitle.fontSize,
     };
-    var axisPanelTitleFont = {
+    const axisPanelTitleFont = {
         visible: axisPanelTitle.visible,
         fontFamily: axisPanelTitle.fontFamily,
-        fontStyle: (_d = axisPanelTitle.fontStyle) !== null && _d !== void 0 ? _d : 'normal',
+        fontStyle: (_b = axisPanelTitle.fontStyle) !== null && _b !== void 0 ? _b : 'normal',
         fontVariant: 'normal',
         fontWeight: 'bold',
         textColor: axisPanelTitle.fill,
@@ -316,19 +288,20 @@ function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, c
     };
     return {
         theme: heatmapTheme,
-        heatmapViewModels: (0, panel_utils_1.getPerPanelMap)(smScales, function (anchor, h, v) {
+        heatmapViewModels: (0, panel_utils_1.getPerPanelMap)(smScales, (anchor, h, v) => {
             var _a, _b;
-            var primaryColumn = smScales.vertical.domain[0] === v;
-            var primaryRow = smScales.horizontal.domain[0] === h;
-            var lastColumn = smScales.vertical.domain.at(-1) === v;
-            var titles = [];
-            var cells = __spreadArray([], __read(((_b = (_a = panelCellMap.get(getPanelKey(h, v))) === null || _a === void 0 ? void 0 : _a.values()) !== null && _b !== void 0 ? _b : [])), false);
+            const primaryColumn = smScales.vertical.domain[0] === v;
+            const primaryRow = smScales.horizontal.domain[0] === h;
+            const lastColumn = smScales.vertical.domain.at(-1) === v;
+            const titles = [];
+            const cells = [...((_b = (_a = panelCellMap.get(getPanelKey(h, v))) === null || _a === void 0 ? void 0 : _a.values()) !== null && _b !== void 0 ? _b : [])];
             if (primaryColumn && primaryRow) {
                 if (spec.xAxisTitle) {
-                    var axisPanelTitleHeight = groupBySpec.horizontal && axisPanelTitle.visible
+                    const axisPanelTitleHeight = groupBySpec.horizontal && axisPanelTitle.visible
                         ? axisPanelTitle.fontSize + (0, dimensions_1.innerPad)(axisPanelTitle.padding) / 2
                         : 0;
-                    titles.push(__assign(__assign({ origin: {
+                    titles.push({
+                        origin: {
                             x: chartDimensions.width / 2,
                             y: chartDimensions.top +
                                 chartDimensions.height +
@@ -336,35 +309,54 @@ function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, c
                                 axisPanelTitleHeight +
                                 (0, dimensions_1.innerPad)(axisTitle.padding) / 2 +
                                 axisTitle.fontSize / 2,
-                        } }, axisTitleFont), { text: spec.xAxisTitle, rotation: 0 }));
+                        },
+                        ...axisTitleFont,
+                        text: spec.xAxisTitle,
+                        rotation: 0,
+                    });
                 }
                 if (spec.yAxisTitle) {
-                    titles.push(__assign(__assign({ origin: {
+                    titles.push({
+                        origin: {
                             x: -chartDimensions.left + axisTitle.fontSize / 2,
                             y: chartDimensions.top + chartDimensions.height / 2,
-                        } }, axisTitleFont), { text: spec.yAxisTitle, rotation: -90 }));
+                        },
+                        ...axisTitleFont,
+                        text: spec.yAxisTitle,
+                        rotation: -90,
+                    });
                 }
             }
             if (primaryColumn && groupBySpec.horizontal) {
-                titles.push(__assign(__assign({ origin: {
+                titles.push({
+                    origin: {
                         x: panelSize.width / 2,
                         y: chartDimensions.top +
                             chartDimensions.height +
                             elementSizes.xAxis.height +
                             (0, dimensions_1.innerPad)(axisPanelTitle.padding) +
                             axisPanelTitle.fontSize / 2,
-                    } }, axisPanelTitleFont), { text: (0, panel_utils_1.getPanelTitle)(false, v, h, groupBySpec), rotation: 0 }));
+                    },
+                    ...axisPanelTitleFont,
+                    text: (0, panel_utils_1.getPanelTitle)(false, v, h, groupBySpec),
+                    rotation: 0,
+                });
             }
             if (primaryRow && groupBySpec.vertical) {
-                var axisTitleWidth = axisTitle.visible ? axisTitle.fontSize + (0, dimensions_1.innerPad)(axisTitle.padding) : 0;
-                titles.push(__assign(__assign({ origin: {
+                const axisTitleWidth = axisTitle.visible ? axisTitle.fontSize + (0, dimensions_1.innerPad)(axisTitle.padding) : 0;
+                titles.push({
+                    origin: {
                         x: -chartDimensions.left + axisTitleWidth + axisPanelTitle.fontSize / 2,
                         y: chartDimensions.top + panelSize.height / 2,
-                    } }, axisPanelTitleFont), { text: (0, panel_utils_1.getPanelTitle)(true, v, h, groupBySpec), rotation: -90 }));
+                    },
+                    ...axisPanelTitleFont,
+                    text: (0, panel_utils_1.getPanelTitle)(true, v, h, groupBySpec),
+                    rotation: -90,
+                });
             }
             return {
-                anchor: anchor,
-                panelSize: panelSize,
+                anchor,
+                panelSize,
                 gridOrigin: {
                     x: anchor.x + chartDimensions.left,
                     y: anchor.y + chartDimensions.top,
@@ -377,35 +369,30 @@ function shapeViewModel(textMeasure, spec, _a, _b, elementSizes, heatmapTable, c
                         width: gridStrokeWidth,
                     },
                 },
-                cells: cells,
-                cellFontSize: function (cell) { return (heatmapTheme.cell.label.useGlobalMinFontSize ? tableMinFontSize : cell.fontSize); },
+                cells,
+                cellFontSize: (cell) => (heatmapTheme.cell.label.useGlobalMinFontSize ? tableMinFontSize : cell.fontSize),
                 xValues: lastColumn ? textXValues : [],
                 yValues: primaryRow ? textYValues : [],
-                titles: titles,
+                titles,
             };
         }),
-        pickGridCell: pickGridCell,
-        pickQuads: pickQuads,
-        pickDragArea: pickDragArea,
-        pickDragShape: pickDragShape,
-        pickHighlightedArea: pickHighlightedArea,
-        pickCursorBand: pickCursorBand,
+        pickGridCell,
+        pickQuads,
+        pickDragArea,
+        pickDragShape,
+        pickHighlightedArea,
+        pickCursorBand,
     };
 }
 exports.shapeViewModel = shapeViewModel;
 function getCellKey(x, y) {
     return [String(x), String(y)].join('&_&');
 }
-function getPanelKey(h, v) {
-    if (h === void 0) { h = ''; }
-    if (v === void 0) { v = ''; }
+function getPanelKey(h = '', v = '') {
     return [String(h), String(v)].join('&_&');
 }
 function isValueInRanges(value, ranges) {
-    return ranges.some(function (_a) {
-        var _b = __read(_a, 2), min = _b[0], max = _b[1];
-        return min <= value && value < max;
-    });
+    return ranges.some(([min, max]) => min <= value && value < max);
 }
 exports.isValueInRanges = isValueInRanges;
 function isRasterTimeScale(scale) {
@@ -413,11 +400,19 @@ function isRasterTimeScale(scale) {
 }
 exports.isRasterTimeScale = isRasterTimeScale;
 function getXTicks(spec, style, scale, values) {
-    var isTimeScale = isRasterTimeScale(spec.xScale);
-    var isRotated = style.rotation !== 0;
-    return values.map(function (value) {
+    const isTimeScale = isRasterTimeScale(spec.xScale);
+    const isRotated = style.rotation !== 0;
+    return values.map((value) => {
         var _a;
-        return __assign(__assign({ text: spec.xAxisLabelFormatter(value), value: value, isValue: false }, style), { y: style.fontSize / 2 + (0, dimensions_1.pad)(style.padding, 'top'), x: ((_a = scale(value)) !== null && _a !== void 0 ? _a : 0) + (isTimeScale ? 0 : scale.bandwidth() / 2), align: isRotated ? 'right' : isTimeScale ? 'left' : 'center' });
+        return {
+            text: spec.xAxisLabelFormatter(value),
+            value,
+            isValue: false,
+            ...style,
+            y: style.fontSize / 2 + (0, dimensions_1.pad)(style.padding, 'top'),
+            x: ((_a = scale(value)) !== null && _a !== void 0 ? _a : 0) + (isTimeScale ? 0 : scale.bandwidth() / 2),
+            align: isRotated ? 'right' : isTimeScale ? 'left' : 'center',
+        };
     });
 }
 //# sourceMappingURL=viewmodel.js.map