Issue/368 spike shading for graph

[rachel-labri-tipton]

Pull Request

Description

Sees if the Quartz Solar chart library, Recharts, is up to the task of shading probabilistic forecasts. For each forecast, the shading was supposed to capture 110% and 90% of the OCF forecast value with the same timestamp. I think it should be fairly easy to do this with the Recharts library.

Recharts can shade an area between two values input as a range. Here's an example:

To try this out, I added probabilisticRangeData to the use-format-chart-data function which prepares forecast data for the national forecast chart. I added a PROBABILISTIC_RANGE datakey to remix-line.tsx. I added the probabilistic data in the chart as an <Area/> component. Here's how it looks with #7BCDF3:

Fixes #368

How Has This Been Tested?

Code was tested by running locally and looking at the chart.

• [x] Yes

Checklist:

• [x] My code follows OCF's coding style guidelines
• [x] I have performed a self-review of my own code
• [ ] I have made corresponding changes to the documentation
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] I have checked my code and corrected any misspellings

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nowcasting-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 13, 2023 9:05am
nowcasting-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 13, 2023 9:05am

[peterdudfield]

Amazing thats really great to test this out. Thank you for doing this

What do you think about merging / not merging?

• merging means this code is always there, but perhaps makes it less clean
• not merging keeps the code clean, and then this is always in the git history,
• you should share this on slack on progress, just to show these nice shadings can be done

[rachel-labri-tipton]

hi @peterdudfield, thank you. it was fun to work on this and nice to see it won't look that messy. it's also possible to have a setting like the 4-hour view where this could just be turned on and off.

• prefer to just keep the code in the git history for when we start actual work on the feature.

[rachel-labri-tipton]

hi @peterdudfield, I wanted to share what the tooltip looks like with the plevels added in. Is this what you were envisioning? I also was able to get the dots we were looking at yesterday to show up as yellow.

[peterdudfield]

hi @peterdudfield, I wanted to share what the tooltip looks like with the plevels added in. Is this what you were envisioning? I also was able to get the dots we were looking at yesterday to show up as yellow.

Yea that look good. I wonder if it could be OCF Forecast: XXX {space} P 10%: XXX {space} P 90%: XXXX

[rachel-labri-tipton]

hey @peterdudfield, just pushed a few changes and this should be ready for dev?