Stat
Métrica compacta para fila comparativa. Se compone dentro del wrapper .ok-stats que aplica grid + bordes verticales entre items.
Clientes nuevos
38
igual que mes
<div class="stats" style="width: 100%;">
<div class="stat">
<div class="label">Pedidos</div>
<div class="value">1.284</div><div class="stat-delta up">+6,2%</div>
</div>
<div class="stat">
<div class="label">Facturación</div>
<div class="value">€48.210</div><div class="stat-delta up">+9,1%</div>
</div>
<div class="stat">
<div class="label">Devoluciones</div>
<div class="value">12</div><div class="stat-delta down">−4 vs mes</div>
</div>
<div class="stat">
<div class="label">Clientes nuevos</div>
<div class="value">38</div><div class="stat-delta">igual que mes</div>
</div>
</div>
{% from "stat.jinja" import stat %}
<div class="stats" style="width: 100%;">
{{ stat("Pedidos", "1.284", delta="+6,2%", delta_dir="up") }}
{{ stat("Facturación", "€48.210", delta="+9,1%", delta_dir="up") }}
{{ stat("Devoluciones", "12", delta="−4 vs mes", delta_dir="down") }}
{{ stat("Clientes nuevos", "38", delta="igual que mes") }}
</div>
<div class="stats" style="width: 100%;">
<Stat label="Pedidos" delta="+6,2%" delta_dir="up" />
<Stat label="Facturación" delta="+9,1%" delta_dir="up" />
<Stat label="Devoluciones" delta="−4 vs mes" delta_dir="down" />
<Stat label="Clientes nuevos" delta="igual que mes" />
</div>
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="stats" style="width: 100%;">
<div class="stat">
<div class="label">Stock crítico</div>
<div class="value">7 SKU</div>
</div>
<div class="stat">
<div class="label">En tránsito</div>
<div class="value">23</div>
</div>
<div class="stat">
<div class="label">Almacenes</div>
<div class="value">4</div>
</div>
</div>
{% from "stat.jinja" import stat %}
<div class="stats" style="width: 100%;">
{{ stat("Stock crítico", "7 SKU") }}
{{ stat("En tránsito", "23") }}
{{ stat("Almacenes", "4") }}
</div>
<div class="stats" style="width: 100%;">
<Stat label="Stock crítico" />
<Stat label="En tránsito" />
<Stat label="Almacenes" />
</div>
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 ... />
Total ventas
€48.210
+9,1% vs ayer
<div class="stat">
<div class="label">Total ventas</div>
<div class="value">€48.210</div><div class="stat-delta up">+9,1% vs ayer</div>
</div>
{% from "stat.jinja" import stat %}
{{ stat("Total ventas", "€48.210", delta="+9,1% vs ayer", delta_dir="up") }}
<Stat label="Total ventas" delta="+9,1% vs ayer" delta_dir="up" />
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 uppercase superior. |
value | str | — | Valor numérico/texto. |
delta | str|None | None | Texto delta opcional. |
delta_dir | "up"|"down"|None | None | Color del delta (verde/rojo). |
attrs | dict | {} | Atributos HTML extra. |