KPI
Tarjeta de métrica destacada — label en mayúscula, valor grande, delta opcional con flecha y color, sparkline opcional.
<div class="kpi">
<div class="label">Tickets</div>
<div class="value">147</div>
</div>
{% from "kpi.jinja" import kpi %}
{{ kpi("Tickets", "147") }}
<Kpi label="Tickets" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
Ventas hoy
€2.847,30
+12,4% vs ayer
Ticket medio
€19,37
−2,1%
<div class="kpi">
<div class="label">Ventas hoy</div>
<div class="value">€2.847<span class="unit">,30</span></div>
<div class="kpi-delta up"><iconify-icon class="kpi-delta-arrow" icon="lucide:arrow-up-right" width="14" height="14"></iconify-icon>
+12,4% vs ayer
</div>
</div>
<div class="kpi">
<div class="label">Ticket medio</div>
<div class="value">€19<span class="unit">,37</span></div>
<div class="kpi-delta down"><iconify-icon class="kpi-delta-arrow" icon="lucide:arrow-down-right" width="14" height="14"></iconify-icon>
−2,1%
</div>
</div>
<div class="kpi">
<div class="label">Margen</div>
<div class="value">68<span class="unit">%</span></div>
<div class="kpi-delta">
objetivo 70%
</div>
</div>
{% from "kpi.jinja" import kpi %}
{{ kpi("Ventas hoy", "€2.847", unit=",30", delta="+12,4% vs ayer", delta_dir="up") }}
{{ kpi("Ticket medio", "€19", unit=",37", delta="−2,1%", delta_dir="down") }}
{{ kpi("Margen", "68", unit="%", delta="objetivo 70%") }}
<Kpi label="Ventas hoy" unit=",30" delta="+12,4% vs ayer" delta_dir="up" />
<Kpi label="Ticket medio" unit=",37" delta="−2,1%" delta_dir="down" />
<Kpi label="Margen" unit="%" delta="objetivo 70%" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:stretch;">
<div class="kpi brand">
<div class="label">Margen</div>
<div class="value">68<span class="unit">%</span></div>
<div class="kpi-delta">
objetivo 70%
</div>
</div>
<div class="kpi brand">
<div class="label">MRR</div>
<div class="value">€12.840</div>
<div class="kpi-delta up"><iconify-icon class="kpi-delta-arrow" icon="lucide:arrow-up-right" width="14" height="14"></iconify-icon>
+18%
</div>
</div>
</div>
{% from "kpi.jinja" import kpi %}
{{ kpi("Margen", "68", unit="%", delta="objetivo 70%", variant="brand") }}
{{ kpi("MRR", "€12.840", delta="+18%", delta_dir="up", variant="brand") }}
<Kpi label="Margen" unit="%" delta="objetivo 70%" variant="brand" />
<Kpi label="MRR" delta="+18%" delta_dir="up" variant="brand" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
<div class="kpi">
<div class="label">Ventas 7d</div>
<div class="value">€18.420</div>
<div class="kpi-delta up"><iconify-icon class="kpi-delta-arrow" icon="lucide:arrow-up-right" width="14" height="14"></iconify-icon>
+12,4%
</div>
<svg class="kpi-sparkline" viewBox="0 0 80 32" preserveAspectRatio="none">
<polyline points="0,28 10,24 20,26 30,18 40,20 50,12 60,14 70,8 80,4" fill="none" stroke="var(--leaf)" stroke-width="1.5"/>
</svg>
</div>
{% from "kpi.jinja" import kpi %}
{% set spark_svg %}
<svg class="kpi-sparkline" viewBox="0 0 80 32" preserveAspectRatio="none">
<polyline points="0,28 10,24 20,26 30,18 40,20 50,12 60,14 70,8 80,4" fill="none" stroke="var(--leaf)" stroke-width="1.5"/>
</svg>
{% endset %}
{{ kpi(
"Ventas 7d", "€18.420",
delta="+12,4%", delta_dir="up",
sparkline=spark_svg
) }}
{% set spark_svg %}
<svg class="kpi-sparkline" viewBox="0 0 80 32" preserveAspectRatio="none">
<polyline points="0,28 10,24 20,26 30,18 40,20 50,12 60,14 70,8 80,4" fill="none" stroke="var(--leaf)" stroke-width="1.5"/>
</svg>
{% endset %}
<Kpi label="Ventas 7d" delta="+12,4%" delta_dir="up" sparkline="spark_svg" />
Install the Jinja addon and import the component:
pip install outfitkit
Then in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}
Or with JinjaX:
<Component ... />
API
| Prop | Tipo | Default | Descripción |
|---|
label | str | — | Etiqueta superior (uppercase tracking). |
value | str | — | Valor grande. |
unit | str|None | None | Unidad o decimales en tamaño reducido. |
delta | str|None | None | Texto delta. Si está, se renderiza la fila inferior. |
delta_dir | "up"|"down"|None | None | Dirección (color + flecha SVG). |
variant | "brand"|"glass"|None | None | Variante de superficie. |
sparkline | str|safe HTML | None | SVG sparkline injectado en absoluto bottom/right. |
attrs | dict | {} | Atributos HTML extra. |