42ee36d0a2
Some checks failed
CI / build-and-test (pull_request) Has been cancelled
- API: дата старта всегда YYYY-MM-DD; фронт: parseRaceDate без двойного T00:00:00 - GET /health с version из package.json; Vite define __FRONTEND_VERSION__ - Футер с версиями клиента/сервера (BEM), сетка app-shell на три ряда - AbortController для карточки старта; ретраи GET при 502–504 и понятные ошибки шлюза - Русские подписи навигации/страниц, lang=ru, без английских фраз в интерфейсе
71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import type { Race } from "../api";
|
||
import { formatRaceDate, isCloseDistance, parseFinishTimeToSeconds, parseRaceDate } from "../lib";
|
||
|
||
type PaceTrendChartProps = {
|
||
races: Race[];
|
||
distanceKm: number;
|
||
};
|
||
|
||
/** Линейный график: время финиша (минуты) по завершённым стартам выбранной дистанции. */
|
||
export function PaceTrendChart(props: PaceTrendChartProps): JSX.Element {
|
||
const { races, distanceKm } = props;
|
||
|
||
const series = races
|
||
.filter(
|
||
(race) =>
|
||
race.status === "completed" &&
|
||
isCloseDistance(race.distanceKm, distanceKm) &&
|
||
parseFinishTimeToSeconds(race.finishTime) != null,
|
||
)
|
||
.sort(
|
||
(a, b) => parseRaceDate(a.date).getTime() - parseRaceDate(b.date).getTime(),
|
||
)
|
||
.map((race) => {
|
||
const seconds = parseFinishTimeToSeconds(race.finishTime)!;
|
||
return { race, minutes: seconds / 60 };
|
||
});
|
||
|
||
if (series.length < 2) {
|
||
return (
|
||
<p className="pace-chart__empty">
|
||
Нужно минимум два завершённых старта с временем на выбранной дистанции.
|
||
</p>
|
||
);
|
||
}
|
||
|
||
const minutes = series.map((s) => s.minutes);
|
||
const minM = Math.min(...minutes);
|
||
const maxM = Math.max(...minutes);
|
||
const range = maxM - minM || 1;
|
||
const n = series.length;
|
||
|
||
const pad = 4;
|
||
const w = 100;
|
||
const h = 36;
|
||
const innerW = w - pad * 2;
|
||
const innerH = h - pad * 2;
|
||
|
||
const points = series
|
||
.map((s, i) => {
|
||
const x = pad + (n === 1 ? innerW / 2 : (i / (n - 1)) * innerW);
|
||
const norm = (maxM - s.minutes) / range;
|
||
const y = pad + (1 - norm) * innerH;
|
||
return `${x},${y}`;
|
||
})
|
||
.join(" ");
|
||
|
||
const last = series[series.length - 1]!;
|
||
|
||
return (
|
||
<div className="pace-chart">
|
||
<svg className="pace-chart__svg" viewBox={`0 0 ${w} ${h}`} role="img" aria-label="Динамика времени на дистанции">
|
||
<polyline className="pace-chart__line" fill="none" points={points} />
|
||
</svg>
|
||
<p className="pace-chart__caption">
|
||
Последний пункт: {formatRaceDate(last.race.date)} — {last.race.finishTime} (
|
||
{last.minutes.toFixed(1)} мин)
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|