Funnel Chart

Bir huni: gittikçe daha azının geçtiği bir şeyin aşamaları, alt alta, her biri ona ulaşanların sayısı kadar geniş. Ötekilerin nerede kaybedildiğini gösterir: üye olan ziyaretçiler, deneyen üyeler, ödeyen deneyenler.

import com.pantrixui.components.chart.funnel.PantrixFunnelChart

• Biçim. En büyük aşama grafik kadar geniştir; her aşama, kendinden sonrakinin genişliğine doğru daralır ve aşamalar tek bir huni oluşturur. Sonuncu genişliğini korur. Kendinden öncekinden büyük olan aşama daralmaz, genişler: grafik kendisine verileni çizer. shape = FunnelShape.Bars her aşamayı değeri kadar geniş bir çubuk olarak çizer; horizontal aşamaları satırların başladığı yandan yan yana dizer, her biri değeri kadar yüksektir.
• Yazılar. Aşamanın adı ve değeri içine yazılır; değerin yanında payı durur: ilk aşamaya göre, bir öncekine göre ya da ikisi (rate). Yazısına dar gelen aşamanın adı ve değeri yanına, yatay hunide altına yazılır; ikisine de yer yoksa yalnızca adı kalır. labels = null hiçbir şey yazmaz.
• Gösterilen aşama. İmlecin ya da parmağın satırında durduğu aşama bir halkayla işaretlenir ve tooltip onun adını, değerini ve payını yazar. Klavyede oklar aşamadan aşamaya geçer: yukarı ve aşağı, yatay hunide sağ ve sol.
• Renkler. Her aşama, sırasına göre temanın grafik renklerinden birini alır; FunnelStage'in color alanı bir aşamaya kendi rengini verir.
• 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. Grafik Funnel_<tagKey>, bir aşama Funnel_<tagKey>.Stage_<numara> olarak etiketlenir. Bir aşamaya basış, aşamanın anahtarıyla bir select olayı olarak bildirilir.

Örnekler

Ziyaretten ödemeye

En yalın hâli: sırasıyla verilen aşamalar. Her aşamanın anahtarı, adı ve değeri vardır.

İmleci bir aşamanın satırına getir ya da aşamaya dokun: aşama halkalanır ve tooltip değerini, ilk aşamaya göre payıyla birlikte yazar.

PantrixFunnelChart(
    stages = FUNNEL_STEPS,
    description = "Bir ziyaretin ödemeye varana kadar geçtiği aşamalar",
    tagKey = "plain"
)

private val FUNNEL_STEPS = listOf(
    FunnelStage("visits", "Ziyaret", 3000),
    FunnelStage("signups", "Üyelik", 1240),
    FunnelStage("trials", "Deneme", 520),
    FunnelStage("paid", "Ödeme", 310)
)

Biçim ve yön

Aşamaların biçimi ve yönü. "Çubuk" her aşamayı değeri kadar geniş bir çubuk olarak çizer (shape = FunnelShape.Bars); anahtarı çevir: aşamalar yan yana durur (horizontal = true), her biri değeri kadar yüksek. Klavyede oklar o zaman sağa ve sola gider.

var shape by remember { mutableStateOf(FunnelShape.Funnel) }
var horizontal by remember { mutableStateOf(false) }
PantrixSegmentButton(
    options = FUNNEL_SHAPES,
    selected = shape,
    onSelect = { shape = it },
    fullWidth = false,
    tagKey = "funnel_shape"
)
PantrixSwitchButton(
    checked = horizontal,
    onCheckedChange = { horizontal = it },
    label = "Yatay",
    tagKey = "funnel_horizontal"
)
PantrixFunnelChart(
    stages = FUNNEL_STEPS,
    shape = shape,
    horizontal = horizontal,
    description = "Bir ziyaretin ödemeye varana kadar geçtiği aşamalar",
    tagKey = "shape"
)

private val FUNNEL_STEPS = listOf(
    FunnelStage("visits", "Ziyaret", 3000),
    FunnelStage("signups", "Üyelik", 1240),
    FunnelStage("trials", "Deneme", 520),
    FunnelStage("paid", "Ödeme", 310)
)

private val FUNNEL_SHAPES = listOf(
    SegmentOption(value = FunnelShape.Funnel, label = "Huni", tagKey = "funnel"),
    SegmentOption(value = FunnelShape.Bars, label = "Çubuk", tagKey = "bars")
)

Dönüşüm oranları

Dönüşüm oranları (rate). "İlkine göre" her aşamanın ilk aşamadaki payını, "Öncekine göre" bir önceki aşamaya ulaşanların ne kadarının bu aşamaya geçtiğini, "İkisi" ikisini birden yazar. Aşamanın üstünde paylar yalın durur, ikisi bir noktayla ayrılır; tooltip ve ekran okuyucu her payın neye göre olduğunu söyler.

var rate by remember { mutableStateOf(FunnelRate.Previous) }
PantrixSegmentButton(
    options = FUNNEL_RATES,
    selected = rate,
    onSelect = { rate = it },
    fullWidth = false,
    tagKey = "funnel_rate"
)
PantrixFunnelChart(
    stages = FUNNEL_STEPS,
    rate = rate,
    description = "Bir ziyaretin ödemeye varana kadar geçtiği aşamalar, dönüşüm oranlarıyla",
    tagKey = "rates"
)

private val FUNNEL_STEPS = listOf(
    FunnelStage("visits", "Ziyaret", 3000),
    FunnelStage("signups", "Üyelik", 1240),
    FunnelStage("trials", "Deneme", 520),
    FunnelStage("paid", "Ödeme", 310)
)

private val FUNNEL_RATES = listOf(
    SegmentOption(value = FunnelRate.First, label = "İlkine göre", tagKey = "first"),
    SegmentOption(value = FunnelRate.Previous, label = "Öncekine göre", tagKey = "previous"),
    SegmentOption(value = FunnelRate.Both, label = "İkisi", tagKey = "both")
)

Kısa yazılan değerler

Büyük sayılar kısa yazılır (ChartDataLabels'ın format'ı): aşamaların içinde yer kalır. Anahtarı çevir: yazılar kalkar (labels = null) ve değerler yalnızca tooltip'te ve ekran okuyucuda durur.

var written by remember { mutableStateOf(true) }
val strings = PantrixTheme.strings
PantrixSwitchButton(
    checked = written,
    onCheckedChange = { written = it },
    label = "Yazılar",
    tagKey = "funnel_labels"
)
PantrixFunnelChart(
    stages = CAMPAIGN_STEPS,
    labels = if (written) ChartDataLabels(format = { strings.compact(it) }) else null,
    description = "Bir kampanyanın gösterimden satışa aşamaları",
    tagKey = "labels"
)

private val CAMPAIGN_STEPS = listOf(
    FunnelStage("shown", "Gösterim", 1_250_000),
    FunnelStage("clicks", "Tıklama", 410_000),
    FunnelStage("carts", "Sepet", 96_000),
    FunnelStage("orders", "Sipariş", 38_500),
    FunnelStage("repeat", "Yeniden alan", 9_200)
)

Bir aşamaya basmak

Bir basış, aşamayı alır: anahtarı series'inde, adı name'inde, değeri value'sunda, grafiğin yazdığı metin text'indedir. Bir aşamaya bas: alttaki satır basılanı yazar.

var pressed by remember { mutableStateOf<String?>(null) }
PantrixFunnelChart(
    stages = FUNNEL_STEPS,
    onSelect = { pressed = "${it.name}: ${it.text}" },
    description = "Bir ziyaretin ödemeye varana kadar geçtiği aşamalar",
    tagKey = "press"
)
PantrixText(text = pressed ?: "Bir aşamaya bas")

private val FUNNEL_STEPS = listOf(
    FunnelStage("visits", "Ziyaret", 3000),
    FunnelStage("signups", "Üyelik", 1240),
    FunnelStage("trials", "Deneme", 520),
    FunnelStage("paid", "Ödeme", 310)
)

Genişleyen bir aşama

Bir aşama kendinden öncekinden büyük olabilir: aranan kişiler, başvuranlardan çok. Grafik sırayı da sayıyı da değiştirmez; o aşama daralmak yerine genişler ve payı yüzde yüzü geçer.

Son aşama yazısına dar geldiği için adı ve değeri yanında durur.

PantrixFunnelChart(
    stages = listOf(
        FunnelStage("leads", "Başvuru", 800),
        FunnelStage("calls", "Arama", 950),
        FunnelStage("offers", "Teklif", 300),
        FunnelStage("won", "Satış", 40)
    ),
    description = "Başvurudan satışa: aramalar başvurulardan çok",
    tagKey = "widening"
)

Kendi renklerin

Aşamaların kendi renkleri: temanın bir rolü, aşamadan aşamaya açılarak. Her FunnelStage rengini kendi taşır; verilmeyen aşama sırasının grafik rengini alır.

val tone = PantrixTheme.colors.primary.color
PantrixFunnelChart(
    stages = FUNNEL_STEPS.mapIndexed { place, stage ->
        FunnelStage(stage.key, stage.name, stage.value, tone.copy(alpha = 1f - place * 0.2f))
    },
    description = "Bir ziyaretin ödemeye varana kadar geçtiği aşamalar, tek renkte",
    tagKey = "own_colors"
)

private val FUNNEL_STEPS = listOf(
    FunnelStage("visits", "Ziyaret", 3000),
    FunnelStage("signups", "Üyelik", 1240),
    FunnelStage("trials", "Deneme", 520),
    FunnelStage("paid", "Ödeme", 310)
)

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 aşamalar, değerleri ve oranları durur.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixFunnelChart(
    stages = FUNNEL_STEPS,
    description = "Bir ziyaretin ödemeye varana kadar geçtiği aşamalar",
    tagKey = "exported",
    export = ChartExport(fileName = "ziyaretten-odemeye") { file = it }
)
ExportedFile(file, tagKey = "exported")

private val FUNNEL_STEPS = listOf(
    FunnelStage("visits", "Ziyaret", 3000),
    FunnelStage("signups", "Üyelik", 1240),
    FunnelStage("trials", "Deneme", 520),
    FunnelStage("paid", "Ödeme", 310)
)

API

stages

Bir huni: gittikçe daha azının geçtiği bir şeyin aşamaları, alt alta, her biri ona ulaşanların sayısı kadar geniş. Ötekilerin nerede kaybedildiğini gösterir: üye olan ziyaretçiler, deneyen üyeler, ödeyen deneyenler.

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

• Ekran okuyucu. Önce grafiğin açıklaması, sonra sırasıyla her aşama: adı, değeri ve payları. İlk aşamaya göre pay tek başına yazılıyorsa çıplak okunur, öbür durumlarda her pay neyin payı olduğuyla.