amiirkhl/guilan-multimedia-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(v5): show red histogram channel tooltip

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-07-09 14:54:58 +03:30
parent d9f2cd4d9d
commit ca447c71cc
1 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/HistogramPanel.jsx
View File

@@ -15,12 +15,37 @@ function toChartData(original, processed) {
level,
original: originalSeries?.[level] ?? 0,
processed: processedSeries?.[level] ?? 0,
r: r[level] ?? 0,
g: g[level] ?? 0,
b: b[level] ?? 0
red: r[level] ?? 0,
green: g[level] ?? 0,
blue: b[level] ?? 0
}));
}
function HistogramTooltip({ active, payload, label }) {
if (!active || !payload?.length) return null;
const values = Object.fromEntries(payload.map((item) => [item.dataKey, item.value]));
const rows = [
["Original", values.original, "text-cyan-300"],
["Active", values.processed, "text-emerald-300"],
["R", values.red, "text-red-300"],
["G", values.green, "text-green-300"],
["B", values.blue, "text-blue-300"]
];
return (
<div className="border border-zinc-700 bg-zinc-900 px-3 py-2 text-xs shadow-xl">
<div className="mb-1 font-semibold text-zinc-100">Level {label}</div>
<div className="space-y-1">
{rows.map(([name, value, className]) => (
<div key={name} className="flex min-w-32 justify-between gap-4">
<span className={className}>{name}</span>
<span className="tabular-nums text-zinc-100">{Number(value ?? 0).toFixed(8)}</span>
</div>
))}
</div>
</div>
);
}
export default function HistogramPanel({ original, processed }) {
const data = toChartData(original, processed);
return (
@@ -38,12 +63,12 @@ export default function HistogramPanel({ original, processed }) {
<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" }} />
<Tooltip content={<HistogramTooltip />} />
<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} />
<Area type="monotone" dataKey="r" stroke="#f87171" fill="#ef4444" fillOpacity={0.08} dot={false} />
<Area type="monotone" dataKey="g" stroke="#4ade80" fill="#22c55e" fillOpacity={0.08} dot={false} />
<Area type="monotone" dataKey="b" stroke="#60a5fa" fill="#3b82f6" fillOpacity={0.08} dot={false} />
<Area type="monotone" dataKey="red" stroke="#f87171" fill="#ef4444" fillOpacity={0.08} dot={false} />
<Area type="monotone" dataKey="green" stroke="#4ade80" fill="#22c55e" fillOpacity={0.08} dot={false} />
<Area type="monotone" dataKey="blue" stroke="#60a5fa" fill="#3b82f6" fillOpacity={0.08} dot={false} />
</AreaChart>
</ResponsiveContainer>
</div>