diff options
Diffstat (limited to 'web/templates.templ')
| -rw-r--r-- | web/templates.templ | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/web/templates.templ b/web/templates.templ index 9e143b4..1cda7f2 100644 --- a/web/templates.templ +++ b/web/templates.templ @@ -13,7 +13,7 @@ templ Layout(title string, content templ.Component) { <body> <header class="site-header"> <a class="brand" href="/">biking_home</a> - <nav class="nav"><a href="/">Rides</a><a href="/sync">Sync Strava</a></nav> + <nav class="nav"><a href="/">Rides</a><a href="/analytics">Analytics</a><a href="/sync">Sync Strava</a></nav> </header> <main class="container"> @content @@ -117,6 +117,26 @@ templ RidesContent(data RidesPageData) { <script type="module" src="/static/ride-filters.js"></script> } +templ AnalyticsPage(data AnalyticsPageData) { + @Layout("Analytics", AnalyticsContent(data)) +} + +templ AnalyticsContent(data AnalyticsPageData) { + <p class="eyebrow">Analytics</p> + <h1>Ride analytics</h1> + <p class="lead">One point per ride: average speed on the x axis, Cotacol per 100 km on the y axis.</p> + <section class="panel analytics-panel"> + <div class="section-heading"><div><p class="eyebrow">Chart</p><h2>Speed vs. Cotacol per 100 km</h2></div></div> + if len(data.Points) == 0 { + <div class="empty">No eligible rides yet. <a href="/sync">Import rides to see the chart.</a></div> + } else { + <div class="analytics-chart"><canvas id="analytics-chart" role="img" aria-label="Scatter plot of ride average speed against Cotacol per 100 km"></canvas></div> + } + </section> + @templ.JSONScript("analytics-points", data.Points) + <script type="module" src="/static/analytics.js"></script> +} + templ RideDetailPage(data RideDetailView) { @Layout("Ride detail", RideDetailContent(data)) } |