init

2026-06-22 11:32:27 +02:00
parent bf8624c954
commit d908965c95
16 changed files with 642 additions and 103 deletions
--- a/components/running-stats-chart.tsx
+++ b/components/running-stats-chart.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type RunDataPoint = {
+  label: string;
+  distanceKm: number;
+};
+
+type Props = {
+  data: RunDataPoint[];
+};
+
+export function RunningStatsChart({ data }: Props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return (
+      <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
+        <div className="mb-2 h-4 w-56 animate-pulse rounded bg-muted/30" />
+        <div className="h-[220px] animate-pulse rounded bg-muted/20" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full rounded-lg border border-muted/40 bg-surface p-4">
+      <div className="mb-2 text-sm text-fg/60">Tygodniowy dystans biegowy (od poniedziałku)</div>
+      <ResponsiveContainer width="100%" height={220}>
+        <AreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+          <defs>
+            <linearGradient id="distGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.3} />
+              <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <XAxis dataKey="label" stroke="var(--color-fg)" opacity={0.5} fontSize={11} />
+          <YAxis stroke="var(--color-fg)" opacity={0.5} fontSize={11} width={40} />
+          <Tooltip
+            cursor={{ stroke: "var(--color-accent)", strokeWidth: 1 }}
+            contentStyle={{
+              background: "var(--color-bg)",
+              border: "1px solid var(--color-muted)",
+              borderRadius: 8,
+              fontSize: 12,
+              color: "var(--color-fg)",
+            }}
+            formatter={(value) => [`${Number(value).toFixed(2)} km`, "Dystans"]}
+          />
+          <Area
+            type="monotone"
+            dataKey="distanceKm"
+            stroke="var(--color-accent)"
+            fill="url(#distGradient)"
+            strokeWidth={2}
+            name="distanceKm"
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}