Grafikli kartlar
Kart içine yerleştirilmiş ApexCharts grafikleri. Aylık karşılaştırmalar, oranlar ve eğilimler için acun:card ile acun:chart birlikte kullanılır.
Çubuk grafik
acun:chart ApexCharts ayarlarını options dizisinden alır (chart, series, xaxis, colors …). Araç çubuğu kapalı gelir, yazı tipi sayfadan alınır ve renkler koyu temaya kendiliğinden uyar. JS tarafında registerChart kurulu olmalıdır.
<acun:card title="Aylık siparişler" subtitle="Son 6 ay">
<acun:chart :height="260" :options="[
'chart' => ['type' => 'bar'],
'series' => [['name' => 'Sipariş', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]], ['name' => 'İade', 'data' => [240, 198, 221, 260, 190, 214]]],
'xaxis' => ['categories' => ['Nis', 'May', 'Haz', 'Tem', 'Ağu', 'Eyl']],
'colors' => ['primary', '#e5e7eb'],
'plotOptions' => ['bar' => ['borderRadius' => 4, 'columnWidth' => '45%']],
'dataLabels' => ['enabled' => false],
'legend' => ['position' => 'top', 'horizontalAlign' => 'left'],
]" />
</acun:card>| Prop | Değerler |
|---|---|
options | ApexCharts ayarları (dizi) |
height | Piksel; varsayılan 280 |
Oran göstergesi
Tek bir oranı göstermek için radialBar türünü kullanın; series tek bir yüzde değeri alır. Ortadaki yazının boyutu plotOptions ile ayarlanır.
<acun:card title="Zamanında teslimat" subtitle="Eylül 2026">
<acun:chart :height="260" :options="[
'chart' => ['type' => 'radialBar'],
'series' => [94],
'labels' => ['Zamanında'],
'colors' => ['primary'],
'plotOptions' => ['radialBar' => ['hollow' => ['size' => '62%'], 'dataLabels' => ['value' => ['fontSize' => '28px', 'fontWeight' => 600]]]],
]" />
</acun:card>| Prop | Değerler |
|---|---|
chart.type | bar | line | area | radialBar | donut … |
Eğilim grafiği
Zaman içindeki değişim için area ya da line türü uygundur. stroke.curve çizgiyi yumuşatır, fill alanın altını degradeyle doldurur.
<acun:card title="Haftalık ziyaretçi" subtitle="Son 8 hafta">
<acun:chart :height="240" :options="[
'chart' => ['type' => 'area'],
'series' => [['name' => 'Ziyaretçi', 'data' => [612, 640, 598, 702, 688, 731, 745, 760]]],
'xaxis' => ['categories' => ['1. hf', '2. hf', '3. hf', '4. hf', '5. hf', '6. hf', '7. hf', '8. hf']],
'colors' => ['primary'],
'stroke' => ['curve' => 'smooth', 'width' => 2],
'dataLabels' => ['enabled' => false],
'fill' => ['type' => 'gradient', 'gradient' => ['opacityFrom' => 0.35, 'opacityTo' => 0.05]],
]" />
</acun:card>| Prop | Değerler |
|---|---|
stroke.curve | smooth | straight | stepline |
fill.type | solid | gradient |
İstatistik kartında
acun:stat-card'ın varsayılan slot'una küçük bir grafik koyarak sayının eğilimini gösterin. chart.sparkline eksenleri ve kenar boşluklarını kaldırır; yüksekliği düşük tutun.
<div class="grid gap-4 sm:grid-cols-2">
<acun:stat-card label="Bu ay sipariş" value="3.106" icon="shopping-bag" color="success" :change="12.5" change-label="geçen aya göre">
<acun:chart :height="60" :options="[
'chart' => ['type' => 'area', 'sparkline' => ['enabled' => true]],
'series' => [['name' => 'Sipariş', 'data' => [2810, 2944, 3012, 2890, 3240, 3106]]],
'colors' => ['success'],
'stroke' => ['curve' => 'smooth', 'width' => 2],
]" />
</acun:stat-card>
<acun:stat-card label="İade" value="214" icon="receipt-refund" color="warning" :change="-4" change-label="geçen aya göre">
<acun:chart :height="60" :options="[
'chart' => ['type' => 'bar', 'sparkline' => ['enabled' => true]],
'series' => [['name' => 'İade', 'data' => [240, 198, 221, 260, 190, 214]]],
'colors' => ['warning'],
'plotOptions' => ['bar' => ['borderRadius' => 2, 'columnWidth' => '55%']],
]" />
</acun:stat-card>
</div>| Prop | Değerler |
|---|---|
chart.sparkline | ['enabled' => true] |
Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
options | [] | ApexCharts ayarları; varsayılan chart.height, toolbar ve fontFamily değerlerinin üzerine yazılır |
height | 280 | Grafik yüksekliği (px) |
card: title, subtitle | null | Kart başlığı; diğer kart prop'ları Temel kart sayfasında |