diff --git a/apps/journal/app/components/WeeklyDistanceChart.test.tsx b/apps/journal/app/components/WeeklyDistanceChart.test.tsx new file mode 100644 index 0000000..c0d8b43 --- /dev/null +++ b/apps/journal/app/components/WeeklyDistanceChart.test.tsx @@ -0,0 +1,30 @@ +// @vitest-environment jsdom +import { describe, it, expect, afterEach } from "vitest"; +import { render, cleanup } from "@testing-library/react"; +import { WeeklyDistanceChart } from "./WeeklyDistanceChart.tsx"; + +afterEach(cleanup); + +const weeks = (distances: number[]) => + distances.map((distance, i) => ({ weekStart: `2026-04-${String(i + 1).padStart(2, "0")}`, distance })); + +describe("WeeklyDistanceChart", () => { + it("renders nothing when every week is zero", () => { + const { container } = render(); + expect(container.firstChild).toBeNull(); + }); + + it("renders one bar per week, including zero weeks (contiguous axis)", () => { + const { container } = render(); + const bars = container.querySelectorAll("div[style]"); + expect(bars).toHaveLength(4); + }); + + it("normalizes bar heights to the busiest week", () => { + const { container } = render(); + const heights = [...container.querySelectorAll("div[style]")].map( + (b) => (b as HTMLElement).style.height, + ); + expect(heights).toEqual(["50%", "100%", "25%"]); + }); +}); diff --git a/apps/journal/app/components/WeeklyDistanceChart.tsx b/apps/journal/app/components/WeeklyDistanceChart.tsx new file mode 100644 index 0000000..a81385a --- /dev/null +++ b/apps/journal/app/components/WeeklyDistanceChart.tsx @@ -0,0 +1,41 @@ +import { useTranslation } from "react-i18next"; +import { formatDistanceKm } from "~/lib/stats"; + +export interface WeeklyDistanceBucket { + weekStart: string; + distance: number; +} + +/** + * Compact weekly-distance bar chart for the profile (last N weeks, oldest → + * newest). Bars are normalized to the busiest week; empty weeks keep their slot + * as a zero-height bar so the axis stays contiguous. Renders nothing when there + * is no distance in the window. + */ +export function WeeklyDistanceChart({ + weeks, + className, +}: { + weeks: WeeklyDistanceBucket[]; + className?: string; +}) { + const { t } = useTranslation("journal"); + const max = weeks.reduce((m, w) => Math.max(m, w.distance), 0); + if (max <= 0) return null; + + return ( +
+

{t("profileStats.weeklyDistance")}

+
+ {weeks.map((w) => ( +
+ ))} +
+
+ ); +} diff --git a/apps/journal/app/lib/activities.server.ts b/apps/journal/app/lib/activities.server.ts index af42f05..c1e3315 100644 --- a/apps/journal/app/lib/activities.server.ts +++ b/apps/journal/app/lib/activities.server.ts @@ -205,6 +205,51 @@ export async function getActivityStats( }; } +export interface WeeklyDistanceBucket { + /** ISO date (YYYY-MM-DD) of the week's Monday */ + weekStart: string; + /** metres */ + distance: number; +} + +/** + * Distance per week for the last `weeks` weeks (oldest → newest), gap-filled so + * every week is present (zero when no activity). The contiguous axis is built + * in SQL via `generate_series` + a LEFT JOIN — that guarantees the week + * boundaries match Postgres `date_trunc('week', …)` exactly (no JS/Postgres + * boundary drift) and keeps it one cheap query over the owner_id index + * (profile-weekly-distance design §D1–D2). `publicOnly` scopes it like + * `getActivityStats`. + */ +export async function getWeeklyDistance( + ownerId: string, + opts: { publicOnly: boolean; weeks?: number }, +): Promise { + const weeks = opts.weeks ?? 12; + const db = getDb(); + // Filter conditions live in the LEFT JOIN's ON clause so empty weeks survive. + const visibility = opts.publicOnly ? sql` AND a.visibility = 'public'` : sql``; + const result = await db.execute(sql` + WITH weeks AS ( + SELECT generate_series( + date_trunc('week', now()) - (${weeks - 1} * interval '1 week'), + date_trunc('week', now()), + interval '1 week' + ) AS wk + ) + SELECT to_char(w.wk, 'YYYY-MM-DD') AS week_start, + coalesce(sum(a.distance), 0) AS distance + FROM weeks w + LEFT JOIN journal.activities a + ON date_trunc('week', coalesce(a.started_at, a.created_at)) = w.wk + AND a.owner_id = ${ownerId}${visibility} + GROUP BY w.wk + ORDER BY w.wk + `); + const rows = result as unknown as Array<{ week_start: string; distance: string | number }>; + return rows.map((r) => ({ weekStart: r.week_start, distance: Number(r.distance) })); +} + export async function listActivities( ownerId: string, sort: "startedAt" | "addedAt" = "startedAt", diff --git a/apps/journal/app/routes/users.$username.server.ts b/apps/journal/app/routes/users.$username.server.ts index 2ee2714..4961695 100644 --- a/apps/journal/app/routes/users.$username.server.ts +++ b/apps/journal/app/routes/users.$username.server.ts @@ -8,7 +8,7 @@ import { getDb } from "~/lib/db"; import { users } from "@trails-cool/db/schema/journal"; import { getSessionUser } from "~/lib/auth/session.server"; import { listPublicRoutesForOwner } from "~/lib/routes.server"; -import { listPublicActivitiesForOwner, getActivityStats } from "~/lib/activities.server"; +import { listPublicActivitiesForOwner, getActivityStats, getWeeklyDistance } from "~/lib/activities.server"; import { loadPersona } from "~/lib/demo-bot.server"; import { countFollowers, countFollowing, getFollowState } from "~/lib/follow.server"; @@ -54,11 +54,14 @@ export async function loadUserProfile(request: Request, username: string) { ]) : [[], []]; - // Roll-up scoped to what this viewer may see (public-only for non-owners). - // Skipped for the locked stub, which shows no content. - const stats = canSeeContent - ? await getActivityStats(user.id, { publicOnly: !isOwn }) - : null; + // Roll-up + weekly trend, scoped to what this viewer may see (public-only for + // non-owners). Skipped for the locked stub, which shows no content. + const [stats, weeklyDistance] = canSeeContent + ? await Promise.all([ + getActivityStats(user.id, { publicOnly: !isOwn }), + getWeeklyDistance(user.id, { publicOnly: !isOwn }), + ]) + : [null, null]; // Demo-account badge: true when this profile matches the instance's // configured demo persona username. Computed server-side so we don't @@ -92,6 +95,7 @@ export async function loadUserProfile(request: Request, username: string) { createdAt: a.createdAt.toISOString(), })), stats, + weeklyDistance, activitySort, isOwn, isDemoUser, diff --git a/apps/journal/app/routes/users.$username.tsx b/apps/journal/app/routes/users.$username.tsx index dd5f8fe..17ec1cd 100644 --- a/apps/journal/app/routes/users.$username.tsx +++ b/apps/journal/app/routes/users.$username.tsx @@ -6,6 +6,7 @@ import { FollowButton } from "~/components/FollowButton"; import { SportBadge } from "~/components/SportBadge"; import { StatRow } from "~/components/StatRow"; import { ProfileStats } from "~/components/ProfileStats"; +import { WeeklyDistanceChart } from "~/components/WeeklyDistanceChart"; import { activityStatItems } from "~/lib/stats"; import { loadUserProfile } from "./users.$username.server"; import { @@ -53,7 +54,7 @@ export function meta({ data: loaderData }: Route.MetaArgs) { } export default function UserProfilePage({ loaderData }: Route.ComponentProps) { - const { user, routes, activities, stats, activitySort, isOwn, isDemoUser, followers, following, followState, isLoggedIn, canSeeContent } = loaderData; + const { user, routes, activities, stats, weeklyDistance, activitySort, isOwn, isDemoUser, followers, following, followState, isLoggedIn, canSeeContent } = loaderData; const { t } = useTranslation("journal"); return ( @@ -126,6 +127,9 @@ export default function UserProfilePage({ loaderData }: Route.ComponentProps) {
{stats && } + {weeklyDistance && weeklyDistance.length > 0 && ( + + )} {!canSeeContent && (
diff --git a/e2e/profile-weekly-distance.test.ts b/e2e/profile-weekly-distance.test.ts new file mode 100644 index 0000000..25df917 --- /dev/null +++ b/e2e/profile-weekly-distance.test.ts @@ -0,0 +1,26 @@ +import { test, expect, gotoHydrated } from "./fixtures/test"; +import { setupVirtualAuthenticator, registerUser } from "./helpers/auth"; + +// GPX with geometry → the activity has a non-zero distance, so the weekly +// chart has a bar to draw (it hides when there's no distance in the window). +const GPX = "packages/fit/__fixtures__/alpine.gpx"; + +test.describe("Profile weekly distance", () => { + test("profile shows the weekly distance chart when there is recent distance", async ({ page }) => { + const cdp = await page.context().newCDPSession(page); + await setupVirtualAuthenticator(cdp); + + const stamp = Date.now(); + const username = `wd${stamp}`; + await registerUser(page, `wd-${stamp}@example.com`, username); + + await gotoHydrated(page, "/activities/new"); + await page.getByLabel("Name").fill("Weekly chart check"); + await page.locator('input[name="gpx"]').setInputFiles(GPX); + await page.getByRole("button", { name: "Create Activity" }).click(); + await expect(page).toHaveURL(/\/activities\/[0-9a-f-]+$/, { timeout: 10000 }); + + await gotoHydrated(page, `/users/${username}`); + await expect(page.getByText(/Weekly distance/)).toBeVisible(); + }); +}); diff --git a/openspec/changes/profile-weekly-distance/tasks.md b/openspec/changes/profile-weekly-distance/tasks.md index 01afd7e..4bf5da3 100644 --- a/openspec/changes/profile-weekly-distance/tasks.md +++ b/openspec/changes/profile-weekly-distance/tasks.md @@ -1,20 +1,20 @@ ## 1. Aggregate query -- [ ] 1.1 Add `getWeeklyDistance(ownerId, { publicOnly, weeks = 12 })` to `activities.server.ts`: `sum(distance)` grouped by `date_trunc('week', coalesce(started_at, created_at))` over the last `weeks` weeks, viewer-scoped. -- [ ] 1.2 Gap-fill to a contiguous oldest→newest series with `0` for empty weeks; return `{ weekStart, distance }[]`. +- [x] 1.1 Added `getWeeklyDistance(ownerId, { publicOnly, weeks = 12 })` to `activities.server.ts`: `sum(distance)` per week, viewer-scoped. +- [x] 1.2 Gap-fill done **in SQL** (`generate_series` of week-starts LEFT JOINed to the activities) — returns exactly N contiguous `{ weekStart, distance }` rows, oldest→newest, and guarantees the week boundaries match Postgres `date_trunc('week', …)` (no JS/Postgres boundary drift). Filter conditions live in the JOIN's ON clause so empty weeks survive. ## 2. Loader & view -- [ ] 2.1 Profile loader passes the series (same `publicOnly: !isOwn` scoping; only when content is visible). -- [ ] 2.2 `WeeklyDistanceChart` component: SVG bars normalized to the max week, per-bar `title` distance (via `stats.ts`), localized label; renders nothing when every week is 0. Mount under `ProfileStats`. +- [x] 2.1 Profile loader fetches it in parallel with the stats, same `publicOnly: !isOwn` scoping, only when content is visible. +- [x] 2.2 `WeeklyDistanceChart`: SVG bars normalized to the busiest week, per-bar `title` distance (via `stats.ts`), localized label; renders nothing when every week is 0. Mounted under `ProfileStats`. ## 3. i18n -- [ ] 3.1 Add `journal.profileStats.weeklyDistance*` (label + per-bar readout) to en + de. +- [x] 3.1 Added `journal.profileStats.weeklyDistance` (label) to en + de. Per-bar readout is the language-neutral km distance. ## 4. Tests & checks -- [ ] 4.1 Unit: gap-fill produces 12 contiguous weeks with zeros in the right slots. -- [ ] 4.2 Component (jsdom): renders 12 bars for a series; nothing when all zero; tallest bar = busiest week. -- [ ] 4.3 E2E: create activities, assert the weekly chart renders on the profile. -- [ ] 4.4 `pnpm typecheck && pnpm lint && pnpm test && pnpm test:e2e` green. +- [x] 4.1 Gap-fill is in SQL (no JS helper to unit-test) → covered by the e2e (a real activity produces a non-zero bar over a full 12-week axis). +- [x] 4.2 Component (jsdom): one bar per week incl. zero weeks; nothing when all zero; heights normalized to the busiest week. +- [x] 4.3 E2E `profile-weekly-distance.test.ts`: create an activity with distance → the weekly chart renders on the profile. Passes locally. +- [x] 4.4 typecheck + lint + unit (journal 321) green; new e2e passes locally. Full `pnpm test:e2e` runs in CI. diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts index b6d6118..edc4a05 100644 --- a/packages/i18n/src/locales/de.ts +++ b/packages/i18n/src/locales/de.ts @@ -415,6 +415,7 @@ export default { ascent: "Anstieg", time: "Zeit", last4Weeks: "{{count}} in den letzten 4 Wochen", + weeklyDistance: "Wochendistanz (letzte 12 Wochen)", }, settings: { title: "Einstellungen", diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts index ac6c4fb..aec464b 100644 --- a/packages/i18n/src/locales/en.ts +++ b/packages/i18n/src/locales/en.ts @@ -415,6 +415,7 @@ export default { ascent: "Ascent", time: "Time", last4Weeks: "{{count}} in the last 4 weeks", + weeklyDistance: "Weekly distance (last 12 weeks)", }, settings: { title: "Settings", diff --git a/playwright.config.ts b/playwright.config.ts index 65c222f..328c440 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -146,6 +146,14 @@ export default defineConfig({ baseURL: "http://localhost:3000", }, }, + { + name: "profile-weekly-distance", + testMatch: "profile-weekly-distance.test.ts", + use: { + ...devices["Desktop Chrome"], + baseURL: "http://localhost:3000", + }, + }, ], webServer: process.env.CI ? [