#include "kpi_card.h" #include "sparkline.h" #include "core/tokens.h" #include "core/icons_tabler.h" #include #include void kpi_card(const char* label, float value, float delta_percent, const float* history, int history_count, const char* format, const char* icon) { 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::sm, spacing::sm)); // 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; // Altura fija (no AutoResizeY) para que: // (a) todas las cards de un grid queden alineadas visualmente, // (b) no haya recalculo de layout por card en cada resize. constexpr float card_height = 86.0f; ImGui::BeginChild(child_id, ImVec2(width, card_height), ImGuiChildFlags_Borders, ImGuiWindowFlags_NoScrollbar | ImGuiWindowFlags_NoScrollWithMouse); const bool has_history = history != nullptr && history_count > 0; const bool has_delta = delta_percent != 0.0f; // Layout de dos columnas: izquierda info (label, value, delta), derecha sparkline. // El sparkline se sitia verticalmente centrado a la derecha de la card. constexpr float spark_w = 100.0f; constexpr float spark_h = 36.0f; const float inner_w = ImGui::GetContentRegionAvail().x; const float info_w = has_history ? (inner_w - spark_w - spacing::sm) : inner_w; ImGui::BeginGroup(); ImGui::PushItemWidth(info_w); // Top row: optional icon + label, ambos en text_muted. ImGui::PushStyleColor(ImGuiCol_Text, colors::text_muted); if (icon && *icon) { ImGui::TextUnformatted(icon); ImGui::SameLine(0, spacing::xs); } ImGui::TextUnformatted(label); ImGui::PopStyleColor(); // Value — escala compacta 1.4x, proporcional a una card de 86px. ImGui::SetWindowFontScale(1.4f); 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. if (has_delta) { const bool positive = delta_percent >= 0.0f; const ImVec4 delta_color = positive ? colors::success : colors::error; char delta_buf[48]; if (positive) { std::snprintf(delta_buf, sizeof(delta_buf), TI_TRENDING_UP " +%.1f%%", delta_percent); } else { std::snprintf(delta_buf, sizeof(delta_buf), TI_TRENDING_DOWN " %.1f%%", delta_percent); } ImGui::PushStyleColor(ImGuiCol_Text, delta_color); ImGui::TextUnformatted(delta_buf); ImGui::PopStyleColor(); } else { // Placeholder para preservar altura. ImGui::PushStyleColor(ImGuiCol_Text, colors::text_dim); ImGui::TextUnformatted(TI_MINUS); ImGui::PopStyleColor(); } ImGui::PopItemWidth(); ImGui::EndGroup(); // Sparkline a la derecha, centrado verticalmente respecto a la card. if (has_history) { const ImVec4 spark_color = has_delta ? (delta_percent >= 0.0f ? colors::success : colors::error) : colors::primary; ImGui::SameLine(); // Centrar verticalmente: la card mide card_height, el sparkline spark_h. // Restamos el padding interno (spacing::sm) ya consumido al inicio. const float card_inner_h = card_height - 2.0f * spacing::sm; float y_offset = (card_inner_h - spark_h) * 0.5f; if (y_offset < 0.0f) y_offset = 0.0f; // Anclamos el sparkline al borde derecho. const float spark_x = inner_w - spark_w; ImGui::SetCursorPos(ImVec2(spacing::sm + spark_x, spacing::sm + y_offset)); sparkline(label, history, history_count, spark_color, spark_w, spark_h); } ImGui::EndChild(); ImGui::PopStyleVar(3); ImGui::PopStyleColor(2); }