feat: power curve chart on activity page (single-activity MMP)
This commit is contained in:
Davide Scaini
@@ -0,0 +1,84 @@
|
||||
# CLAUDE.md
|
||||
|
||||
Behavioral guidelines to reduce common LLM coding mistakes. Merge with project-specific instructions as needed.
|
||||
|
||||
**Tradeoff:** These guidelines bias toward caution over speed. For trivial tasks, use judgment.
|
||||
|
||||
## 1. Think Before Coding
|
||||
|
||||
**Don't assume. Don't hide confusion. Surface tradeoffs.**
|
||||
|
||||
Before implementing:
|
||||
- State your assumptions explicitly. If uncertain, ask.
|
||||
- If multiple interpretations exist, present them - don't pick silently.
|
||||
- If a simpler approach exists, say so. Push back when warranted.
|
||||
- If something is unclear, stop. Name what's confusing. Ask.
|
||||
|
||||
## 2. Simplicity First
|
||||
|
||||
**Minimum code that solves the problem. Nothing speculative.**
|
||||
|
||||
- No features beyond what was asked.
|
||||
- No abstractions for single-use code.
|
||||
- No "flexibility" or "configurability" that wasn't requested.
|
||||
- No error handling for impossible scenarios.
|
||||
- If you write 200 lines and it could be 50, rewrite it.
|
||||
|
||||
Ask yourself: "Would a senior engineer say this is overcomplicated?" If yes, simplify.
|
||||
|
||||
## 3. Surgical Changes
|
||||
|
||||
**Touch only what you must. Clean up only your own mess.**
|
||||
|
||||
When editing existing code:
|
||||
- Don't "improve" adjacent code, comments, or formatting.
|
||||
- Don't refactor things that aren't broken.
|
||||
- Match existing style, even if you'd do it differently.
|
||||
- If you notice unrelated dead code, mention it - don't delete it.
|
||||
|
||||
When your changes create orphans:
|
||||
- Remove imports/variables/functions that YOUR changes made unused.
|
||||
- Don't remove pre-existing dead code unless asked.
|
||||
|
||||
The test: Every changed line should trace directly to the user's request.
|
||||
|
||||
## 4. Goal-Driven Execution
|
||||
|
||||
**Define success criteria. Loop until verified.**
|
||||
|
||||
Transform tasks into verifiable goals:
|
||||
- "Add validation" → "Write tests for invalid inputs, then make them pass"
|
||||
- "Fix the bug" → "Write a test that reproduces it, then make it pass"
|
||||
- "Refactor X" → "Ensure tests pass before and after"
|
||||
|
||||
For multi-step tasks, state a brief plan:
|
||||
```
|
||||
1. [Step] → verify: [check]
|
||||
2. [Step] → verify: [check]
|
||||
3. [Step] → verify: [check]
|
||||
```
|
||||
|
||||
Strong success criteria let you loop independently. Weak criteria ("make it work") require constant clarification.
|
||||
|
||||
---
|
||||
|
||||
**These guidelines are working if:** fewer unnecessary changes in diffs, fewer rewrites due to overcomplication, and clarifying questions come before implementation rather than after mistakes.
|
||||
|
||||
---
|
||||
|
||||
## Project notes
|
||||
|
||||
### Activity page power curve — comparison lines (future)
|
||||
|
||||
The activity page shows a single-activity power curve from `detail.mmp` (pre-computed at
|
||||
extract time, zero extra requests). Adding "last 365 d / last 90 d" comparison overlays
|
||||
requires the pre-computed `power_curve.last_365d` / `power_curve.last_90d` arrays, which
|
||||
currently live only in `athlete.json`. Loading `athlete.json` at activity-page time is
|
||||
wasteful (it's a large file with all activity summaries).
|
||||
|
||||
**Clean solution when the time comes:** at `render` time (inside `_merge_edits` or a
|
||||
dedicated step in `bincio/render/cli.py`), bake the comparison curves into each activity's
|
||||
detail JSON — e.g. add a `power_curve_context` key with `all_time`, `last_365d`, `last_90d`.
|
||||
The activity page then gets them for free with the detail JSON it already fetches.
|
||||
Requires a one-time `bincio render` (no code changes to the extractor).
|
||||
Component to update: `site/src/components/ActivityPowerCurve.svelte`.
|
||||
@@ -6,6 +6,7 @@
|
||||
import { formatDistance, formatDuration, formatElevation, formatSpeed, formatDate, formatTime, formatElapsed, sportIcon, sportLabel, sportColor } from '../lib/format';
|
||||
import ActivityMap from './ActivityMap.svelte';
|
||||
import ActivityCharts from './ActivityCharts.svelte';
|
||||
import ActivityPowerCurve from './ActivityPowerCurve.svelte';
|
||||
import EditDrawer from './EditDrawer.svelte';
|
||||
import { loadActivity, loadTimeseries } from '../lib/dataloader';
|
||||
|
||||
@@ -489,6 +490,14 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Power curve -->
|
||||
{#if detail?.mmp?.length}
|
||||
<div class="mt-4 bg-zinc-900 rounded-xl border border-zinc-800 p-4">
|
||||
<p class="text-xs font-semibold text-zinc-500 uppercase tracking-wide mb-3">Power curve</p>
|
||||
<ActivityPowerCurve mmp={detail.mmp} ftp_w={athlete?.ftp_w ?? null} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Laps -->
|
||||
{#if detail?.laps?.length}
|
||||
<div class="mt-4 bg-zinc-900 rounded-xl border border-zinc-800 overflow-hidden">
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import * as Plot from '@observablehq/plot';
|
||||
import { onMount } from 'svelte';
|
||||
import type { MmpCurve } from '../lib/types';
|
||||
|
||||
export let mmp: MmpCurve;
|
||||
export let ftp_w: number | null = null;
|
||||
|
||||
let chartEl: HTMLElement;
|
||||
|
||||
function formatDuration(s: number): string {
|
||||
if (s < 60) return `${s}s`;
|
||||
if (s < 3600) return `${Math.round(s / 60)}min`;
|
||||
return `${s / 3600}h`;
|
||||
}
|
||||
|
||||
function render() {
|
||||
if (!chartEl || !mmp.length) return;
|
||||
chartEl.innerHTML = '';
|
||||
|
||||
const axisColor = document.documentElement.getAttribute('data-theme') === 'light'
|
||||
? '#52525b' : '#a1a1aa';
|
||||
|
||||
const data = mmp.map(([d, w]) => ({ d, w }));
|
||||
|
||||
const chart = Plot.plot({
|
||||
width: chartEl.clientWidth || 600,
|
||||
height: 220,
|
||||
marginLeft: 52,
|
||||
marginBottom: 36,
|
||||
style: { background: 'transparent', color: axisColor },
|
||||
x: {
|
||||
type: 'log',
|
||||
label: 'Duration',
|
||||
tickFormat: (d: number) => formatDuration(d),
|
||||
grid: true,
|
||||
domain: [data[0].d, Math.max(7200, data[data.length - 1].d)],
|
||||
},
|
||||
y: { label: 'Avg power (W)', grid: true, zero: true },
|
||||
marks: [
|
||||
Plot.line(data, {
|
||||
x: 'd', y: 'w',
|
||||
stroke: '#f97316',
|
||||
strokeWidth: 2,
|
||||
curve: 'monotone-x',
|
||||
}),
|
||||
Plot.dot(data, {
|
||||
x: 'd', y: 'w',
|
||||
fill: '#f97316',
|
||||
r: 3,
|
||||
tip: true,
|
||||
title: (d: any) => `${formatDuration(d.d)}: ${d.w} W`,
|
||||
}),
|
||||
...(ftp_w ? [
|
||||
Plot.ruleY([ftp_w], { stroke: '#71717a', strokeDasharray: '4 3' }),
|
||||
Plot.text([{ x: data[data.length - 1].d, y: ftp_w }], {
|
||||
x: 'x', y: 'y',
|
||||
text: () => `FTP ${ftp_w} W`,
|
||||
fill: '#71717a',
|
||||
fontSize: 11,
|
||||
dy: -6,
|
||||
textAnchor: 'end',
|
||||
}),
|
||||
] : []),
|
||||
],
|
||||
});
|
||||
|
||||
chartEl.appendChild(chart);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
render();
|
||||
const ro = new ResizeObserver(render);
|
||||
ro.observe(chartEl);
|
||||
const mo = new MutationObserver(render);
|
||||
mo.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
|
||||
return () => { ro.disconnect(); mo.disconnect(); };
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
:global(.plot-tip text) { fill: #18181b !important; }
|
||||
</style>
|
||||
|
||||
<div bind:this={chartEl} class="w-full min-h-[220px]"></div>
|
||||
Reference in New Issue
Block a user