Bar Chart

Bir kez verilen satırlardan bir çubuk grafiği: satırların adını verdiği her yerde, onlardan okunan values'ın her biri için bir çubuk; yan yana, ya da stacked ise üst üste.

import com.pantrixui.components.chart.bar.PantrixBarChart

• Yan yana ya da yığılı. Bir yerin çubukları yan yana durur; stacked ile üst üste biner, values'ın sırasıyla. Yan yana, her yerde karşılaştırılan birkaç değere uyar; yığılı, bir bütünün parçalarına: bütün de okunur. Yığının tooltip'i değerlerin ardından toplamı yazar.
• Paylar. stacking = ChartStacking.Percent her yığını yüzde yüz sayar: bütün değil, parçaların payı okunur. Eksen yüzde yazar, tooltip her değerin yanına payını ekler, etiket payı yazar.
• Sıfır. Çubuk grafiğinin değer ekseni sıfırdan başlar: bir çubuğun boyu miktar olarak okunur. Sıfırın altındaki değer sıfırdan aşağı iner; yığında, aşağı inen ötekilerin altına.
• Bant. Her yerin, grafiğin genişliğinden bir bandı vardır ve çubukları o bandın ortasında durur. Bir çubuk, ne kadar yeri olursa olsun belli bir genişliği aşmaz (ChartStyle.barMaxWidth); dar yerde çubuklar incelir.
• Yatay. horizontal = true yerleri grafiğin yanından aşağı dizer, çubuklar soldan (sağdan sola okunan dilde sağdan) uzanır: bir sıralama ya da uzun adlı yerler için. Her ad kendi satırında, yatay yazılır; kutunun üçte birinden geniş ad kısaltılır. Değerler grafiğin altına, ikinci eksen üstüne yazılır. Oklardan aşağı ve yukarı yerler arasında, sağa ve sola değerler arasında gezer. Yakından bakılan yatay grafik (zoom) yerlerinde yukarı ve aşağı gider; gezgin şeridi grafiğin yanında, çizgilerin bittiği tarafta dikey durur.
• Gösterilen yer. İmlecin ya da parmağın altındaki yerin bandı gölgelenir ve tooltip o yerin değerlerini gösterir. Tooltip serileri ayırıyorsa (shared = false) imlecin üstündeki çubuğun çevresine bir halka çizilir.
• Çizgiyle birlikte. Çubukların üstünde bir çizgi isteyen grafik bir PantrixChart'tır: her çubuk dizisi için bir BarSeries, çizgi için bir LineSeries alır. Örneği "Chart" sayfasındadır.
• Değer etiketleri. labels değerleri çubukların ucuna, yığılı çubuklarda içine yazar; position başka bir yer söyler, total yığının toplamını ucunun ötesine yazar. Yeri olmayan etiket atlanır.
• İşaretler. marks bir hedef çizgisini ya da bir aralığın bandını çizer; "Chart" sayfasında anlatıldığı gibidir.
• Otomasyon. Grafik, olduğu PantrixChart gibi etiketlenir: Chart_<tagKey>.

Örnekler

Tek bir miktar

En yalın hâli: satırlar, satırın yerini veren x ve tek bir değer. Tek serili grafiğin lejantı yoktur.

İmleci bir ayın üstüne getir ya da aya dokun: ayın bandı gölgelenir ve tooltip o ayın satışını yazar.

PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(ChartValue("online", "İnternet") { it.online }),
    description = "Aylara göre internet satışı",
    tagKey = "plain"
)

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

Yan yana ya da yığılı

Üç satış kanalı, her ay yan yana: her ayda hangisinin önde olduğu okunur. Anahtarı çevir: çubuklar üst üste biner (stacked) ve her ayın toplamı da okunur; kanalların payı renklerden görülür.

Lejanttaki bir ada bas: kanal çıkar, kalan çubuklar genişler ya da yığın alçalır.

var stacked by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = stacked,
    onCheckedChange = { stacked = it },
    label = "Üst üste",
    tagKey = "bar_stacked"
)
PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(
        ChartValue("online", "İnternet") { it.online },
        ChartValue("stores", "Mağazalar") { it.stores },
        ChartValue("partners", "Bayiler") { it.partners }
    ),
    stacked = stacked,
    description = "Aylara göre üç kanalın satışı",
    tagKey = "stacked"
)

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

Sıfırın altına inen değerler

Sıfırın iki yanında değerler: bir ayın kârı ya da zararı. Kâr sıfırdan yukarı, zarar sıfırdan aşağı iner; sıfırda bir çizgi çizilir. Değerler kısa yazılıyor (format).

val strings = PantrixTheme.strings
PantrixBarChart(
    data = BALANCE,
    x = { it.first },
    values = listOf(ChartValue("balance", "Kâr") { it.second }),
    yAxis = ChartAxis(format = { strings.compact(it) }),
    description = "Aylara göre kâr ve zarar",
    tagKey = "below_zero"
)

private val BALANCE = listOf(
    "Oca" to 64_000,
    "Şub" to 31_000,
    "Mar" to -12_000,
    "Nis" to -38_000,
    "May" to 22_000,
    "Haz" to 87_000
)

Tek tek okunan çubuklar

Tooltip serileri ayırıyor (shared = false): imlecin üstündeki çubuk bir halkayla işaretlenir ve tooltip yalnızca onun değerini yazar. Klavyede yukarı ve aşağı oklar bir çubuktan ötekine geçer. Bir çubuğa bas: alttaki satır basılanı yazar.

var pressed by remember { mutableStateOf<String?>(null) }
PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(
        ChartValue("online", "İnternet") { it.online },
        ChartValue("stores", "Mağazalar") { it.stores }
    ),
    tooltip = ChartTooltip(shared = false),
    onSelect = { pressed = "${it.label}, ${it.name}: ${it.text}" },
    description = "Aylara göre internet ve mağaza satışı",
    tagKey = "one_by_one"
)
PantrixText(text = pressed ?: "Bir çubuğa bas")

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

Çok yer

Otuz gün. Her günün bandı dardır ve çubuklar ona göre incelir; günlerin adları bir kuralla atlanır. Değerlerin hepsi yerinde durur: imleçle ya da parmakla her günün değeri gösterilir.

PantrixBarChart(
    data = DAYS,
    x = { it.first },
    values = listOf(ChartValue("orders", "Sipariş") { it.second }),
    xAxis = ChartAxis(label = { "$it. gün" }),
    description = "Son otuz günün günlük sipariş sayısı",
    tagKey = "many_places"
)

private val DAYS = List(30) { day -> (day + 1) to 120 + day * 4 - (if (day % 7 >= 5) 45 else 0) + (day * 37) % 23 }

Uzun adlar

Uzun adlı yerler: bir mağazanın en çok satan sekiz ürünü. Adlar yan yana sığmayınca, eğik yazıldıklarında daha çoğu sığıyorsa sekizde bir tur eğik yazılır ve ucları yerlerinin altında durur; eğik de sığmayan olursa yine her ikinci, her üçüncü yazılır. İlk ve son ad hep yazılır. Çok uzun bir ad, grafiğin yüksekliğinin üçte birinden aşağı inmeyecek kadar, kutunun kenarına gelen ad da kutuda kalacak kadar kısaltılır. Kısa adlar düz kalır.

PantrixBarChart(
    data = BEST_SELLERS,
    x = { it.first },
    values = listOf(ChartValue("sold", "Satış (adet)") { it.second }),
    description = "En çok satan sekiz ürünün bu ayki satışı",
    tagKey = "long_names"
)

private val BEST_SELLERS = listOf(
    "Kablosuz kulaklık" to 412,
    "Akıllı saat" to 356,
    "Taşınabilir şarj aleti" to 298,
    "Bluetooth hoparlör" to 251,
    "Oyun faresi" to 214,
    "Mekanik klavye" to 187,
    "Yüksek çözünürlüklü web kamerası" to 143,
    "USB-C çoklayıcı" to 121
)

Yatay çubuklar

Aynı sekiz ürün, yatay çubuklarla (horizontal = true): adlar grafiğin yanında, her biri kendi satırında, yatay yazılır; çubuklar soldan uzanır ve değerleri uçlarına yazılır (labels). Hedef çizgisi (marks) değer ekseninde durduğu için grafiği yukarıdan aşağı keser.

İmleci bir ürünün üstüne getir ya da ürüne dokun: satırı gölgelenir ve tooltip değerini yazar. Klavyede grafiğe gelince aşağı ve yukarı oklar ürünler arasında gezer.

PantrixBarChart(
    data = BEST_SELLERS,
    x = { it.first },
    values = listOf(ChartValue("sold", "Satış (adet)") { it.second }),
    horizontal = true,
    labels = ChartDataLabels(),
    marks = listOf(ChartReferenceLine(y = 300, label = "Hedef")),
    description = "En çok satan sekiz ürünün bu ayki satışı, yatay çubuklarla",
    tagKey = "horizontal"
)

private val BEST_SELLERS = listOf(
    "Kablosuz kulaklık" to 412,
    "Akıllı saat" to 356,
    "Taşınabilir şarj aleti" to 298,
    "Bluetooth hoparlör" to 251,
    "Oyun faresi" to 214,
    "Mekanik klavye" to 187,
    "Yüksek çözünürlüklü web kamerası" to 143,
    "USB-C çoklayıcı" to 121
)

Yatay ve yığılı

Yatay çubuklar da yan yana ya da yığılı durur: burada üç kanalın aylık satışı, yığılı. Lejant bir kanalı çıkarır; yığının toplamı her çubuğun ucuna yazılır (total).

PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(
        ChartValue("online", "İnternet") { it.online },
        ChartValue("stores", "Mağazalar") { it.stores },
        ChartValue("partners", "Bayiler") { it.partners }
    ),
    stacked = true,
    horizontal = true,
    labels = ChartDataLabels(total = true),
    description = "Aylara göre üç kanalın satışı, yatay ve yığılı çubuklarla",
    tagKey = "horizontal_stacked"
)

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

Uzun bir sıralama

Kırk ilin mağaza sayısı, büyükten küçüğe: bu kadar satır grafiğin yüksekliğine sığmaz. Yakından bakılan yatay grafikte (zoom) ilk on il çizim alanını doldurur (ChartState.zoomTo); gezgin şeridi (navigator = true) grafiğin sağında dikey durur ve bütün illeri gösterir, görünen kısım şeritte sürüklenir ya da uçlarından büyütülür.

Fareyle grafiği yukarı aşağı sürükle, tekerleği çevir ya da iki parmakla kaydır; Ctrl ile tekerlek ve iki parmağı açıp kapamak yakınlaştırır. Düğmeler yukarı ve aşağı götürür, uzaklaştırır, yakınlaştırır ve bütün illeri yeniden gösterir. Klavyede aşağı ok bir sonraki ile gider; görünmeyen bir ile gelince görünen kısım kayar.

val state = rememberChartState()
LaunchedEffect(state) { state.zoomTo(start = 0f, end = 0.25f) }
PantrixBarChart(
    data = PROVINCES,
    x = { it.first },
    values = listOf(ChartValue("stores", "Mağaza") { it.second }),
    modifier = Modifier.height(360.dp),
    horizontal = true,
    zoom = ChartZoom(navigator = true),
    state = state,
    description = "Kırk ilin mağaza sayısı, büyükten küçüğe",
    tagKey = "long_ranking"
)

private val PROVINCES = PROVINCE_NAMES.mapIndexed { place, name -> name to 2400 / (place + 3) + 5 }

private val PROVINCE_NAMES = (
    "İstanbul Ankara İzmir Bursa Antalya Konya Adana Gaziantep Şanlıurfa Kocaeli " +
        "Mersin Diyarbakır Hatay Manisa Kayseri Samsun Balıkesir Kahramanmaraş Van Aydın " +
        "Tekirdağ Sakarya Denizli Muğla Eskişehir Mardin Trabzon Malatya Ordu Erzurum " +
        "Afyonkarahisar Sivas Tokat Zonguldak Adıyaman Elazığ Batman Çorum Kütahya Şırnak"
).split(" ")

Değerleri çubukların üstünde

Değerler çubukların yanına yazılır (labels): tek başına duran çubuğun ucunun üstüne, sıfırın altına inen çubuğun altına. Anahtarı çevir: yığılı çubuklarda değer çubuğun içine, çubuğun renginde daha iyi okunan siyahla ya da beyazla yazılır, yığının toplamı da ucunun üstüne (total). Çizgi, hiçbir ayın ulaşmadığı bir hedefi gösteriyor (marks); bir etiketin içinden geçtiği yerde etiket bir zeminin üstüne yazılır ve çizgi orada örtülür. Hedefin yazısı çizginin başında (labelPosition): sonunda, en yüksek ayların etiketlerinin yerini alırdı.

Düğmelerden biriyle etiketin yerini seç (position): "Kendi" yeri olan yerdir; ötekiler çubuğun dışı, ucu, ortası ve dibidir. Yığılı çubuğun dışı bir sonraki çubuktur: orada etiket kendi çubuğunun ucuna yazılır.

Bir etiket yeri olan yerde yazılır: başka bir etiketin üstüne gelecek, grafikten taşacak ya da çubuğuna sığmayacak etiket atlanır; değer tooltip'te ve ekran okuyucuda durur. ChartDataLabels(format = …) değerin nasıl yazılacağını söyler; verilmezse eksenin yazımı geçerlidir.

var stacked by remember { mutableStateOf(false) }
var position by remember { mutableStateOf(ChartDataLabelPosition.Auto) }
PantrixSwitchButton(
    checked = stacked,
    onCheckedChange = { stacked = it },
    label = "Üst üste",
    tagKey = "bar_labels_stacked"
)
PantrixSegmentButton(
    options = LABEL_PLACES,
    selected = position,
    onSelect = { position = it },
    fullWidth = false,
    tagKey = "label_place"
)
PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(
        ChartValue("online", "İnternet") { it.online },
        ChartValue("stores", "Mağazalar") { it.stores }
    ),
    stacked = stacked,
    labels = ChartDataLabels(position = position, total = stacked),
    marks = listOf(
        ChartReferenceLine(
            y = if (stacked) 140 else 75,
            label = "Hedef",
            labelPosition = ChartMarkLabelPosition.Start
        )
    ),
    description = "Aylara göre internet ve mağaza satışı, değerleriyle",
    tagKey = "labels"
)

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

private val LABEL_PLACES = listOf(
    SegmentOption(value = ChartDataLabelPosition.Auto, label = "Kendi", tagKey = "auto"),
    SegmentOption(value = ChartDataLabelPosition.Outside, label = "Dışı", tagKey = "outside"),
    SegmentOption(value = ChartDataLabelPosition.InsideEnd, label = "Ucu", tagKey = "inside_end"),
    SegmentOption(value = ChartDataLabelPosition.Center, label = "Ortası", tagKey = "center"),
    SegmentOption(value = ChartDataLabelPosition.InsideStart, label = "Dibi", tagKey = "inside_start")
)

Paylar olarak yığılı

Üç kanalın her aydaki payı: her ayın çubuğu yüzde yüzdür ve kanallar ondan paylarını alır (stacking = ChartStacking.Percent). Satışın kendisi değil, nasıl paylaşıldığı okunur: hangi ayda internetin payı arttı. Eksen yüzde yazar, etiketler payı; tooltip her kanalın satışını payıyla birlikte, ardından da ayın toplamını yazar.

PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(
        ChartValue("online", "İnternet") { it.online },
        ChartValue("stores", "Mağazalar") { it.stores },
        ChartValue("partners", "Bayiler") { it.partners }
    ),
    stacked = true,
    stacking = ChartStacking.Percent,
    labels = ChartDataLabels(),
    description = "Aylara göre üç kanalın satıştaki payı",
    tagKey = "shares"
)

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

İkinci eksen

İki türlü bir değer: satış bin lira, internetin payı yüzde. Pay ikinci eksenle okunur (ChartValue(axis = ChartYAxis.Second)); o eksen grafiğin öbür yanında, kendi yazımıyla durur (secondYAxis). İki eksen de sıfırdan başlar ve sıfırları aynı çizgidedir.

val strings = PantrixTheme.strings
PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(
        ChartValue("online", "İnternet") { it.online },
        ChartValue("share", "İnternetin payı", axis = ChartYAxis.Second) {
            it.online.toDouble() / (it.online + it.stores)
        }
    ),
    secondYAxis = ChartAxis(format = { strings.percent(it) }),
    description = "Aylara göre internet satışı ve satışın içindeki payı",
    tagKey = "second_axis"
)

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

Kendi ölçülerin

Bir grafiğin kendi ölçüleri: çubukların ucu köşeli (barRadius), en fazla yirmi dört dp genişliğinde (barMaxWidth), yan yana duranların arası açık (barGap) ve bir ayın bandının onda dokuzunu alıyorlar (barBandShare). Verilmeyen alan temanınki kalır.

PantrixBarChart(
    data = SALES,
    x = { it.month },
    values = listOf(
        ChartValue("online", "İnternet") { it.online },
        ChartValue("stores", "Mağazalar") { it.stores }
    ),
    description = "Aylara göre internet ve mağaza satışı",
    style = ChartStyle(barRadius = 0.dp, barMaxWidth = 24.dp, barGap = 6.dp, barBandShare = 0.9f),
    tagKey = "own_look"
)

private data class Sales(
    val month: String,
    val online: Int,
    val stores: Int,
    val partners: Int
)

private val SALES = listOf(
    Sales("Oca", online = 42, stores = 58, partners = 21),
    Sales("Şub", online = 51, stores = 49, partners = 18),
    Sales("Mar", online = 48, stores = 61, partners = 26),
    Sales("Nis", online = 63, stores = 55, partners = 24),
    Sales("May", online = 70, stores = 52, partners = 31),
    Sales("Haz", online = 66, stores = 64, partners = 29)
)

API

data

Bir kez verilen satırlardan bir çubuk grafiği: satırların adını verdiği her yerde, onlardan okunan values'ın her biri için bir çubuk; yan yana, ya da stacked ise üst üste.

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.