Tooltip text issue in the Visualize Data with a Heat Map in the Data Visualization Project.

[agmt92]

Describe the bug

The tooltip is displaying the wrong months for the corresponding month on the y-axis. Additionally, the tooltip is displaying the wrong year for the cells corresponding to January along the whole X-axis (all years).

To Reproduce

Steps to reproduce the behavior:

1. Go to the FreeCodeCamp Heat Map Demo.
2. Hover over any cell in the heat map.
3. Observe that the month displayed in the tooltip does not match the month on the y-axis.
4. Hover over any cell corresponding to January.
5. Observe that the year displayed in the tooltip is incorrect.

Expected behavior

The tooltip should display the correct month corresponding to the y-axis and the correct year for all cells, including those corresponding to January.

Screenshots

Device:

• OS: macOS
• Browser: Mozilla Firefox
• Version: 129.0.1 (64-bit)

Additional context

In my case the issue was easily solved by adding adding + 1 to the month value.

That's a snippet of my code for returning the tooltip text correctly.

const tooltipFunct = (data) => {
    let year = data.year;
    let month = data.month;
    let variance = data.variance;
    let temperature = Math.floor((data.variance + 8.66) * 100) / 100;
    let result = `${year}, ${d3.utcFormat("%B")(d3.timeParse("%m")(month+1))} <br> Temperature:${temperature} <br> Variance: ${variance}℃`;
    return result;
}

---

For reference:

• FreeCodeCamp Heat Map Demo: https://heat-map.freecodecamp.rocks/
• Test Page: https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-heat-map

---