Area Chart

Bir kez verilen satırlardan bir alan grafiği: onlardan okunan values'ın her biri için bir çizgi, çizgiyle sıfırın arası doldurularak.

import com.pantrixui.components.chart.area.PantrixAreaChart

• Dolgu. fill çizginin altını neyin doldurduğunu söyler: Gradient serinin renginin çizgiden sıfıra doğru solmasıdır, Solid rengin düz bir tonu.
• Sıfır. Alan grafiğinin değer ekseni sıfırdan başlar: bir alanın yüksekliği miktar olarak okunur ve sıfırın üstünden kesilen bir alan olduğundan azını gösterir. Eksen startFromZero = false ile başka türlü söyleyebilir. Sıfırın altına inen değerlerde alan sıfır çizgisinden aşağı dolar.
• Üst üste alanlar. Her alan bir öncekinin üstüne ve hepsi sıfırdan çizilir: sonraki seri, daha büyük olduğu yerde öncekini örter. Solan dolgu alttakini gösterir; büyük seriyi önce ver.
• Yığılı alanlar. stacked ile her alan bir öncekinin üstünde durur ve en üstteki çizgi toplamdır: bir bütünün parçaları böyle gösterilir. Tooltip her serinin kendi değerini, ardından da toplamı yazar. stacking = ChartStacking.Percent ile her yerin toplamı yüzde yüz sayılır ve alanlar payları gösterir.
• Çizgi. curve, missing ve bir serinin dash'i ile marker'ı çizgi grafiğindeki gibidir.
• Otomasyon. Grafik, olduğu PantrixChart gibi etiketlenir: Chart_<tagKey>.

Örnekler

Tek bir miktar

Tek bir miktar, aylar boyunca: çizgi yumuşak geçiyor ve altı, rengi sıfıra doğru solarak doluyor. Değer ekseni kendiliğinden sıfırdan başlar; değerleri kısa yazılıyor (format).

Tek serili grafiğin lejantı yoktur: çizginin ne olduğu grafiğin çevresindeki yazıya aittir.

val strings = PantrixTheme.strings
PantrixAreaChart(
    data = STORAGE,
    x = { it.month },
    values = listOf(ChartValue("used", "Kullanılan alan") { it.used }),
    curve = ChartCurve.Smooth,
    yAxis = ChartAxis(format = { "${strings.decimal(it)} GB" }),
    description = "Aylara göre kullanılan depolama alanı",
    tagKey = "plain"
)

private data class Storage(
    val month: String,
    val used: Int,
    val backups: Int
)

private val STORAGE = listOf(
    Storage("Oca", used = 120, backups = 40),
    Storage("Şub", used = 138, backups = 46),
    Storage("Mar", used = 151, backups = 52),
    Storage("Nis", used = 149, backups = 61),
    Storage("May", used = 176, backups = 64),
    Storage("Haz", used = 203, backups = 72),
    Storage("Tem", used = 221, backups = 85),
    Storage("Ağu", used = 214, backups = 91),
    Storage("Eyl", used = 252, backups = 96),
    Storage("Eki", used = 281, backups = 110),
    Storage("Kas", used = 305, backups = 124),
    Storage("Ara", used = 342, backups = 131)
)

İki miktar, iki dolgu

İki miktar, büyüğü önce verilerek. Gradient ile her alan çizgisinden sıfıra doğru solar ve alttaki alan üsttekinin içinden görünür; Solid ile dolgu düz bir tondur. Anahtarı çevir, ikisini karşılaştır.

var solid by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = solid,
    onCheckedChange = { solid = it },
    label = "Düz dolgu",
    tagKey = "area_solid"
)
PantrixAreaChart(
    data = STORAGE,
    x = { it.month },
    values = listOf(
        ChartValue("used", "Kullanılan alan") { it.used },
        ChartValue("backups", "Yedekler") { it.backups }
    ),
    curve = ChartCurve.Smooth,
    fill = if (solid) ChartFill.Solid else ChartFill.Gradient,
    description = "Aylara göre kullanılan alan ve yedekler",
    tagKey = "fills"
)

private data class Storage(
    val month: String,
    val used: Int,
    val backups: Int
)

private val STORAGE = listOf(
    Storage("Oca", used = 120, backups = 40),
    Storage("Şub", used = 138, backups = 46),
    Storage("Mar", used = 151, backups = 52),
    Storage("Nis", used = 149, backups = 61),
    Storage("May", used = 176, backups = 64),
    Storage("Haz", used = 203, backups = 72),
    Storage("Tem", used = 221, backups = 85),
    Storage("Ağu", used = 214, backups = 91),
    Storage("Eyl", used = 252, backups = 96),
    Storage("Eki", used = 281, backups = 110),
    Storage("Kas", used = 305, backups = 124),
    Storage("Ara", used = 342, backups = 131)
)

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ı. Alan her zaman sıfıra doğru dolar: kârda aşağı, zararda yukarı. Sıfırda bir çizgi çizilir ve solan dolgu sıfırın iki yanında da en uzak noktada en güçlüdür.

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

private val PROFIT = listOf(
    "Oca" to 84_000,
    "Şub" to 52_000,
    "Mar" to 21_000,
    "Nis" to -18_000,
    "May" to -46_000,
    "Haz" to -31_000,
    "Tem" to 9_000,
    "Ağu" to 38_000,
    "Eyl" to 67_000,
    "Eki" to 95_000,
    "Kas" to 112_000,
    "Ara" to 140_000
)

Basamaklı bir alan

Değişene kadar yerinde duran bir değer: bir deponun stoku. StepAfter her değeri bir sonrakine kadar düz taşır ve dolgu basamakların altını doldurur.

PantrixAreaChart(
    data = STOCK,
    x = { it.first },
    values = listOf(ChartValue("stock", "Stok") { it.second }),
    curve = ChartCurve.StepAfter,
    fill = ChartFill.Solid,
    description = "Haftalara göre depodaki stok",
    tagKey = "stepped"
)

private val STOCK = listOf(
    "1. hafta" to 480,
    "2. hafta" to 480,
    "3. hafta" to 310,
    "4. hafta" to 310,
    "5. hafta" to 640,
    "6. hafta" to 520,
    "7. hafta" to 520,
    "8. hafta" to 270
)

Yığılı alanlar

Bir bütünün parçaları: üç kaynaktan gelen ziyaret, üst üste (stacked). Her alan altındakinin çizgisinden başlar ve en üstteki çizgi toplam ziyarettir. Dolgu düz bir ton: yığında hangi alanın nerede bittiği böyle okunur. Tooltip kaynakların ardından ayın toplamını yazar.

Anahtarı çevir: her ay yüzde yüz sayılır (stacking = ChartStacking.Percent). Alanlar artık kaynakların payıdır, eksen yüzde yazar; tooltip her değerin yanına payını ekler.

Lejanttaki bir ada bas: kaynak çıkar ve üstündekiler onun yerine iner.

var shares by remember { mutableStateOf(false) }
PantrixSwitchButton(
    checked = shares,
    onCheckedChange = { shares = it },
    label = "Paylar olarak",
    tagKey = "area_shares"
)
PantrixAreaChart(
    data = SOURCES,
    x = { it.month },
    values = listOf(
        ChartValue("search", "Arama") { it.search },
        ChartValue("direct", "Doğrudan") { it.direct },
        ChartValue("social", "Sosyal") { it.social }
    ),
    fill = ChartFill.Solid,
    stacked = true,
    stacking = if (shares) ChartStacking.Percent else ChartStacking.Normal,
    description = "Aylara göre üç kaynaktan gelen ziyaret, üst üste",
    tagKey = "stacked"
)

private data class Sources(
    val month: String,
    val search: Int,
    val direct: Int,
    val social: Int
)

private val SOURCES = listOf(
    Sources("Oca", search = 420, direct = 240, social = 130),
    Sources("Şub", search = 480, direct = 260, social = 120),
    Sources("Mar", search = 455, direct = 300, social = 165),
    Sources("Nis", search = 530, direct = 280, social = 190),
    Sources("May", search = 510, direct = 330, social = 240),
    Sources("Haz", search = 560, direct = 310, social = 285)
)

API

data

Bir kez verilen satırlardan bir alan grafiği: onlardan okunan values'ın her biri için bir çizgi, çizgiyle sıfırın arası doldurularak.

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.