init

components/elevation-chart.tsx

@@ -16,6 +16,7 @@ type Point = { distanceKm: number; altM: number; paceSec?: number };
 
 type Props = {
   data: Point[];
+  syncId?: string;
 };
 
 function fmtPace(sec: number): string {
@@ -24,7 +25,7 @@ function fmtPace(sec: number): string {
   return `${m}:${s.toString().padStart(2, "0")} /km`;
 }
 
-export function ElevationChart({ data }: Props) {
+export function ElevationChart({ data, syncId }: Props) {
   const uid = useId();
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
@@ -64,7 +65,7 @@ export function ElevationChart({ data }: Props) {
         )}
       </div>
       <ResponsiveContainer width="100%" height={110}>
-        <ComposedChart data={data} margin={{ top: 4, right: hasPace ? 52 : 8, left: 0, bottom: 0 }}>
+        <ComposedChart syncId={syncId} data={data} margin={{ top: 4, right: hasPace ? 52 : 8, left: 0, bottom: 0 }}>
           <defs>
             <linearGradient id={`elev-${uid}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.25} />

components/gcb-chart.tsx

@@ -16,9 +16,10 @@ type GcbPoint = { distanceKm: number; left: number; right: number };
 
 type Props = {
   data: GcbPoint[];
+  syncId?: string;
 };
 
-export function GcbChart({ data }: Props) {
+export function GcbChart({ data, syncId }: Props) {
   const uid = useId();
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
@@ -41,7 +42,7 @@ export function GcbChart({ data }: Props) {
         </span>
       </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={`gcb-l-${uid}`} x1="0" y1="0" x2="0" y2="1">
               <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.2} />

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} />