#include "kpi_card.h" #include "sparkline.h" #include "core/tokens.h" #include #include 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 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); }