Range Chart

Her yerde iki değerin arasında kalanın grafiği: bir günün en soğuğu ve en sıcağı, bir fiyatın gördüğü en az ve en çok, bir vardiyanın başladığı ve bittiği saatler.

import com.pantrixui.components.chart.range.PantrixRangeChart

• Bant ya da çubuk. RangeKind.Area aralığı yerden yere giden bir bant olarak çizer: iki çizgi ve aralarında serinin renginden bir ton. RangeKind.Bar her yere, alt değerden üst değere giden bir çubuk koyar; çubuğun iki ucu da yuvarlaktır, çünkü hiçbir şeyin üstünde durmaz.
• Bandın görünüşü. lines = false iki çizgiyi çizmez, bant yalnız tonuyla kalır; dash çizgileri kesik ya da noktalı çizer, marker her noktaya bir işaret koyar, fillAlpha aradaki tonun serinin renginden ne kadar aldığını söyler (verilmezse altıda biri kadar). Çubuk bunların hiçbirini okumaz.
• Sıfır. Aralığın hiçbir yeri sıfırın üstünde durmaz: değer ekseni, eksen söylemedikçe sıfırdan başlamaz ve aralığın değerlerinin çevresinde kurulur. Okunan, iki değerin birbirinden ne kadar uzak olduğu ve nerede durduklarıdır.
• Eksik değer. Alt ya da üst değeri olmayan satırın ikisi de yoktur: bant ondan önce biter, sonra yeniden başlar. Tek başına kalan yer, alt değerinden üst değerine bir çizgidir.
• Değer etiketleri. labels iki değeri aralığın iki ucuna yazar: üsttekini üstüne, alttakini altına.
• Yatay. horizontal = true yerleri grafiğin yanından aşağı dizer, aralıklar boyunca uzanır: bir çizelgedeki vardiyalar gibi. Değerler grafiğin altına yazılır.
• Başka serilerle. Bandın üstünde bir çizgi (sınırlarının içinde bir tahmin) ya da tek grafikte iki aralık isteyen grafik bir PantrixChart'tır: aralık için bir RangeSeries, çizgi için bir LineSeries alır.
• Otomasyon. Grafik, olduğu PantrixChart gibi etiketlenir: Chart_<tagKey>. Tek serisinin anahtarı range'dir.

Örnekler

Günün en düşüğü ve en yükseği

En yalın hâli: satırlar, satırın yerini veren x, alt değer (low), üst değer (high) ve aralığın adı. Bandın iki çizgisi yumuşak gidiyor (curve).

İmleci bir günün üstüne getir ya da güne dokun: bandın iki ucu işaretlenir ve tooltip iki değeri birlikte yazar. Eksen sıfırdan başlamıyor: bir aralığın hiçbir yeri sıfırın üstünde durmaz.

PantrixRangeChart(
    data = WEATHER,
    x = { it.day },
    low = { it.coldest },
    high = { it.warmest },
    name = "Sıcaklık",
    curve = ChartCurve.Smooth,
    yAxis = ChartAxis(format = { "${it.toInt()}°" }),
    description = "Haftanın günlerine göre en düşük ve en yüksek sıcaklık",
    tagKey = "plain"
)

private data class Weather(
    val day: String,
    val coldest: Int,
    val warmest: Int
)

private val WEATHER = listOf(
    Weather("Pzt", coldest = 9, warmest = 17),
    Weather("Sal", coldest = 11, warmest = 19),
    Weather("Çar", coldest = 8, warmest = 15),
    Weather("Per", coldest = 6, warmest = 14),
    Weather("Cum", coldest = 10, warmest = 21),
    Weather("Cmt", coldest = 13, warmest = 24),
    Weather("Paz", coldest = 12, warmest = 22)
)

Bant ya da çubuk

Aynı aralık iki türlü çizilir. Anahtarı çevir: bant, her güne alt değerden üst değere giden bir çubuk olur (RangeKind.Bar). Çubuğun iki ucu da yuvarlaktır ve her günün, grafiğin genişliğinden bir bandı vardır.

Bant, yerden yere süren bir şeye uyar: gün gün değişen sıcaklık. Çubuk, her yerde ayrı ayrı okunan aralıklara.

var bars by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = bars,
    onCheckedChange = { bars = it },
    label = "Çubuk olarak",
    tagKey = "range_bars"
)
PantrixRangeChart(
    data = WEATHER,
    x = { it.day },
    low = { it.coldest },
    high = { it.warmest },
    name = "Sıcaklık",
    kind = if (bars) RangeKind.Bar else RangeKind.Area,
    yAxis = ChartAxis(format = { "${it.toInt()}°" }),
    description = "Haftanın günlerine göre en düşük ve en yüksek sıcaklık",
    tagKey = "kinds"
)

private data class Weather(
    val day: String,
    val coldest: Int,
    val warmest: Int
)

private val WEATHER = listOf(
    Weather("Pzt", coldest = 9, warmest = 17),
    Weather("Sal", coldest = 11, warmest = 19),
    Weather("Çar", coldest = 8, warmest = 15),
    Weather("Per", coldest = 6, warmest = 14),
    Weather("Cum", coldest = 10, warmest = 21),
    Weather("Cmt", coldest = 13, warmest = 24),
    Weather("Paz", coldest = 12, warmest = 22)
)

Değerler iki ucunda

Vardiyaların başladığı ve bittiği saat, her ekip için bir çubuk. İki değer çubuğun iki ucuna yazılır (labels): bitiş üstüne, başlangıç altına. Saatler eksende ve etikette aynı biçimde yazılıyor (format). Eksen günün altışar saatinde işaretli (values): yuvarlak adımlar onu beşer saatte işaretlerdi.

Çizgi öğle arasını gösteriyor (marks): hangi vardiyanın onu içine aldığı okunur.

val hour: (Double) -> String = { "${it.toInt()}:00" }
PantrixRangeChart(
    data = SHIFT_HOURS,
    x = { it.team },
    low = { it.start },
    high = { it.end },
    name = "Vardiya",
    kind = RangeKind.Bar,
    labels = ChartDataLabels(format = hour),
    yAxis = ChartAxis(values = listOf(0.0, 6.0, 12.0, 18.0, 24.0), format = hour),
    marks = listOf(ChartReferenceLine(y = 12, label = "Öğle arası")),
    description = "Ekiplere göre vardiyanın başladığı ve bittiği saat",
    tagKey = "labels"
)

private data class ShiftHours(
    val team: String,
    val start: Int,
    val end: Int
)

private val SHIFT_HOURS = listOf(
    ShiftHours("Depo", start = 6, end = 14),
    ShiftHours("Mağaza", start = 9, end = 21),
    ShiftHours("Destek", start = 8, end = 18),
    ShiftHours("Akşam", start = 14, end = 22)
)

Yatay vardiyalar

Aynı vardiyalar yatay (horizontal = true): ekipler grafiğin yanından aşağı dizilir, her vardiya başladığı saatten bittiği saate soldan sağa uzanır, bir çizelgedeki gibi. Saatler grafiğin altına yazılır; öğle arası çizgisi grafiği yukarıdan aşağı keser.

val hour: (Double) -> String = { "${it.toInt()}:00" }
PantrixRangeChart(
    data = SHIFT_HOURS,
    x = { it.team },
    low = { it.start },
    high = { it.end },
    name = "Vardiya",
    kind = RangeKind.Bar,
    horizontal = true,
    labels = ChartDataLabels(format = hour),
    yAxis = ChartAxis(values = listOf(0.0, 6.0, 12.0, 18.0, 24.0), format = hour),
    marks = listOf(ChartReferenceLine(y = 12, label = "Öğle arası")),
    description = "Ekiplere göre vardiyanın başladığı ve bittiği saat, yatay",
    tagKey = "horizontal_shifts"
)

private data class ShiftHours(
    val team: String,
    val start: Int,
    val end: Int
)

private val SHIFT_HOURS = listOf(
    ShiftHours("Depo", start = 6, end = 14),
    ShiftHours("Mağaza", start = 9, end = 21),
    ShiftHours("Destek", start = 8, end = 18),
    ShiftHours("Akşam", start = 14, end = 22)
)

Kesik çizgiler ve işaretler

Bandın görünüşü serinin kendisinden: iki çizgisi kesik (dash), her noktasında bir işaret (marker), aradaki ton her zamankinden koyu (fillAlpha). Anahtarı kapat (lines = false): çizgiler gider, bant tonu ve işaretleriyle kalır.

var lines by remember { mutableStateOf(true) }
PantrixSwitchButton(
    checked = lines,
    onCheckedChange = { lines = it },
    label = "Bandın çizgileri",
    tagKey = "range_lines"
)
PantrixRangeChart(
    data = OUTLOOK,
    x = { it.month },
    low = { it.least },
    high = { it.most },
    name = "Beklenen aralık",
    lines = lines,
    dash = ChartDash.Dashed,
    marker = ChartMarker.Circle,
    fillAlpha = 0.28f,
    description = "Aylara göre siparişlerin beklenen aralığı, kesik çizgiler ve işaretlerle",
    tagKey = "look"
)

private data class Outlook(
    val month: String,
    val expected: Int,
    val least: Int,
    val most: Int
)

private val OUTLOOK = listOf(
    Outlook("Tem", expected = 420, least = 400, most = 440),
    Outlook("Ağu", expected = 450, least = 415, most = 485),
    Outlook("Eyl", expected = 470, least = 420, most = 520),
    Outlook("Eki", expected = 510, least = 440, most = 580),
    Outlook("Kas", expected = 540, least = 450, most = 630),
    Outlook("Ara", expected = 600, least = 480, most = 720)
)

Tahmin ve sınırları

Bandın üstünde bir çizgi isteyen grafik bir PantrixChart'tır: tahminin güvenilen sınırları bir RangeSeries, tahminin kendisi ondan sonra verilen bir LineSeries. Sonra verilen seri öncekinin üstüne çizilir.

Tooltip iki seriyi birlikte yazar: sınırları bir aralık, tahmini tek bir değer olarak. Lejantta aralık bir yama, tahmin kesik bir çizgidir.

PantrixChart(
    series = listOf(
        RangeSeries(
            key = "bounds",
            name = "Beklenen aralık",
            data = OUTLOOK,
            x = { it.month },
            low = { it.least },
            high = { it.most },
            curve = ChartCurve.Smooth
        ),
        LineSeries(
            key = "expected",
            name = "Tahmin",
            data = OUTLOOK,
            x = { it.month },
            y = { it.expected },
            curve = ChartCurve.Smooth,
            dash = ChartDash.Dashed
        )
    ),
    description = "Aylara göre sipariş tahmini ve beklenen aralığı",
    tagKey = "with_line"
)

private data class Outlook(
    val month: String,
    val expected: Int,
    val least: Int,
    val most: Int
)

private val OUTLOOK = listOf(
    Outlook("Tem", expected = 420, least = 400, most = 440),
    Outlook("Ağu", expected = 450, least = 415, most = 485),
    Outlook("Eyl", expected = 470, least = 420, most = 520),
    Outlook("Eki", expected = 510, least = 440, most = 580),
    Outlook("Kas", expected = 540, least = 450, most = 630),
    Outlook("Ara", expected = 600, least = 480, most = 720)
)

Bir aralığa basmak

Bir basış, aralığın iki değerini de alır: noktanın value'su üst değer, from'u alt değerdir; text ikisini grafiğin yazdığı gibi taşır. Bir güne bas: alttaki satır o günün aralığını ve genişliğini yazar.

var pressed by remember { mutableStateOf<String?>(null) }
PantrixRangeChart(
    data = WEATHER,
    x = { it.day },
    low = { it.coldest },
    high = { it.warmest },
    name = "Sıcaklık",
    kind = RangeKind.Bar,
    onSelect = { point ->
        val wide = point.value - (point.from ?: point.value)
        pressed = "${point.label}: ${point.text}, aradaki fark ${wide.toInt()} derece"
    },
    description = "Haftanın günlerine göre en düşük ve en yüksek sıcaklık",
    tagKey = "press"
)
PantrixText(text = pressed ?: "Bir güne bas")

private data class Weather(
    val day: String,
    val coldest: Int,
    val warmest: Int
)

private val WEATHER = listOf(
    Weather("Pzt", coldest = 9, warmest = 17),
    Weather("Sal", coldest = 11, warmest = 19),
    Weather("Çar", coldest = 8, warmest = 15),
    Weather("Per", coldest = 6, warmest = 14),
    Weather("Cum", coldest = 10, warmest = 21),
    Weather("Cmt", coldest = 13, warmest = 24),
    Weather("Paz", coldest = 12, warmest = 22)
)

Eksik değerler

Değeri olmayan günler: çarşamba ve cumartesi ölçülmemiş. Bant, değeri olmayan günden önce biter ve sonra yeniden başlar; iki yanında komşusu olmayan gün, alt değerinden üst değerine giden bir çizgidir.

PantrixRangeChart(
    data = WEATHER,
    x = { it.day },
    low = { row -> row.coldest.takeIf { row.day !in UNMEASURED } },
    high = { row -> row.warmest.takeIf { row.day !in UNMEASURED } },
    name = "Sıcaklık",
    description = "Haftanın günlerine göre sıcaklık, ölçülmeyen iki günle",
    tagKey = "missing"
)

private data class Weather(
    val day: String,
    val coldest: Int,
    val warmest: Int
)

private val WEATHER = listOf(
    Weather("Pzt", coldest = 9, warmest = 17),
    Weather("Sal", coldest = 11, warmest = 19),
    Weather("Çar", coldest = 8, warmest = 15),
    Weather("Per", coldest = 6, warmest = 14),
    Weather("Cum", coldest = 10, warmest = 21),
    Weather("Cmt", coldest = 13, warmest = 24),
    Weather("Paz", coldest = 12, warmest = 22)
)

private val UNMEASURED = setOf("Çar", "Cmt")

API

data

Her yerde iki değerin arasında kalanın grafiği: bir günün en soğuğu ve en sıcağı, bir fiyatın gördüğü en az ve en çok, bir vardiyanın başladığı ve bittiği saatler.

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. İki değer aralarında bir çizgiyle yazılır: "9 – 17". Bir basış, noktanın value'sunda üst değeri, from'unda alt değeri alır.