egutierrez
3f622561ce
Nuevo primitivo compartido: - cpp/functions/viz/plot_static.h: header-only con flags ImPlotFlags / ImPlotAxisFlags agrupados (NoFrame|NoMenus|NoBoxSelect|NoMouseText + Lock|NoInitialFit|NoHighlight) para visualizacion estatica en dashboards. Lo usan todos los charts de viz/. Charts refactorizados a v1.1 con parametro `height` explicito (rompe el feedback loop con contenedores AutoResizeY que producia vibracion al redimensionar) y ejes pineados con ImPlotCond_Always: - bar_chart v1.2: tooltip al hover (label + valor) + auto-rotacion de labels a 45 cuando no caben horizontalmente (medidos con CalcTextSize vs ancho del plot). Los labels rotados se dibujan manualmente con ImDrawList::PrimQuadUV + ImFontBaked::FindGlyph (API ImGui 1.92+). - pie_chart v1.1: tooltip por slice (detecta cual via atan2 desde centro en sentido CCW matematico, que es como ImPlot dibuja los slices desde angle0=90) con label + valor + porcentaje. Aspect 1:1 mantenido. - line_plot, scatter_plot, histogram v1.1: ejes pineados con limites calculados de min/max + 5% headroom (histogram usa AutoFit por los bins dinamicos, con Lock para bloquear pan/zoom). kpi_card v1.2: card mas compacta — altura 78px (antes 108), font scale 1.4x (antes 1.8x), padding sm (antes md). Apto para densidades altas de KPIs en dashboards. fullscreen_window v0.2: NoScrollbar|NoScrollWithMouse para eliminar el scrollbar fugaz que aparecia cuando el contenido excedia por 1-2px la ventana, reflow de ancho y vibracion visible al redimensionar. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
73 lines
3.5 KiB
Markdown
73 lines
3.5 KiB
Markdown
---
|
|
name: kpi_card
|
|
kind: component
|
|
lang: cpp
|
|
domain: viz
|
|
version: "1.2.0"
|
|
purity: pure
|
|
signature: "void kpi_card(const char* label, float value, float delta_percent, const float* history = nullptr, int history_count = 0, const char* format = \"%.1f\")"
|
|
description: "Card de KPI con valor grande, delta porcentual y sparkline historico. Contenedor con surface bg, borde y radius via tokens (Mantine Paper equivalente)."
|
|
tags: [imgui, kpi, card, dashboard, metrics, sparkline, tokens]
|
|
uses_functions: ["sparkline_cpp_viz", "tokens_cpp_core"]
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: [imgui]
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "cpp/functions/viz/kpi_card.cpp"
|
|
framework: imgui
|
|
params:
|
|
- name: label
|
|
desc: "Nombre del KPI mostrado como header muted (ej: \"Revenue\", \"Users\")"
|
|
- name: value
|
|
desc: "Valor numerico actual del KPI"
|
|
- name: delta_percent
|
|
desc: "Cambio porcentual respecto al periodo anterior (positivo = mejora, negativo = deterioro)"
|
|
- name: history
|
|
desc: "Array de valores historicos para el sparkline. Nullable — si es nullptr no se renderiza sparkline"
|
|
- name: history_count
|
|
desc: "Numero de valores en el array history"
|
|
- name: format
|
|
desc: "Formato printf para el valor principal (ej: \"$%.0f\", \"%.1f%%\", \"%.2f\")"
|
|
output: "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
|
|
|
|
```cpp
|
|
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
|
|
|
|
- **v1.1**: la card se renderiza dentro de un `BeginChild` con `surface` bg, `border` y `radius::md` de `fn_tokens` — replica el `<Paper withBorder radius="md" p="sm">` del frontend.
|
|
- **v1.2**: altura fija 78px (antes 108px) + font scale `1.4x` (antes `1.8x`) + padding `spacing::sm` (antes `md`). Mas compacta para densidades altas de KPIs. `NoScrollbar|NoScrollWithMouse` ademas de altura fija para evitar lag al redimensionar.
|
|
- El ancho se adapta al contenedor padre via `GetContentRegionAvail().x`. Para que ocupe exactamente una celda usar `ImGui::BeginTable` — `BeginGroup` / `dashboard_grid` no propagan ancho constrained y la card desbordaria la celda.
|
|
- La linea de trend siempre se reserva (delta, sparkline o em dash placeholder en `text_dim`) para que un grid de KPIs quede alineado vertical.
|
|
- Los caracteres UTF-8 del triangulo (`▲` U+25B2 y `▼` U+25BC) y del em dash (`—` U+2014) requieren que la fuente ImGui tenga el rango de simbolos geometricos / puntuacion general cargado.
|
|
- Colores: delta usa `fn_tokens::colors::{success, error}`, placeholder em dash usa `text_dim`, label usa `text_muted`.
|