# LivaSparkline
Package: @dataliva/livalib
Description: @dataliva/livalib satır içi mini grafik (sparkline) bileşeni.

DevExtreme'in Sparkline bileşenini saran ince bir katman. Eksen ve lejant
olmadan, tablo hücresi veya metin satırı içine sığan mini grafikler çizer.
Fareyle üzerine gelindiğinde ipucu (tooltip) varsayılan olarak açıktır.

```tsx
import { LivaSparkline } from "@dataliva/livalib";
```

## Tipler

`type` prop'u grafik biçimini belirler. `showMinMax` en düşük ve en yüksek
noktaları vurgular, `showFirstLast` ilk ve son noktayı işaretler.

**Örnek — Tipler — line, bar, area:**

```tsx
<LivaSparkline
  dataSource={ciroTrendi}
  argumentField="ay"
  valueField="deger"
  type="line"
  showMinMax
  width={160}
  height={48}
/>
<LivaSparkline
  dataSource={ciroTrendi}
  argumentField="ay"
  valueField="deger"
  type="bar"
  width={160}
  height={48}
/>
<LivaSparkline
  dataSource={ciroTrendi}
  argumentField="ay"
  valueField="deger"
  type="area"
  width={160}
  height={48}
/>
```

## Tablo içinde kullanım

Sparkline'ın asıl kullanım yeri tablo hücreleridir: her satırın kendi veri
dizisi ayrı bir `dataSource` olarak verilir.

**Örnek — Tablo içinde mini grafikler:**

```tsx
<table className="w-full text-sm">
  <thead>
    <tr className="border-b border-zinc-200 text-left dark:border-zinc-800">
      <th className="py-2">Ürün</th>
      <th className="py-2">Trend</th>
      <th className="py-2">Aylık Dağılım</th>
      <th className="py-2 text-right">Toplam</th>
    </tr>
  </thead>
  <tbody>
    {urunTrendleri.map((u) => (
      <tr key={u.urun} className="border-b border-zinc-100 dark:border-zinc-900">
        <td className="py-2">{u.urun}</td>
        <td className="py-2">
          <LivaSparkline
            dataSource={u.veriler}
            argumentField="ay"
            valueField="deger"
            type="line"
            width={140}
            height={36}
          />
        </td>
        <td className="py-2">
          <LivaSparkline
            dataSource={u.veriler}
            argumentField="ay"
            valueField="deger"
            type="bar"
            width={140}
            height={36}
          />
        </td>
        <td className="py-2 text-right">{u.toplam}</td>
      </tr>
    ))}
  </tbody>
</table>
```

## Prop'lar

| Prop | Tip | Açıklama |
|------|------|---------|
| `dataSource` | `object[]` | Mini grafiğin veri kaynağı |
| `argumentField` | `string` | Argüman alanı, varsayılan `'arg'` |
| `valueField` | `string` | Değer alanı, varsayılan `'val'` |
| `type` | `'line' \| 'spline' \| 'stepline' \| 'area' \| 'splinearea' \| 'steparea' \| 'bar' \| 'winloss'` | Grafik biçimi |
| `showMinMax` | `boolean` | Min/maks noktaları vurgular |
| `showFirstLast` | `boolean` | İlk/son noktayı vurgular |
| `height` / `width` | `number \| string` | Grafik boyutları |
| `className` | `string` | livalib'e özgü ek prop |
| `style` | `React.CSSProperties` | livalib'e özgü ek prop |

Geri kalan tüm prop'lar DevExtreme `Sparkline`'dan miras alınır.