Heatmap

Bir ısı haritası: hücrelerden bir ızgara, her hücre değerinin ne kadar olduğunu söyleyen bir tonda. İki adı ve bir sayısı olan şeye yakışır: haftanın günlerinin saatleri, birkaç yılın ayları, bir listenin ötekiyle karşılaştırılması. Neyin çok, neyin az olduğu bir bakışta görülür; aynı sayıların tablosunu ise okumak gerekir.

import com.pantrixui.components.chart.heatmap.PantrixHeatmap

• Ölçek. HeatmapScale bir değerin tona nasıl çevrileceğini söyler: iki ucu (min, max; verilmezse değerlerin en küçüğü ve en büyüğü), kaç tonu olduğu (steps; sıfırsa her değerin kendi tonu) ve rengi (color). Tek renkte ton, rengin grafiğin durduğu zeminin üstündeki payıdır: açık temada da koyu temada da okunur. low verilirse ölçek en küçüğün rengi low'dan color'a gider; aradaki tonlar iki rengin Oklab'da karışımıdır, her adım bir öncekiyle aynı ölçüde değişir.
• Hücredeki değer. labels ile her hücreye değeri yazılır, tonunun üstünde daha iyi okunan siyah ya da beyazla; sığmadığı hücrede yazılmaz.
• Ölçek çubuğu. legend, ton ölçeğinin nerede duracağını söyler: uçlarında en küçük ve en büyük değer yazar.
• Adlar. xAxis kolonların, yAxis satırların adlarıdır: yazılsın mı (labels), nasıl yazılsın (label). Sığmayan ad bir kuralla atlanır.
• Gösterilen hücre. İmlecin altındaki ya da dokunulan hücre çerçevelenir ve tooltip kolonunu, satırını ve değerini yazar.
• Durum ve basmak. Gösterilen hücre ChartState'te, x'i verinin listedeki yeri olan bir seçim olarak durur. onSelect basılan hücreyi verir: label kolonu, name satırı, value değeri.
• Yön. Sağdan sola okunan dilde kolonlar sağdan başlar, satır adları sağa yazılır.
• 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. Heatmap_<tagKey>; hücreler .Plot, bir hücre .Cell_<sıra>, ölçek .Legend, tooltip .Tooltip.

Örnekler

Haftanın saatleri

Bir mağazanın bir haftalık ziyaretçisi, günlere ve günün dilimlerine göre. Koyu hücre kalabalık saattir.

İmleci bir hücrenin üstüne getir ya da dokun: tooltip o günün o saatindeki ziyaretçiyi yazar.

PantrixHeatmap(
    data = weekVisits(),
    x = { it.hours },
    y = { it.day },
    value = { it.visits },
    description = "Güne ve saate göre ziyaret",
    tagKey = "plain"
)

internal fun weekVisits(): List<SlotVisits> {
    val days = listOf("Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz")
    val hours = listOf("09", "11", "13", "15", "17", "19")
    val visits = listOf(
        listOf(12, 18, 34, 22, 41, 30),
        listOf(10, 16, 31, 20, 38, 28),
        listOf(14, 21, 36, 25, 44, 33),
        listOf(11, 19, 35, 27, 47, 36),
        listOf(16, 24, 42, 31, 58, 52),
        listOf(28, 45, 61, 66, 72, 57),
        listOf(22, 39, 54, 60, 49, 26)
    )
    return days.flatMapIndexed { day, name -> hours.mapIndexed { slot, at -> SlotVisits(name, at, visits[day][slot]) } }
}

internal class SlotVisits(
    val day: String,
    val hours: String,
    val visits: Int
)

Beş ton, değerler yazılı

Sınav puanları, yüz üzerinden. Ölçeğin beş tonu var (steps): her yirmi puan bir ton. Değerler hücrelere yazılı (labels) ve ölçek grafiğin yanında duruyor. Sınava girmeyenin hücresi boş.

PantrixHeatmap(
    data = examScores(),
    x = { it.subject },
    y = { it.student },
    value = { it.score },
    scale = HeatmapScale(min = 0.0, max = 100.0, steps = 5),
    labels = ChartDataLabels(),
    legend = ChartLegend(position = ChartLegendPosition.End),
    description = "Öğrencilerin derslere göre puanları",
    tagKey = "steps"
)

internal fun examScores(): List<ExamScore> {
    val subjects = listOf("Matematik", "Fizik", "Kimya", "Tarih", "Dil")
    val scores = mapOf(
        "Ada" to listOf(92, 85, 78, 64, 88),
        "Lin" to listOf(71, 58, null, 90, 95),
        "Can" to listOf(45, 62, 70, 81, 39),
        "Ece" to listOf(84, 97, 91, 55, 73)
    )
    return scores.flatMap { (student, row) ->
        subjects.mapIndexed { at, subject -> ExamScore(student, subject, row[at]) }
    }
}

internal class ExamScore(
    val student: String,
    val subject: String,
    val score: Int?
)

İki renkli ölçek

İki renkli bir ölçek, sıcaklık gibi: en az ziyaret low renginde (uyarı renginin kabı), en çoğu color renginde (tehlike rengi); aradaki tonlar iki rengin Oklab'da karışımı. Renkler temadan alındığı için ölçek açık temada da koyu temada da okunur.

val colors = PantrixTheme.colors
PantrixHeatmap(
    data = weekVisits(),
    x = { it.hours },
    y = { it.day },
    value = { it.visits },
    scale = HeatmapScale(low = colors.warning.container, color = colors.danger.color),
    labels = ChartDataLabels(),
    description = "Güne ve saate göre ziyaret",
    tagKey = "two_colours"
)

internal fun weekVisits(): List<SlotVisits> {
    val days = listOf("Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz")
    val hours = listOf("09", "11", "13", "15", "17", "19")
    val visits = listOf(
        listOf(12, 18, 34, 22, 41, 30),
        listOf(10, 16, 31, 20, 38, 28),
        listOf(14, 21, 36, 25, 44, 33),
        listOf(11, 19, 35, 27, 47, 36),
        listOf(16, 24, 42, 31, 58, 52),
        listOf(28, 45, 61, 66, 72, 57),
        listOf(22, 39, 54, 60, 49, 26)
    )
    return days.flatMapIndexed { day, name -> hours.mapIndexed { slot, at -> SlotVisits(name, at, visits[day][slot]) } }
}

internal class SlotVisits(
    val day: String,
    val hours: String,
    val visits: Int
)

Bir hücreye basmak

onSelect, basılan hücreyi verir: bir hücreye bas ya da klavyeyle bir hücreye gidip Enter'a bas, kartın altındaki satır basılanı yazar. Ölçeğin kendi rengi var (HeatmapScale.color) ve ölçek çubuğu yok (legend = null).

val report = LocalExampleEvents.current
PantrixHeatmap(
    data = weekVisits(),
    x = { it.hours },
    y = { it.day },
    value = { it.visits },
    scale = HeatmapScale(color = PantrixTheme.colors.success.color),
    legend = null,
    onSelect = { cell -> report("${cell.name}, ${cell.label}: ${cell.text}") },
    description = "Güne ve saate göre ziyaret",
    tagKey = "pressed"
)

internal fun weekVisits(): List<SlotVisits> {
    val days = listOf("Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz")
    val hours = listOf("09", "11", "13", "15", "17", "19")
    val visits = listOf(
        listOf(12, 18, 34, 22, 41, 30),
        listOf(10, 16, 31, 20, 38, 28),
        listOf(14, 21, 36, 25, 44, 33),
        listOf(11, 19, 35, 27, 47, 36),
        listOf(16, 24, 42, 31, 58, 52),
        listOf(28, 45, 61, 66, 72, 57),
        listOf(22, 39, 54, 60, 49, 26)
    )
    return days.flatMapIndexed { day, name -> hours.mapIndexed { slot, at -> SlotVisits(name, at, visits[day][slot]) } }
}

internal class SlotVisits(
    val day: String,
    val hours: String,
    val visits: Int
)

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 hücreler ve kenarlardaki adlar durur; renk ölçeği, ekranda nerede durursa dursun, dosyada hücrelerin altındadır.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixHeatmap(
    data = weekVisits(),
    x = { it.hours },
    y = { it.day },
    value = { it.visits },
    description = "Güne ve saate göre ziyaret",
    tagKey = "exported",
    export = ChartExport(fileName = "haftanin-saatleri") { file = it }
)
ExportedFile(file, tagKey = "exported")

internal fun weekVisits(): List<SlotVisits> {
    val days = listOf("Pzt", "Sal", "Çar", "Per", "Cum", "Cmt", "Paz")
    val hours = listOf("09", "11", "13", "15", "17", "19")
    val visits = listOf(
        listOf(12, 18, 34, 22, 41, 30),
        listOf(10, 16, 31, 20, 38, 28),
        listOf(14, 21, 36, 25, 44, 33),
        listOf(11, 19, 35, 27, 47, 36),
        listOf(16, 24, 42, 31, 58, 52),
        listOf(28, 45, 61, 66, 72, 57),
        listOf(22, 39, 54, 60, 49, 26)
    )
    return days.flatMapIndexed { day, name -> hours.mapIndexed { slot, at -> SlotVisits(name, at, visits[day][slot]) } }
}

internal class SlotVisits(
    val day: String,
    val hours: String,
    val visits: Int
)

API

data

Bir ısı haritası: hücrelerden bir ızgara, her hücre değerinin ne kadar olduğunu söyleyen bir tonda. İki adı ve bir sayısı olan şeye yakışır: haftanın günlerinin saatleri, birkaç yılın ayları, bir listenin ötekiyle karşılaştırılması. Neyin çok, neyin az olduğu bir bakışta görülür; aynı sayıların tablosunu ise okumak gerekir.

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

• Klavye. Grafik, Tab için tek duraktır: oklar hücreden hücreye gider, boş hücreleri atlar; Home ve End ilk ve son hücreye gider, Escape bırakır, Enter ve boşluk gösterilen hücreye basar.
• Ekran okuyucu. Grafik description'ını, ardından satır satır her hücreyi kolonu, satırı ve değeriyle söyler. İki yüzden çok hücresi olan grafik yalnızca açıklamasıyla anlatılır.