Stats

Contenedor en grid para mostrar varios <Stat /> en línea con bordes verticales entre ellos.

Fila de 4

Pedidos

1.284

+6,2%

Facturación

€48.210

+9,1%

Devoluciones

−4 vs mes

Clientes nuevos

igual que mes

<div class="stats">
  
<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 %}
{% from "stats.jinja" import stats %}
{% call stats() %}
{{ 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") }}
{% endcall %}

<Stats>
<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" />
</Stats>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Fila de 3 sin delta

Stock crítico

7 SKU

En tránsito

Almacenes

<div class="stats">
  
<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 %}
{% from "stats.jinja" import stats %}
{% call stats() %}
{{ stat("Stock crítico", "7 SKU") }}
{{ stat("En tránsito", "23") }}
{{ stat("Almacenes", "4") }}
{% endcall %}

<Stats>
<Stat label="Stock crítico" />
<Stat label="En tránsito" />
<Stat label="Almacenes" />
</Stats>

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`variant`	str\|None	None	Modificador opcional (ej. `glass`).
`attrs`	dict	{}	Atributos HTML extra.
(slot)	—	—	Items `<Stat />`.