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>
83 lines
3.2 KiB
C++
83 lines
3.2 KiB
C++
#include "kpi_card.h"
|
|
#include "sparkline.h"
|
|
#include "core/tokens.h"
|
|
#include <imgui.h>
|
|
#include <cstdio>
|
|
|
|
void kpi_card(const char* label, float value, float delta_percent,
|
|
const float* history, int history_count,
|
|
const char* format) {
|
|
using namespace fn_tokens;
|
|
|
|
// Card container — surface bg, border, rounded, padding.
|
|
// Mirrors Mantine <Paper withBorder shadow="xs" radius="md" p="md" /> usado
|
|
// en @fn_library/kpi_card.tsx, adaptado a ImGui dark theme via tokens.
|
|
ImGui::PushStyleColor(ImGuiCol_ChildBg, colors::surface);
|
|
ImGui::PushStyleColor(ImGuiCol_Border, colors::border);
|
|
ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, radius::md);
|
|
ImGui::PushStyleVar(ImGuiStyleVar_ChildBorderSize, 1.0f);
|
|
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(spacing::md, spacing::md));
|
|
|
|
// Unique child id por label para que multiples cards en la misma ventana
|
|
// no colisionen.
|
|
char child_id[96];
|
|
std::snprintf(child_id, sizeof(child_id), "##kpi_%s", label);
|
|
|
|
float width = ImGui::GetContentRegionAvail().x;
|
|
if (width < 1.0f) width = 1.0f;
|
|
|
|
ImGui::BeginChild(child_id, ImVec2(width, 0),
|
|
ImGuiChildFlags_Borders | ImGuiChildFlags_AutoResizeY);
|
|
|
|
// Label — muted
|
|
ImGui::PushStyleColor(ImGuiCol_Text, colors::text_muted);
|
|
ImGui::TextUnformatted(label);
|
|
ImGui::PopStyleColor();
|
|
|
|
// Value — scaled up. El format controla el sufijo (ej: "%.0f%%" para
|
|
// porcentajes, "%.0f" para enteros, "$%.2f" para moneda).
|
|
ImGui::SetWindowFontScale(1.8f);
|
|
char value_buf[64];
|
|
std::snprintf(value_buf, sizeof(value_buf), format, value);
|
|
ImGui::TextUnformatted(value_buf);
|
|
ImGui::SetWindowFontScale(1.0f);
|
|
|
|
// Delta / trend — SIEMPRE se reserva la linea aunque no haya tendencia,
|
|
// para que todas las cards tengan la misma altura. Cuando no hay delta
|
|
// ni history, se muestra un guion en text_dim para mantener el ritmo
|
|
// visual sin hacer ruido con "+0.0%".
|
|
const bool has_delta = delta_percent != 0.0f;
|
|
const bool has_history = history != nullptr && history_count > 0;
|
|
|
|
if (has_delta) {
|
|
const bool positive = delta_percent >= 0.0f;
|
|
const ImVec4 delta_color = positive ? colors::success : colors::error;
|
|
char delta_buf[32];
|
|
if (positive) {
|
|
std::snprintf(delta_buf, sizeof(delta_buf), "\xe2\x96\xb2 +%.1f%%", delta_percent);
|
|
} else {
|
|
std::snprintf(delta_buf, sizeof(delta_buf), "\xe2\x96\xbc %.1f%%", delta_percent);
|
|
}
|
|
ImGui::PushStyleColor(ImGuiCol_Text, delta_color);
|
|
ImGui::TextUnformatted(delta_buf);
|
|
ImGui::PopStyleColor();
|
|
|
|
if (has_history) {
|
|
sparkline(label, history, history_count, delta_color, 120.0f, 24.0f);
|
|
}
|
|
} else if (has_history) {
|
|
// Sin delta pero con historia: sparkline en primary (neutro).
|
|
sparkline(label, history, history_count, colors::primary, 120.0f, 24.0f);
|
|
} else {
|
|
// Placeholder para preservar altura de la card.
|
|
ImGui::PushStyleColor(ImGuiCol_Text, colors::text_dim);
|
|
ImGui::TextUnformatted("\xe2\x80\x94"); // em dash
|
|
ImGui::PopStyleColor();
|
|
}
|
|
|
|
ImGui::EndChild();
|
|
|
|
ImGui::PopStyleVar(3);
|
|
ImGui::PopStyleColor(2);
|
|
}
|