Treemap

Bir ağaç haritası: karolara bölünmüş bir kutu, her karo değerinin bütüne oranı kadar büyük. Çok parçalı bir bütüne yakışır; bir pastanın okunamayacak kadar çok dilimi olacağı yerde: bir diskin klasörleri, kalemleriyle bir bütçe, şirketleriyle bir pazar. Büyük olan hemen görülür, küçük parçaların da yeri vardır.

import com.pantrixui.components.chart.treemap.PantrixTreemap

• Gruplar. children veren öğe gruptur: değeri karolarının toplamıdır, kendisine verilen değer okunmaz.
• Renk. Verilen her öğe temanın grafik renklerinden sırasına düşeni alır; bir grubun karoları grubun rengindedir. color ile bir öğeye ya da bir karoya kendi rengi verilir.
• Değere göre ton. scale verilirse her karo, heatmap'in hücreleri gibi değerinin ölçekteki tonunda çizilir (HeatmapScale): büyük karo ölçeğin ucuna daha yakındır. Öğenin ve grubun rengi o zaman okunmaz; bloklar ve grupların adları kalır. Ölçek çubuğu legend'ın söylediği yerde durur.
• Gösterilen karo. İmlecin altındaki ya da dokunulan karo çerçevelenir ve tooltip grubunu, adını, değerini ve bütündeki payını yazar.
• Durum ve basmak. Gösterilen karo ChartState'te, x'i öğenin anahtarı olan bir seçim olarak durur. onSelect basılan karoyu verir.
• Yön. Sağdan sola okunan dilde en büyük karo sağda durur.
• Dışa aktarma. export grafiğin üstüne bir düğme koyar: grafik ekrandaki hâliyle, gösterilen yer ve tooltip olmadan, PNG, SVG ya da PDF dosyası olarak üretilir ve uygulamaya verilir.
• Otomasyon. Treemap_<tagKey>; karolar .Plot, bir karo .Tile_<sıra>, ölçek .Legend, tooltip .Tooltip.

Örnekler

Diski dolduranlar

Bir diski dolduranlar, gigabayt olarak. Her klasör bir karo: en büyüğü en başta.

İmleci bir karonun üstüne getir ya da dokun: tooltip klasörün boyutunu ve diskteki payını yazar.

PantrixTreemap(
    items = diskFolders(),
    description = "Diski dolduran klasörler",
    tagKey = "plain"
)

internal fun diskFolders(): List<TreemapItem> = listOf(
    TreemapItem("photos", "Fotoğraflar", 148),
    TreemapItem("video", "Videolar", 96),
    TreemapItem("apps", "Uygulamalar", 64),
    TreemapItem("music", "Müzik", 41),
    TreemapItem("docs", "Belgeler", 27),
    TreemapItem("mail", "Posta", 14),
    TreemapItem("other", "Öteki", 9)
)

Gruplar

Bir bütçe, bölümlere ve bölümlerin kalemlerine göre. Her bölüm bir grup: kalemleri bir blokta, bölümün renginde ve bölümün adı üstlerinde durur.

PantrixTreemap(
    items = budgetByDepartment(),
    description = "Bölümlere göre bütçe",
    tagKey = "grouped"
)

internal fun budgetByDepartment(): List<TreemapItem> = listOf(
    TreemapItem(
        key = "product",
        name = "Ürün",
        children = listOf(
            TreemapItem("engineering", "Mühendislik", 420),
            TreemapItem("design", "Tasarım", 160),
            TreemapItem("research", "Araştırma", 90)
        )
    ),
    TreemapItem(
        key = "growth",
        name = "Büyüme",
        children = listOf(
            TreemapItem("ads", "Reklam", 240),
            TreemapItem("events", "Etkinlik", 110),
            TreemapItem("content", "İçerik", 70)
        )
    ),
    TreemapItem(
        key = "operations",
        name = "İşletme",
        children = listOf(
            TreemapItem("support", "Destek", 130),
            TreemapItem("office", "Ofis", 80),
            TreemapItem("legal", "Hukuk", 45)
        )
    )
)

Değere göre ton

Aynı bütçe, karoları değerlerine göre tonlanmış (scale): ölçek temanın birincil renginin kabından birincil rengine gider, büyük kalem daha koyu. Ölçek çubuğu grafiğin altında; grupların rengi bu durumda okunmaz.

val colors = PantrixTheme.colors
PantrixTreemap(
    items = budgetByDepartment(),
    scale = HeatmapScale(low = colors.primary.container, color = colors.primary.color),
    description = "Bölümlere göre bütçe",
    tagKey = "shaded"
)

internal fun budgetByDepartment(): List<TreemapItem> = listOf(
    TreemapItem(
        key = "product",
        name = "Ürün",
        children = listOf(
            TreemapItem("engineering", "Mühendislik", 420),
            TreemapItem("design", "Tasarım", 160),
            TreemapItem("research", "Araştırma", 90)
        )
    ),
    TreemapItem(
        key = "growth",
        name = "Büyüme",
        children = listOf(
            TreemapItem("ads", "Reklam", 240),
            TreemapItem("events", "Etkinlik", 110),
            TreemapItem("content", "İçerik", 70)
        )
    ),
    TreemapItem(
        key = "operations",
        name = "İşletme",
        children = listOf(
            TreemapItem("support", "Destek", 130),
            TreemapItem("office", "Ofis", 80),
            TreemapItem("legal", "Hukuk", 45)
        )
    )
)

Bir karoya basmak

onSelect, basılan karoyu verir: bir karoya bas ya da klavyeyle bir karoya gidip Enter'a bas, kartın altındaki satır basılanı yazar. Değerler kendi biçimiyle yazılıyor: karolarda ChartDataLabels(format), tooltip'te ChartTooltip(format).

val report = LocalExampleEvents.current
PantrixTreemap(
    items = diskFolders(),
    labels = ChartDataLabels(format = { "${it.toInt()} GB" }),
    tooltip = ChartTooltip(format = { "${it.toInt()} GB" }),
    onSelect = { tile -> report("${tile.name}: ${tile.text}") },
    description = "Diski dolduran klasörler",
    tagKey = "pressed"
)

internal fun diskFolders(): List<TreemapItem> = listOf(
    TreemapItem("photos", "Fotoğraflar", 148),
    TreemapItem("video", "Videolar", 96),
    TreemapItem("apps", "Uygulamalar", 64),
    TreemapItem("music", "Müzik", 41),
    TreemapItem("docs", "Belgeler", 27),
    TreemapItem("mail", "Posta", 14),
    TreemapItem("other", "Öteki", 9)
)

Dışa aktarma

export = ChartExport(...) grafiğin üstüne bir dışa aktarma düğmesi koyar: bas ve türü seç (PNG, SVG ya da PDF). Grafik dosyayı üretir ve onExport'a verir; altta adı ve boyu, PNG ise resmi görünür, "Dosyayı kaydet" onu platformun yoluyla verir.

Dosyada karolar ve adları durur; gösterilen karonun tooltip'i dosyada yoktur.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixTreemap(
    items = diskFolders(),
    description = "Diski dolduran klasörler",
    tagKey = "exported",
    export = ChartExport(fileName = "disk") { file = it }
)
ExportedFile(file, tagKey = "exported")

internal fun diskFolders(): List<TreemapItem> = listOf(
    TreemapItem("photos", "Fotoğraflar", 148),
    TreemapItem("video", "Videolar", 96),
    TreemapItem("apps", "Uygulamalar", 64),
    TreemapItem("music", "Müzik", 41),
    TreemapItem("docs", "Belgeler", 27),
    TreemapItem("mail", "Posta", 14),
    TreemapItem("other", "Öteki", 9)
)

API

items

Bir ağaç haritası: karolara bölünmüş bir kutu, her karo değerinin bütüne oranı kadar büyük. Çok parçalı bir bütüne yakışır; bir pastanın okunamayacak kadar çok dilimi olacağı yerde: bir diskin klasörleri, kalemleriyle bir bütçe, şirketleriyle bir pazar. Büyük olan hemen görülür, küçük parçaların da yeri vardır.

ChartStyle

Bir grafiğin geometrisi: hiçbir şey söylemediğinde ne kadar yüksek olduğu, çizgilerinin ne kadar kalın, işaretlerinin ne kadar büyük olduğu ve parçalarının arasındaki boşluk; ve dolgularının renklerinin yanında desen alıp almadığı.

ChartColors

Temanın renklerini almayan bir grafik için, onun neyle boyandığı: verilen renk kullanılır, verilmeyen temanınki kalır.

Erişilebilirlik

• Karodaki yazı. labels ile her karoya adı ve altına değeri yazılır, renginin üstünde daha iyi okunan siyah ya da beyazla. Adına yer olmayan karoya ikisi de yazılmaz; tooltip ve ekran okuyucu ikisini de söyler.
• Klavye. Grafik, Tab için tek duraktır: bir ok, gösterdiği yöndeki en yakın karoya gider; Home ve End en büyük ve son karoya gider, Escape bırakır, Enter ve boşluk gösterilen karoya basar.
• Ekran okuyucu. Grafik description'ını, ardından en büyük bloktan başlayarak her karoyu grubu, adı, değeri ve payıyla söyler. İki yüzden çok karosu olan grafik yalnızca açıklamasıyla anlatılır.