File size: 1,963 Bytes
4c62137 | 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 | "use client";
import { motion } from "framer-motion";
import type { CDCTPoint } from "@/lib/types";
export function CompressionChart({ data }: { data: CDCTPoint[] }) {
if (!data.length) return null;
const w = 400, h = 180, pad = 30;
const plotW = w - pad * 2, plotH = h - pad * 2;
const points = data.map((d, i) => ({
x: pad + (i / Math.max(data.length - 1, 1)) * plotW,
sa: pad + plotH - (d.sa_score / 10) * plotH,
label: `${(d.compression_level * 100).toFixed(0)}%`,
}));
const linePath = points.map((p) => `${p.x},${p.sa}`).join(" ");
return (
<div className="w-full">
<svg viewBox={`0 0 ${w} ${h}`} className="w-full overflow-visible">
{/* Minimal Grid */}
{[0, 5, 10].map((v) => {
const y = pad + plotH - (v / 10) * plotH;
return (
<line key={v} x1={pad} y1={y} x2={w - pad} y2={y} stroke="rgba(255,255,255,0.03)" strokeWidth="0.5" />
);
})}
{/* Signal Line */}
<motion.polyline
initial={{ pathLength: 0 }}
animate={{ pathLength: 1 }}
transition={{ duration: 1.5, ease: [0.4, 0, 0.2, 1] }}
points={linePath}
fill="none"
stroke="rgba(255, 255, 255, 0.3)"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
{/* Nodes */}
{points.map((p, i) => (
<circle key={i} cx={p.x} cy={p.sa} r="2" fill="white" />
))}
{/* X Labels */}
{points.map((p, i) => (
<text key={i} x={p.x} y={h - 10} textAnchor="middle" fill="var(--text-dim)" fontSize="7" fontWeight="500" className="opacity-40">
{p.label}
</text>
))}
</svg>
<div className="flex justify-center mt-2">
<span className="text-[9px] uppercase tracking-widest text-text-dim">Semantic Integrity Curve</span>
</div>
</div>
);
}
|