feat: Add Flight Recorder, Timeline, ABV Curve and Offline Bottle Caching with Draft Notes support
This commit is contained in:
133
src/components/SessionABVCurve.tsx
Normal file
133
src/components/SessionABVCurve.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Activity, AlertCircle, TrendingUp, Zap } from 'lucide-react';
|
||||
|
||||
interface ABVTasting {
|
||||
id: string;
|
||||
abv: number;
|
||||
tasted_at: string;
|
||||
}
|
||||
|
||||
interface SessionABVCurveProps {
|
||||
tastings: ABVTasting[];
|
||||
}
|
||||
|
||||
export default function SessionABVCurve({ tastings }: SessionABVCurveProps) {
|
||||
if (!tastings || tastings.length < 2) {
|
||||
return (
|
||||
<div className="p-6 bg-zinc-50 dark:bg-zinc-900/50 rounded-3xl border border-dashed border-zinc-200 dark:border-zinc-800 text-center">
|
||||
<Activity size={24} className="mx-auto text-zinc-300 mb-2" />
|
||||
<p className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest">Kurve wird ab 2 Drams berechnet</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const sorted = [...tastings].sort((a, b) => new Date(a.tasted_at).getTime() - new Date(b.tasted_at).getTime());
|
||||
|
||||
// Normalize data: Y-axis is ABV (say 40-65 range), X-axis is time or just sequence index
|
||||
const minAbv = Math.min(...sorted.map(t => t.abv));
|
||||
const maxAbv = Math.max(...sorted.map(t => t.abv));
|
||||
const range = Math.max(maxAbv - minAbv, 10); // at least 10 point range for scale
|
||||
|
||||
// SVG Dimensions
|
||||
const width = 400;
|
||||
const height = 150;
|
||||
const padding = 20;
|
||||
|
||||
const getX = (index: number) => padding + (index * (width - 2 * padding) / (sorted.length - 1));
|
||||
const getY = (abv: number) => {
|
||||
const normalized = (abv - (minAbv - 2)) / (range + 4);
|
||||
return height - padding - (normalized * (height - 2 * padding));
|
||||
};
|
||||
|
||||
const points = sorted.map((t, i) => `${getX(i)},${getY(t.abv)}`).join(' ');
|
||||
|
||||
// Check for dangerous slope (sudden high ABV jump)
|
||||
const hasBigJump = sorted.some((t, i) => i > 0 && t.abv - sorted[i - 1].abv > 10);
|
||||
|
||||
return (
|
||||
<div className="bg-zinc-900 rounded-3xl p-5 border border-white/5 shadow-2xl overflow-hidden relative group">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp size={16} className="text-amber-500" />
|
||||
<div>
|
||||
<h4 className="text-[10px] font-black text-zinc-500 uppercase tracking-widest leading-none">ABV Kurve (Session)</h4>
|
||||
<p className="text-[8px] text-zinc-600 font-bold uppercase tracking-tighter">Alcohol By Volume Progression</p>
|
||||
</div>
|
||||
</div>
|
||||
{hasBigJump && (
|
||||
<div className="flex items-center gap-1.5 px-2 py-1 bg-red-500/10 border border-red-500/20 rounded-lg animate-pulse">
|
||||
<AlertCircle size={10} className="text-red-500" />
|
||||
<span className="text-[8px] font-black text-red-500 uppercase tracking-tighter">Zick-Zack Gefahr</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative h-[150px] w-full">
|
||||
{/* Grid Lines */}
|
||||
<div className="absolute inset-0 flex flex-col justify-between opacity-10 pointer-events-none">
|
||||
{[1, 2, 3, 4].map(i => <div key={i} className="border-t border-white" />)}
|
||||
</div>
|
||||
|
||||
<svg viewBox={`0 0 ${width} ${height}`} className="w-full h-full drop-shadow-[0_0_15px_rgba(217,119,6,0.2)]">
|
||||
{/* Gradient under line */}
|
||||
<defs>
|
||||
<linearGradient id="curveGradient" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor="#d97706" stopOpacity="0.4" />
|
||||
<stop offset="100%" stopColor="#d97706" stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<path
|
||||
d={`M ${getX(0)} ${height} L ${points} L ${getX(sorted.length - 1)} ${height} Z`}
|
||||
fill="url(#curveGradient)"
|
||||
/>
|
||||
|
||||
<polyline
|
||||
points={points}
|
||||
fill="none"
|
||||
stroke="#d97706"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="transition-all duration-700 ease-out"
|
||||
/>
|
||||
|
||||
{sorted.map((t, i) => (
|
||||
<g key={t.id} className="group/dot">
|
||||
<circle
|
||||
cx={getX(i)}
|
||||
cy={getY(t.abv)}
|
||||
r="4"
|
||||
fill="#d97706"
|
||||
className="transition-all hover:r-6 cursor-help"
|
||||
/>
|
||||
<text
|
||||
x={getX(i)}
|
||||
y={getY(t.abv) - 10}
|
||||
textAnchor="middle"
|
||||
className="text-[8px] fill-zinc-400 font-black opacity-0 group-hover/dot:opacity-100 transition-opacity"
|
||||
>
|
||||
{t.abv}%
|
||||
</text>
|
||||
</g>
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-3 border-t border-white/5 pt-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[8px] font-black text-zinc-500 uppercase tracking-widest">Ø Alkohol</span>
|
||||
<span className="text-sm font-black text-white">{(sorted.reduce((acc, t) => acc + t.abv, 0) / sorted.length).toFixed(1)}%</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-[8px] font-black text-zinc-500 uppercase tracking-widest">Status</span>
|
||||
<span className={`text-[10px] font-black uppercase tracking-widest ${hasBigJump ? 'text-red-500' : 'text-green-500'}`}>
|
||||
{hasBigJump ? 'Instabil' : 'Optimal'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user