init

2026-06-18 09:43:25 +02:00
parent ee178feff0
commit d00a5a42ac
9 changed files with 621 additions and 21 deletions
--- a/components/elevation-chart.tsx
+++ b/components/elevation-chart.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+
+type Props = {
+  data: { distanceKm: number; altM: number }[];
+};
+
+export function ElevationChart({ data }: Props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return <div className="h-[140px] animate-pulse rounded-lg border border-muted/40 bg-surface" />;
+  }
+
+  const altitudes = data.map((p) => p.altM);
+  const minAlt = Math.min(...altitudes);
+  const maxAlt = Math.max(...altitudes);
+  const pad = Math.max(5, Math.round((maxAlt - minAlt) * 0.15));
+
+  return (
+    <div className="rounded-lg border border-muted/40 bg-surface p-4">
+      <div className="mb-2 text-sm text-fg/60">Profil wysokości</div>
+      <ResponsiveContainer width="100%" height={110}>
+        <AreaChart data={data} margin={{ top: 4, right: 8, left: 0, bottom: 0 }}>
+          <defs>
+            <linearGradient id="elevGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="var(--color-accent)" stopOpacity={0.25} />
+              <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
+          <XAxis
+            dataKey="distanceKm"
+            stroke="var(--color-fg)"
+            opacity={0.5}
+            fontSize={11}
+            tickFormatter={(v) => `${Number(v).toFixed(1)} km`}
+            interval={Math.max(0, Math.floor(data.length / 5) - 1)}
+          />
+          <YAxis
+            stroke="var(--color-fg)"
+            opacity={0.5}
+            fontSize={11}
+            width={44}
+            tickFormatter={(v) => `${Math.round(v)} m`}
+            domain={[minAlt - pad, maxAlt + pad]}
+          />
+          <Tooltip
+            contentStyle={{
+              background: "var(--color-bg)",
+              border: "1px solid var(--color-muted)",
+              borderRadius: 8,
+              fontSize: 12,
+              color: "var(--color-fg)",
+            }}
+            formatter={(value) => [`${Math.round(Number(value))} m n.p.m.`, "Wysokość"]}
+            labelFormatter={(label) => `${Number(label).toFixed(2)} km`}
+          />
+          <Area
+            type="monotone"
+            dataKey="altM"
+            stroke="var(--color-accent)"
+            strokeWidth={2}
+            fill="url(#elevGradient)"
+            dot={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
--- a/components/gcb-chart.tsx
+++ b/components/gcb-chart.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+type GcbPoint = { distanceKm: number; left: number; right: number };
+
+type Props = {
+  data: GcbPoint[];
+};
+
+export function GcbChart({ data }: Props) {
+  const uid = useId();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return <div className="h-[160px] animate-pulse rounded-lg border border-muted/40 bg-surface" />;
+  }
+
+  return (
+    <div className="rounded-lg border border-muted/40 bg-surface p-4">
+      <div className="mb-2 flex items-center gap-4 text-sm text-fg/60">
+        <span>Balans kontaktu</span>
+        <span className="flex items-center gap-1">
+          <span className="inline-block h-2 w-4 rounded" style={{ background: "var(--color-accent)" }} />
+          Lewa
+        </span>
+        <span className="flex items-center gap-1">
+          <span className="inline-block h-2 w-4 rounded" style={{ background: "var(--color-sand)" }} />
+          Prawa
+        </span>
+      </div>
+      <ResponsiveContainer width="100%" height={120}>
+        <AreaChart 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} />
+              <stop offset="95%" stopColor="var(--color-accent)" stopOpacity={0} />
+            </linearGradient>
+            <linearGradient id={`gcb-r-${uid}`} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="var(--color-sand)" stopOpacity={0.2} />
+              <stop offset="95%" stopColor="var(--color-sand)" stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
+          <XAxis
+            dataKey="distanceKm"
+            stroke="var(--color-fg)"
+            opacity={0.5}
+            fontSize={11}
+            tickFormatter={(v) => `${Number(v).toFixed(1)} km`}
+            interval={Math.max(0, Math.floor(data.length / 5) - 1)}
+          />
+          <YAxis
+            stroke="var(--color-fg)"
+            opacity={0.5}
+            fontSize={11}
+            width={44}
+            tickFormatter={(v) => `${Number(v).toFixed(0)}%`}
+            domain={[40, 60]}
+            ticks={[40, 45, 50, 55, 60]}
+          />
+          <Tooltip
+            contentStyle={{
+              background: "var(--color-bg)",
+              border: "1px solid var(--color-muted)",
+              borderRadius: 8,
+              fontSize: 12,
+              color: "var(--color-fg)",
+            }}
+            formatter={(value, name) => [
+              `${Number(value).toFixed(1)}%`,
+              name === "left" ? "Lewa" : "Prawa",
+            ]}
+            labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
+          />
+          <ReferenceLine y={50} stroke="var(--color-fg)" strokeOpacity={0.3} strokeDasharray="4 4" />
+          <Area
+            type="monotone"
+            dataKey="left"
+            name="left"
+            stroke="var(--color-accent)"
+            strokeWidth={2}
+            fill={`url(#gcb-l-${uid})`}
+            dot={false}
+          />
+          <Area
+            type="monotone"
+            dataKey="right"
+            name="right"
+            stroke="var(--color-sand)"
+            strokeWidth={2}
+            fill={`url(#gcb-r-${uid})`}
+            dot={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
--- a/components/run-metric-chart.tsx
+++ b/components/run-metric-chart.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { useId } from "react";
+
+type Props = {
+  data: { distanceKm: number; value: number }[];
+  label: string;
+  unit: string;
+  color?: string;
+  referenceLine?: number;
+  decimals?: number;
+};
+
+export function RunMetricChart({
+  data,
+  label,
+  unit,
+  color = "var(--color-accent)",
+  referenceLine,
+  decimals = 0,
+}: Props) {
+  const uid = useId();
+  const gradId = `grad-${uid.replace(/:/g, "")}`;
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return <div className="h-[160px] animate-pulse rounded-lg border border-muted/40 bg-surface" />;
+  }
+
+  const values = data.map((p) => p.value);
+  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}`;
+
+  return (
+    <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 }}>
+          <defs>
+            <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={color} stopOpacity={0.25} />
+              <stop offset="95%" stopColor={color} stopOpacity={0} />
+            </linearGradient>
+          </defs>
+          <CartesianGrid stroke="var(--color-muted)" opacity={0.3} vertical={false} />
+          <XAxis
+            dataKey="distanceKm"
+            stroke="var(--color-fg)"
+            opacity={0.5}
+            fontSize={11}
+            tickFormatter={(v) => `${Number(v).toFixed(1)} km`}
+            interval={Math.max(0, Math.floor(data.length / 5) - 1)}
+          />
+          <YAxis
+            stroke="var(--color-fg)"
+            opacity={0.5}
+            fontSize={11}
+            width={50}
+            tickFormatter={fmt}
+            domain={[min - pad, max + pad]}
+          />
+          <Tooltip
+            contentStyle={{
+              background: "var(--color-bg)",
+              border: "1px solid var(--color-muted)",
+              borderRadius: 8,
+              fontSize: 12,
+              color: "var(--color-fg)",
+            }}
+            formatter={(value) => fmt(Number(value))}
+            labelFormatter={(l) => `${Number(l).toFixed(2)} km`}
+          />
+          {referenceLine !== undefined && (
+            <ReferenceLine
+              y={referenceLine}
+              stroke="var(--color-fg)"
+              strokeOpacity={0.4}
+              strokeDasharray="4 4"
+            />
+          )}
+          <Area
+            type="monotone"
+            dataKey="value"
+            name={label}
+            stroke={color}
+            strokeWidth={2}
+            fill={`url(#${gradId})`}
+            dot={false}
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}