Sparkline

Mini gráfica SVG de línea. Acepta un string de puntos "x1,y1 x2,y2 ..." o una lista de tuplas [(x, y), ...]. Tres tamaños y direcciones up/down/brand.

Default

<svg class="spark"
  viewBox="0 0 100 24" preserveAspectRatio="none">
  <polyline points="0,18 10,15 20,16 30,12 40,14 50,10 60,11 70,7 80,9"/>
</svg>

{% from "sparkline.jinja" import sparkline %}
{{ sparkline("0,18 10,15 20,16 30,12 40,14 50,10 60,11 70,7 80,9") }}

<Sparkline label="0,18 10,15 20,16 30,12 40,14 50,10 60,11 70,7 80,9" />

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 ... />

Direcciones

<svg class="spark up"
  viewBox="0 0 100 24" preserveAspectRatio="none">
  <polyline points="0,18 10,16 20,14 30,12 40,10 50,9 60,7 70,5 80,3"/>
</svg>
<svg class="spark down"
  viewBox="0 0 100 24" preserveAspectRatio="none">
  <polyline points="0,4 10,6 20,5 30,9 40,11 50,14 60,15 70,18 80,19"/>
</svg>
<svg class="spark brand"
  viewBox="0 0 100 24" preserveAspectRatio="none">
  <polyline points="0,12 10,8 20,14 30,9 40,15 50,7 60,12 70,6 80,10"/>
</svg>

{% from "sparkline.jinja" import sparkline %}
{{ sparkline("0,18 10,16 20,14 30,12 40,10 50,9 60,7 70,5 80,3", direction="up") }}
{{ sparkline("0,4 10,6 20,5 30,9 40,11 50,14 60,15 70,18 80,19", direction="down") }}
{{ sparkline("0,12 10,8 20,14 30,9 40,15 50,7 60,12 70,6 80,10", direction="brand") }}

<Sparkline label="0,18 10,16 20,14 30,12 40,10 50,9 60,7 70,5 80,3" direction="up" />
<Sparkline label="0,4 10,6 20,5 30,9 40,11 50,14 60,15 70,18 80,19" direction="down" />
<Sparkline label="0,12 10,8 20,14 30,9 40,15 50,7 60,12 70,6 80,10" direction="brand" />

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 ... />

Tamaños

<svg class="spark sm"
  viewBox="0 0 60 16" preserveAspectRatio="none">
  <polyline points="0,13 15,10 30,11 45,6 60,4"/>
</svg>
<svg class="spark"
  viewBox="0 0 100 24" preserveAspectRatio="none">
  <polyline points="0,20 12,18 24,19 36,14 48,16 60,11 72,13 84,8 100,10"/>
</svg>
<svg class="spark lg up"
  viewBox="0 0 160 40" preserveAspectRatio="none">
  <polyline points="0,34 16,30 32,32 48,25 64,28 80,20 96,22 112,15 128,17 144,10 160,5"/>
</svg>

{% from "sparkline.jinja" import sparkline %}
{{ sparkline("0,13 15,10 30,11 45,6 60,4", size="sm") }}
{{ sparkline("0,20 12,18 24,19 36,14 48,16 60,11 72,13 84,8 100,10") }}
{{ sparkline("0,34 16,30 32,32 48,25 64,28 80,20 96,22 112,15 128,17 144,10 160,5", direction="up", size="lg") }}

<Sparkline label="0,13 15,10 30,11 45,6 60,4" size="sm" />
<Sparkline label="0,20 12,18 24,19 36,14 48,16 60,11 72,13 84,8 100,10" />
<Sparkline label="0,34 16,30 32,32 48,25 64,28 80,20 96,22 112,15 128,17 144,10 160,5" direction="up" size="lg" />

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 ... />

Lista de tuplas

<svg class="spark up"
  viewBox="0 0 100 24" preserveAspectRatio="none">
  <polyline points="0,18 20,14 40,10 60,6 80,2"/>
</svg>

{% from "sparkline.jinja" import sparkline %}
{{ sparkline([(0, 18), (20, 14), (40, 10), (60, 6), (80, 2)], direction="up") }}

<Sparkline items='[(0, 18), (20, 14), (40, 10), (60, 6), (80, 2)]' direction="up" />

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
`points`	str \| list[tuple]	—	Puntos SVG. String `"x,y x,y …"` o lista de tuplas.
`direction`	"up"\|"down"\|"brand"\|None	None	Color del trazo.
`size`	"sm"\|"md"\|"lg"	"md"	Define `width` y `height` del viewBox.
`width`	int	100	Override manual (ignorado si `size` ≠ md).
`height`	int	24	Override manual (ignorado si `size` ≠ md).
`attrs`	dict	{}	Atributos HTML extra.