Sparkline

Bir sparkline: bir sayının gidişi, bir sözcüğün yerinde; ait olduğu sayının yanında. Ekseni, lejantı ve gösterilecek bir şeyi yoktur: sayının ne yöne gittiğini gösterir, gerisini bir grafik gösterir.

import com.pantrixui.components.chart.sparkline.PantrixSparkline

Değerler. Değerler satırın başından sonuna eşit adımlarla dizilir. Çizgi ve alan, değerlerin en azı ile en çoğu arasında çizilir: gidiş, sahip olduğu yüksekliği doldurur. Çubuklar sıfırdan çizilir.
Uçlar. min yüksekliğin dibindeki, max tepesindeki değerdir: birkaç gidiş aynı ölçekte okunur. Uçların dışında kalan değer kutunun kenarında kesilir. Verilmeyen uç değerlerden ve referans çizgisinden gelir.
Eğri. curve çizginin ve alanın bir değerden ötekine nasıl gittiğini söyler (ChartCurve): düz, değerlerin dışına taşmadan yuvarlak ya da basamaklı. Çubukların eğrisi yoktur.
Son değer. markLast = true son değeri işaretler: çizgide ve alanda bir nokta, çubuklarda son çubuk tam renkte, ötekiler daha soluk. Son değer, sayı olan son değerdir.
Referans çizgisi. reference değerlerin arkasına, grafiklerin yazı renginde kesikli bir çizgi çizer: bir hedef ya da gidişin başladığı yer.
Stil. style temanın ölçülerinin üstüne konur: çizginin kalınlığı (lineWidth), çubukların arası (barGap), son değerin noktası (markerSize), referans çizgisinin kalınlığı (markLineWidth).
Tür. SparklineKind.Line bir çizgi, Area altı soluk dolu bir çizgi, Bar her değer için bir çubuktur.
Eksik değer. null olan ya da sayı olmayan değer çizgide bir boşluk, çubuklarda boş bir yerdir.
Boyut ve renk. Modifier başka söylemedikçe 96dp genişliğinde ve 32dp yüksekliğindedir; color ile, verilmezse temanın ilk grafik rengiyle çizilir.
Yön. Sağdan sola okunan dilde ilk değer sağda durur.
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. Sparkline_<tagKey>.

Örnekler

Bir sayının yanında

En yalın hâli: bir sayının yanında, o sayının son on iki haftadaki gidişi. Sayı ve adı yanında yazdığı için gidişin ekran okuyucuya ayrıca söyleyeceği bir şey yok (contentDescription = null).

val strings = PantrixTheme.strings
Row(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalAlignment = Alignment.CenterVertically
) {
    Column {
        PantrixText(text = "Ziyaret", color = PantrixTheme.colors.textSecondary)
        PantrixText(text = strings.decimal(SPARK_VISITS.last()), style = PantrixTheme.typography.title)
    }
    PantrixSparkline(values = SPARK_VISITS, tagKey = "plain")
}

private val SPARK_VISITS = listOf(8200, 8650, 8400, 9100, 9800, 9300, 10400, 10100, 11200, 11800, 11500, 12480)

Çizgi, alan, çubuk

Aynı değerler üç türde: çizgi, altı dolu çizgi ve çubuklar. Çubuklar sıfırdan başlar; çizgi en az değerden.

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)) {
    PantrixSparkline(values = SPARK_VISITS, contentDescription = "Ziyaretler, çizgi", tagKey = "line")
    PantrixSparkline(
        values = SPARK_VISITS,
        kind = SparklineKind.Area,
        contentDescription = "Ziyaretler, alan",
        tagKey = "area"
    )
    PantrixSparkline(
        values = SPARK_VISITS,
        kind = SparklineKind.Bar,
        contentDescription = "Ziyaretler, çubuk",
        tagKey = "bar"
    )
}

private val SPARK_VISITS = listOf(8200, 8650, 8400, 9100, 9800, 9300, 10400, 10100, 11200, 11800, 11500, 12480)

Eksik değerler ve sıfırın altı

Ölçüm gelmeyen haftalar (null) çizgide bir boşluktur; öncesi ve sonrası olmayan tek değer bir noktadır. Sıfırın altına inen değerlerin çubukları sıfırdan aşağı iner.

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)) {
    PantrixSparkline(values = SPARK_GAPS, contentDescription = "Eksik haftalarıyla ölçüm", tagKey = "gaps")
    PantrixSparkline(
        values = SPARK_BALANCE,
        kind = SparklineKind.Bar,
        contentDescription = "Aylık kâr ve zarar",
        tagKey = "balance"
    )
}

private val SPARK_GAPS = listOf(12, 15, 14, null, null, 18, 21, 19, null, 24)

private val SPARK_BALANCE = listOf(64, 31, -12, -38, 22, 47, 58, 87)

Kendi boyutun ve rengin

Boyutu modifier verir, rengi color: yükselen bir gidiş başarı renginde, düşen bir gidiş tehlike renginde, daha geniş bir yerde.

val colors = PantrixTheme.colors
Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)) {
    PantrixSparkline(
        values = SPARK_VISITS,
        modifier = Modifier.size(160.dp, 48.dp),
        kind = SparklineKind.Area,
        color = colors.success.color,
        contentDescription = "Yükselen ziyaretler",
        tagKey = "up"
    )
    PantrixSparkline(
        values = SPARK_VISITS.reversed(),
        modifier = Modifier.size(160.dp, 48.dp),
        kind = SparklineKind.Area,
        color = colors.danger.color,
        contentDescription = "Düşen ziyaretler",
        tagKey = "down"
    )
}

private val SPARK_VISITS = listOf(8200, 8650, 8400, 9100, 9800, 9300, 10400, 10100, 11200, 11800, 11500, 12480)

Eğri, son değer ve hedef

curve çizginin bir değerden ötekine nasıl gittiğini söyler: Smooth değerlerin dışına taşmadan yuvarlar, StepAfter her değeri bir sonrakine kadar tutar. markLast = true son değeri bir noktayla işaretler; çubuklarda son çubuk tam renkte, ötekiler daha soluk çizilir. reference arkaya kesikli bir çizgi çizer: burada sıcaklıkta 20 derece, siparişte günlük hedef.

Row(horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg)) {
    PantrixSparkline(
        values = SPARK_TEMPERATURE,
        contentDescription = "Bugünün sıcaklığı",
        tagKey = "smooth",
        curve = ChartCurve.Smooth,
        markLast = true,
        reference = 20
    )
    PantrixSparkline(
        values = SPARK_TEMPERATURE,
        contentDescription = "Bugünün sıcaklığı, basamaklı",
        tagKey = "steps",
        curve = ChartCurve.StepAfter,
        markLast = true
    )
    PantrixSparkline(
        values = SPARK_ORDERS,
        kind = SparklineKind.Bar,
        contentDescription = "Bu haftanın siparişleri",
        tagKey = "orders",
        markLast = true,
        reference = 40
    )
}

private val SPARK_TEMPERATURE = listOf(12.5, 11.8, 13.2, 16.4, 19.8, 22.6, 24.1, 23.4, 21.0, 18.2, 16.9, 15.7)

private val SPARK_ORDERS = listOf(32, 45, 38, 51, 29, 47, 43)

Ortak ölçek ve kendi stili

min ve max yüksekliğin uçlarını verir: iki sunucunun işlemci kullanımı aynı ölçekte, sıfırdan yüze. Biri az çalışıyor, öteki dolu; uçlar verilmeseydi ikisi de kendi en az ve en çok değeri arasında, aynı yükseklikte görünürdü. Kesikli çizgi ikisinde de yüzde seksendeki uyarı eşiği (reference). style çizgiyi kalınlaştırır, son değerin noktasını büyütür.

val style = ChartStyle(lineWidth = 3.dp, markerSize = 10.dp)
val servers = listOf(Triple("Sunucu A", SPARK_QUIET, "quiet"), Triple("Sunucu B", SPARK_BUSY, "busy"))
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    servers.forEach { (name, load, key) ->
        Row(
            horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md),
            verticalAlignment = Alignment.CenterVertically
        ) {
            PantrixText(text = name, modifier = Modifier.width(80.dp))
            PantrixSparkline(
                values = load,
                modifier = Modifier.size(160.dp, 40.dp),
                contentDescription = "$name, işlemci kullanımı",
                tagKey = key,
                style = style,
                markLast = true,
                reference = 80,
                min = 0,
                max = 100
            )
            PantrixText(text = PantrixTheme.strings.percent(load.last() / 100.0))
        }
    }
}

private val SPARK_QUIET = listOf(12, 18, 15, 22, 19, 14, 25, 21, 17, 23)

private val SPARK_BUSY = listOf(71, 78, 84, 80, 92, 88, 95, 99, 90, 86)

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.

Küçük bir çizgi de dışa aktarılır: düğme çizginin üstünde durur, dosya yalnızca çizgidir.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixSparkline(
    values = SPARK_VISITS,
    contentDescription = "Son on iki günün ziyareti",
    tagKey = "exported",
    export = ChartExport(fileName = "ziyaret") { file = it }
)
ExportedFile(file, tagKey = "exported")

private val SPARK_VISITS = listOf(8200, 8650, 8400, 9100, 9800, 9300, 10400, 10100, 11200, 11800, 11500, 12480)

API

values

Parametre	Tür	Varsayılan	Ne olduğu
`values`	`List<Number?>`		değerler, okundukları sırayla.
`modifier`	`Modifier`	`Modifier`	sparkline'ın modifier'ı. Buradaki bir boyut sparkline'ındır.
`kind`	`SparklineKind`	`SparklineKind.Line`	değerlerin bir çizgi mi, bir alan mı, çubuklar mı olduğu.
`color`	`Color`	`Color.Unspecified`	çizildiği renk.
`contentDescription`	`String?`	`null`	gidişin neyin gidişi olduğu, birkaç sözcükle, ekran okuyucu için. `null` onu ekran okuyucunun okuduklarının dışında bırakır.
`tagKey`	`String?`	`null`	sparkline'ın otomasyon anahtarı: sparkline `Sparkline_<tagKey>` olur.
`export`	`ChartExport?`	`null`	grafiği uygulamanın dışına PNG, SVG ya da PDF olarak çıkarmayı sağlayan şey: grafiğin üstündeki bir düğme onun o anki hâlinin dosyasını üretip verir (bkz. `ChartExport`). `null`, grafikte böyle bir düğme yoktur.
`style`	`ChartStyle?`	`null`	temanınkilerin üstüne konan, çizildiği ölçüler: çizginin kalınlığı (`lineWidth`), iki çubuğun arası (`barGap`), son değerin işareti (`markerSize`) ve referans çizgisinin kalınlığı (`markLineWidth`).
`curve`	`ChartCurve`	`ChartCurve.Linear`	çizginin ya da alanın bir değerden ötekine nasıl gittiği. Çubukların eğrisi yoktur.
`markLast`	`Boolean`	`false`	son değerin işaretlenip işaretlenmediği: çizgide ya da alanda stilin `markerSize`'ı büyüklüğünde bir nokta, çubuklarda son çubuk `color` ile, ötekiler onun daha soluk bir payıyla. Son değer, sayı olan son değerdir.
`reference`	`Number?`	`null`	sparkline'ın boyunca, değerlerinin arkasına, grafiklerin yazı renginde kesikli bir çizginin çizildiği değer: bir hedef ya da gidişin başladığı yer. `null` hiçbirini çizmez.
`min`	`Number?`	`null`	sparkline'ın dibindeki değer, ya da değerlerinin en azı için `null`. Bir sayıdır ve `max`'tan küçüktür.
`max`	`Number?`	`null`	tepesindeki değer, ya da değerlerinin en çoğu için `null`.

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ığı.

Parametre	Tür	Varsayılan	Ne olduğu
`height`	`Dp`	`Dp.Unspecified`	Grafiğin modifier'ı ona bir yükseklik vermediğinde çizim alanının, eksenleriyle birlikte, ne kadar yüksek olduğu. Çizim alanının üstündeki ya da altındaki bir lejant kendi yüksekliğini ekler.
`lineWidth`	`Dp`	`Dp.Unspecified`	Bir serinin çizgisinin kalınlığı.
`markerSize`	`Dp`	`Dp.Unspecified`	Bir noktadaki işaretin genişliği ve yüksekliği.
`selectedMarkerSize`	`Dp`	`Dp.Unspecified`	Aynısı, gösterilen noktadaki işaret için.
`gridWidth`	`Dp`	`Dp.Unspecified`	Kılavuz çizgilerinin, eksenler boyunca çizilen çizgilerin ve gösterilen yeri işaretleyen çizginin kalınlığı. Sıfır hiçbirini çizmez.
`labelGap`	`Dp`	`Dp.Unspecified`	Çizim alanıyla yanına ve altına yazılanın arası, ve onunla bir eksenin başlığının arası.
`tickSpacing`	`Dp`	`Dp.Unspecified`	Değerlerin ekseni boyunca işaretlenen iki değerin arasındaki en az boşluk: eksen söylemediğinde kaç tanesinin işaretleneceğine karar veren şey.
`legendGap`	`Dp`	`Dp.Unspecified`	Lejantla yanında durduğu grafiğin arası.
`legendItemGap`	`Dp`	`Dp.Unspecified`	Lejantın bir kaydıyla sonrakinin arası.
`swatchSize`	`Dp`	`Dp.Unspecified`	Bir serinin lejanttaki ve tooltip'teki örneğinin ne kadar geniş olduğu: çizgisinin kısa bir parçası ya da dolgusunun bir yaması.
`swatchGap`	`Dp`	`Dp.Unspecified`	O örnekle ardındaki adın arası.
`tooltipShape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Tooltip'in köşeleri: markanın şekil ölçeğinin bir basamağı ya da sabit bir şekil.
`tooltipHorizontalPadding`	`Dp`	`Dp.Unspecified`	Tooltip'in yanlarıyla içindekinin arası.
`tooltipVerticalPadding`	`Dp`	`Dp.Unspecified`	Üstü ve altıyla içindekinin arası, ve başlığıyla satırlarının arası.
`tooltipGap`	`Dp`	`Dp.Unspecified`	Gösterilen yerle yanındaki tooltip'in arası.
`tooltipElevation`	`Dp`	`Dp.Unspecified`	Tooltip'in gölgesi.
`barGap`	`Dp`	`Dp.Unspecified`	Bir yerde yan yana duran iki çubuğun arası. Bunun için fazla ince olan çubuklar daha yakın durur.
`barMaxWidth`	`Dp`	`Dp.Unspecified`	Bir çubuğun en fazla ne kadar geniş olduğu, yerinin ne kadar yeri olursa olsun: üç yerli bir grafik üç kalas değildir.
`barRadius`	`Dp`	`Dp.Unspecified`	Bir çubuğun ucunun, sıfırdan uzak ucunun, köşelerinin ne kadar yuvarlak olduğu.
`sliceGap`	`Dp`	`Dp.Unspecified`	Bir pastanın yan yana duran iki dilimi arasında; pastanın ortasından kenarına kadar aynı genişlikte.
`selectedSliceOffset`	`Dp`	`Dp.Unspecified`	Bir pastanın gösterilen diliminin, pastanın kenarından ne kadar dışarı taştığı. Pasta çevresinde bu kadar yer bırakır: dilimin duracağı yer olsun.
`gaugeWidth`	`Dp`	`Dp.Unspecified`	Bir göstergenin yayının kalınlığı. Bir yay, yarıçapının yarısından kalın olmaz.
`meterHeight`	`Dp`	`Dp.Unspecified`	Bir ölçüm grubunun çubuğunun yüksekliği.
`trackerHeight`	`Dp`	`Dp.Unspecified`	Bir durum izleyicinin bloklarının yüksekliği.
`bubbleMinSize`	`Dp`	`Dp.Unspecified`	Bir saçılım grafiğinin en küçük balonunun genişliği: büyüklüğü hiç olmayan ya da bir alan olarak görülemeyecek kadar az olan nokta da bir noktadır.
`bubbleMaxSize`	`Dp`	`Dp.Unspecified`	En büyük balonunun genişliği: büyüklüğü grafiğin en büyüğü olanın.
`navigatorHeight`	`Dp`	`Dp.Unspecified`	Zoom'unda gezgin şeridi olan bir grafikte, çizim alanının altındaki şeridin yüksekliği: grafiğin görünen kısmı onun üstünde işaretlenir ve kaydırılır. Yerleri yanından aşağı dizilen grafikte şerit çizim alanının yanında durur ve bu onun genişliğidir.
`barBandShare`	`Float`	`Float.NaN`	Bir yerin çubuklarının bandından aldığı pay, sıfırdan çok ve en fazla bir: kalanı bir yerin çubuklarıyla sonrakininkiler arasındaki boşluktur. Çubuklar yine de `barMaxWidth`'ten geniş olmaz.
`markLineWidth`	`Dp`	`Dp.Unspecified`	Bir işaretin çizgisinin kalınlığı: bir hedefin, bir sınırın, bir günün. Sıfır çizgi çizmez; işaretin yazısı yine yazılır.
`markBandAlpha`	`Float`	`Float.NaN`	Bir işaretin bandının renginin ne kadarıyla çizildiği, sıfırdan bire: bant serilerin arkasında durur ve bir tondur.
`patterns`	`Boolean?`	`null`	Bir grafiğin serilerinin, dilimlerinin ve karolarının dolgularının renklerinin yanında desenlerle, çizgilerinin de sırayla kesik çizilip çizilmediği (`ChartPattern`): renkleri ayırt edemeyen bir okuyucu için onları ayıran şey. Verilmezse sistemin ayarına uyulur: sistem şeyleri renksiz ayırt etmeye ayarlıysa açık (iOS'ta "Differentiate Without Color", Android'de renk düzeltme), değilse kapalı.
`nodeWidth`	`Dp`	`Dp.Unspecified`	Bir sankey düğümünün ne kadar geniş olduğu.
`nodeGap`	`Dp`	`Dp.Unspecified`	Bir sankey kolonunun iki düğümü arası.

Erişilebilirlik

Ekran okuyucu. contentDescription verilirse o adla bir resimdir; verilmezse hiç okunmaz: aynı şeyi söyleyen bir sayının yanındaki gidiş için uygun olan budur.