init

components/run-metric-chart.tsx

@@ -22,6 +22,7 @@ type Props = {
   decimals?: number;
   format?: "pace";
   reversed?: boolean;
+  syncId?: string;
 };
 
 export function RunMetricChart({
@@ -33,6 +34,7 @@ export function RunMetricChart({
   decimals = 0,
   format,
   reversed = false,
+  syncId,
 }: Props) {
   const uid = useId();
   const gradId = `grad-${uid.replace(/:/g, "")}`;
@@ -60,7 +62,7 @@ export function RunMetricChart({
     <div className="rounded-lg border border-muted/40 bg-surface p-4">
       <div className="mb-2 text-sm text-fg/60">{label}</div>
       <ResponsiveContainer width="100%" height={120}>
-        <AreaChart data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+        <AreaChart syncId={syncId} data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
           <defs>
             <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor={color} stopOpacity={0.25} />