trails-cool/trails
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
trails/openspec/changes/journal-elevation-profile/tasks.md
Ullrich Schäfer 536a8f98b9
journal-elevation-profile: elevation chart + map↔chart sync 
Implements the journal-elevation-profile change (specs/journal-elevation-profile):

- gpx: `elevationSeries(tracks)` → { d, e, lat, lng }[] with cumulative distance,
  downsampled (keeps first/last), empty when <2 points carry elevation.
- ElevationProfile: read-only SVG area chart (vertical gradient fill), highest/
  lowest summary + a hover readout. Reports hovered index (onActive) and clicked
  index (onSeek); draws a marker at the active index. Renders nothing for an
  empty series.
- RouteMapThumbnail: ActiveMarker (CircleMarker at the chart's active point),
  HoverTracker (route hover → nearest sample → onHoverIndex), Recenter (panTo on
  chart click). Props forwarded through ClientMap.
- Wired into the activity + route detail pages via a shared activeIndex/centerOn
  state; loaders expose the series (activity reuses the moving-time parse).
- i18n journal.elevation.{highest,lowest} in en + de.

Ascent/descent stay in the stat row (#532); the chart summary shows highest/
lowest to avoid duplication.

Tests: elevationSeries unit; ElevationProfile component (jsdom); e2e creates an
activity from an elevation GPX and asserts the chart renders. typecheck + lint +
unit (gpx 67, journal 315) green.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-12 15:34:45 +02:00

1.9 KiB
Raw Blame History

1. Series helper

  • 1.1 elevationSeries(tracks, maxPoints=400) in @trails-cool/gpx → { d, e, lat, lng }[], downsampled (keeps first/last), empty when <2 points carry elevation; unit-tested.
  • 1.2 Expose the series from the route + activity detail loaders (one parse; activity reuses the moving-time parse). Highest/lowest are computed in the chart; ascent/descent stay in the stat row.

2. Chart component

  • 2.1 Presentational ElevationProfile SVG area chart (vertical gradient fill) with a highest/lowest summary + a hover readout (distance · elevation).
  • 2.2 Renders nothing when the series has <2 points.

3. Active-distance interaction

  • 3.1 Lift a shared activeIndex | null (+ centerOn) above the detail page's map + chart.
  • 3.2 Chart hover → onActive(index); map draws a CircleMarker at that sample's lat/lng.
  • 3.3 Map route hover → HoverTracker finds the nearest sample → onHoverIndex; chart draws a crosshair + dot.
  • 3.4 Chart pointer-down → onSeek bumps centerOn; map panTos that point (read-only, no data change).

4. Wire-in & i18n

  • 4.1 Mounted in routes.$id.tsx and activities.$id.tsx (props forwarded through ClientMap).
  • 4.2 Add journal.elevation.{highest,lowest} to en + de.

5. Tests & checks

  • 5.1 Unit: elevationSeries (cumulative distance, flatten segments, downsample first/last, no-elevation → empty).
  • 5.2 Component (jsdom): chart renders for a series + highest/lowest summary; nothing for a too-short series; marker on active; onSeek on pointer-down.
  • 5.3 E2E: create an activity from an elevation GPX, assert the profile chart + summary render (e2e/elevation-profile.test.ts, registered in playwright.config.ts). Passes locally.
  • 5.4 typecheck + lint + unit (gpx 67, journal 315) green; new e2e passes locally. Full pnpm test:e2e runs in CI.