ceda9f1877
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>
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
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 (
|
|
<div className={className}>
|
|
<p className="mb-1 text-xs text-gray-500">{t("profileStats.weeklyDistance")}</p>
|
|
<div className="flex h-16 items-end gap-1" role="img" aria-label={t("profileStats.weeklyDistance")}>
|
|
{weeks.map((w) => (
|
|
<div
|
|
key={w.weekStart}
|
|
className="flex-1 rounded-t bg-blue-500/70"
|
|
style={{ height: `${(w.distance / max) * 100}%` }}
|
|
title={formatDistanceKm(w.distance)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|