Area and band plots

[senier]

This PR implements area and band plots. In addition I did some refactoring and documentation of plot_graph as it got even a bit more complex.

I changed the Short-/Long-term load graph to use the band plot and the set volume graphs to use area plots. We should discuss what else we want to change to make graphs consistent. My current thinking was that the area graph is most appropriate in graphs that represent "an area under the curve" like loads. But of course we could use them as a style element elsewhere (e.g. use area plots for averages and dots for single values, e.g. in body weight). We should try some options here.

The yellow style of the Short-/Long-term band plot is terrible on both, light and dark background IMHO. This should definitely be improved.

[treiher]

The yellow style of the Short-/Long-term band plot is terrible on both, light and dark background IMHO. This should definitely be improved.

That's true. I think this would be a nice alternative:

Diff

diff --git a/frontend/src/ui/common.rs b/frontend/src/ui/common.rs
index 509bae9..abf5b18 100644
--- a/frontend/src/ui/common.rs
+++ b/frontend/src/ui/common.rs
@@ -17,8 +17,7 @@ pub const COLOR_BODY_FAT_JP3: usize = 4;
 pub const COLOR_BODY_FAT_JP7: usize = 0;
 pub const COLOR_PERIOD_INTENSITY: usize = 0;
 pub const COLOR_LOAD: usize = 1;
-pub const COLOR_LONG_TERM_LOAD: usize = 2;
-pub const COLOR_LONG_TERM_LOAD_BOUNDS: usize = 13;
+pub const COLOR_LONG_TERM_LOAD: usize = 1;
 pub const COLOR_RPE: usize = 0;
 pub const COLOR_SET_VOLUME: usize = 3;
 pub const COLOR_VOLUME_LOAD: usize = 6;
diff --git a/frontend/src/ui/page/training.rs b/frontend/src/ui/page/training.rs
index 67cd2c4..70804db 100644
--- a/frontend/src/ui/page/training.rs
+++ b/frontend/src/ui/page/training.rs
@@ -537,17 +537,7 @@ pub fn view_charts<Ms>(
                     common::PlotData {
                         values_high: long_term_load_high,
                         values_low: Some(long_term_load_low),
-                        plots: common::plot_area_with_border(
-                            common::COLOR_LONG_TERM_LOAD_BOUNDS,
-                            0.3,
-                            2
-                        ),
-                        params: common::PlotParams::primary_range(0., 10.),
-                    },
-                    common::PlotData {
-                        values_high: long_term_load,
-                        values_low: None,
-                        plots: common::plot_line(common::COLOR_LONG_TERM_LOAD),
+                        plots: common::plot_area_with_border(common::COLOR_LONG_TERM_LOAD, 0.3, 0),
                         params: common::PlotParams::primary_range(0., 10.),
                     },
                     common::PlotData {

[senier]

That's true. I think this would be a nice alternative:

I agree that that's better. The only issue that I see is that it shows the same color for short-term and long-term load in the legend. This might be confusing:

Here is another idea which I find quite okay:

[senier]

Some more ideas for the exercise page:

• Use area plots for set volume and volume load
• Use a band plot for RIR (I don't love the color, but orange was worse for that context IMO)
• Remove dots from weight

[senier]

Another idea for the weight chart:

[senier]

Here is an idea for a general approach that we might consider adopting. For volumes (where "area under the curve" is relevant) use area plots with the same color as the line. For plain values or averages use plots with gray areas and a colored line. While this will only work nicely for single value graphs (or stacked graph as Reps+RIR where values have the same kind), it makes those graphs visually more consistent:

[treiher]

I agree that that's better. The only issue that I see is that it shows the same color for short-term and long-term load in the legend. This might be confusing:

I think we should use the same color in the legend as is actually used in the band plot:

Given that, I don't see any reason why we shouldn't use the green one. The grey one looks okay, but I like the green one better.

Some more ideas for the exercise page:

• Use area plots for set volume and volume load

Looks good to me.

• Use a band plot for RIR (I don't love the color, but orange was worse for that context IMO)

I like the idea! I'm just not conviced of the colors. Using the same color just with less opacity looks better in my opinion:

• Remove dots from weight

Removing the dots makes sense for consistency.

Another idea for the weight chart:

In this chart, the actual values are more prominent than the average. I think it should be the other way round. Simply switching both styles might be better, but I think it would still not be great.

Here are some other ideas:

We could use a band plot to visualize the variance of the actual values from the average:

Or use a line plot with less opacity:

The band plot looks nicer to me.

Here is an idea for a general approach that we might consider adopting. For volumes (where "area under the curve" is relevant) use area plots with the same color as the line. For plain values or averages use plots with gray areas and a colored line. While this will only work nicely for single value graphs (or stacked graph as Reps+RIR where values have the same kind), it makes those graphs visually more consistent:

The combination of a colored line and a grey area plot doesn't look so nice to me (especially in the combination with the light green and red line). I would rather omit the grey area plot for averages.

I think it would be also nice to use a band plot to show the variance for averages, similar to the body weight chart shown above. Here is an example for the weight of an exercise. There is a variance due to drop sets:

I would suggest the following general approach:

• For volumes, use area plots of the same color as the line.
• For averages use line plots. For plain values or other additional information, use band plots of the same color as the average but with less opacity.

[senier]

I pushed my current WIP (this will need cleanup later).

Given that, I don't see any reason why we shouldn't use the green one. The grey one looks okay, but I like the green one better.

I implemented that (and fixed the label coloring to support alpha values).

I like the idea! I'm just not conviced of the colors. Using the same color just with less opacity looks better in my opinion:

That's nice. I implemented it that way.

We could use a band plot to visualize the variance of the actual values from the average:
[...]
The band plot looks nicer to me.

I agree - that's a great idea and how I implemented it.

I think it would be also nice to use a band plot to show the variance for averages, similar to the body weight chart shown above. Here is an example for the weight of an exercise. There is a variance due to drop sets:

I implemented this, please have a look (my graph looks much different due to DUP).

• For volumes, use area plots of the same color as the line.
• For averages use line plots. For plain values or other additional information, use band plots of the same color as the average but with less opacity.

Sounds good. Maybe you want to add this to the wiki?

So far there are two open questions:

1. Are the TUT charts considered volume-like? I'm using line plots for now, but this is easily changed.
2. The body fat chart uses lines now. I'm not totally satisfied with it, yet, as it can look pretty chaotic. I don't have a good idea here, though.

[treiher]

I implemented this, please have a look (my graph looks much different due to DUP).

I think the current implementation just shows the minimum and maximum of the average weight (of all trainings sessions at the same day), whereas it should show the minimum and maximum of the actual weight. This would explain the flat line of 26.6 kg when the actual weight varied from 20 kg to 35 kg in the training session:

I'm not sure why there's a tiny band plot visible when the average weight changes. I would expect there to be no band plot if only one weight was used each day, but this is not the case.

• For volumes, use area plots of the same color as the line.
• For averages use line plots. For plain values or other additional information, use band plots of the same color as the average but with less opacity.

Sounds good. Maybe you want to add this to the wiki?

Good idea! I will do that.

So far there are two open questions:

1. Are the TUT charts considered volume-like? I'm using line plots for now, but this is easily changed.

Yes, I think so. TUT also represents a total. So it would make sense to use the same style as for the volume plots.

Also, it would make sense to represent time and RPE the same as weight. These are all averages.

2. The body fat chart uses lines now. I'm not totally satisfied with it, yet, as it can look pretty chaotic. I don't have a good idea here, though.

I also think that this chart is not as nice as the others.

We should use the same style for the body weight as in the body weight chart where the average is more prominent:

An option would be to split the chart into two (one for JP3 and one for JP7) and use the same color, but with different opacity: