feat(analysis): add monthly pattern analysis feature with chart and API integration

apps/frontend/src/features/analysis/AnalysisPage.tsx

@@ -17,10 +17,12 @@ import {
   useDailyQuotes,
   useHistoricalMinMax,
   useMonthlyLast,
+  useMonthlyPattern,
   usePeakHours,
   useQuotes,
 } from "@/lib/queries";
 import { MonthlyVariationTable } from "./components/MonthlyVariationTable";
+import { MonthPatternChart } from "./components/MonthPatternChart";
 import { PeakHoursChart } from "./components/PeakHoursChart";
 
 const CURRENCIES = ["BELO", "BLUE", "BNA"] as const;
@@ -104,6 +106,9 @@ export function AnalysisPage({ currency }: { currency: string }) {
   const { data: peakHoursData, isLoading: peakHoursLoading } =
     usePeakHours("BELO");
 
+  const { data: monthlyPatternData, isLoading: monthlyPatternLoading } =
+    useMonthlyPattern("BELO");
+
   const chartData = useMemo(() => {
     if (!daily) return [];
     return daily.map((d) => ({
@@ -598,16 +603,31 @@ export function AnalysisPage({ currency }: { currency: string }) {
       </div>
 
       {currency === "BELO" && (
-        <div className="rounded-lg border p-4">
-          <h2 className="text-sm font-medium mb-4">
-            Análisis de pico horario
-          </h2>
-          <p className="text-xs text-muted-foreground mb-4">
-            Frecuencia con la que cada hora del día fue el momento de mayor
-            precio de compra dentro de cada día.
-          </p>
-          <PeakHoursChart data={peakHoursData} isLoading={peakHoursLoading} />
-        </div>
+        <>
+          <div className="rounded-lg border p-4">
+            <h2 className="text-sm font-medium mb-4">
+              Análisis de pico horario
+            </h2>
+            <p className="text-xs text-muted-foreground mb-4">
+              Frecuencia con la que cada hora del día fue el momento de mayor
+              precio de compra dentro de cada día.
+            </p>
+            <PeakHoursChart data={peakHoursData} isLoading={peakHoursLoading} />
+          </div>
+
+          <div className="rounded-lg border p-4">
+            <h2 className="text-sm font-medium mb-4">Patrón mensual</h2>
+            <p className="text-xs text-muted-foreground mb-4">
+              Posición del precio dentro de cada mes (0% = mínimo del mes, 100%
+              = máximo), promediada entre los meses completos disponibles. Se
+              excluye la tendencia inflacionaria para comparar momentos del mes.
+            </p>
+            <MonthPatternChart
+              data={monthlyPatternData}
+              isLoading={monthlyPatternLoading}
+            />
+          </div>
+        </>
       )}
     </div>
   );

apps/frontend/src/features/analysis/components/MonthPatternChart.tsx

@@ -0,0 +1,293 @@
+import { useMemo, useState } from "react";
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import type { MonthlyPatternResponse } from "@/lib/api";
+import { cn } from "@/lib/utils";
+
+const priceFormatter = new Intl.NumberFormat("es-AR", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+type Mode = "sell" | "buy";
+
+type ChartEntry = {
+  day: number;
+  months: number;
+  position: number;
+  avgPrice: number;
+  recommended: boolean;
+};
+
+export function MonthPatternChart({
+  data,
+  isLoading,
+}: {
+  data: MonthlyPatternResponse | undefined;
+  isLoading: boolean;
+}) {
+  const [mode, setMode] = useState<Mode>("sell");
+
+  const { chartData, totalMonths, bestSellDay, bestBuyDay, minCoverage } =
+    useMemo(() => {
+      const totalMonths = data?.totalMonths ?? 0;
+      const allDays = data?.days ?? [];
+      const byDay = new Map(allDays.map((d) => [d.day, d]));
+      const minCoverage = Math.max(3, Math.ceil(totalMonths * 0.5));
+
+      const eligible = allDays.filter((d) => d.months >= minCoverage);
+
+      let bestSellDay: number | null = null;
+      let bestSellPosition = -Infinity;
+      for (const d of eligible) {
+        const pos = d.avgBuyPosition ?? null;
+        if (pos !== null && pos > bestSellPosition) {
+          bestSellPosition = pos;
+          bestSellDay = d.day;
+        }
+      }
+
+      let bestBuyDay: number | null = null;
+      let bestBuyPosition = Infinity;
+      for (const d of eligible) {
+        const pos = d.avgSellPosition ?? null;
+        if (pos !== null && pos < bestBuyPosition) {
+          bestBuyPosition = pos;
+          bestBuyDay = d.day;
+        }
+      }
+
+      const recommended = mode === "sell" ? bestSellDay : bestBuyDay;
+
+      const chartData: ChartEntry[] = Array.from({ length: 31 }, (_, i) => {
+        const day = i + 1;
+        const found = byDay.get(day);
+        const position =
+          mode === "sell"
+            ? (found?.avgBuyPosition ?? 0)
+            : (found?.avgSellPosition ?? 0);
+        return {
+          day,
+          months: found?.months ?? 0,
+          position,
+          avgPrice:
+            mode === "sell" ? (found?.avgBuy ?? 0) : (found?.avgSell ?? 0),
+          recommended: recommended !== null && day === recommended,
+        };
+      });
+
+      return {
+        chartData,
+        totalMonths,
+        bestSellDay,
+        bestBuyDay,
+        minCoverage,
+      };
+    }, [data, mode]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center h-64 text-muted-foreground text-sm">
+        Cargando datos del patrón mensual...
+      </div>
+    );
+  }
+
+  if (totalMonths === 0 || chartData.every((d) => d.months === 0)) {
+    return (
+      <div className="flex items-center justify-center h-64 text-muted-foreground text-sm">
+        Sin suficiente historial. Se necesitan al menos 2 meses completos de
+        datos.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="rounded-lg border p-4">
+          <p className="text-sm text-muted-foreground mb-1">
+            Mejor día para vender USDC
+          </p>
+          <p className="text-2xl font-bold">
+            {bestSellDay !== null ? `Día ${bestSellDay}` : "Sin datos"}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Precio de compra más alto del mes
+          </p>
+        </div>
+        <div className="rounded-lg border p-4">
+          <p className="text-sm text-muted-foreground mb-1">
+            Mejor día para comprar USDC
+          </p>
+          <p className="text-2xl font-bold">
+            {bestBuyDay !== null ? `Día ${bestBuyDay}` : "Sin datos"}
+          </p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Precio de venta más bajo del mes
+          </p>
+        </div>
+        <div className="rounded-lg border p-4">
+          <p className="text-sm text-muted-foreground mb-1">Meses analizados</p>
+          <p className="text-2xl font-bold tabular-nums">{totalMonths}</p>
+          <p className="text-xs text-muted-foreground mt-0.5">
+            Mínimo de cobertura por día: {minCoverage} meses
+          </p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <div className="flex items-center gap-1 rounded-lg border p-0.5">
+          <button
+            type="button"
+            onClick={() => setMode("sell")}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors cursor-pointer",
+              mode === "sell"
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            Vender USDC (compra)
+          </button>
+          <button
+            type="button"
+            onClick={() => setMode("buy")}
+            className={cn(
+              "px-3 py-1 text-xs rounded-md transition-colors cursor-pointer",
+              mode === "buy"
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:text-foreground",
+            )}
+          >
+            Comprar USDC (venta)
+          </button>
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Posición promedio dentro del mes (0% = mínimo, 100% = máximo)
+        </p>
+      </div>
+
+      <div className="h-64">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart data={chartData}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              className="stroke-border"
+              vertical={false}
+            />
+            <XAxis
+              dataKey="day"
+              tick={{ fontSize: 10 }}
+              className="text-muted-foreground"
+              interval={2}
+            />
+            <YAxis
+              tick={{ fontSize: 11 }}
+              className="text-muted-foreground"
+              domain={[0, 1]}
+              tickFormatter={(v: number) => `${Math.round(v * 100)}%`}
+              label={{
+                value: "Posición en el mes",
+                angle: -90,
+                position: "insideLeft",
+                offset: 10,
+                style: { fontSize: 11, fill: "hsl(var(--muted-foreground))" },
+              }}
+            />
+            <Tooltip
+              cursor={{ fill: "hsl(var(--muted) / 0.3)" }}
+              content={({ active, payload }) => {
+                if (!active || !payload?.length) return null;
+                const d = payload[0].payload as ChartEntry;
+                return (
+                  <div
+                    className="rounded-lg border bg-card p-3 text-sm shadow-sm"
+                    style={{ minWidth: 180 }}
+                  >
+                    <p className="font-semibold mb-1">Día {d.day}</p>
+                    <div className="space-y-0.5 text-muted-foreground">
+                      <p>
+                        Posición:{" "}
+                        <span className="font-medium text-foreground">
+                          {Math.round(d.position * 100)}%
+                        </span>
+                      </p>
+                      {d.avgPrice > 0 && (
+                        <p>
+                          Precio promedio:{" "}
+                          <span className="font-medium text-foreground">
+                            ${priceFormatter.format(d.avgPrice)}
+                          </span>
+                        </p>
+                      )}
+                      <p>
+                        Con datos en:{" "}
+                        <span className="font-medium text-foreground">
+                          {d.months} meses
+                        </span>
+                      </p>
+                      {d.recommended && (
+                        <p className="text-emerald-500 font-medium">
+                          Día recomendado
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                );
+              }}
+            />
+            <Bar
+              dataKey="position"
+              radius={[4, 4, 0, 0]}
+              isAnimationActive={false}
+            >
+              {chartData.map((entry) => (
+                <Cell
+                  key={entry.day}
+                  fill={
+                    entry.recommended
+                      ? mode === "sell"
+                        ? "var(--chart-1)"
+                        : "var(--chart-2)"
+                      : "hsl(var(--muted-foreground) / 0.25)"
+                  }
+                  fillOpacity={entry.months === 0 ? 0.4 : 1}
+                />
+              ))}
+            </Bar>
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+
+      <div className="flex items-center justify-center gap-4">
+        <div className="flex items-center gap-1.5">
+          <span
+            className="size-2.5 rounded-full"
+            style={{ backgroundColor: "var(--chart-1)" }}
+          />
+          <span className="text-xs text-muted-foreground">
+            Mejor día para vender USDC
+          </span>
+        </div>
+        <div className="flex items-center gap-1.5">
+          <span
+            className="size-2.5 rounded-full"
+            style={{ backgroundColor: "var(--chart-2)" }}
+          />
+          <span className="text-xs text-muted-foreground">
+            Mejor día para comprar USDC
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/lib/api.ts

@@ -58,6 +58,25 @@ export type PeakHoursResponse = {
   peaks: PeakHour[];
 };
 
+export type MonthPatternDay = {
+  day: number;
+  months: number;
+  avgBuy: number;
+  avgSell: number;
+  avgBuyPosition: number | null;
+  avgSellPosition: number | null;
+  minBuyDays: number;
+  maxBuyDays: number;
+  minSellDays: number;
+  maxSellDays: number;
+};
+
+export type MonthlyPatternResponse = {
+  type: string;
+  totalMonths: number;
+  days: MonthPatternDay[];
+};
+
 async function fetcher<T>(url: string): Promise<T> {
   const res = await fetch(url, { credentials: "include" });
   if (!res.ok) {
@@ -126,6 +145,12 @@ export function getPeakHours(type: string): Promise<PeakHoursResponse> {
   return fetcher<PeakHoursResponse>(`/api/quotes/${type}/peak-hours`);
 }
 
+export function getMonthlyPattern(
+  type: string,
+): Promise<MonthlyPatternResponse> {
+  return fetcher<MonthlyPatternResponse>(`/api/quotes/${type}/monthly-pattern`);
+}
+
 export type MonthlyLast = {
   month: string;
   type: "BELO" | "BLUE" | "BNA";

apps/frontend/src/lib/queries.ts

@@ -26,6 +26,7 @@ import {
   getHistoricalMinMax,
   getInflation,
   getMonthlyLast,
+  getMonthlyPattern,
   getMonthlyPayedTotal,
   getMonthlyTotals,
   getPeakHours,
@@ -64,8 +65,8 @@ export const quoteKeys = {
     ["quotes", type, "daily", startDate, endDate] as const,
   historicalMinMax: (type: string) =>
     ["quotes", type, "historicalMinMax"] as const,
-  peakHours: (type: string) =>
-    ["quotes", type, "peakHours"] as const,
+  peakHours: (type: string) => ["quotes", type, "peakHours"] as const,
+  monthlyPattern: (type: string) => ["quotes", type, "monthlyPattern"] as const,
 };
 
 export function useQuotes() {
@@ -143,6 +144,14 @@ export function usePeakHours(type: string) {
   });
 }
 
+export function useMonthlyPattern(type: string) {
+  return useQuery({
+    queryKey: quoteKeys.monthlyPattern(type),
+    queryFn: () => getMonthlyPattern(type),
+    staleTime: 30_000,
+  });
+}
+
 export function useMonthlyLast() {
   return useQuery({
     queryKey: ["quotes", "monthlyLast"] as const,