init

components/run-metric-chart.tsx

@@ -20,6 +20,8 @@ type Props = {
   color?: string;
   referenceLine?: number;
   decimals?: number;
+  format?: "pace";
+  reversed?: boolean;
 };
 
 export function RunMetricChart({
@@ -29,6 +31,8 @@ export function RunMetricChart({
   color = "var(--color-accent)",
   referenceLine,
   decimals = 0,
+  format,
+  reversed = false,
 }: Props) {
   const uid = useId();
   const gradId = `grad-${uid.replace(/:/g, "")}`;
@@ -43,8 +47,14 @@ export function RunMetricChart({
   const min = Math.min(...values);
   const max = Math.max(...values);
   const pad = Math.max(1, Math.round((max - min) * 0.15));
-  const fmt = (v: number) =>
-    decimals > 0 ? `${Number(v).toFixed(decimals)} ${unit}` : `${Math.round(v)} ${unit}`;
+  const fmt = (v: number) => {
+    if (format === "pace") {
+      const m = Math.floor(v / 60);
+      const s = Math.round(v % 60);
+      return `${m}:${s.toString().padStart(2, "0")} /km`;
+    }
+    return decimals > 0 ? `${Number(v).toFixed(decimals)} ${unit}` : `${Math.round(v)} ${unit}`;
+  };
 
   return (
     <div className="rounded-lg border border-muted/40 bg-surface p-4">
@@ -72,7 +82,8 @@ export function RunMetricChart({
             fontSize={11}
             width={50}
             tickFormatter={fmt}
-            domain={[min - pad, max + pad]}
+            domain={reversed ? [max + pad, min - pad] : [min - pad, max + pad]}
+            reversed={reversed}
           />
           <Tooltip
             contentStyle={{