freeCodeCamp / freeCodeCamp/demo-projects

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

Open
#611 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
167
Forks
104
PR merge metrics
No merged PRs in 30d

Description

## **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](https://heat-map.freecodecamp.rocks/).
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**
Screenshot 2024-08-19 at 18 46 24
Screenshot 2024-08-19 at 18 46 19

## **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.

```javascript
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))}
Temperature:${temperature}
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

---

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.