fix(cpp/viz,core): bell icon TI_BELL, candlestick Setup-inside-BeginPlot, pie legend, kpi sparkline a la derecha

- toast.cpp: TI_BELL en lugar de \xf0\x9f\x94\x94 (fuera del rango cargado por icon_font, renderizaba como ?)
- candlestick.cpp: SetupAxes/SetupAxisScale/SetupAxisLimits movidos dentro de BeginPlot/EndPlot — antes el plot desaparecia al entrar
- pie_chart.cpp: SetupLegend(East, Outside, NoButtons), eliminado NoLegend
- kpi_card.cpp: layout 2 cols con sparkline a la derecha centrado verticalmente
This commit is contained in:
2026-04-28 23:38:51 +02:00
parent 200e98e94c
commit a99aa661a2
4 changed files with 59 additions and 23 deletions
+12 -9
View File
@@ -12,16 +12,19 @@ void candlestick(const char* title, const double* dates, const double* opens,
double spacing = (count > 1) ? (dates[1] - dates[0]) : 1.0;
double half_w = spacing * (double)width_percent * 0.5;
ImPlot::SetupAxes("Date", "Price", ImPlotAxisFlags_None, ImPlotAxisFlags_AutoFit);
ImPlot::SetupAxisScale(ImAxis_X1, ImPlotScale_Time);
// Auto-fit X axis to the data range with a small margin.
ImPlot::SetupAxisLimits(ImAxis_X1,
dates[0] - spacing,
dates[count - 1] + spacing,
ImGuiCond_Always);
if (ImPlot::BeginPlot(title, ImVec2(-1, 0))) {
// ImPlot Setup* calls DEBEN ir dentro de BeginPlot/EndPlot. Antes
// estaban fuera y dejaban el plot sin ejes, lo que hacia que el demo
// de candlestick "desapareciera" al entrar en la galeria.
ImPlot::SetupAxes("Date", "Price",
ImPlotAxisFlags_None,
ImPlotAxisFlags_AutoFit);
ImPlot::SetupAxisScale(ImAxis_X1, ImPlotScale_Time);
ImPlot::SetupAxisLimits(ImAxis_X1,
dates[0] - spacing,
dates[count - 1] + spacing,
ImGuiCond_Always);
ImDrawList* draw = ImPlot::GetPlotDrawList();
const ImU32 col_bull = IM_COL32(0, 200, 80, 255); // green — close >= open
+37 -9
View File
@@ -36,6 +36,20 @@ void kpi_card(const char* label, float value, float delta_percent,
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) {
@@ -53,9 +67,6 @@ void kpi_card(const char* label, float value, float delta_percent,
ImGui::SetWindowFontScale(1.0f);
// Delta / trend — SIEMPRE se reserva la linea aunque no haya tendencia.
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;
@@ -68,12 +79,6 @@ void kpi_card(const char* label, float value, float 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) {
sparkline(label, history, history_count, colors::primary, 120.0f, 24.0f);
} else {
// Placeholder para preservar altura.
ImGui::PushStyleColor(ImGuiCol_Text, colors::text_dim);
@@ -81,6 +86,29 @@ void kpi_card(const char* label, float value, float delta_percent,
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);
+5 -2
View File
@@ -52,9 +52,10 @@ void draw_pie(const char* title, const char* const* labels, const T* values,
const ImVec2 plot_size(-1.0f, height > 0.0f ? height : 200.0f);
// Legend SIEMPRE visible para que se distingan las slices por color (los
// pies suelen tener muchas categorias).
const ImPlotFlags plot_flags = plot_static::kPlotFlags
| ImPlotFlags_Equal
| ImPlotFlags_NoLegend;
| ImPlotFlags_Equal;
if (ImPlot::BeginPlot(title, plot_size, plot_flags)) {
ImPlot::SetupAxes(nullptr, nullptr,
@@ -62,6 +63,8 @@ void draw_pie(const char* title, const char* const* labels, const T* values,
plot_static::kAxisFlagsHidden);
ImPlot::SetupAxisLimits(ImAxis_X1, 0.0, 1.0, ImPlotCond_Always);
ImPlot::SetupAxisLimits(ImAxis_Y1, 0.0, 1.0, ImPlotCond_Always);
ImPlot::SetupLegend(ImPlotLocation_East,
ImPlotLegendFlags_Outside | ImPlotLegendFlags_NoButtons);
ImPlot::PlotPieChart(labels, values, count, 0.5, 0.5, outer, "%.0f", 90.0);