Scatter Chart

Bir saçılım grafiği: iki değere göre dizilmiş noktalar, biri grafik boyunca, öteki yukarı doğru; ikisinin birlikte nasıl gittiğini gösterir. Her noktanın büyüklüğü için üçüncü bir değerle bir balon grafiği olur.

import com.pantrixui.components.chart.scatter.PantrixScatterChart

• Balonlar. size verilen serinin noktaları balondur. Bir balonun alanı, büyüklüğünün grafikteki en büyük büyüklüğe oranı kadardır: iki katı değer iki katı alan. En küçük ve en büyük balonun ölçüsü grafik stilindedir (bubbleMinSize, bubbleMaxSize). Balonlu grafik, eksenlerinin uçlarında en büyük balona yer bırakır.
• Noktanın adı. label, bir noktanın ne diye anıldığını söyler: bir ülke, bir ürün. Tooltip'in başlığı ve ekran okuyucunun söylediği odur.
• Eksenler. xAxis ve yAxis, eksenli grafiğin ChartAxis'idir: başlık, biçim, uçlar, kılavuz çizgileri. Başlıklar tooltip'te değerlerin adı olur. sizeAxis büyüklüğün adını (title), yazımını (format) ve en büyük balonun karşıladığı değeri (max) söyler; ondan bir şey çizilmez.
• İşaretler. marks ile bir değerde çizgi ya da iki değer arasında bant çizilir; burada bir işaretin x'i grafik boyunca uzanan eksenin bir değeridir.
• Gösterilen nokta. İmlecin altındaki ya da yakınındaki, parmakla dokunulan nokta gösterilir: çevresinde bir halka, içinden geçen iki çizgi ve değerlerini yazan tooltip. Üst üste duran noktalardan en küçüğü gösterilir.
• Durum ve basmak. Gösterilen nokta ChartState'te, x'i satırın serisindeki yeri ve series'i serinin anahtarı olan bir seçim olarak durur. onSelect basılan noktayı aynı yerle verir.
• Yön. Sağdan sola okunan dilde boyuna değerler sağdan başlar, yukarı değerler 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.
• Yakınlaşma. zoom ile iki değere birden yakından bakılır: tekerlek (Ctrl ya da Command ile), iki parmak, artı ve eksi tuşları ve düğmeler yakınlaşır; sürükleme görüneni her yöne taşır.
• Otomasyon. ScatterChart_<tagKey>; çizim alanı .Plot, noktalar .Point_<seri>_<sıra>, lejant kayıtları .Legend_<seri>, tooltip .Tooltip.

Örnekler

İki değer, iki grup

Bir kafenin elli günü: günün sıcaklığı ve o gün satılan soğuk içecek. Hafta içi ve hafta sonu ayrı seriler; noktalar sıcaklıkla birlikte yukarı gidiyor, hafta sonları daha da yukarıda.

İmleci bir noktanın yakınına getir ya da noktaya dokun: tooltip günün iki değerini eksenlerin başlıklarıyla yazar. Lejanttaki bir kayda basmak o seriyi grafikten çıkarır.

PantrixScatterChart(
    series = listOf(
        ScatterSeries("weekdays", "Hafta içi", cafeDays(weekend = false), x = { it.heat }, y = { it.sold }),
        ScatterSeries("weekend", "Hafta sonu", cafeDays(weekend = true), x = { it.heat }, y = { it.sold })
    ),
    xAxis = ChartAxis(title = "Sıcaklık (°C)"),
    yAxis = ChartAxis(title = "Soğuk içecek"),
    description = "Sıcaklığa göre satılan soğuk içecek",
    tagKey = "plain"
)

internal fun cafeDays(weekend: Boolean): List<CafeDay> = List(50) { it }
    .filter { (it % 7 >= 5) == weekend }
    .map { day ->
        val heat = 12.0 + (day * 7 % 19) + (day % 4) * 0.5
        val wobble = (day * 37 % 29) - 14
        val busy = if (weekend) 45 else 0
        CafeDay(
            heat = heat,
            sold = (heat * 6.5 - 40 + wobble + busy).toInt().coerceAtLeast(4),
            hot = (190 - heat * 4.5 + wobble).toInt().coerceAtLeast(4),
            food = 85 + wobble + busy / 3
        )
    }

internal class CafeDay(
    val heat: Double,
    val sold: Int,
    val hot: Int,
    val food: Int
)

Balonlar

Bir mağazanın ürünleri: fiyatı, puanı ve, balonun büyüklüğü olarak, ay içinde satılan adet. Her nokta ürünün adıyla anılıyor (label); sizeAxis büyüklüğün ne olduğunu söylüyor.

Alan değere göre büyür: iki katı satan ürünün balonu iki katı alan kaplar, iki katı genişlik değil. Üst üste gelen balonların altındaki görünsün diye balonlar yarı saydam çizilir.

val strings = PantrixTheme.strings
PantrixScatterChart(
    series = listOf(
        ScatterSeries(
            key = "products",
            name = "Ürünler",
            data = shopProducts(),
            x = { it.price },
            y = { it.rating },
            size = { it.sold },
            label = { it.name }
        )
    ),
    xAxis = ChartAxis(title = "Fiyat", format = { "${strings.decimal(it)} ₺" }),
    yAxis = ChartAxis(title = "Puan", min = 3.0, max = 5.0),
    sizeAxis = ChartAxis(title = "Satış", format = { "${strings.decimal(it)} adet" }),
    description = "Ürünlerin fiyatı, puanı ve satışı",
    tagKey = "bubbles"
)

internal fun shopProducts(): List<ShopProduct> = listOf(
    ShopProduct("Kulaklık", 1450.0, 4.6, 820),
    ShopProduct("Klavye", 980.0, 4.3, 540),
    ShopProduct("Fare", 420.0, 4.4, 1260),
    ShopProduct("Monitör", 5200.0, 4.7, 310),
    ShopProduct("Web kamerası", 760.0, 3.9, 280),
    ShopProduct("Hoparlör", 1890.0, 4.1, 190),
    ShopProduct("Mikrofon", 2350.0, 4.5, 150),
    ShopProduct("Şarj aleti", 310.0, 4.0, 1640),
    ShopProduct("Kablo", 120.0, 3.6, 2100),
    ShopProduct("Tablet kalemi", 1150.0, 4.2, 95),
    ShopProduct("Laptop standı", 640.0, 4.8, 470),
    ShopProduct("Harici disk", 2780.0, 4.4, 360)
)

internal class ShopProduct(
    val name: String,
    val price: Double,
    val rating: Double,
    val sold: Int
)

Çizgiler ve bantlar

Noktaları okumaya yardım eden işaretler: ortalama sıcaklıkta bir çizgi, günün hedefinde bir çizgi ve en sıcak günlerin üstünde bir bant. Bir işaretin x'i burada bir yer adı değil, grafik boyunca uzanan eksenin bir değeridir.

PantrixScatterChart(
    series = listOf(
        ScatterSeries("days", "Günler", cafeDays(weekend = false), x = { it.heat }, y = { it.sold })
    ),
    xAxis = ChartAxis(title = "Sıcaklık (°C)"),
    yAxis = ChartAxis(title = "Soğuk içecek"),
    marks = listOf(
        ChartReferenceBand(x1 = 28, label = "Sıcak günler"),
        ChartReferenceLine(y = 150, label = "Hedef"),
        ChartReferenceLine(x = 21, label = "Ortalama")
    ),
    description = "Sıcaklığa göre satılan soğuk içecek, hedefle birlikte",
    tagKey = "marks"
)

internal fun cafeDays(weekend: Boolean): List<CafeDay> = List(50) { it }
    .filter { (it % 7 >= 5) == weekend }
    .map { day ->
        val heat = 12.0 + (day * 7 % 19) + (day % 4) * 0.5
        val wobble = (day * 37 % 29) - 14
        val busy = if (weekend) 45 else 0
        CafeDay(
            heat = heat,
            sold = (heat * 6.5 - 40 + wobble + busy).toInt().coerceAtLeast(4),
            hot = (190 - heat * 4.5 + wobble).toInt().coerceAtLeast(4),
            food = 85 + wobble + busy / 3
        )
    }

internal class CafeDay(
    val heat: Double,
    val sold: Int,
    val hot: Int,
    val food: Int
)

Biçimle ayırmak

Seriler yalnızca renkle değil biçimle de ayrılır: her seri kendi işaretiyle çizilir (marker). Renkleri ayırt edemeyen biri için de, siyah beyaz bir çıktıda da okunur.

val days = cafeDays(weekend = false)
PantrixScatterChart(
    series = listOf(
        ScatterSeries("cold", "Soğuk içecek", days, x = { it.heat }, y = { it.sold }),
        ScatterSeries("hot", "Sıcak içecek", days, x = { it.heat }, y = { it.hot }, marker = ChartMarker.Square),
        ScatterSeries("food", "Yiyecek", days, x = { it.heat }, y = { it.food }, marker = ChartMarker.Triangle)
    ),
    xAxis = ChartAxis(title = "Sıcaklık (°C)"),
    yAxis = ChartAxis(title = "Satış"),
    description = "Sıcaklığa göre üç ürün grubunun satışı",
    tagKey = "markers"
)

internal fun cafeDays(weekend: Boolean): List<CafeDay> = List(50) { it }
    .filter { (it % 7 >= 5) == weekend }
    .map { day ->
        val heat = 12.0 + (day * 7 % 19) + (day % 4) * 0.5
        val wobble = (day * 37 % 29) - 14
        val busy = if (weekend) 45 else 0
        CafeDay(
            heat = heat,
            sold = (heat * 6.5 - 40 + wobble + busy).toInt().coerceAtLeast(4),
            hot = (190 - heat * 4.5 + wobble).toInt().coerceAtLeast(4),
            food = 85 + wobble + busy / 3
        )
    }

internal class CafeDay(
    val heat: Double,
    val sold: Int,
    val hot: Int,
    val food: Int
)

Bir noktaya basmak

onSelect, basılan noktayı verir: x'i satırın serisindeki yeridir, label'ı noktanın adı. Bir balona bas ya da klavyeyle bir balona gidip Enter'a bas, kartın altındaki satır basılan ürünü yazar.

val report = LocalExampleEvents.current
val products = shopProducts()
PantrixScatterChart(
    series = listOf(
        ScatterSeries(
            key = "products",
            name = "Ürünler",
            data = products,
            x = { it.price },
            y = { it.rating },
            size = { it.sold },
            label = { it.name }
        )
    ),
    xAxis = ChartAxis(title = "Fiyat"),
    yAxis = ChartAxis(title = "Puan", min = 3.0, max = 5.0),
    sizeAxis = ChartAxis(title = "Satış"),
    onSelect = { point -> report("${point.label}: ${products[point.x as Int].sold} adet") },
    description = "Ürünlerin fiyatı, puanı ve satışı",
    tagKey = "pressed"
)

internal fun shopProducts(): List<ShopProduct> = listOf(
    ShopProduct("Kulaklık", 1450.0, 4.6, 820),
    ShopProduct("Klavye", 980.0, 4.3, 540),
    ShopProduct("Fare", 420.0, 4.4, 1260),
    ShopProduct("Monitör", 5200.0, 4.7, 310),
    ShopProduct("Web kamerası", 760.0, 3.9, 280),
    ShopProduct("Hoparlör", 1890.0, 4.1, 190),
    ShopProduct("Mikrofon", 2350.0, 4.5, 150),
    ShopProduct("Şarj aleti", 310.0, 4.0, 1640),
    ShopProduct("Kablo", 120.0, 3.6, 2100),
    ShopProduct("Tablet kalemi", 1150.0, 4.2, 95),
    ShopProduct("Laptop standı", 640.0, 4.8, 470),
    ShopProduct("Harici disk", 2780.0, 4.4, 360)
)

internal class ShopProduct(
    val name: String,
    val price: Double,
    val rating: Double,
    val sold: 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 eksenler, noktalar ve altında lejant durur; gösterilen nokta ve tooltip'i dosyada yoktur.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixScatterChart(
    series = listOf(
        ScatterSeries("weekdays", "Hafta içi", cafeDays(weekend = false), x = { it.heat }, y = { it.sold }),
        ScatterSeries("weekend", "Hafta sonu", cafeDays(weekend = true), x = { it.heat }, y = { it.sold })
    ),
    xAxis = ChartAxis(title = "Sıcaklık (°C)"),
    yAxis = ChartAxis(title = "Soğuk içecek"),
    description = "Sıcaklığa göre satılan soğuk içecek",
    tagKey = "exported",
    export = ChartExport(fileName = "soguk-icecek") { file = it }
)
ExportedFile(file, tagKey = "exported")

internal fun cafeDays(weekend: Boolean): List<CafeDay> = List(50) { it }
    .filter { (it % 7 >= 5) == weekend }
    .map { day ->
        val heat = 12.0 + (day * 7 % 19) + (day % 4) * 0.5
        val wobble = (day * 37 % 29) - 14
        val busy = if (weekend) 45 else 0
        CafeDay(
            heat = heat,
            sold = (heat * 6.5 - 40 + wobble + busy).toInt().coerceAtLeast(4),
            hot = (190 - heat * 4.5 + wobble).toInt().coerceAtLeast(4),
            food = 85 + wobble + busy / 3
        )
    }

internal class CafeDay(
    val heat: Double,
    val sold: Int,
    val hot: Int,
    val food: Int
)

Yakınlaşma

zoom = ChartZoom() iki değere birden yakından bakmayı sağlar: Ctrl ya da Command ile tekerlek ve iki parmak aralarındaki noktaya, grafikteyken artı ve eksi gösterilen noktaya, düğmeler ortaya yakınlaşır. Fareyle sürükleme görüneni her yöne taşır; oklarla gidilen nokta görünüre gelir.

İki eksen görünen değerler için yeniden işaretlenir, çizim alanının kenarlarının dışı kesilir. Yataydaki kısım state.window, dikeydeki state.valueWindow'dur.

PantrixScatterChart(
    series = listOf(
        ScatterSeries("weekdays", "Hafta içi", cafeDays(weekend = false), x = { it.heat }, y = { it.sold }),
        ScatterSeries("weekend", "Hafta sonu", cafeDays(weekend = true), x = { it.heat }, y = { it.sold })
    ),
    xAxis = ChartAxis(title = "Sıcaklık (°C)"),
    yAxis = ChartAxis(title = "Soğuk içecek"),
    description = "Sıcaklığa göre satılan soğuk içecek",
    tagKey = "zoomed",
    zoom = ChartZoom()
)

internal fun cafeDays(weekend: Boolean): List<CafeDay> = List(50) { it }
    .filter { (it % 7 >= 5) == weekend }
    .map { day ->
        val heat = 12.0 + (day * 7 % 19) + (day % 4) * 0.5
        val wobble = (day * 37 % 29) - 14
        val busy = if (weekend) 45 else 0
        CafeDay(
            heat = heat,
            sold = (heat * 6.5 - 40 + wobble + busy).toInt().coerceAtLeast(4),
            hot = (190 - heat * 4.5 + wobble).toInt().coerceAtLeast(4),
            food = 85 + wobble + busy / 3
        )
    }

internal class CafeDay(
    val heat: Double,
    val sold: Int,
    val hot: Int,
    val food: Int
)

API

series

Bir saçılım grafiği: iki değere göre dizilmiş noktalar, biri grafik boyunca, öteki yukarı doğru; ikisinin birlikte nasıl gittiğini gösterir. Her noktanın büyüklüğü için üçüncü bir değerle bir balon grafiği olur.

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: sağ ve sol oklar serinin noktaları arasında grafik boyunca gider, yukarı ve aşağı oklar önceki ve sonraki seriye geçer, Home ve End serinin ilk ve son noktasına gider, Escape bırakır, Enter ve boşluk gösterilen noktaya basar.
• Ekran okuyucu. Grafik description'ını, ardından seri seri her noktayı adı ve değerleriyle söyler. İki yüzden çok noktası olan grafik yalnızca açıklamasıyla anlatılır.