---
name: sparkline
kind: component
lang: cpp
domain: viz
version: "1.0.0"
purity: pure
signature: "void sparkline(const char* id, const float* values, int count, float width = 100.0f, float height = 20.0f)"
description: "Renderiza un mini grafico de lineas inline para uso en tablas, headers y KPI cards"
tags: [imgui, visualization, sparkline, inline, dashboard]
uses_functions: []
uses_types: []
returns: []
returns_optional: false
error_type: ""
imports: [imgui]
tested: true
tests:
  - "compiles and links against Catch2 (placeholder, visual cubierto en 0048)"
test_file_path: "cpp/tests/test_sparkline.cpp"
file_path: "cpp/functions/viz/sparkline.cpp"
framework: imgui
params:
  - name: id
    desc: "Identificador unico del widget, usado con PushID/PopID para garantizar unicidad en tablas"
  - name: values
    desc: "Array de valores float del sparkline (serie temporal)"
  - name: count
    desc: "Numero de valores en el array"
  - name: width
    desc: "Ancho en pixels del sparkline (default 100.0)"
  - name: height
    desc: "Alto en pixels del sparkline (default 20.0)"
output: "Renderiza el sparkline inline en el frame ImGui actual, reservando espacio con ImGui::Dummy"
notes: "scaffolding/demo en primitives_gallery"
---

# sparkline

Mini grafico de lineas inline construido sobre ImGui draw primitives. No requiere ImPlot.

Auto-escala el eje Y al rango minimo/maximo de los valores. Dibuja una polyline con relleno semitransparente bajo la curva. Disenado para encajar en celdas de tablas, headers y tarjetas KPI.

Ofrece dos overloads:
- Sin color: usa verde suave por defecto (`ImVec4(0.35, 0.85, 0.45, 1.0)`)
- Con color: acepta cualquier `ImVec4` para personalizar la linea y el relleno

Debe llamarse dentro del render callback de `fn::run_app` (o cualquier contexto con un frame ImGui activo).

## Ejemplo

```cpp
// En una celda de tabla
ImGui::TableNextColumn();
sparkline("##revenue_spark", revenue.data(), (int)revenue.size(), 80.0f, 18.0f);

// Con color personalizado (rojo para valores negativos)
sparkline("##pnl", pnl.data(), (int)pnl.size(),
          ImVec4(0.9f, 0.3f, 0.3f, 1.0f), 100.0f, 20.0f);

// KPI card inline con label
ImGui::Text("Revenue"); ImGui::SameLine();
sparkline("kpi_rev", data, count);
```

## Notas

- El relleno bajo la curva usa alpha 40/255 del mismo color de la linea.
- Si todos los valores son iguales (rango < 1e-6), la linea se dibuja en el centro verticalmente.
- El grosor de linea es 1.5px para que sea legible a alturas de 16-24px.
- `id` no se muestra visualmente; solo se pasa a `PushID` para que ImGui diferencie widgets con los mismos datos en la misma tabla.