feat: route segment personal trend chart

[pixelspark]

Hi @jovandeginste, sorry to bother on your weekend day :-)

I made a quick 'personal trends' chart for workout segments which I think is very useful and cool. (Additionally I capped the height of the workout list on this page to about 640px, since my list for this particular segment is quite long).

This is all very raw, yet works - I can imagine you want to clean up/enhance this a bit before it is ready to go.

Also you may find the use of Intl.NumberFormatter of interest (it shows numbers with the correct character as decimal point depending on the browser settings).

One thing I notices (and is probably also an issue for the other charts): once you zoom in by dragging the chart, you cannot zoom back out. Might want to enable the Apex charts 'reset zoom' button somewhere.

[jovandeginste]

You're not bothering me at all! This is certainly part of the road map, and a welcome addition!

I'll have a look at this later (maybe tomorrow).

[jovandeginste]

I tested it; I changed between scatter and some line graphs, but I can't decide - the line graphs are not always better.

I added back the tooltip (I'm unsure why I removed it in the first place).

[pixelspark]

You're not bothering me at all! This is certainly part of the road map, and a welcome addition!

Well as long as it's not keeping you from doing some actual workouts :-)

I tested it; I changed between scatter and some line graphs, but I can't decide - the line graphs are not always better.

My thinking behind choosing scatter was that in the future we could then add trend lines based on averages/a regression.

In general, try to fix the indentation ...

I noticed it gets very messy in the templates indeed. I am not sure why but my editor (VS Code) is actually formatting it this way on save (I would think based on the project's 'prettier' configuration but it doesn't seem right).

Further detailed response above!

[pixelspark]

OK, changes made. As for the regression, I was thinking to have a regression for the past month, 3 months, year. We can do this completely on the client side (possibly interactive!) using a function I wrote some time ago for another project (note, TypeScript, so just ignore all the type-y bits):

export interface LinearModel {
    slope: number;
    intercept: number;
    r2: number;
}

export function linearRegression(y: number[], x: number[]): LinearModel {
    var lr = {};
    var n = y.length;
    var sum_x = 0;
    var sum_y = 0;
    var sum_xy = 0;
    var sum_xx = 0;
    var sum_yy = 0;

    for (var i = 0; i < y.length; i++) {
        sum_x += x[i]!;
        sum_y += y[i]!;
        sum_xy += x[i]! * y[i]!;
        sum_xx += x[i]! * x[i]!;
        sum_yy += y[i]! * y[i]!;
    }

    const slope = (n * sum_xy - sum_x * sum_y) / (n * sum_xx - sum_x * sum_x);
    return {
        slope,
        intercept: (sum_y - slope * sum_x) / n,
        r2: Math.pow(
            (n * sum_xy - sum_x * sum_y) / Math.sqrt((n * sum_xx - sum_x * sum_x) * (n * sum_yy - sum_y * sum_y)),
            2
        )
    };
}

[pixelspark]

More changes made! Could you have a look?

[pixelspark]

Note, I can't get the workouts list on the route segments detail page to show up on the first line, like the breakdown on the workouts detail page. Maybe you see what's wrong...?

[jovandeginste]

Note, I can't get the workouts list on the route segments detail page to show up on the first line, like the breakdown on the workouts detail page. Maybe you see what's wrong...?

Sorry for the late reply; I'm not sure I see the problem: on my system it seems to work nicely... I added some minor changes which I can push to your branch, to improve the view on smaller screens.