brut/bincio-activity
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Activity stats: fixed-position pairs so optional values don't shift layout

Browse Source
This commit is contained in:
Davide Scaini
2026-05-17 09:15:11 +02:00
parent 7953e05241
commit 9521a64da4
1 changed files with 65 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/ActivityDetail.svelte
+65 -37
View File
@@ -234,25 +234,47 @@
return { label: MODE_LABEL[colorMode], min: fmt(minV), max: fmt(maxV) };
})();
const stat = (label: string, value: string, key?: string) => ({ label, value, key });
type Stat = { label: string; value: string; key?: string };
const stat = (label: string, value: string, key?: string): Stat => ({ label, value, key });
$: hiddenStats = new Set<string>((detail?.custom as any)?.hide_stats ?? []);
$: stats = [
stat('Distance', formatDistance(activity.distance_m)),
stat('Moving time', formatDuration(activity.moving_time_s ?? activity.duration_s)),
stat('Elevation ↑', formatElevation(activity.elevation_gain_m), 'elevation'),
...(detail?.climbing_vam_mh != null ? [
stat('Climbing VAM', `${detail.climbing_vam_mh.toLocaleString()} m/h`, 'elevation'),
] : []),
stat('Avg speed', formatSpeed(activity.avg_speed_kmh), 'speed'),
stat('Max speed', formatSpeed(activity.max_speed_kmh), 'speed'),
stat('Avg HR', activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—', 'heart_rate'),
stat('Max HR', activity.max_hr_bpm ? `${activity.max_hr_bpm} bpm` : '—', 'heart_rate'),
...(activity.avg_power_w != null ? [
stat('Avg power', `${activity.avg_power_w} W`, 'power'),
stat('NP', npPower != null ? `${npPower} W` : '—', 'power'),
] : []),
stat('Cadence', activity.avg_cadence_rpm ? `${activity.avg_cadence_rpm} rpm` : '—', 'cadence'),
].filter(s => !s.key || !hiddenStats.has(s.key));
// Fixed-position pairs: null = empty slot. Pairing is always preserved regardless
// of which optional values (VAM, power) are available.
$: statRows = (() => {
const h = hiddenStats;
const vis = (s: Stat | null): Stat | null => s && (!s.key || !h.has(s.key)) ? s : null;
const rows: [Stat | null, Stat | null][] = [
[
stat('Distance', formatDistance(activity.distance_m)),
stat('Moving time', formatDuration(activity.moving_time_s ?? activity.duration_s)),
],
[
stat('Elevation ↑', formatElevation(activity.elevation_gain_m), 'elevation'),
detail?.climbing_vam_mh != null
? stat('Climbing VAM', `${detail.climbing_vam_mh.toLocaleString()} m/h`, 'elevation')
: null,
],
[
stat('Avg speed', formatSpeed(activity.avg_speed_kmh), 'speed'),
stat('Max speed', formatSpeed(activity.max_speed_kmh), 'speed'),
],
[
stat('Avg HR', activity.avg_hr_bpm ? `${activity.avg_hr_bpm} bpm` : '—', 'heart_rate'),
stat('Max HR', activity.max_hr_bpm ? `${activity.max_hr_bpm} bpm` : '—', 'heart_rate'),
],
...(activity.avg_power_w != null ? [[
stat('Avg power', `${activity.avg_power_w} W`, 'power'),
stat('NP', npPower != null ? `${npPower} W` : '—', 'power'),
] as [Stat, Stat]] : []),
[
stat('Cadence', activity.avg_cadence_rpm ? `${activity.avg_cadence_rpm} rpm` : '—', 'cadence'),
null,
],
];
return rows
.map(([a, b]) => [vis(a), vis(b)] as [Stat | null, Stat | null])
.filter(([a, b]) => a !== null || b !== null);
})();
</script>
<svelte:window on:keydown={onKeydown} />
@@ -431,25 +453,31 @@
<!-- Right column: stats summary -->
<div class="grid grid-cols-2 gap-px bg-zinc-800 rounded-xl overflow-hidden">
{#each stats as s}
{@const cm =
s.key === 'speed' && hasSpeedTrack ? 'speed' :
s.key === 'heart_rate' && hasHrTrack ? 'hr' :
s.key === 'power' && hasPowerTrack ? 'power' :
s.key === 'elevation' && hasElevTrack ? 'elevation' :
s.key === 'cadence' && hasCadenceTrack ? 'cadence' : null}
<div
class="bg-zinc-900 px-4 py-3 transition-colors {cm ? 'hover:bg-zinc-800 cursor-pointer' : ''} {cm && stickyMode === cm ? 'ring-1 ring-inset ring-white/25' : ''}"
role={cm ? 'button' : 'none'}
tabindex={cm ? 0 : -1}
on:mouseenter={() => { if (cm) colorMode = cm; }}
on:mouseleave={() => { colorMode = stickyMode ?? 'default'; }}
on:click={() => handleStatClick(cm)}
on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleStatClick(cm); } }}
>
<p class="text-2xl font-bold text-white">{s.value}</p>
<p class="text-xs text-zinc-500">{s.label}</p>
</div>
{#each statRows as [left, right]}
{#each [left, right] as s}
{@const cm =
s?.key === 'speed' && hasSpeedTrack ? 'speed' :
s?.key === 'heart_rate' && hasHrTrack ? 'hr' :
s?.key === 'power' && hasPowerTrack ? 'power' :
s?.key === 'elevation' && hasElevTrack ? 'elevation' :
s?.key === 'cadence' && hasCadenceTrack ? 'cadence' : null}
{#if s}
<div
class="bg-zinc-900 px-4 py-3 transition-colors {cm ? 'hover:bg-zinc-800 cursor-pointer' : ''} {cm && stickyMode === cm ? 'ring-1 ring-inset ring-white/25' : ''}"
role={cm ? 'button' : 'none'}
tabindex={cm ? 0 : -1}
on:mouseenter={() => { if (cm) colorMode = cm; }}
on:mouseleave={() => { colorMode = stickyMode ?? 'default'; }}
on:click={() => handleStatClick(cm)}
on:keydown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleStatClick(cm); } }}
>
<p class="text-2xl font-bold text-white">{s.value}</p>
<p class="text-xs text-zinc-500">{s.label}</p>
</div>
{:else}
<div class="bg-zinc-900 px-4 py-3"></div>
{/if}
{/each}
{/each}
{#if detail?.gear}
<div class="bg-zinc-900 px-4 py-3 col-span-2">