Armada

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'
Sonuç yok