Files
fn_registry/cpp/functions/viz/kpi_card.md
T
egutierrez 0bdf35a461 feat: add C++ ImGui functions for core UI and visualization
Funciones C++/ImGui para dashboards (grid, panel, docking, sidebar, tabs),
visualizaciones (candlestick, gauge, histogram, pie, sparkline, heatmap,
scatter, line, bar, surface3d, kpi, table), grafos (force layout, renderer,
viewport, spatial hash, types) y utilidades (time series buffer, tracy zones,
memory/fps overlay, plot theme).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-08 00:10:18 +02:00

3.0 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, tested, tests, test_file_path, file_path, framework, params, output
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports tested tests test_file_path file_path framework params output
kpi_card component cpp viz 1.0.0 pure void kpi_card(const char* label, float value, float delta_percent, const float* history = nullptr, int history_count = 0, const char* format = "%.1f") Card de KPI con valor grande, delta porcentual, y sparkline historico para dashboards
imgui
kpi
card
dashboard
metrics
sparkline
sparkline_cpp_viz
false
imgui
false
cpp/functions/viz/kpi_card.cpp imgui
name desc
label Nombre del KPI mostrado como header muted (ej: "Revenue", "Users")
name desc
value Valor numerico actual del KPI
name desc
delta_percent Cambio porcentual respecto al periodo anterior (positivo = mejora, negativo = deterioro)
name desc
history Array de valores historicos para el sparkline. Nullable — si es nullptr no se renderiza sparkline
name desc
history_count Numero de valores en el array history
name desc
format Formato printf para el valor principal (ej: "$%.0f", "%.1f%%", "%.2f")
Renderiza la card KPI completa en el frame ImGui actual: label muted, valor grande, badge delta verde/rojo con triangulo, y sparkline de 120x24px

kpi_card

Card compacta para dashboards ImGui que muestra un KPI con contexto de tendencia. Combina label, valor escalado, badge de delta colorizado y sparkline historico en un grupo coherente de ~150px de ancho.

Usa sparkline del registry para el historico, con el mismo color que el badge (verde si delta >= 0, rojo si delta < 0).

Debe llamarse dentro del render callback de fn::run_app (o cualquier contexto con un frame ImGui activo).

Ejemplo

float history[] = {10.0f, 12.0f, 11.0f, 15.0f, 18.0f, 17.0f, 20.0f};
kpi_card("Revenue", 20000.0f, 12.5f, history, 7, "$%.0f");

// Sin sparkline
kpi_card("Error Rate", 0.3f, -15.2f, nullptr, 0, "%.2f%%");

// Grid de KPIs
ImGui::Columns(3, "kpis", false);
kpi_card("MAU",     1250000.0f,  3.4f, mau_history, 30);
ImGui::NextColumn();
kpi_card("Revenue", 89400.0f,   -1.2f, rev_history, 30, "$%.0f");
ImGui::NextColumn();
kpi_card("Churn",   2.1f,       -0.3f, churn_history, 30, "%.1f%%");
ImGui::Columns(1);

Notas

  • El ancho total del grupo es aproximadamente 150px, apto para grids de 2-4 columnas.
  • El escalado de fuente usa SetWindowFontScale(1.8f) — compatible con cualquier fuente cargada; no requiere fonts adicionales.
  • Los caracteres UTF-8 del triangulo ( U+25B2 y U+25BC) requieren que la fuente ImGui tenga el rango de simbolos geometricos cargado, o bien sustituir por ASCII (^ y v).
  • El color verde del delta es ImVec4(0.20, 0.80, 0.35, 1.0) y el rojo ImVec4(0.90, 0.25, 0.25, 1.0), coherentes con los colores del sparkline subyacente.
  • BeginGroup/EndGroup permite usar SameLine() despues de kpi_card y que el cursor avance correctamente.