openclimatefix / quartz-frontend

Front End repo for the Nowcasting project.
https://openclimatefix.org/projects/nowcasting/
MIT License
100 stars 16 forks source link

Update tooltip styling for probabilistic chart #384

Open rachel-labri-tipton opened 1 year ago

rachel-labri-tipton commented 1 year ago

Detailed Description

Looking at the recent updates to the tooltip, the order of information and styles for plevel values could be better.

Screenshot 2023-07-20 at 12 04 29

Comments from @dantravers : It might be worth looking a at a few approaches.
For example. OCF 10%: OCF Forecast: OCF 90% Maybe have the 10% and 90% being slightly smaller font, or the Forecast being in bold, or some way to draw the eye to the forecast?

Context

Tooltip styling and order of information after Probabilistic Chart updates could have a more logical order to it. The impact being that it would make it easier for a user to read these values and immediately understand them.

Possible Implementation

Work on 2 or 3 options with different font size and order for the plevel values.

rachel-labri-tipton commented 1 year ago

Hello @dantravers and @braddf,

Here are a few ideas for the tooltip styling. I've tried to show with and w/out 4h view. I've also put the P 90%above and the P 10% under the OCF Forecast because this corresponds with the position of the area being plotted. I've also left the P because it's less text. I'm open to feedback here but as it's not too high priority, maybe it's just good to have these here for discussion in a meeting later in August.

  1. plevel value alignment left with % a. Screenshot 2023-07-25 at 12 19 50

b. Screenshot 2023-07-25 at 12 35 19

c. Screenshot 2023-07-25 at 12 43 52

  1. plevel value alignment left w/out %. this gives a cleaner look but maybe we don't want to lose the %.

a. Screenshot 2023-07-25 at 12 22 16

b. Screenshot 2023-07-25 at 12 27 23

c. Screenshot 2023-07-25 at 12 46 01

  1. for comparison, moving P10 and P90 further right.

a. Screenshot 2023-07-25 at 12 14 14

b. Screenshot 2023-07-25 at 12 56 11

dantravers commented 1 year ago

Thanks Rachel. Could we remove the "P" as in the initial issue, and replace with OCF 10%, OCF 90%? The P isn't incorrect, but it's quite scientific language. And I think I like 1a and 1b in terms of styling otherwise. 3 is quite jagged.

rachel-labri-tipton commented 1 year ago

Thanks @dantravers, I will replace the P with OCF and have noted 1a and 1b as strong options. 3 is definitely jagged.

dantravers commented 1 year ago

Small thing - I just noticed the forecast for 4 hours days 4+ hour forecast. This is a bit misleading as it's the 4 hour forecast. I think just remove the + sign, as we don't have it for the normal OCF forecast. Thanks!

braddf commented 1 year ago

@rachel-labri-tipton I agree with 1 a) and b) being the best there - although from a non-stats person and someone who didn't chat through this task - what exactly do the 10% and 90% mean..? 😅

@dantravers re 4hr view, we actually agreed to change this not too long ago in the tooltips and legend, as when the 4HF goes beyond "now", it is then actually either 4hrs or more than 4hrs, as in each forecast_value is actually 4hr + difference between now and target_time respectively... I think that's right?

dantravers commented 1 year ago

Hi - OK - I think I'm convinced with the 4hr - you are right that it is sometimes more!