@mui/x-charts-pro 9.0.0-alpha.2 → 9.0.0-alpha.3

package/Heatmap/Heatmap.mjs

@@ -102,7 +102,10 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * @default false
    */
   disableAxisListener: PropTypes.bool,
-  enableKeyboardNavigation: PropTypes.bool,
+  /**
+   * If `true`, disables keyboard navigation for the chart.
+   */
+  disableKeyboardNavigation: PropTypes.bool,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
@@ -193,7 +196,7 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
   /**
    * The callback fired when the tooltip item changes.
    *
-   * @param {SeriesItemIdentifier<TSeries> | null} tooltipItem  The newly highlighted item.
+   * @param {SeriesItemIdentifier<SeriesType> | null} tooltipItem  The newly highlighted item.
    */
   onTooltipItemChange: PropTypes.func,
   /**
@@ -243,13 +246,11 @@ process.env.NODE_ENV !== "production" ? Heatmap.propTypes = {
    * Used when the tooltip is controlled.
    */
   tooltipItem: PropTypes.oneOfType([PropTypes.shape({
-    dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
     type: PropTypes.oneOf(['heatmap']).isRequired,
     xIndex: PropTypes.number.isRequired,
     yIndex: PropTypes.number.isRequired
   }), PropTypes.shape({
-    dataIndex: PropTypes.number,
     seriesId: PropTypes.string.isRequired,
     xIndex: PropTypes.number.isRequired,
     yIndex: PropTypes.number.isRequired

package/Heatmap/HeatmapItem.js

@@ -56,7 +56,6 @@ function HeatmapItem(props) {
   const interactionProps = (0, _internals.useInteractionItemProps)({
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
     yIndex
   }, skipInteractionItemProps);

package/Heatmap/HeatmapItem.mjs

@@ -48,7 +48,6 @@ function HeatmapItem(props) {
   const interactionProps = useInteractionItemProps({
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
     yIndex
   }, skipInteractionItemProps);

package/Heatmap/HeatmapSVGPlot.js

@@ -22,8 +22,7 @@ function HeatmapSVGPlot(props) {
   const yScale = (0, _hooks.useYScale)();
   const colorScale = (0, _hooks.useZColorScale)();
   const series = (0, _hooks2.useHeatmapSeriesContext)();
-  const isHighlighted = store.use(_internals.selectorChartsIsHighlightedCallback);
-  const isFaded = store.use(_internals.selectorChartsIsFadedCallback);
+  const getHighlightState = store.use(_internals.selectorChartsHighlightStateCallback);
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {
@@ -45,6 +44,7 @@ function HeatmapSVGPlot(props) {
           xIndex,
           yIndex
         };
+        const highlightState = getHighlightState(item);
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(MemoHeatmapItem, {
           width: xScale.bandwidth(),
           height: yScale.bandwidth(),
@@ -58,8 +58,8 @@ function HeatmapSVGPlot(props) {
           value: value,
           slots: props.slots,
           slotProps: props.slotProps,
-          isHighlighted: isHighlighted(item),
-          isFaded: isFaded(item),
+          isHighlighted: highlightState === 'highlighted',
+          isFaded: highlightState === 'faded',
           borderRadius: props.borderRadius
         }, `${xIndex}_${yIndex}`);
       })

package/Heatmap/HeatmapSVGPlot.mjs

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 import { useXScale, useYScale, useZColorScale } from '@mui/x-charts/hooks';
-import { selectorChartsIsFadedCallback, selectorChartsIsHighlightedCallback, useStore, useRegisterPointerInteractions } from '@mui/x-charts/internals';
+import { selectorChartsHighlightStateCallback, useStore, useRegisterPointerInteractions } from '@mui/x-charts/internals';
 import { useHeatmapSeriesContext } from "../hooks/index.mjs";
 import { HeatmapItem } from "./HeatmapItem.mjs";
 import { selectorHeatmapItemAtPosition } from "../plugins/selectors/useChartHeatmapPosition.selectors.mjs";
@@ -16,8 +16,7 @@ export function HeatmapSVGPlot(props) {
   const yScale = useYScale();
   const colorScale = useZColorScale();
   const series = useHeatmapSeriesContext();
-  const isHighlighted = store.use(selectorChartsIsHighlightedCallback);
-  const isFaded = store.use(selectorChartsIsFadedCallback);
+  const getHighlightState = store.use(selectorChartsHighlightStateCallback);
   const xDomain = xScale.domain();
   const yDomain = yScale.domain();
   if (!series || series.seriesOrder.length === 0) {
@@ -39,6 +38,7 @@ export function HeatmapSVGPlot(props) {
           xIndex,
           yIndex
         };
+        const highlightState = getHighlightState(item);
         return /*#__PURE__*/_jsx(MemoHeatmapItem, {
           width: xScale.bandwidth(),
           height: yScale.bandwidth(),
@@ -52,8 +52,8 @@ export function HeatmapSVGPlot(props) {
           value: value,
           slots: props.slots,
           slotProps: props.slotProps,
-          isHighlighted: isHighlighted(item),
-          isFaded: isFaded(item),
+          isHighlighted: highlightState === 'highlighted',
+          isFaded: highlightState === 'faded',
           borderRadius: props.borderRadius
         }, `${xIndex}_${yIndex}`);
       })

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.js

@@ -21,21 +21,23 @@ function HeatmapTooltipContent(props) {
   const yAxis = (0, _hooks.useYAxis)();
   const heatmapSeries = (0, _useHeatmapSeries.useHeatmapSeriesContext)();
   const tooltipData = (0, _ChartsTooltip.useItemTooltip)();
-  const dataIndex = tooltipData?.identifier.dataIndex;
-  if (!tooltipData || dataIndex === undefined || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
+  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
     return null;
   }
-  const {
-    series,
-    seriesOrder
-  } = heatmapSeries;
-  const seriesId = seriesOrder[0];
   const {
     color,
-    value,
-    markType
+    markType,
+    identifier
   } = tooltipData;
-  const [xIndex, yIndex] = value;
+  const thisSeries = heatmapSeries.series[heatmapSeries.seriesOrder[0]];
+  const value = thisSeries.heatmapData.getValue(identifier.xIndex, identifier.yIndex) ?? null;
+  if (value === null) {
+    return null;
+  }
+  const {
+    xIndex,
+    yIndex
+  } = identifier;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
     location: 'tooltip',
     scale: xAxis.scale
@@ -44,10 +46,11 @@ function HeatmapTooltipContent(props) {
     location: 'tooltip',
     scale: yAxis.scale
   }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series[seriesId].valueFormatter(value, {
-    dataIndex
+  const formattedValue = thisSeries.valueFormatter(value, {
+    xIndex,
+    yIndex
   });
-  const seriesLabel = (0, _internals.getLabel)(series[seriesId].label, 'tooltip');
+  const seriesLabel = (0, _internals.getLabel)(thisSeries.label, 'tooltip');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsTooltip.ChartsTooltipPaper, {
     className: classes.paper,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChartsTooltip.ChartsTooltipTable, {

package/Heatmap/HeatmapTooltip/HeatmapTooltipContent.mjs

@@ -15,21 +15,23 @@ export function HeatmapTooltipContent(props) {
   const yAxis = useYAxis();
   const heatmapSeries = useHeatmapSeriesContext();
   const tooltipData = useItemTooltip();
-  const dataIndex = tooltipData?.identifier.dataIndex;
-  if (!tooltipData || dataIndex === undefined || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
+  if (!tooltipData || !heatmapSeries || heatmapSeries.seriesOrder.length === 0) {
     return null;
   }
-  const {
-    series,
-    seriesOrder
-  } = heatmapSeries;
-  const seriesId = seriesOrder[0];
   const {
     color,
-    value,
-    markType
+    markType,
+    identifier
   } = tooltipData;
-  const [xIndex, yIndex] = value;
+  const thisSeries = heatmapSeries.series[heatmapSeries.seriesOrder[0]];
+  const value = thisSeries.heatmapData.getValue(identifier.xIndex, identifier.yIndex) ?? null;
+  if (value === null) {
+    return null;
+  }
+  const {
+    xIndex,
+    yIndex
+  } = identifier;
   const formattedX = xAxis.valueFormatter?.(xAxis.data[xIndex], {
     location: 'tooltip',
     scale: xAxis.scale
@@ -38,10 +40,11 @@ export function HeatmapTooltipContent(props) {
     location: 'tooltip',
     scale: yAxis.scale
   }) ?? yAxis.data[yIndex].toLocaleString();
-  const formattedValue = series[seriesId].valueFormatter(value, {
-    dataIndex
+  const formattedValue = thisSeries.valueFormatter(value, {
+    xIndex,
+    yIndex
   });
-  const seriesLabel = getLabel(series[seriesId].label, 'tooltip');
+  const seriesLabel = getLabel(thisSeries.label, 'tooltip');
   return /*#__PURE__*/_jsx(ChartsTooltipPaper, {
     className: classes.paper,
     children: /*#__PURE__*/_jsxs(ChartsTooltipTable, {

package/Heatmap/internals/HeatmapCell.js

@@ -8,7 +8,7 @@ var _styles = require("@mui/material/styles");
 const HeatmapCell = exports.HeatmapCell = (0, _styles.styled)('rect', {
   name: 'MuiHeatmap',
   slot: 'Cell',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
+  overridesResolver: (_, styles) => styles.cell
 })(({
   ownerState
 }) => ({

package/Heatmap/internals/HeatmapCell.mjs

@@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles';
 export const HeatmapCell = styled('rect', {
   name: 'MuiHeatmap',
   slot: 'Cell',
-  overridesResolver: (_, styles) => styles.arc // FIXME: Inconsistent naming with slot
+  overridesResolver: (_, styles) => styles.cell
 })(({
   ownerState
 }) => ({

package/Heatmap/seriesConfig/getColor.js

@@ -7,9 +7,11 @@ exports.default = void 0;
 const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   if (zColorScale) {
-    return dataIndex => {
-      const value = series.data[dataIndex];
-      const color = zColorScale(value[2]);
+    return value => {
+      if (value === null) {
+        return '';
+      }
+      const color = zColorScale(value);
       if (color === null) {
         return '';
       }

package/Heatmap/seriesConfig/getColor.mjs

@@ -1,9 +1,11 @@
 const getColor = (series, xAxis, yAxis, zAxis) => {
   const zColorScale = zAxis?.colorScale;
   if (zColorScale) {
-    return dataIndex => {
-      const value = series.data[dataIndex];
-      const color = zColorScale(value[2]);
+    return value => {
+      if (value === null) {
+        return '';
+      }
+      const color = zColorScale(value);
       if (color === null) {
         return '';
       }

package/Heatmap/seriesConfig/getItemAtPosition.d.mts

@@ -1,6 +1,6 @@
 import type { ChartState, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
-import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+import type { SeriesItemIdentifierWithData } from '@mui/x-charts/models';
 export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
   x: number;
   y: number;
-}): SeriesItemIdentifierWithType<'heatmap'> | undefined;
+}): SeriesItemIdentifierWithData<'heatmap'> | undefined;

package/Heatmap/seriesConfig/getItemAtPosition.d.ts

@@ -1,6 +1,6 @@
 import type { ChartState, UseChartCartesianAxisSignature } from '@mui/x-charts/internals';
-import type { SeriesItemIdentifierWithType } from '@mui/x-charts/models';
+import type { SeriesItemIdentifierWithData } from '@mui/x-charts/models';
 export default function getItemAtPosition(state: ChartState<[UseChartCartesianAxisSignature]>, point: {
   x: number;
   y: number;
-}): SeriesItemIdentifierWithType<'heatmap'> | undefined;
+}): SeriesItemIdentifierWithData<'heatmap'> | undefined;

package/Heatmap/seriesConfig/getItemAtPosition.js

@@ -26,20 +26,12 @@ function getItemAtPosition(state, point) {
   if (xIndex === -1 || yIndex === -1) {
     return undefined;
   }
-  const dataIndex = series ? series.series[series.seriesOrder[0]].data.findIndex(d => d[0] === xIndex && d[1] === yIndex) : -1;
-  if (dataIndex === -1) {
-    return {
-      type: 'heatmap',
-      seriesId,
-      xIndex,
-      yIndex
-    };
-  }
+  const value = series?.series[series.seriesOrder[0]].heatmapData.getValue(xIndex, yIndex) ?? null;
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
-    yIndex
+    yIndex,
+    value
   };
 }

package/Heatmap/seriesConfig/getItemAtPosition.mjs

@@ -20,20 +20,12 @@ export default function getItemAtPosition(state, point) {
   if (xIndex === -1 || yIndex === -1) {
     return undefined;
   }
-  const dataIndex = series ? series.series[series.seriesOrder[0]].data.findIndex(d => d[0] === xIndex && d[1] === yIndex) : -1;
-  if (dataIndex === -1) {
-    return {
-      type: 'heatmap',
-      seriesId,
-      xIndex,
-      yIndex
-    };
-  }
+  const value = series?.series[series.seriesOrder[0]].heatmapData.getValue(xIndex, yIndex) ?? null;
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex,
-    yIndex
+    yIndex,
+    value
   };
 }

package/Heatmap/seriesConfig/identifierCleaner.d.mts

@@ -0,0 +1,3 @@
+import type { IdentifierCleaner } from '@mui/x-charts/internals';
+declare const identifierCleaner: IdentifierCleaner<'heatmap'>;
+export default identifierCleaner;

package/Heatmap/seriesConfig/identifierCleaner.d.ts

@@ -0,0 +1,3 @@
+import type { IdentifierCleaner } from '@mui/x-charts/internals';
+declare const identifierCleaner: IdentifierCleaner<'heatmap'>;
+export default identifierCleaner;

package/Heatmap/seriesConfig/identifierCleaner.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const identifierCleaner = identifier => {
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    xIndex: identifier.xIndex,
+    yIndex: identifier.yIndex
+  };
+};
+var _default = exports.default = identifierCleaner;

package/Heatmap/seriesConfig/identifierCleaner.mjs

@@ -0,0 +1,9 @@
+const identifierCleaner = identifier => {
+  return {
+    type: identifier.type,
+    seriesId: identifier.seriesId,
+    xIndex: identifier.xIndex,
+    yIndex: identifier.yIndex
+  };
+};
+export default identifierCleaner;

package/Heatmap/seriesConfig/identifierSerializer.d.mts

@@ -0,0 +1,3 @@
+import { type IdentifierSerializer } from '@mui/x-charts/internals';
+declare const identifierSerializer: IdentifierSerializer<'heatmap'>;
+export default identifierSerializer;

package/Heatmap/seriesConfig/identifierSerializer.d.ts

@@ -0,0 +1,3 @@
+import { type IdentifierSerializer } from '@mui/x-charts/internals';
+declare const identifierSerializer: IdentifierSerializer<'heatmap'>;
+export default identifierSerializer;

package/Heatmap/seriesConfig/identifierSerializer.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _internals = require("@mui/x-charts/internals");
+const identifierSerializer = identifier => {
+  return `${(0, _internals.typeSerializer)(identifier.type)}${(0, _internals.seriesIdSerializer)(identifier.seriesId)}X(${identifier.xIndex})Y(${identifier.yIndex})`;
+};
+var _default = exports.default = identifierSerializer;

package/Heatmap/seriesConfig/identifierSerializer.mjs

@@ -0,0 +1,5 @@
+import { typeSerializer, seriesIdSerializer } from '@mui/x-charts/internals';
+const identifierSerializer = identifier => {
+  return `${typeSerializer(identifier.type)}${seriesIdSerializer(identifier.seriesId)}X(${identifier.xIndex})Y(${identifier.yIndex})`;
+};
+export default identifierSerializer;

package/Heatmap/seriesConfig/index.js

@@ -15,6 +15,8 @@ var _tooltipPosition = _interopRequireDefault(require("./tooltipPosition"));
 var _getItemAtPosition = _interopRequireDefault(require("./getItemAtPosition"));
 var _keyboardFocusHandler = _interopRequireDefault(require("./keyboardFocusHandler"));
 var _highlight = require("./highlight");
+var _identifierSerializer = _interopRequireDefault(require("./identifierSerializer"));
+var _identifierCleaner = _interopRequireDefault(require("./identifierCleaner"));
 _internals.cartesianSeriesTypes.addType('heatmap');
 const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   seriesProcessor: _seriesProcessor.default,
@@ -25,8 +27,8 @@ const heatmapSeriesConfig = exports.heatmapSeriesConfig = {
   xExtremumGetter: _extremums.getBaseExtremum,
   yExtremumGetter: _extremums.getBaseExtremum,
   getSeriesWithDefaultValues: _getSeriesWithDefaultValues.default,
-  identifierSerializer: _internals.identifierSerializerSeriesIdDataIndex,
-  identifierCleaner: _internals.identifierCleanerSeriesIdDataIndex,
+  identifierSerializer: _identifierSerializer.default,
+  identifierCleaner: _identifierCleaner.default,
   getItemAtPosition: _getItemAtPosition.default,
   keyboardFocusHandler: _keyboardFocusHandler.default,
   isHighlightedCreator: _highlight.createIsHighlighted,

package/Heatmap/seriesConfig/index.mjs

@@ -1,4 +1,4 @@
-import { cartesianSeriesTypes, identifierSerializerSeriesIdDataIndex, identifierCleanerSeriesIdDataIndex } from '@mui/x-charts/internals';
+import { cartesianSeriesTypes } from '@mui/x-charts/internals';
 import { getBaseExtremum } from "./extremums.mjs";
 import seriesProcessor from "./seriesProcessor.mjs";
 import getColor from "./getColor.mjs";
@@ -8,6 +8,8 @@ import tooltipItemPositionGetter from "./tooltipPosition.mjs";
 import getItemAtPosition from "./getItemAtPosition.mjs";
 import keyboardFocusHandler from "./keyboardFocusHandler.mjs";
 import { createIsFaded, createIsHighlighted } from "./highlight.mjs";
+import identifierSerializer from "./identifierSerializer.mjs";
+import identifierCleaner from "./identifierCleaner.mjs";
 cartesianSeriesTypes.addType('heatmap');
 export const heatmapSeriesConfig = {
   seriesProcessor,
@@ -18,8 +20,8 @@ export const heatmapSeriesConfig = {
   xExtremumGetter: getBaseExtremum,
   yExtremumGetter: getBaseExtremum,
   getSeriesWithDefaultValues,
-  identifierSerializer: identifierSerializerSeriesIdDataIndex,
-  identifierCleaner: identifierCleanerSeriesIdDataIndex,
+  identifierSerializer,
+  identifierCleaner,
   getItemAtPosition,
   keyboardFocusHandler,
   isHighlightedCreator: createIsHighlighted,

package/Heatmap/seriesConfig/keyboardFocusHandler.js

@@ -13,30 +13,17 @@ function getFirstCell(state) {
   if (!seriesId || !series || !data || data.length === 0) {
     return null;
   }
-  const dataIndex = data.findIndex(value => value[0] === 0 && value[1] === 0);
-  if (dataIndex === -1) {
-    return {
-      type: 'heatmap',
-      seriesId,
-      xIndex: 0,
-      yIndex: 0
-    };
-  }
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex: 0,
     yIndex: 0
   };
 }
-const updateCoordinates = (newXIndex, newYIndex, currentItem, state) => {
-  const seriesData = state.series.defaultizedSeries.heatmap?.series[currentItem.seriesId]?.data;
-  const dataIndex = seriesData?.findIndex(value => value[0] === newXIndex && value[1] === newYIndex);
+const updateCoordinates = (newXIndex, newYIndex, currentItem) => {
   return (0, _extends2.default)({}, currentItem, {
     xIndex: newXIndex,
-    yIndex: newYIndex,
-    dataIndex: dataIndex === -1 || dataIndex === undefined ? undefined : dataIndex
+    yIndex: newYIndex
   });
 };
 const keyboardFocusHandler = event => {
@@ -50,7 +37,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.xIndex + 1 === (maxLength ?? 0)) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex + 1, currentItem.yIndex, currentItem, state);
+        return updateCoordinates(currentItem.xIndex + 1, currentItem.yIndex, currentItem);
       };
     case 'ArrowLeft':
       return (currentItem, state) => {
@@ -60,7 +47,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.xIndex - 1 < 0) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex - 1, currentItem.yIndex, currentItem, state);
+        return updateCoordinates(currentItem.xIndex - 1, currentItem.yIndex, currentItem);
       };
     case 'ArrowDown':
       return (currentItem, state) => {
@@ -71,7 +58,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.yIndex + 1 === (maxLength ?? 0)) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex, currentItem.yIndex + 1, currentItem, state);
+        return updateCoordinates(currentItem.xIndex, currentItem.yIndex + 1, currentItem);
       };
     case 'ArrowUp':
       return (currentItem, state) => {
@@ -81,7 +68,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.yIndex - 1 < 0) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex, currentItem.yIndex - 1, currentItem, state);
+        return updateCoordinates(currentItem.xIndex, currentItem.yIndex - 1, currentItem);
       };
     default:
       return null;

package/Heatmap/seriesConfig/keyboardFocusHandler.mjs

@@ -6,30 +6,17 @@ function getFirstCell(state) {
   if (!seriesId || !series || !data || data.length === 0) {
     return null;
   }
-  const dataIndex = data.findIndex(value => value[0] === 0 && value[1] === 0);
-  if (dataIndex === -1) {
-    return {
-      type: 'heatmap',
-      seriesId,
-      xIndex: 0,
-      yIndex: 0
-    };
-  }
   return {
     type: 'heatmap',
     seriesId,
-    dataIndex,
     xIndex: 0,
     yIndex: 0
   };
 }
-const updateCoordinates = (newXIndex, newYIndex, currentItem, state) => {
-  const seriesData = state.series.defaultizedSeries.heatmap?.series[currentItem.seriesId]?.data;
-  const dataIndex = seriesData?.findIndex(value => value[0] === newXIndex && value[1] === newYIndex);
+const updateCoordinates = (newXIndex, newYIndex, currentItem) => {
   return _extends({}, currentItem, {
     xIndex: newXIndex,
-    yIndex: newYIndex,
-    dataIndex: dataIndex === -1 || dataIndex === undefined ? undefined : dataIndex
+    yIndex: newYIndex
   });
 };
 const keyboardFocusHandler = event => {
@@ -43,7 +30,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.xIndex + 1 === (maxLength ?? 0)) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex + 1, currentItem.yIndex, currentItem, state);
+        return updateCoordinates(currentItem.xIndex + 1, currentItem.yIndex, currentItem);
       };
     case 'ArrowLeft':
       return (currentItem, state) => {
@@ -53,7 +40,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.xIndex - 1 < 0) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex - 1, currentItem.yIndex, currentItem, state);
+        return updateCoordinates(currentItem.xIndex - 1, currentItem.yIndex, currentItem);
       };
     case 'ArrowDown':
       return (currentItem, state) => {
@@ -64,7 +51,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.yIndex + 1 === (maxLength ?? 0)) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex, currentItem.yIndex + 1, currentItem, state);
+        return updateCoordinates(currentItem.xIndex, currentItem.yIndex + 1, currentItem);
       };
     case 'ArrowUp':
       return (currentItem, state) => {
@@ -74,7 +61,7 @@ const keyboardFocusHandler = event => {
         if (currentItem.yIndex - 1 < 0) {
           return currentItem;
         }
-        return updateCoordinates(currentItem.xIndex, currentItem.yIndex - 1, currentItem, state);
+        return updateCoordinates(currentItem.xIndex, currentItem.yIndex - 1, currentItem);
       };
     default:
       return null;

package/Heatmap/seriesConfig/seriesProcessor.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _heatmap = require("../../models/seriesType/heatmap");
 const seriesProcessor = params => {
   const {
     series,
@@ -13,12 +14,16 @@ const seriesProcessor = params => {
   } = params;
   const defaultizedSeries = {};
   Object.keys(series).forEach(seriesId => {
+    const data = series[seriesId].data ?? [];
+    const heatmapData = new _heatmap.HeatmapData(data);
     defaultizedSeries[seriesId] = (0, _extends2.default)({
       // Defaultize the data and the value formatter.
-      valueFormatter: v => v[2].toString(),
-      data: [],
+      valueFormatter: v => v?.toString() ?? null,
+      data,
       labelMarkType: 'square'
-    }, series[seriesId]);
+    }, series[seriesId], {
+      heatmapData
+    });
   });
   return {
     series: defaultizedSeries,

package/Heatmap/seriesConfig/seriesProcessor.mjs

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { HeatmapData } from "../../models/seriesType/heatmap.mjs";
 const seriesProcessor = params => {
   const {
     series,
@@ -6,12 +7,16 @@ const seriesProcessor = params => {
   } = params;
   const defaultizedSeries = {};
   Object.keys(series).forEach(seriesId => {
+    const data = series[seriesId].data ?? [];
+    const heatmapData = new HeatmapData(data);
     defaultizedSeries[seriesId] = _extends({
       // Defaultize the data and the value formatter.
-      valueFormatter: v => v[2].toString(),
-      data: [],
+      valueFormatter: v => v?.toString() ?? null,
+      data,
       labelMarkType: 'square'
-    }, series[seriesId]);
+    }, series[seriesId], {
+      heatmapData
+    });
   });
   return {
     series: defaultizedSeries,