fix(frontend): sort completed races and show pace scale

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "calendar-run-frontend",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "calendar-run-frontend",
-      "version": "0.9.3",
+      "version": "0.9.4",
       "dependencies": {
         "ag-charts-community": "^14.0.0",
         "ag-charts-react": "^14.0.0",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "calendar-run-frontend",
   "private": true,
-  "version": "0.9.3",
+  "version": "0.9.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/PaceTrendChart.tsx

@@ -14,15 +14,13 @@ type PaceDatum = {
   id: string;
   date: string;
   dateLabel: string;
-  minutes: number;
+  paceSeconds: number;
   race: Race;
 };
 
-function formatAxisTime(minutes: number): string {
-  const totalSeconds = Math.round(minutes * 60);
-  const hours = Math.floor(totalSeconds / 3600);
-  const rest = totalSeconds % 3600;
-  return hours ? `${hours}:${String(Math.floor(rest / 60)).padStart(2, "0")}` : `${Math.floor(rest / 60)}:${String(rest % 60).padStart(2, "0")}`;
+function formatAxisPace(seconds: number): string {
+  const roundedSeconds = Math.round(seconds);
+  return `${Math.floor(roundedSeconds / 60)}:${String(roundedSeconds % 60).padStart(2, "0")}`;
 }
 
 function formatShortDate(date: string): string {
@@ -36,7 +34,7 @@ function cssToken(name: string, fallback: string): string {
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || fallback;
 }
 
-/** Линейный график: время финиша по завершённым стартам выбранной дистанции. */
+/** Линейный график: темп по завершённым стартам выбранной дистанции. */
 export function PaceTrendChart({ races, distanceKm }: PaceTrendChartProps): JSX.Element {
   const navigate = useNavigate();
   const series = useMemo<PaceDatum[]>(
@@ -47,7 +45,7 @@ export function PaceTrendChart({ races, distanceKm }: PaceTrendChartProps): JSX.
         id: race.id,
         date: race.date,
         dateLabel: formatShortDate(race.date),
-        minutes: parseFinishTimeToSeconds(race.finishTime)! / 60,
+        paceSeconds: parseFinishTimeToSeconds(race.finishTime)! / race.distanceKm,
         race,
       })),
     [distanceKm, races],
@@ -66,16 +64,18 @@ export function PaceTrendChart({ races, distanceKm }: PaceTrendChartProps): JSX.
       y: {
         type: "number",
         position: "left",
-        title: { text: "Время" },
-        label: { formatter: ({ value }) => formatAxisTime(Number(value)) },
+        reverse: true,
+        min: 0,
+        title: { text: "Темп, мин/км" },
+        label: { formatter: ({ value }) => formatAxisPace(Number(value)) },
       },
     },
     series: [{
       type: "line",
       xKey: "dateLabel",
       xName: "Дата старта",
-      yKey: "minutes",
-      yName: "Время",
+      yKey: "paceSeconds",
+      yName: "Темп",
       stroke: cssToken("--color-accent", "#1168d8"),
       strokeWidth: 3,
       marker: {
@@ -106,7 +106,7 @@ export function PaceTrendChart({ races, distanceKm }: PaceTrendChartProps): JSX.
   }
 
   return (
-    <div className="pace-chart" role="group" aria-label="Динамика времени на дистанции. Выберите точку, чтобы открыть старт.">
+    <div className="pace-chart" role="group" aria-label="Динамика темпа на дистанции. Выберите точку, чтобы открыть старт.">
       <AgCharts options={options} />
       <p className="pace-chart__hint">Наведите на точку или выберите её клавиатурой.</p>
     </div>

frontend/src/pages/RacesPage.tsx

@@ -10,6 +10,7 @@ import {
   getRaceStatusClassName,
   getRaceStatusLabel,
   parseRaceDate,
+  sortByDateAsc,
   downloadTextFile,
   racesToCsv,
   racesToIcs,
@@ -64,7 +65,10 @@ function RaceList(props: { title: string; races: Race[]; variant: RaceListTab })
 
   return (
     <section className={`race-list race-list--${variant}`} aria-label={title}>
-      <h2 className="race-list__title">{title}</h2>
+      <h2 className="race-list__title">
+        {title}
+        <span className="race-list__count">{races.length}</span>
+      </h2>
       {races.length > 0 ? (
         <ul className="race-list__items">
           {races.map((race) => {
@@ -277,7 +281,7 @@ export function RacesPage(): JSX.Element {
   const { upcoming, completed } = useMemo(
     () => ({
       upcoming: filteredRaces.filter((race) => race.status !== "completed"),
-      completed: filteredRaces.filter((race) => race.status === "completed"),
+      completed: sortByDateAsc(filteredRaces.filter((race) => race.status === "completed")),
     }),
     [filteredRaces],
   );

frontend/src/styles/global.css

@@ -370,10 +370,19 @@ a {
 }
 
 .race-list__title {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-2);
   margin: 0 0 var(--space-4);
   font-size: var(--font-size-h2);
 }
 
+.race-list__count {
+  color: var(--color-text-muted);
+  font-size: var(--font-size-caption);
+  font-weight: 700;
+}
+
 .race-list__items {
   margin: 0;
   padding: 0;