Progress Circle

Bir iş yapıldıkça dolan bir halka: bir yüklemenin ne kadarının gittiği, bir kurulumun kaç adımının geride kaldığı, bir kotanın ne kadarının kullanıldığı. Bilinen bir bütünün payını gösterir; sonu bilinmeyen iş için spinner vardır.

import com.pantrixui.components.chart.progresscircle.PantrixProgressCircle

• Değer. Halka saat on ikiden başlar ve saat yönünde, value'nun max'e oranı kadar dolar; bütünü soluk bir halka gösterir. Sıfırın altındaki değer sıfır, max'i aşan değer bütündür.
• Ortası. content halkanın ortasında durur: pay bir sayı olarak, bir ikon.
• Renk. Halka color ile, verilmezse durduğu yerin içerik rengiyle (dolu bir kartın üstünde olduğu gibi), o da yoksa birincil renkle çizilir; izi aynı rengin soluk bir payıdır (trackColor başka söylemedikçe).
• Ölçüler. ProgressCircleStyle halkanın boyunu ve kalınlığını verir; modifier'daki bir boyut da halkanındır.
• Hareket. Değer değişince halka yeni değere gider; sistem azaltılmış hareket istiyorsa gitmez, orada olur.
• Yön. Halka sağdan sola okunan dilde de saat yönünde dolar.
• 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. ProgressCircle_<tagKey>.

Örnekler

Bir bütünün payı

En yalın hâli: yüzde yetmiş ikisi tamamlanmış bir iş. max verilmezse yüzdür.

PantrixProgressCircle(value = 72, contentDescription = "Yüklenen", tagKey = "plain")

Ortasında payıyla

Pay halkanın ortasına yazılı ve düğmelerle değişiyor: halka yeni değere gider. Ortadaki yazı ekran okuyucudan gizli (clearAndSetSemantics): payı halkanın kendisi söylüyor.

var done by remember { mutableStateOf(3) }
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixProgressCircle(
        value = done,
        max = 8,
        contentDescription = "Kurulum",
        style = ProgressCircleStyle(size = 72.dp, strokeWidth = 8.dp),
        tagKey = "share"
    ) {
        PantrixText(text = "$done/8", modifier = Modifier.clearAndSetSemantics { })
    }
    PantrixButton(
        text = "Geri",
        onClick = { done = (done - 1).coerceAtLeast(0) },
        variant = ButtonVariant.Outline,
        tagKey = "progress_back"
    )
    PantrixButton(text = "İleri", onClick = { done = (done + 1).coerceAtMost(8) }, tagKey = "progress_next")
}

Boyutlar

Üç boy, ProgressCircleStyle ile: bir satırın içinde küçük, bir kartta orta, bir özetin başında büyük. Halkanın kalınlığı da boyuyla birlikte verilir.

Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixProgressCircle(
        value = 40,
        contentDescription = "Küçük",
        style = ProgressCircleStyle(size = 32.dp, strokeWidth = 4.dp),
        tagKey = "small"
    )
    PantrixProgressCircle(value = 40, contentDescription = "Orta", tagKey = "medium")
    PantrixProgressCircle(
        value = 40,
        contentDescription = "Büyük",
        style = ProgressCircleStyle(size = 96.dp, strokeWidth = 10.dp),
        tagKey = "large"
    )
}

Renkler

Halkanın rengi neyi gösterdiğini söyleyebilir: az kalan kota uyarı renginde, dolan kota tehlike renginde. Dolu bir yüzeyin üstünde renk verilmeyen halka, yüzeyin içerik rengiyle çizilir.

val colors = PantrixTheme.colors
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalAlignment = Alignment.CenterVertically
) {
    PantrixProgressCircle(value = 35, color = colors.success.color, contentDescription = "Kota", tagKey = "ok")
    PantrixProgressCircle(value = 80, color = colors.warning.color, contentDescription = "Kota", tagKey = "warn")
    PantrixProgressCircle(value = 97, color = colors.danger.color, contentDescription = "Kota", tagKey = "full")
    PantrixSurface(color = colors.primary.color) {
        PantrixProgressCircle(
            value = 60,
            modifier = Modifier.padding(PantrixTheme.spacing.md),
            contentDescription = "Yüklenen",
            tagKey = "on_fill"
        )
    }
}

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 halka dolduğu kadarıyla çizilir; ortasına content ile konan dosyaya çıkmaz. export content'ten önce gelir: sondaki lambda yine ortadaki içeriktir.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixProgressCircle(
    value = 72,
    contentDescription = "Yüklenen",
    tagKey = "exported",
    export = ChartExport(fileName = "yuklenen") { file = it }
) {
    PantrixText(text = PantrixTheme.strings.percent(0.72), style = PantrixTheme.typography.caption)
}
ExportedFile(file, tagKey = "exported")

API

value

Bir iş yapıldıkça dolan bir halka: bir yüklemenin ne kadarının gittiği, bir kurulumun kaç adımının geride kaldığı, bir kotanın ne kadarının kullanıldığı. Bilinen bir bütünün payını gösterir; sonu bilinmeyen iş için spinner vardır.

ProgressCircleStyle

PantrixProgressCircle'ın geometrisi.

Erişilebilirlik

• Ekran okuyucu. Adı contentDescription olan ve ulaştığı payı söyleyen bir ilerleme çubuğudur. Ortasına yazılan sayı da okunur; payı zaten duyan ekran okuyucudan gizlenmesi iyidir.