Spaces:
Sleeping
Sleeping
File size: 3,234 Bytes
4b445f6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | "use client";
import { motion } from "framer-motion";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ReferenceLine,
ResponsiveContainer,
Area,
AreaChart,
} from "recharts";
interface TrendChartProps {
scores: number[];
height?: number;
}
export default function TrendChart({ scores, height = 280 }: TrendChartProps) {
const data = scores.map((score, i) => ({
review: `#${i + 1}`,
score,
}));
return (
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
className="w-full glass rounded-2xl p-5"
>
<div className="flex items-center justify-between mb-5">
<h3 className="text-sm font-medium text-zinc-400">
Health Score Trend
</h3>
<span className="text-xs text-zinc-600 font-mono">
{scores.length} reviews
</span>
</div>
<ResponsiveContainer width="100%" height={height}>
<AreaChart data={data}>
<defs>
<linearGradient id="scoreArea" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#8b5cf6" stopOpacity={0.15} />
<stop offset="100%" stopColor="#8b5cf6" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid
strokeDasharray="3 3"
stroke="rgba(255,255,255,0.03)"
vertical={false}
/>
<XAxis
dataKey="review"
tick={{ fill: "#52525b", fontSize: 11 }}
axisLine={false}
tickLine={false}
/>
<YAxis
domain={[0, 100]}
tick={{ fill: "#52525b", fontSize: 11 }}
axisLine={false}
tickLine={false}
width={30}
/>
<Tooltip
contentStyle={{
backgroundColor: "rgba(24, 24, 27, 0.9)",
border: "1px solid rgba(255,255,255,0.06)",
borderRadius: "12px",
color: "#e4e4e7",
fontSize: "0.8rem",
backdropFilter: "blur(12px)",
boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
}}
itemStyle={{ color: "#a78bfa" }}
labelStyle={{ color: "#71717a", marginBottom: 4 }}
/>
<ReferenceLine
y={80}
stroke="rgba(52,211,153,0.2)"
strokeDasharray="6 4"
label={{
value: "Healthy",
fill: "#34d399",
fontSize: 10,
position: "insideTopRight",
}}
/>
<Area
type="monotone"
dataKey="score"
fill="url(#scoreArea)"
stroke="none"
/>
<Line
type="monotone"
dataKey="score"
stroke="#a78bfa"
strokeWidth={2}
dot={{ r: 3, fill: "#a78bfa", strokeWidth: 0 }}
activeDot={{
r: 5,
fill: "#c4b5fd",
strokeWidth: 0,
filter: "drop-shadow(0 0 6px rgba(167,139,250,0.4))",
}}
/>
</AreaChart>
</ResponsiveContainer>
</motion.div>
);
}
|