Gauge

Bir gösterge: bir ölçekte tek bir değer, bir yayın ne kadarını dolandığıyla. Bir hız, bir yük, bir kotanın payı: olabileceği en aza ve en çoğa göre okunan bir değer.

import com.pantrixui.components.chart.gauge.PantrixGauge

• Ölçek. min ve max ölçeğin uçlarıdır. Ucu aşan değer o uçta durur ve olduğu gibi yazılır. Değeri olmayan gösterge (null) yalnızca ölçeğini gösterir.
• Aralıklar. segments, ölçeğin parçalarına bir renk ve bir ad verir: iyi olan aralık, fazla olan aralık. Her GaugeSegment nerede bittiğini söyler (upTo); ilki ölçeğin başından başlar, ötekiler bir öncekinin bittiği yerden. Yay, değerin ulaştığı aralığın rengiyle dolar; aralıkların kendisi soluk renkleriyle altında durur.
• İbre. needle ile ortadan değere bir ibre uzanır ve değer ibrenin altına yazılır. Hem ibresi hem aralıkları olan göstergede aralıklar tam renkleriyle çizilir ve yay dolmaz: ibre onlara göre okunur.
• Yazım. format değerin ve ölçeğin iki ucunun nasıl yazılacağını söyler; verilmezse temanın diliyle sayı olarak yazılırlar. center değerin yazısının yerine kendi içeriğini koyar.
• Boyut ve hareket. Gösterge verilen yer kadar geniş, grafik stilinin söylediği kadar yüksektir; yay bu yere sığan en büyük yaydır. Değer değişince yay ve ibre yeni değere gider; sistem azaltılmış hareket istiyorsa gitmez, orada olur.
• Yön. Ölçek sağdan sola okunan dilde de aynı yöne döner.
• 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. Gauge_<tagKey>.

Örnekler

Bir ölçekte bir değer

En yalın hâli: bir değer ve ölçeğin sonu. Elli gigabaytlık bir depolamanın otuz ikisi dolu; format değeri ve ölçeğin iki ucunu birimiyle yazar.

PantrixGauge(
    value = 32,
    max = 50,
    format = { "${it.toInt()} GB" },
    description = "Kullanılan depolama",
    tagKey = "plain"
)

Aralıklar

Ölçeğin üç aralığı var: altmışa kadar olağan, seksen beşe kadar yüksek, ondan sonra kritik. Yay, değerin ulaştığı aralığın rengiyle dolar; aralıklar soluk renkleriyle altında görünür.

Bir değer seç: yay oraya gider ve rengi ulaştığı aralığa göre değişir. Ekran okuyucu değerden sonra aralığın adını da söyler: "%72, Yüksek". Değeri format temanın diliyle yazıyor (PantrixTheme.strings.percent).

Aralıklar burada renklerini kendileri söylüyor: temanın başarı, uyarı ve tehlike renkleri. Rengi verilmeyen aralık temanın sıradaki grafik rengini alır; o renkler bir anlam taşımaz.

var load by remember { mutableStateOf(72) }
val strings = PantrixTheme.strings
PantrixSegmentButton(
    options = loadReadings(),
    selected = load,
    onSelect = { load = it },
    fullWidth = false,
    tagKey = "gauge_load"
)
PantrixGauge(
    value = load,
    segments = loadRanges(),
    format = { strings.percent(it / 100) },
    description = "İşlemci yükü",
    tagKey = "segments"
)

@Composable
private fun loadRanges(): List<GaugeSegment> {
    val colors = PantrixTheme.colors
    return listOf(
        GaugeSegment(upTo = 60, color = colors.success.color, name = "Olağan"),
        GaugeSegment(upTo = 85, color = colors.warning.color, name = "Yüksek"),
        GaugeSegment(upTo = 100, color = colors.danger.color, name = "Kritik")
    )
}

@Composable
private fun loadReadings(): List<SegmentOption<Int>> {
    val strings = PantrixTheme.strings
    return listOf(40 to "low", 72 to "high", 93 to "critical").map { (load, key) ->
        SegmentOption(value = load, label = strings.percent(load / 100.0), tagKey = key)
    }
}

İbre

İbreli gösterge: ortadan değere bir ibre uzanır, değer ibrenin altına yazılır. Aralıklar tam renkleriyle çizilir ve yay dolmaz: ibre onlara göre okunur.

var load by remember { mutableStateOf(40) }
val strings = PantrixTheme.strings
PantrixSegmentButton(
    options = loadReadings(),
    selected = load,
    onSelect = { load = it },
    fullWidth = false,
    tagKey = "gauge_needle_load"
)
PantrixGauge(
    value = load,
    segments = loadRanges(),
    needle = true,
    format = { strings.percent(it / 100) },
    description = "İşlemci yükü",
    tagKey = "needle"
)

@Composable
private fun loadRanges(): List<GaugeSegment> {
    val colors = PantrixTheme.colors
    return listOf(
        GaugeSegment(upTo = 60, color = colors.success.color, name = "Olağan"),
        GaugeSegment(upTo = 85, color = colors.warning.color, name = "Yüksek"),
        GaugeSegment(upTo = 100, color = colors.danger.color, name = "Kritik")
    )
}

@Composable
private fun loadReadings(): List<SegmentOption<Int>> {
    val strings = PantrixTheme.strings
    return listOf(40 to "low", 72 to "high", 93 to "critical").map { (load, key) ->
        SegmentOption(value = load, label = strings.percent(load / 100.0), tagKey = key)
    }
}

Sıfırdan başlamayan ölçek

Aralıksız, ibreli bir gösterge: yay değere kadar dolar ve ibre de değeri gösterir. Ölçek sıfırdan başlamak zorunda değildir: bu termometre eksi yirmiden kırka gider.

val strings = PantrixTheme.strings
PantrixGauge(
    value = 7.5,
    min = -20,
    max = 40,
    needle = true,
    format = { "${strings.decimal(it, fractionDigits = 1)}°" },
    description = "Dış sıcaklık",
    tagKey = "below_zero"
)

Ortada kendi içeriğin

center, değerin yazısının yerine kendi içeriğini koyar: burada değerin altında birimi. İçerik, yayın ortasında bıraktığı yere sığar.

Ekran okuyucu değeri göstergenin kendisinden duyar (description ve format); ortadaki yazılar gözün içindir.

PantrixGauge(
    value = 86,
    max = 120,
    format = { "${it.toInt()} km/sa" },
    center = {
        Column(horizontalAlignment = Alignment.CenterHorizontally) {
            PantrixText(text = "86", style = PantrixTheme.typography.headline)
            PantrixText(text = "km/sa", color = PantrixTheme.colors.textSecondary)
        }
    },
    description = "Hız",
    tagKey = "own_center"
)

Kendi ölçülerin

Bir göstergenin kendi ölçüleri: yay daha ince (gaugeWidth) ve gösterge daha alçak (height). Aralıkların arası kapalı (sliceGap). Verilmeyen alan temanınki kalır.

val strings = PantrixTheme.strings
PantrixGauge(
    value = 54,
    segments = loadRanges(),
    format = { strings.percent(it / 100) },
    description = "İşlemci yükü",
    style = ChartStyle(gaugeWidth = 8.dp, height = 160.dp, sliceGap = 0.dp),
    tagKey = "own_look"
)

@Composable
private fun loadRanges(): List<GaugeSegment> {
    val colors = PantrixTheme.colors
    return listOf(
        GaugeSegment(upTo = 60, color = colors.success.color, name = "Olağan"),
        GaugeSegment(upTo = 85, color = colors.warning.color, name = "Yüksek"),
        GaugeSegment(upTo = 100, color = colors.danger.color, name = "Kritik")
    )
}

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.

Ortadaki değer dosyada da yazılıdır; ortaya center ile konan bir içerik ise dosyaya çıkmaz.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixGauge(
    value = 32,
    max = 50,
    format = { "${it.toInt()} GB" },
    description = "Kullanılan depolama",
    tagKey = "exported",
    export = ChartExport(fileName = "depolama") { file = it }
)
ExportedFile(file, tagKey = "exported")

API

value

Bir gösterge: bir ölçekte tek bir değer, bir yayın ne kadarını dolandığıyla. Bir hız, bir yük, bir kotanın payı: olabileceği en aza ve en çoğa göre okunan bir değer.

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. Gösterge tek bir şeydir: description'ı, ardından yazıldığı gibi değer ve, adı varsa, içinde olduğu aralığın adı.