egutierrez
b828fd6acc
kpi_card: - v1.1: envuelve el contenido en BeginChild con surface bg + border + radius::md + padding::md (tokens). Replica Mantine Paper withBorder radius="md" p="md" usado en @fn_library/kpi_card.tsx. - Ancho adaptativo via GetContentRegionAvail — requiere contenedor que propague ancho constrained (ImGui::BeginTable). dashboard_grid / BeginGroup no funcionan porque no constrainen ancho y la card desborda la celda. - Linea de trend SIEMPRE visible: delta, sparkline, o em dash (text_dim) como placeholder, para que un grid de KPIs quede alineado vertical. - Colores del delta via tokens (success/error) en vez de hardcoded ImVec4. bar_chart: - v1.1: altura explicita como parametro (default 200px). Sin esto, ImPlot con ImVec2(-1, 0) entra en feedback loop cuando esta dentro de un dashboard_panel (BeginChild con AutoResizeY): plot pide espacio -> padre se redimensiona -> plot recalcula. Efecto visual: las barras se deslizan los primeros frames. - Ejes blindados: Lock + NoInitialFit + Cond_Always ademas de los flags previos. Y max pre-calculado con 15% de headroom. - Sin inputs (NoInputs|NoFrame|NoBoxSelect|NoMouseText): estos charts son de resumen, no de exploracion. Actualizados los .md correspondientes con el contrato visual + requisitos de contenedor, para que cualquier dashboard que componga estos primitivos obtenga el mismo look. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
57 lines
2.5 KiB
Markdown
57 lines
2.5 KiB
Markdown
---
|
|
name: bar_chart
|
|
kind: component
|
|
lang: cpp
|
|
domain: viz
|
|
version: "1.1.0"
|
|
purity: pure
|
|
signature: "void bar_chart(const char* title, const char* const* labels, const float* values, int count, float bar_width = 0.67f, float height = 200.0f)"
|
|
description: "Renderiza un grafico de barras verticales con ImPlot, ejes pineados (Lock + Cond_Always) y altura explicita para evitar feedback loops visuales"
|
|
tags: [implot, chart, visualization, gpu, bar, locked-axes]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: [implot]
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "cpp/functions/viz/bar_chart.cpp"
|
|
framework: imgui
|
|
params:
|
|
- name: title
|
|
desc: "Titulo del grafico de barras (tambien se usa como id interno del plot)"
|
|
- name: labels
|
|
desc: "Array de etiquetas para el eje X, una por barra"
|
|
- name: values
|
|
desc: "Array de valores numericos para la altura de cada barra"
|
|
- name: count
|
|
desc: "Numero de barras (longitud de labels y values)"
|
|
- name: bar_width
|
|
desc: "Ancho de cada barra como fraccion del hueco de celda (default 0.67)"
|
|
- name: height
|
|
desc: "Altura del plot en pixeles (default 200). Explicita para evitar feedback loops con contenedores AutoResizeY"
|
|
output: "Renderiza el grafico de barras en el frame ImGui actual con ejes X/Y pineados"
|
|
---
|
|
|
|
# bar_chart
|
|
|
|
Barras verticales con ImPlot, pensado para dashboards estaticos (resumenes, KPIs). Diseno:
|
|
|
|
- **Ejes pineados** — `ImPlotCond_Always` + `ImPlotAxisFlags_Lock` + `ImPlotAxisFlags_NoInitialFit`. Sin esto, ImPlot auto-fitea cada frame y las barras oscilan los primeros frames.
|
|
- **Y max con 15% de headroom** — calculado a partir de `values` una vez, mas estetico que el fit apretado de ImPlot.
|
|
- **Altura explicita** — `ImVec2(-1, height)` en vez de `ImVec2(-1, 0)`. Dentro de un `dashboard_panel` (BeginChild con AutoResizeY), un height=0 crea un feedback loop: el plot pide espacio al padre, el padre se redimensiona al plot, el plot recalcula y asi. El efecto visual es que las barras se deslizan de lado al abrir la ventana. Con height fija no hay loop.
|
|
- **Sin inputs** — `ImPlotFlags_NoInputs | NoFrame | NoBoxSelect | NoMouseText`. Pensado para visualizacion, no exploracion.
|
|
|
|
Debe llamarse dentro del render callback de `fn::run_app`.
|
|
|
|
## Ejemplo
|
|
|
|
```cpp
|
|
const char* langs[] = {"go", "py", "ts", "sh", "cpp"};
|
|
float counts[] = {412, 187, 94, 63, 36};
|
|
bar_chart("Functions by lang", langs, counts, 5); // height por defecto 200
|
|
bar_chart("Compact", langs, counts, 5, 0.8f, 120.0f); // compacto
|
|
```
|