mirror of
https://github.com/R0m1k3/CollectFlow.git
synced 2026-10-13 18:27:40 +02:00
32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
interface HeatmapCellProps {
|
|
value: number | null;
|
|
}
|
|
|
|
function getHeatmapStyle(value: number | null): { background: string; color: string } {
|
|
if (value === null || value === 0) {
|
|
return { background: "var(--bg-elevated)", color: "var(--text-muted)" };
|
|
}
|
|
const abs = Math.abs(value);
|
|
if (abs > 100) return { background: "rgba(45,212,191,0.22)", color: "var(--accent)" };
|
|
if (abs > 30) return { background: "rgba(45,212,191,0.14)", color: "var(--accent)" };
|
|
if (abs > 10) return { background: "rgba(45,212,191,0.08)", color: "var(--accent)" };
|
|
return { background: "var(--bg-elevated)", color: "var(--text-secondary)" };
|
|
}
|
|
|
|
export function HeatmapCell({ value }: HeatmapCellProps) {
|
|
const style = getHeatmapStyle(value);
|
|
const display = value === null || value === 0 ? "—" : Math.round(Math.abs(value)).toString();
|
|
|
|
return (
|
|
<div
|
|
className="rounded text-center text-[12px] tabular-nums px-0.5 py-0.5 font-bold tracking-tighter transition-colors min-h-[24px] flex items-center justify-center font-mono-nums"
|
|
style={style}
|
|
title={value !== null ? `${Math.abs(value).toLocaleString("fr-FR")} unités` : "Aucune vente"}
|
|
>
|
|
{display}
|
|
</div>
|
|
);
|
|
}
|