Waterfall Chart

Bir şelale grafiği: bir miktarın adım adım nasıl oluştuğu. Her çubuk bir öncekinin bittiği yerden başlar; satırın eklediği kadar yukarı, götürdüğü kadar aşağı gider. Bir toplam sıfırın üstünde durur ve kendinden önceki adımların vardığı yeri gösterir.

import com.pantrixui.components.chart.waterfall.PantrixWaterfallChart

• Adımlar. Satırın değeri eklediği miktardır; sıfırın altındaysa götürdüğü. Ekleyen adım grafiğin rising renginde, götüren adım falling renginde çizilir: temanın success ve danger renkleri, colors başka söylemedikçe.
• Toplamlar. total'ın toplam dediği satır sıfırın üstünde durur ve kendinden önceki adımların vardığı yeri gösterir; kendi değeri sorulmaz. Kendi değeri olan bir toplam, sayımın yeniden başladığı yerdir: ilk adımdan önceki açılış tutarı gibi. Toplamlar serinin kendi renginde çizilir (color).
• Bağlantı çizgileri. Her çubuğun ucundan bir sonrakinin başladığı yere ince bir çizgi gider (connectors).
• Sıfır. Değer ekseni sıfırı içine alır: toplamlar onun üstünde durur.
• Değer etiketleri. labels her çubuğun neyi gösterdiğini ucuna yazar: yukarı gidenin üstüne, aşağı gidenin altına.
• Yatay. horizontal = true kalemleri grafiğin yanından aşağı dizer; her çubuk üstündekinin bittiği yerden başlar, ekleyen sağa, götüren sola gider (sağdan sola okunan dilde tersi). Değerler grafiğin altına yazılır.
• Otomasyon. Grafik, olduğu PantrixChart gibi etiketlenir: Chart_<tagKey>. Tek serisinin anahtarı steps'tir.

Örnekler

Açılıştan kapanışa

Bir çeyreğin nakit akışı: açılış tutarı, gelirler, giderler ve kapanış. Açılış, kendi değeri olan bir toplamdır: sayım ondan başlar. Kapanışın değeri yoktur: adımların vardığı yeri gösterir.

İmleci bir çubuğun üstüne getir ya da çubuğa dokun: tooltip adımı işaretiyle yazar. Çubukların arasındaki ince çizgiler her adımın bir öncekinin bittiği yerden başladığını gösterir.

PantrixWaterfallChart(
    data = QUARTER_CASH,
    x = { it.name },
    y = { it.amount },
    name = "Nakit (bin TL)",
    total = { it.total },
    description = "Bir çeyreğin nakit akışı, açılıştan kapanışa",
    tagKey = "plain"
)

private data class CashMove(
    val name: String,
    val amount: Int?,
    val total: Boolean = false
)

private val QUARTER_CASH = listOf(
    CashMove("Açılış", amount = 420, total = true),
    CashMove("Satış", amount = 310),
    CashMove("Hizmet", amount = 120),
    CashMove("Maaş", amount = -260),
    CashMove("Kira", amount = -90),
    CashMove("Vergi", amount = -70),
    CashMove("Kapanış", amount = null, total = true)
)

Ara toplamlar

Yolun ortasında ara toplamlar: her çeyreğin sonunda, o ana kadar varılan yer. Ara toplam sıfırın üstünde durur ve sayım ondan sonra kaldığı yerden sürer.

PantrixWaterfallChart(
    data = HALF_YEAR_CASH,
    x = { it.name },
    y = { it.amount },
    name = "Nakit (bin TL)",
    total = { it.total },
    description = "Bir yarıyılın aylık nakit değişimi, çeyrek sonlarında ara toplamla",
    tagKey = "subtotals"
)

private data class CashMove(
    val name: String,
    val amount: Int?,
    val total: Boolean = false
)

private val HALF_YEAR_CASH = listOf(
    CashMove("Oca", amount = 180),
    CashMove("Şub", amount = -60),
    CashMove("Mar", amount = 140),
    CashMove("1. çeyrek", amount = null, total = true),
    CashMove("Nis", amount = -110),
    CashMove("May", amount = 90),
    CashMove("Haz", amount = 210),
    CashMove("2. çeyrek", amount = null, total = true)
)

Değerler çubukların ucunda

Her çubuğun neyi gösterdiği ucuna yazılır (labels): ekleyen adımın üstüne, götüren adımın altına, işaretiyle; toplamın üstüne, olduğu gibi.

Yeri olmayan etiket atlanır; değer tooltip'te ve ekran okuyucuda durur.

PantrixWaterfallChart(
    data = QUARTER_CASH,
    x = { it.name },
    y = { it.amount },
    name = "Nakit (bin TL)",
    total = { it.total },
    labels = ChartDataLabels(),
    description = "Bir çeyreğin nakit akışı, değerleriyle",
    tagKey = "labels"
)

private data class CashMove(
    val name: String,
    val amount: Int?,
    val total: Boolean = false
)

private val QUARTER_CASH = listOf(
    CashMove("Açılış", amount = 420, total = true),
    CashMove("Satış", amount = 310),
    CashMove("Hizmet", amount = 120),
    CashMove("Maaş", amount = -260),
    CashMove("Kira", amount = -90),
    CashMove("Vergi", amount = -70),
    CashMove("Kapanış", amount = null, total = true)
)

Yatay

Aynı çeyrek yatay (horizontal = true): kalemler grafiğin yanından aşağı dizilir ve her çubuk üstündekinin bittiği yerden başlar. Kalemlerin adları uzun ya da kalemler çok olduğunda yatay şelale daha kolay okunur.

PantrixWaterfallChart(
    data = QUARTER_CASH,
    x = { it.name },
    y = { it.amount },
    name = "Nakit (bin TL)",
    total = { it.total },
    horizontal = true,
    labels = ChartDataLabels(),
    description = "Bir çeyreğin nakit akışı, yatay çubuklarla",
    tagKey = "horizontal_steps"
)

private data class CashMove(
    val name: String,
    val amount: Int?,
    val total: Boolean = false
)

private val QUARTER_CASH = listOf(
    CashMove("Açılış", amount = 420, total = true),
    CashMove("Satış", amount = 310),
    CashMove("Hizmet", amount = 120),
    CashMove("Maaş", amount = -260),
    CashMove("Kira", amount = -90),
    CashMove("Vergi", amount = -70),
    CashMove("Kapanış", amount = null, total = true)
)

Kendi renklerin

Adımların iki rengi grafiğin renklerinden gelir (ChartColors'ın rising ve falling alanları), toplamların rengi serinin kendisinden (color). Anahtarı çevir: çubukların arasındaki çizgiler kalkar (connectors).

Renk tek başına anlam taşımamalı: bir adımın yönü çubuğun nereden nereye gittiğinden ve değerinin işaretinden de okunur.

var connectors by remember { mutableStateOf(true) }
val theme = PantrixTheme.colors
PantrixSwitchButton(
    checked = connectors,
    onCheckedChange = { connectors = it },
    label = "Bağlantı çizgileri",
    tagKey = "waterfall_connectors"
)
PantrixWaterfallChart(
    data = QUARTER_CASH,
    x = { it.name },
    y = { it.amount },
    name = "Nakit (bin TL)",
    total = { it.total },
    connectors = connectors,
    color = theme.neutral.color,
    colors = ChartColors(rising = theme.info.color, falling = theme.warning.color),
    description = "Bir çeyreğin nakit akışı, kendi renkleriyle",
    tagKey = "own_colors"
)

private data class CashMove(
    val name: String,
    val amount: Int?,
    val total: Boolean = false
)

private val QUARTER_CASH = listOf(
    CashMove("Açılış", amount = 420, total = true),
    CashMove("Satış", amount = 310),
    CashMove("Hizmet", amount = 120),
    CashMove("Maaş", amount = -260),
    CashMove("Kira", amount = -90),
    CashMove("Vergi", amount = -70),
    CashMove("Kapanış", amount = null, total = true)
)

Bir adıma basmak

Bir basış adımı ve başladığı seviyeyi alır: noktanın value'su adımın eklediği, from'u adımın başladığı seviyedir; ikisinin toplamı adımdan sonra varılan yerdir. Toplamın from'u yoktur. Bir çubuğa bas: alttaki satır basılanı yazar.

var pressed by remember { mutableStateOf<String?>(null) }
val strings = PantrixTheme.strings
PantrixWaterfallChart(
    data = QUARTER_CASH,
    x = { it.name },
    y = { it.amount },
    name = "Nakit (bin TL)",
    total = { it.total },
    onSelect = { point ->
        val start = point.from
        pressed = if (start == null) {
            "${point.label}: toplam ${point.text}"
        } else {
            "${point.label}: ${point.text}, sonrasında ${strings.decimal(start + point.value)}"
        }
    },
    description = "Bir çeyreğin nakit akışı",
    tagKey = "press"
)
PantrixText(text = pressed ?: "Bir çubuğa bas")

private data class CashMove(
    val name: String,
    val amount: Int?,
    val total: Boolean = false
)

private val QUARTER_CASH = listOf(
    CashMove("Açılış", amount = 420, total = true),
    CashMove("Satış", amount = 310),
    CashMove("Hizmet", amount = 120),
    CashMove("Maaş", amount = -260),
    CashMove("Kira", amount = -90),
    CashMove("Vergi", amount = -70),
    CashMove("Kapanış", amount = null, total = true)
)

Uzun yazılış

Kısa yazılışın açtığı grafik: tek bir WaterfallSeries taşıyan bir PantrixChart. Kısa yazılışın horizontal = true'su uzun yazılışta orientation = ChartOrientation.Horizontal'dır; seri anahtarını ve adını kendisi taşır. Şelaleyi başka şeylerle bir arada isteyen ekran bu yazılışı kullanır: burada kapanış hedefini gösteren bir çizgi.

PantrixChart(
    series = listOf(
        WaterfallSeries(
            key = "cash",
            name = "Nakit (bin TL)",
            data = QUARTER_CASH,
            x = { it.name },
            y = { it.amount },
            total = { it.total }
        )
    ),
    orientation = ChartOrientation.Horizontal,
    marks = listOf(ChartReferenceLine(y = 500, label = "Hedef")),
    description = "Bir çeyreğin nakit akışı ve kapanış hedefi, yatay çubuklarla",
    tagKey = "as_series"
)

private data class CashMove(
    val name: String,
    val amount: Int?,
    val total: Boolean = false
)

private val QUARTER_CASH = listOf(
    CashMove("Açılış", amount = 420, total = true),
    CashMove("Satış", amount = 310),
    CashMove("Hizmet", amount = 120),
    CashMove("Maaş", amount = -260),
    CashMove("Kira", amount = -90),
    CashMove("Vergi", amount = -70),
    CashMove("Kapanış", amount = null, total = true)
)

API

data

Bir şelale grafiği: bir miktarın adım adım nasıl oluştuğu. Her çubuk bir öncekinin bittiği yerden başlar; satırın eklediği kadar yukarı, götürdüğü kadar aşağı gider. Bir toplam sıfırın üstünde durur ve kendinden önceki adımların vardığı yeri gösterir.

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

• Tooltip ve ekran okuyucu. Bir adım eklediğiyle, işaretiyle yazılır ("+310"); bir toplam vardığı yerle. Bir basış, noktanın value'sunda adımı, from'unda adımın başladığı seviyeyi alır.