Sparkline
Küçük trend grafikleri: çizgi, alan, çubuk.
Grafikler
VSparkline
2 örnek
Alan, çizgi ve çubuk
Alan
Çizgi
Çubuk
Kodu göster
blade
<div class="arm-grid" style="--min: 200px">
<armada:card title="Alan"><armada:sparkline :values="[4, 8, 6, 12, 9, 14, 11, 18]" height="48px" /></armada:card>
<armada:card title="Çizgi"><armada:sparkline type="line" tone="success" :values="[18, 14, 16, 10, 12, 8, 9, 6]" height="48px" /></armada:card>
<armada:card title="Çubuk"><armada:sparkline type="bar" tone="purple" :values="[3, 7, 4, 9, 6, 8, 5, 10, 7]" height="48px" /></armada:card>
</div>
Tablo içinde
| Hisse | 7 gün | Fiyat |
|---|---|---|
| ARMD | ₺18,40 | |
| EMBR | ₺11,05 |
Kodu göster
blade
<armada:table compact>
<armada:table.columns><armada:table.column>Hisse</armada:table.column><armada:table.column>7 gün</armada:table.column><armada:table.column align="end">Fiyat</armada:table.column></armada:table.columns>
<armada:table.rows>
@foreach ([['ARMD', [10, 12, 11, 14, 16, 15, 18], 'success', '₺18,40'], ['EMBR', [20, 18, 19, 15, 14, 12, 11], 'danger', '₺11,05']] as [$s, $v, $t, $p])
<armada:table.row>
<armada:table.cell primary>{{ $s }}</armada:table.cell>
<armada:table.cell label="7 gün"><armada:sparkline :values="$v" :tone="$t" type="line" style="width:120px" /></armada:table.cell>
<armada:table.cell label="Fiyat" align="end">{{ $p }}</armada:table.cell>
</armada:table.row>
@endforeach
</armada:table.rows>
</armada:table>
Özellikler
<armada:sparkline>
Değerler: line | area | bar
| Prop | Varsayılan | Not |
|---|---|---|
values |
[] |
|
tone |
'primary' |
|
type |
'area' |
|
height |
'32px' |