freeCodeCamp / freeCodeCamp/demo-projects
Tooltip text issue in the Visualize Data with a Heat Map in the Data Visualization Project.
- 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**
## **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
Assessment
This issue has not been assessed yet.