Pie Chart

Bir pasta grafiği: bir bütünün parçaları, bir dairenin dilimleri olarak; her biri, değerinin toplamdaki payı kadar dönüş tutar. Ortasında bir hole olunca bir halkadır: oyuğunda bir toplam ya da bir başlık için yer vardır.

import com.pantrixui.components.chart.pie.PantrixPieChart

• Açı. startAngle ilk dilimin başladığı yerdir, saat on ikiden saat yönünde derece; sweepAngle dilimlerin birlikte tuttuğu dönüştür: 360 tam pasta, 180 yarım pasta. Yarım pasta kutusunun izin verdiği kadar geniştir.
• Sıra ve küçük dilimler. sort dilimleri verildikleri gibi, büyükten küçüğe ya da küçükten büyüğe dizer. others bütünün bir payından küçük dilimleri sonda tek bir dilimde toplar; o dilimin tooltip'i ve ekran okuyucuya söylenişi içindekileri tek tek yazar.
• Değerler. Bir dilimin değeri bir miktardır; payını grafik hesaplar. Değeri olmayan ya da sıfırı aşmayan dilimin pastada yeri yoktur, lejantta adı durur.
• Halka. hole yarıçapın ne kadarının oyulacağını söyler: sıfır tam bir pasta, onda altı içine yazı sığan bir halka. center oyuğun içinde, oyuğa sığan en büyük kutuda durur; yarım halkada çizilen yarının oyuğunda.
• Gösterilen dilim. İmlecin altındaki ya da dokunulan dilim pastanın kenarından dışarı taşar ve tooltip değerini ve payını yazar. Parmakla, gösterilen dilime yeniden dokunmak onu bırakır.
• Lejant. Dilimlerin adları, her biri kendi renginin yanında. Bir kayda basmak dilimi pastadan çıkarır; kalan dilimler bütünü yeniden paylaşır.
• Etiketler. labels her dilimin payını dilimin üstüne yazar, dilimin renginde daha iyi okunan siyahla ya da beyazla; format verilirse değeri. Yazısı sığmayan dilimin etiketi dışarıya, dilimin adıyla yazılır ve dilimin renginde bir çizgi onu dilimine bağlar. position bunu değiştirir: Outside hepsini dışarıya, Center yalnızca içeriye yazar. Pasta dışarıdaki yazılara iki yanında yer açar; o yer pastayı yarısından küçük bırakacaksa yazılar yalnızca içeride kalır.
• Yön. Pasta sağdan sola okunan dilde de saat yönünde döner; lejantı okuma yönüne uyar.
• 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 PieChart_<tagKey>; pasta .Plot, dilimler .Slice_<sıra>, lejantın kayıtları .Legend_<dilimin anahtarı>, tooltip .Tooltip.

Örnekler

Bir bütünün payları

En yalın hâli: dilimler, her biri anahtarı, adı ve değeriyle. İlk dilim saat on ikiden başlar, ötekiler saat yönünde onu izler; lejant grafiğin altında durur.

İmleci bir dilimin üstüne getir ya da dilime dokun: dilim dışarı taşar ve tooltip ziyaret sayısını ve toplamdaki payını yazar. Lejanttaki bir ada bas: dilim çıkar ve kalanlar bütünü yeniden paylaşır.

PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    description = "Kaynaklara göre ziyaret",
    tagKey = "plain"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

Ortasında toplamı olan halka

Ortası oyulmuş pasta bir halkadır: yarıçapın onda altısı oyuldu (hole) ve oyuğa toplam yazıldı (center).

Lejanttan bir dilimi çıkar: ortadaki sayı kalan dilimlerin toplamı olur. Ekran grafiğin durumunu kendisi tutuyor (rememberChartState) ve gizlenen dilimleri ondan okuyor.

val state = rememberChartState()
val strings = PantrixTheme.strings
val total = VISIT_SOURCES.filter { it.key !in state.hidden }.sumOf { it.visits }
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    hole = 0.6f,
    center = {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            PantrixText(text = strings.decimal(total), style = PantrixTheme.typography.title)
            PantrixText(text = "ziyaret", color = PantrixTheme.colors.textSecondary)
        }
    },
    state = state,
    description = "Kaynaklara göre ziyaret, ortasında toplamıyla",
    tagKey = "ring"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

Payları dilimlerin üstünde

Paylar dilimlerin üstünde (labels): her dilime toplamdaki payı yazılır, dilimin renginde daha iyi okunan siyahla ya da beyazla. Anahtarı çevir: etiketler payı değil değeri yazar (ChartDataLabels(format = …)).

Yazısı dilime sığmayan etiket dışarıya, dilimin adıyla yazılır; bir çizgi onu dilimine bağlar.

var values by remember { mutableStateOf(false) }
val strings = PantrixTheme.strings
PantrixSwitchButton(
    checked = values,
    onCheckedChange = { values = it },
    label = "Değerleri yaz",
    tagKey = "pie_labels_values"
)
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    labels = if (values) ChartDataLabels(format = { strings.decimal(it) }) else ChartDataLabels(),
    description = "Kaynaklara göre ziyaret, paylarıyla",
    tagKey = "labels"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

Etiketlerin yeri

Etiketlerin yeri (ChartDataLabels(position = …)). "Otomatik" (Auto) her payı dilimin üstüne, sığmayanı dışarıya yazar; "Dışarıda" (Outside) her dilimin adını ve payını pastanın yanına yazar; "İçeride" (Center) sığmayanı atlar. Dışarıdaki yazıyı dilimine kendi renginde bir çizgi bağlar ve pasta onlara iki yanında yer açar.

var place by remember { mutableStateOf(ChartDataLabelPosition.Outside) }
PantrixSegmentButton(
    options = PIE_LABEL_PLACES,
    selected = place,
    onSelect = { place = it },
    fullWidth = false,
    tagKey = "pie_label_place"
)
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    labels = ChartDataLabels(position = place),
    legend = null,
    description = "Kaynaklara göre ziyaret, paylarıyla",
    tagKey = "label_place"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

private val PIE_LABEL_PLACES = listOf(
    SegmentOption(value = ChartDataLabelPosition.Auto, label = "Otomatik", tagKey = "auto"),
    SegmentOption(value = ChartDataLabelPosition.Outside, label = "Dışarıda", tagKey = "outside"),
    SegmentOption(value = ChartDataLabelPosition.Center, label = "İçeride", tagKey = "inside")
)

Yarım halka

Yarım bir halka: dilimler saat dokuzdan başlar (startAngle = 270f) ve dönüşün yarısını tutar (sweepAngle = 180f). Halka kutusunun izin verdiği kadar geniştir ve toplam, çizilen yarının oyuğunda durur.

val total = PantrixTheme.strings.decimal(VISIT_SOURCES.sumOf { it.visits })
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    hole = 0.6f,
    startAngle = 270f,
    sweepAngle = 180f,
    center = { PantrixText(text = total, style = PantrixTheme.typography.title) },
    description = "Kaynaklara göre ziyaret, yarım halka",
    tagKey = "half"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

Sıralama ve küçük dilimler

Tarayıcılara göre ziyaret, büyükten küçüğe (sort = PieSort.Descending). Bütünün yüzde beşinden küçük dilimler sonda tek bir dilimde toplanır (others = PieOthers(share = 0.05f)); adı temanın sözcüğüdür. Toplanan dilimin üstüne gel ya da ona dokun: tooltip içindekileri tek tek yazar. Anahtarı kapat: bütün dilimler görünür.

var gathered by remember { mutableStateOf(true) }
PantrixSwitchButton(
    checked = gathered,
    onCheckedChange = { gathered = it },
    label = "Küçükleri topla",
    tagKey = "pie_gathered"
)
PantrixPieChart(
    slices = BROWSER_VISITS.map { PieSlice(it.key, it.name, it.visits) },
    sort = PieSort.Descending,
    others = if (gathered) PieOthers(share = 0.05f) else null,
    labels = ChartDataLabels(),
    legend = ChartLegend(position = ChartLegendPosition.End),
    description = "Tarayıcılara göre ziyaret",
    tagKey = "gathered"
)

private data class Browser(
    val key: String,
    val name: String,
    val visits: Int
)

private val BROWSER_VISITS = listOf(
    Browser("safari", "Safari", 198),
    Browser("firefox", "Firefox", 42),
    Browser("chrome", "Chrome", 612),
    Browser("opera", "Opera", 24),
    Browser("edge", "Edge", 54),
    Browser("uc", "UC", 17),
    Browser("samsung", "Samsung", 31),
    Browser("yandex", "Yandex", 22)
)

Lejantın yeri

Lejant grafiğin dört yanından birinde durur. Üstte ve altta kayıtlar bir satıra dizilir ve sığmazsa alt satıra geçer; yanlarda alt alta dururlar ve genişliğin onda dördünden fazlasını almazlar. Pasta, lejanttan kalan yerin ortasında, oraya sığan en büyük dairedir.

var place by remember { mutableStateOf(ChartLegendPosition.End) }
PantrixSegmentButton(
    options = PIE_LEGEND_PLACES,
    selected = place,
    onSelect = { place = it },
    fullWidth = false,
    tagKey = "pie_legend_place"
)
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    hole = 0.6f,
    legend = ChartLegend(position = place),
    description = "Kaynaklara göre ziyaret",
    tagKey = "legend"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

private val PIE_LEGEND_PLACES = listOf(
    SegmentOption(value = ChartLegendPosition.Top, label = "Üstte", tagKey = "top"),
    SegmentOption(value = ChartLegendPosition.Bottom, label = "Altta", tagKey = "bottom"),
    SegmentOption(value = ChartLegendPosition.Start, label = "Başta", tagKey = "start"),
    SegmentOption(value = ChartLegendPosition.End, label = "Sonda", tagKey = "end")
)

Bir dilime basmak

onSelect, basılan dilimi verir: anahtarını, adını, değerini ve grafiğin onu nasıl yazdığını. Bir dilime bas ya da klavyeyle bir dilime gidip Enter'a bas: kartın altındaki satır basılanı yazar.

val report = LocalExampleEvents.current
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    description = "Kaynaklara göre ziyaret",
    onSelect = { point -> report("${point.name}: ${point.text}") },
    tagKey = "pressed"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

Değişen değerler

Değerler değişince dilimler eski yerlerinden yenilerine gider. Anahtarı çevir: grafik geçen yılın ziyaretlerini gösterir. Dilimleri anahtarları eşler: adı ya da değeri değişen dilim aynı dilimdir, rengini ve lejanttaki yerini korur.

var before by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = before,
    onCheckedChange = { before = it },
    label = "Geçen yıl",
    tagKey = "pie_before"
)
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, if (before) it.before else it.visits) },
    hole = 0.6f,
    labels = ChartDataLabels(),
    description = if (before) "Geçen yıl kaynaklara göre ziyaret" else "Bu yıl kaynaklara göre ziyaret",
    tagKey = "changing"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

Kendi renklerin ve ölçülerin

Bir grafiğin kendi görünüşü. Her dilim kendi rengini söylüyor (PieSlice(color = …)): temanın grafik renkleri yerine paletten tek bir morun tonları. ChartStyle ölçüleri verir: dilimlerin arası kapalı (sliceGap) ve grafik daha alçak (height). Verilmeyen alan temanınki kalır.

val dark = LocalDemoDarkTheme.current
val violet = PantrixPalette.Violet
val tones = if (dark) {
    listOf(violet.shade300, violet.shade400, violet.shade500, violet.shade600, violet.shade700)
} else {
    listOf(violet.shade800, violet.shade600, violet.shade500, violet.shade400, violet.shade300)
}
PantrixPieChart(
    slices = VISIT_SOURCES.mapIndexed { index, source ->
        PieSlice(source.key, source.name, source.visits, color = tones[index])
    },
    labels = ChartDataLabels(),
    description = "Kaynaklara göre ziyaret",
    style = ChartStyle(sliceGap = 0.dp, height = 180.dp),
    tagKey = "own_look"
)

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

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 pasta ekrandaki hâliyle, lejant altında durur; gösterilen dilim ve tooltip'i dosyada yoktur. Deliğe center ile konan da dosyaya çıkmaz.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixPieChart(
    slices = VISIT_SOURCES.map { PieSlice(it.key, it.name, it.visits) },
    hole = 0.6f,
    center = { PantrixText(text = "Ziyaret", color = PantrixTheme.colors.textSecondary) },
    description = "Kaynaklara göre ziyaret",
    tagKey = "exported",
    export = ChartExport(fileName = "ziyaret-kaynaklari") { file = it }
)
ExportedFile(file, tagKey = "exported")

private data class VisitSource(
    val key: String,
    val name: String,
    val visits: Int,
    val before: Int
)

private val VISIT_SOURCES = listOf(
    VisitSource("direct", "Doğrudan", visits = 420, before = 380),
    VisitSource("search", "Arama", visits = 310, before = 240),
    VisitSource("social", "Sosyal", visits = 150, before = 260),
    VisitSource("mail", "E-posta", visits = 80, before = 90),
    VisitSource("other", "Diğer", visits = 40, before = 30)
)

API

slices

Bir pasta grafiği: bir bütünün parçaları, bir dairenin dilimleri olarak; her biri, değerinin toplamdaki payı kadar dönüş tutar. Ortasında bir hole olunca bir halkadır: oyuğunda bir toplam ya da bir başlık için yer 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

• Klavye. Pasta, Tab için tek duraktır: oklar dilimden dilime geçer ve son dilimden sonra yine ilkine döner; Home ve End ilk ve son dilime gider, Escape bırakır, Enter ve boşluk gösterilen dilime basar. Masaüstünde ve web'de pastaya bir basış odağı ona verir: ardından gelen oklar bu pastada gezer.
• Ekran okuyucu. Grafik önce description'ını, ardından her dilimi adı, değeri ve payıyla söyler.