[charts-pro] Save heatmap data as a Map

[alexfauquette]

The heatmap data are provided as an array of tuples [xIndex, yIndex, value]

Then getting the value of a given cell implies looping on all the data to find the correct tuple.

Another approach could be to save a mapping of xIndex -> yIndex -> value and use it to access cell values

This should simplify the keyboard focus management. Avoiding to loop on data to find if a given x/y correspond to some data or not

[bernardobelchior]

I don't think I understood the problem 😅

Then getting the value of a given cell implies looping on all the data to find the correct tuple.

Are we trying to find the (xIndex, yIndex, value) values for a given cell value? What happens if there multiple cells that have the same value?

[alexfauquette]

Are we trying to find the (xIndex, yIndex, value) values for a given cell value?

Yes. Mor precisely we want to find value if it exist from (xIndex, yIndex). The problem occures when doing keyboard navigation.

1. You're on cell (158, 235)
2. Press ArrowRight to move to cell (159, 235)
3. To display the tooltip you need to know if this cell has a corresponding value

So each key press equals looping on data to know the content of the tooltip

What happens if there multiple cells that have the same value?

console.warn("Dear developer, an heatmap should have only one value per coordinate. So WTF are you doing in coordinate x, y ! 🤬")

The wording can maybe get some improvement 😇

[bernardobelchior]

Let me see if I understood it correctly:

1. You're on cell (158, 235)
2. Press ArrowRight

In theory the (xIndex, yIndex) would be (159, 235), but because of null values it might be some other coordinate. Is that the source of the problem? In a heatmap without null values, it should be as simple as incrementing the xIndex, right?

[alexfauquette]

but because of null values it might be some other coordinate.

Not exactly. It moves to the correct coordinate, but the tooltip does not show up because there are no data.

You can play with it here just need to add enableKeyboardNavigation and potentially

- data: bikeData as unknown as HeatmapValueType[],
+ data: bikeData.filter((_, i) => i%2===0) as unknown as HeatmapValueType[],

Capture.video.du.2026-01-05.10-08-53.mp4

As mentioned in this comment having a nice behavior by skipping empty values can lead to weird behavior. In the case of the heatmap, consider a chess board where white cells are empty. Then only half of the cell are accessible, depending from which one you start (red or green)

I makes nice logic games, but the feature is a keyboard navigation, not keyboard escape game. So I propose to allow navigation on empty cells ;)

[bernardobelchior]

Then only half of the cell are accessible, depending from which one you start (red or green)
I propose to allow navigation on empty cells

Makes sense.

This will make the heatmap function differently from other charts (e.g. line) where null values are skipped though. Not sure if that would be an issue.