Marker on Gauge Chart

[kimcuomo]

Description

There are two issues with the gauge chart marker:

1. On the CLS gauge chart, the marker stays at the start of the chart even though the number indicates that it should be in the yellow/"needs improvement" section. The marker itself turns yellow, however it remains at the beginning of the green/"great" section.
   

2. On all of the gauge charts, when the metric is higher than the end of the red/"poor" range, the marker loops around back to the beginning. (Imagine it going around a circle, so if the range goes from 0-7000 and the metric is 8000 the marker could be either under the chart or in the green/"great" section). The marker will be red no matter which section it appears in.

Reproduction

https://github.com/oslabs-beta/NextLevel/blob/main/src/app/dashboard/components/Rating.js
https://github.com/oslabs-beta/NextLevel/blob/main/src/app/dashboard/components/WebVitalRatings.js

1. To test, hard code in a CLS metric that is outside the green/"great" great.
2. To test, hard code in metrics above the red/"poor" range.

You can also access a test account with data inside by logging in with test@gmail.com pw: password (you can view data from July 2024)

System information

System:
OS: macOS 14.5
CPU: (8) arm64 Apple M1
Memory: 52.75 MB / 8.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.2.0 - /opt/homebrew/bin/node
npm: 10.7.0 - /opt/homebrew/bin/npm
Browsers:
Chrome: 127.0.6533.72
Safari: 17.5

Additional information

No response

👨‍👧‍👦 Contributing

• 🙋‍♂️ Yes, I'd love to make a PR to fix this bug!