Marcos Benítez
a65bec45c3
- colors.ts: gradiente continuo verde→amarillo→naranja→rojo (interpolación N-stops genérica) - Renombra modos: relative→percentile (rank-based), absolute→minmax - Hook useHeatmapMode(): persiste selección en localStorage con clave inq-roi:heatmap-mode - HeatmapLegend: barra de 4 stops, labels P0/P50/P100 en modo percentil - HeatmapModeToggle: etiquetas "Percentil" / "Min-max" - pdf-sections.ts: leyenda PDF con 4 stops interpolados - BpmnCanvas: controles de zoom movidos a esquina inferior izquierda (evita logo bpmn.io) - Tests: 528 unitarios pasan; E2E recalibrados con vecino más cercano (distancia euclidiana) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
38 lines
1.5 KiB
TypeScript
38 lines
1.5 KiB
TypeScript
import { formatCurrency } from '@/lib/format'
|
|
import { heatmapLegendBounds, HEATMAP_LOW_HEX, HEATMAP_MID_HEX, HEATMAP_HIGH_MID_HEX, HEATMAP_HIGH_HEX } from '@/lib/colors'
|
|
import type { HeatmapMode } from '@/lib/colors'
|
|
import type { ActivitySimResult } from '@/domain/types'
|
|
|
|
interface HeatmapLegendProps {
|
|
perActivity: ActivitySimResult[]
|
|
mode: HeatmapMode
|
|
currency: string
|
|
}
|
|
|
|
export function HeatmapLegend({ perActivity, mode, currency }: HeatmapLegendProps) {
|
|
const bounds = heatmapLegendBounds(perActivity, mode)
|
|
|
|
// En modo percentile los extremos son rango (0 = más barata, 100 = más cara), no costo
|
|
// literal — el percentil no es lineal respecto al costo real.
|
|
function formatBound(value: number): string {
|
|
if (bounds.unit === 'rank') return `P${Math.round(value)}`
|
|
return formatCurrency(value, currency)
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3 mt-3">
|
|
<span className="text-xs text-slate-500 shrink-0">Bajo costo</span>
|
|
<div className="flex-1 h-3 rounded-full" style={{
|
|
background: `linear-gradient(to right, ${HEATMAP_LOW_HEX}, ${HEATMAP_MID_HEX}, ${HEATMAP_HIGH_MID_HEX}, ${HEATMAP_HIGH_HEX})`
|
|
}} />
|
|
<span className="text-xs text-slate-500 shrink-0">Alto costo</span>
|
|
<div className="h-4 border-l border-slate-200 mx-1" />
|
|
<div className="flex items-center gap-4 text-xs text-slate-400 font-mono">
|
|
<span>{formatBound(bounds.min)}</span>
|
|
<span>{formatBound(bounds.mid)}</span>
|
|
<span>{formatBound(bounds.max)}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|