LivaTreeMap
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.
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.
Düz liste — ürün bazlı satış büyüklüğü
Önizleme yükleniyor…
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.
Gruplu — kategori altında ürünler
Önizleme yükleniyor…
| 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.