37 lines
1.7 KiB
JavaScript
37 lines
1.7 KiB
JavaScript
import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
|
|
|
function toChartData(original, processed) {
|
|
return Array.from({ length: 256 }, (_, level) => ({
|
|
level,
|
|
original: original?.[level] ?? 0,
|
|
processed: processed?.[level] ?? 0
|
|
}));
|
|
}
|
|
|
|
export default function HistogramPanel({ original, processed }) {
|
|
const data = toChartData(original, processed);
|
|
return (
|
|
<section className="border-t border-zinc-800 bg-zinc-950 px-4 py-3">
|
|
<div className="mb-3 flex items-center justify-between">
|
|
<h2 className="text-sm font-semibold text-zinc-100">Histogram Analytics</h2>
|
|
<div className="flex gap-3 text-xs text-zinc-400">
|
|
<span className="text-cyan-300">Original</span>
|
|
<span className="text-emerald-300">Processed</span>
|
|
</div>
|
|
</div>
|
|
<div className="h-40">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<AreaChart data={data} margin={{ left: 0, right: 8, top: 8, bottom: 0 }}>
|
|
<CartesianGrid stroke="#27272a" strokeDasharray="3 3" />
|
|
<XAxis dataKey="level" stroke="#71717a" tick={{ fontSize: 10 }} interval={63} />
|
|
<YAxis stroke="#71717a" tick={{ fontSize: 10 }} width={44} />
|
|
<Tooltip contentStyle={{ background: "#18181b", border: "1px solid #3f3f46", color: "#f4f4f5" }} />
|
|
<Area type="monotone" dataKey="original" stroke="#67e8f9" fill="#0891b2" fillOpacity={0.22} dot={false} />
|
|
<Area type="monotone" dataKey="processed" stroke="#6ee7b7" fill="#059669" fillOpacity={0.24} dot={false} />
|
|
</AreaChart>
|
|
</ResponsiveContainer>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|