diff --git a/apps/frontend/src/features/analysis/components/MonthlyVariationTable.tsx b/apps/frontend/src/features/analysis/components/MonthlyVariationTable.tsx index e2f50dc..88c5840 100644 --- a/apps/frontend/src/features/analysis/components/MonthlyVariationTable.tsx +++ b/apps/frontend/src/features/analysis/components/MonthlyVariationTable.tsx @@ -4,12 +4,18 @@ import { useInflation, useMonthlyLast } from "@/lib/queries"; type MonthKey = string; +type CurrencyValues = { + variation: number | null; + prev: number | null; + current: number | null; +}; + type MonthRow = { month: MonthKey; label: string; - BELO: number | null; - BLUE: number | null; - BNA: number | null; + BELO: CurrencyValues; + BLUE: CurrencyValues; + BNA: CurrencyValues; inflation: number | null; }; @@ -38,12 +44,25 @@ function formatPct(value: number): string { return `${sign}${value.toFixed(1)}%`; } +const priceFormatter = new Intl.NumberFormat("es-AR", { + minimumFractionDigits: 0, + maximumFractionDigits: 0, +}); + +function formatPrice(value: number): string { + return `$${priceFormatter.format(value)}`; +} + function VariationIndicator({ variation, inflation, + prev, + current, }: { variation: number | null; inflation: number | null; + prev: number | null; + current: number | null; }) { if (variation === null) { return ( @@ -54,32 +73,19 @@ function VariationIndicator({ ); } - if (inflation === null) { - const isPositive = variation >= 0; - return ( - - {isPositive ? ( - - ) : ( - - )} - {formatPct(variation)} - - ); - } - - const beatsInflation = variation > inflation; - return ( + const indicator = ( inflation + ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 px-1.5 py-0.5 rounded" + : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400 px-1.5 py-0.5 rounded" + : variation >= 0 + ? "text-emerald-500" + : "text-red-500" }`} > - {beatsInflation ? ( + {variation >= 0 ? ( ) : ( @@ -87,6 +93,19 @@ function VariationIndicator({ {formatPct(variation)} ); + + if (prev !== null && current !== null) { + return ( +
+ {indicator} + + {formatPrice(prev)} → {formatPrice(current)} + +
+ ); + } + + return indicator; } export function MonthlyVariationTable() { @@ -156,9 +175,21 @@ export function MonthlyVariationTable() { return { month, label: formatMonth(month), - BELO: beloVar, - BLUE: blueVar, - BNA: bnaVar, + BELO: { + variation: beloVar, + prev: prevData?.BELO ?? null, + current: current?.BELO ?? null, + }, + BLUE: { + variation: blueVar, + prev: prevData?.BLUE ?? null, + current: current?.BLUE ?? null, + }, + BNA: { + variation: bnaVar, + prev: prevData?.BNA ?? null, + current: current?.BNA ?? null, + }, inflation, }; }) @@ -208,15 +239,19 @@ export function MonthlyVariationTable() {

BELO

Blue

@@ -224,8 +259,10 @@ export function MonthlyVariationTable() { Oficial

@@ -263,20 +300,26 @@ export function MonthlyVariationTable() { {row.label}