Cómo crear un monitor de macro público con Plotly Dash

Autor: el Equipo de FXMacroData
El nombre de la publicación: 6 de junio de 2026

Esta guía muestra cómo construir el vivo Monitor de macro público El modelo de configuración de la aplicación de Dash es el siguiente:

El objetivo es práctico: crear un panel de control que un operador, analista o equipo de datos pueda extender. calendario de liberación para el contexto del evento, Tipo de interés de política en USD como una serie de macro de inicio, y El valor de las pérdidas como referencia del par cuando se añade el contexto de mercado.

Los requisitos previos

• Python 3.11 o más nuevo.
• Una cuenta gratuita de FXMacroData, más una clave API si quieres cobertura protegida más allá de los ejemplos públicos.
• Familiaridad básica con las devoluciones de llamadas de Dash, pandas y API REST.
• Un objetivo de despliegue como Render, Hugging Face Spaces, Fly.io o su propio contenedor de host.

Instale las dependencias utilizadas en este patrón:

pip install dash dash-bootstrap-components pandas plotly requests gunicorn python-dotenv

Paso 1: Definir el contrato del panel de control

Antes de escribir código de interfaz de usuario, decide qué comportamiento es público y qué comportamientos requieren una clave.

El último punto es importante. Las aplicaciones Dash a menudo se comparten con usuarios no técnicos, por lo que la aplicación debe hacer que los datos perdidos sean obvios y recuperables en lugar de mostrar silenciosamente series obsoletas o fabricadas.

Paso 2: Construir un pequeño cliente FXMacroData

Los ejemplos públicos de FXMacroData deben utilizar la autenticación de parámetros de consulta. Mantenga ese patrón dentro de una función para que el resto de la aplicación nunca necesite saber cómo se ensamblan las URL de solicitud.

from datetime import date, timedelta
import requests

API_BASE = "https://api.fxmacrodata.com/v1"


def fetch_indicator(currency: str, indicator: str, api_key: str | None = None):
    end_date = date.today()
    params = {"start_date": (end_date - timedelta(days=730)).isoformat()}
    params["end_date"] = end_date.isoformat()
    if api_key:
        params["api_key"] = api_key

    url = f"{API_BASE}/announcements/{currency.lower()}/{indicator}"
    response = requests.get(url, params=params, timeout=15)
    response.raise_for_status()
    return response.json()

Puedes probar el mismo punto final desde un terminal.

curl "https://api.fxmacrodata.com/v1/announcements/usd/policy_rate?api_key=YOUR_API_KEY"

Para el contexto macro, comience con Inflación en dólares, el tipo de interés de referencia en USD, y PIB en dólaresCuando añada filas que no sean USD, use el mismo patrón de punto final con el código de moneda de destino.

Paso 3: Normaliza la respuesta de la API

Las devoluciones de llamadas de Dash se vuelven mucho más fáciles cuando cada respuesta de punto final se convierte en una forma de fila consistente.

def normalize_rows(payload: dict) -> list[dict]:
    rows = []
    for row in payload.get("data", []):
        ds = row.get("date") or row.get("announcement_datetime")
        value = row.get("val") if "val" in row else row.get("value")
        if not ds or value is None:
            continue
        try:
            rows.append({"date": str(ds)[:10], "value": float(value)})
        except (TypeError, ValueError):
            continue
    return sorted(rows, key=lambda item: item["date"])

Para un panel de control público, las filas vacías deben producir un estado visual vacío, no un cero engañoso.

Paso 4: Ensambla la shell de la aplicación Dash

Un buen monitor público debe ser simple en la primera carga: un título, una entrada clave, un selector de moneda, un mapa de calor y un panel de instrucciones.

from dash import Dash, dcc, html
import dash_bootstrap_components as dbc

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server

app.layout = dbc.Container(
    [
        html.H1("FXMacroData Public Macro Monitor"),
        dbc.Input(id="api-key-input", type="password",
                  placeholder="Optional FXMacroData API key"),
        dcc.Dropdown(id="currency-select", multi=True,
                     value=["USD"], options=["USD", "EUR", "GBP", "AUD"]),
        dcc.Graph(id="heatmap-graph"),
        html.Div(id="drilldown-panel"),
    ],
    fluid=True,
)

Mantenga la primera versión sencilla. Una vez que el flujo de datos esté correcto, puede agregar tarjetas, pestañas, filtros y estilo de marca sin cambiar las devoluciones de llamadas centrales.

Paso 5: Crea una instantánea lista para el mapa de calor

El mapa de calor necesita un valor más reciente por moneda e indicador. Almacene tanto la etiqueta de visualización como la clave de API para cada indicador para que los eventos de clic puedan volver al punto final correcto más adelante.

INDICATORS = [
    ("policy_rate", "Policy Rate"),
    ("inflation", "Inflation"),
    ("gdp", "GDP"),
]


def build_macro_snapshot(currencies, api_key=None):
    rows = []
    for currency in currencies:
        key = None if currency == "USD" else api_key
        for indicator, label in INDICATORS:
            series = normalize_rows(fetch_indicator(currency, indicator, key))
            latest = series[-1]["value"] if series else None
            rows.append({"currency": currency, "indicator": indicator,
                         "label": label, "latest": latest})
    return rows

Esta tabla puede alimentar un mapa de calor, un panel de clasificación y una pequeña tarjeta de estado sin repetir las solicitudes de API en cada llamada de retorno.

Paso 6: Render el mapa de calor Plotly

El detalle clave es pasar explícito . x ¿ Qué ? y las etiquetas en go.HeatmapEso hace que la imagen sea legible y da al clic de llamada suficiente información para recuperar la serie subyacente.

from dash import Input, Output
import plotly.graph_objects as go


@app.callback(Output("heatmap-graph", "figure"),
              Input("currency-select", "value"),
              Input("api-key-input", "value"))
def update_heatmap(currencies, api_key):
    currencies = currencies or ["USD"]
    snapshot = build_macro_snapshot(currencies, api_key)
    labels = [label for _, label in INDICATORS]
    lookup = {(r["currency"], r["label"]): r["latest"] for r in snapshot}
    z = [[lookup.get((ccy, label)) for label in labels] for ccy in currencies]

    fig = go.Figure(go.Heatmap(x=labels, y=currencies, z=z,
                               colorscale="RdBu", hoverongaps=False))
    fig.update_layout(template="plotly_white", height=460,
                      xaxis_title="Indicator", yaxis_title="Currency")
    return fig

En este punto, la aplicación ya es útil: los usuarios pueden ver qué monedas e indicadores están disponibles, dónde faltan valores y qué campos macro merecen una mirada más profunda.

Paso 7: Añadir gráficos de clic para perforar hacia abajo

Los clics de mapas de calor de manera improvisada devuelven la etiqueta de visualización, no su caracol de API.

from dash import State

LABEL_TO_INDICATOR = {label: key for key, label in INDICATORS}


@app.callback(Output("drilldown-panel", "children"),
              Input("heatmap-graph", "clickData"),
              State("api-key-input", "value"))
def show_drilldown(click_data, api_key):
    if not click_data:
        return html.Div("Click a heatmap cell to inspect the series.")

    point = click_data["points"][0]
    currency = point["y"]
    indicator = LABEL_TO_INDICATOR[point["x"]]
    rows = normalize_rows(fetch_indicator(currency, indicator, api_key))
    fig = go.Figure(go.Scatter(x=[r["date"] for r in rows],
                               y=[r["value"] for r in rows],
                               mode="lines+markers"))
    fig.update_layout(template="plotly_white", height=360)
    return dcc.Graph(figure=fig)

Este callback convierte el mapa de calor de una visión general estática en un flujo de trabajo de investigación.

Paso 8: Cache de las solicitudes repetidas

Los usuarios del panel de control cambian los filtros rápidamente. Añadir una caché corta alrededor de la capa de solicitud de API para que un clic repetido no cree una nueva solicitud de red cada vez.

from functools import lru_cache


@lru_cache(maxsize=128)
def fetch_indicator_cached(currency: str, indicator: str, api_key_marker: str):
    api_key = None if api_key_marker == "public" else api_key_marker
    return fetch_indicator(currency, indicator, api_key)

En una aplicación pública compartida, use una caché de servidor como Redis o Flask-Caching en lugar de depender solo de la memoria en proceso.

Paso 9: Implementar sin filtrar secretos

Para Render, el proceso de producción mínimo es:

pip freeze > requirements.txt
gunicorn app:server

Para los espacios de abrazo, coloque la llave en el administrador de secretos de la plataforma en lugar del repositorio. FXMACRODATA_API_KEY y nunca comprometan una llave real en el control de la fuente.

Después de la implementación, compare su versión con la aplicación en vivo en /app-gallery/dash/público-macro-monitorLa versión de galería agrega pestañas más ricas, superposiciones de pares, vistas de estrategia y paneles de macro, pero utiliza el mismo patrón básico: buscar, normalizar, visualizar y profundizar.

Resumen de las actividades

Ahora tiene los bloques de construcción básicos para un monitor de macro Plotly Dash público: un pequeño cliente FXMacroData, una tabla de instantáneas normalizada, un mapa de calor de eje explícito, un gráfico de drill-down basado en clics y un modelo de manejo secreto más seguro.

La siguiente extensión más útil es una segunda capa de panel que compara pares como El valor de la moneda de referencia Después de eso, añade el calendario de lanzamiento del calendario, luego enlaza cada indicador aparecido a la página de documentos de la API correspondiente para que los usuarios puedan pasar de la aplicación a una investigación más profunda.