# LivaTreeMap
Package: @dataliva/livalib
Description: @dataliva/livalib ağaç haritası (tree map) bileşeni.

DevExtreme'in TreeMap bileşenini saran ince bir katman. Hiyerarşik verileri,
alanı değerle orantılı dikdörtgen karolar halinde gösterir; kategori bazlı
büyüklük karşılaştırmaları için idealdir.

Varsayılan alan adları: karo etiketi `name`, karo değeri `value`, alt öğeler
`items`. Farklı alan adları için `labelField`, `valueField` ve `childrenField`
kullanılır. Alt bileşenler `devextreme-react/tree-map` paketinden içe aktarılır.

```tsx
import { LivaTreeMap } from "@dataliva/livalib";
import { Colorizer, Tooltip } from "devextreme-react/tree-map";
```

## Düz liste

Tek seviyeli veride her kayıt bir karodur; karo alanı `value` ile orantılıdır.

**Örnek — Düz liste — ürün bazlı satış büyüklüğü:**

```tsx
<LivaTreeMap dataSource={urunSatislari} height={320}>
  <Tooltip enabled />
</LivaTreeMap>
```

## Gruplu görünüm

`items` içeren kayıtlar grup başlığına dönüşür. `Colorizer` üzerindeki
`colorizeGroups` her grubu kendi rengiyle boyar.

**Örnek — Gruplu — kategori altında ürünler:**

```tsx
<LivaTreeMap dataSource={kategoriSatislari} height={320}>
  <Colorizer colorizeGroups palette="Soft Pastel" />
  <Tooltip enabled />
</LivaTreeMap>
```

## Prop'lar

| Prop | Tip | Açıklama |
|------|------|---------|
| `dataSource` | `object[]` | Düz veya hiyerarşik veri kaynağı |
| `labelField` | `string` | Karo etiketi alanı, varsayılan `'name'` |
| `valueField` | `string` | Karo değeri alanı, varsayılan `'value'` |
| `childrenField` | `string` | Alt öğe alanı, varsayılan `'items'` |
| `layoutAlgorithm` | `'squarified' \| 'strip' \| 'sliceanddice'` | Karo yerleşimi |
| `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 `TreeMap`'ten miras alınır.