diff options
Diffstat (limited to 'web/templates.templ')
| -rw-r--r-- | web/templates.templ | 25 |
1 files changed, 23 insertions, 2 deletions
diff --git a/web/templates.templ b/web/templates.templ index 71df20b..f2b62f8 100644 --- a/web/templates.templ +++ b/web/templates.templ @@ -101,16 +101,37 @@ 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-filters-panel"> + <form id="analytics-filters" class="ride-filters" method="get" action="/analytics" aria-label="Analytics filters"> + <div class="section-heading"> + <div><p class="eyebrow">Refine</p><h2>Analyses</h2></div> + <div class="ride-filter-actions"><button class="button" type="submit">Apply filters</button><a class="button secondary" href={ templ.URL(data.Filter.ResetURL) }>Reset</a></div> + </div> + <div class="ride-filter-ranges"> + @RideRangeFilter(rideDistanceFilterConfig(data.Filter)) + </div> + </form> + </section> <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> + <div class="section-heading"> + <div><p class="eyebrow">Chart</p><h2>Speed vs. Cotacol per 100 km</h2></div> + if len(data.Points) > 0 { + <span class="section-count" data-analytics-count>{ formatRideCount(len(data.Points)) }</span> + } + </div> if len(data.Points) == 0 { - <div class="empty">No eligible rides yet. <a href="/sync">Import rides to see the chart.</a></div> + if data.Filter.Active { + <div class="empty">No rides match the selected filters. <a href={ templ.URL(data.Filter.ResetURL) }>Clear filters.</a></div> + } else { + <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" tabindex="0" role="img" aria-label="Scatter plot of ride average speed against Cotacol per 100 km"></canvas></div> <output id="analytics-hover" class="analytics-hover" aria-live="polite">Hover a point to inspect a ride.</output> } </section> @templ.JSONScript("analytics-points", data.Points) + <script type="module" src="/static/ride-filters.js"></script> <script type="module" src="/static/analytics.js"></script> } |