profile-weekly-distance: weekly distance bar chart on the profile
Implements the profile-weekly-distance change (specs/profile-weekly-distance):
- getWeeklyDistance(ownerId, { publicOnly, weeks=12 }) in activities.server.ts:
one query that gap-fills in SQL — generate_series of week-starts LEFT JOINed
to activities — so it returns exactly 12 contiguous { weekStart, distance }
rows with matching Postgres week boundaries, viewer-scoped, no cache, no
schema change.
- WeeklyDistanceChart: SVG bars normalized to the busiest week (empty weeks keep
their slot as zero-height bars), per-bar title distance, localized label;
renders nothing when there's no distance in the window. Mounted under the
ProfileStats header.
- i18n journal.profileStats.weeklyDistance (en + de).
Tests: WeeklyDistanceChart component (jsdom: bar count incl. zero weeks, empty
→ hidden, normalization); e2e creates an activity with distance and asserts the
chart renders. typecheck + lint + unit (journal 321) green; verified in the
browser.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
parent
e0a92b56aa
commit
ceda9f1877
10 changed files with 176 additions and 16 deletions
30
apps/journal/app/components/WeeklyDistanceChart.test.tsx
Normal file
30
apps/journal/app/components/WeeklyDistanceChart.test.tsx
Normal file
|
|
@ -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(<WeeklyDistanceChart weeks={weeks([0, 0, 0])} />);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it("renders one bar per week, including zero weeks (contiguous axis)", () => {
|
||||
const { container } = render(<WeeklyDistanceChart weeks={weeks([1000, 0, 2000, 0])} />);
|
||||
const bars = container.querySelectorAll("div[style]");
|
||||
expect(bars).toHaveLength(4);
|
||||
});
|
||||
|
||||
it("normalizes bar heights to the busiest week", () => {
|
||||
const { container } = render(<WeeklyDistanceChart weeks={weeks([5000, 10000, 2500])} />);
|
||||
const heights = [...container.querySelectorAll("div[style]")].map(
|
||||
(b) => (b as HTMLElement).style.height,
|
||||
);
|
||||
expect(heights).toEqual(["50%", "100%", "25%"]);
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue