Radar Chart

Bir radar grafiği: bir şeyin birkaç ölçüsü bir ortanın çevresindeki kollara dizilir ve bir ağ olarak birleştirilir; böylece biçimi bir bakışta okunur ve iki şey biçimleriyle ayrılır. İki kişinin becerileri, bir ürün ile rakibi, bu yıl ile geçen yıl.

import com.pantrixui.components.chart.radar.PantrixRadarChart

Ağ. Her seri bir ağdır: çizgisi, renginin bir payıyla dolgusu (filled; payı fillAlpha, verilmezse beşte bir) ve her değerinde bir işaret (marker). Çizgi kesikli ya da noktalı olabilir (dash): bir hedefi ölçülenden ayırmak için. Bütün dolgular bütün çizgilerin altında durur.
Halkalar. grid, değer halkalarının koldan kola düz mü (ağ gibi) yoksa yuvarlak mı çizileceğini söyler.
Eksenler. xAxis kollardır: adları yazılsın mı (labels), nasıl yazılsın (label), kollar çizilsin mi (line). yAxis değer eksenidir: uçları, işaretlenen değer sayısı, yazımı, değerler yazılsın mı (labels) ve halkalar çizilsin mi (grid). Değer ekseni, başka söylenmedikçe sıfırdan başlar.
Gösterilen kol. İmlecin en yakın olduğu ya da dokunulan kol gösterilir: kol belirginleşir, üstündeki değerler büyür ve tooltip serilerin oradaki değerlerini yazar. ChartTooltip(shared = false) ile tooltip yalnızca imlece en yakın serinin değerini yazar.
Yön. Grafik 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. RadarChart_<tagKey>; çizim alanı .Plot, kollar .Point_<sıra>, lejant kayıtları .Legend_<seri>, tooltip .Tooltip.

Örnekler

İki ağ

İki kişinin altı becerideki puanı, on üzerinden. İki ağın biçimi kimin nerede güçlü olduğunu gösterir.

İmleci bir kolun yakınına getir ya da dokun: tooltip iki kişinin o becerideki puanını yazar. Lejanttaki bir kayda basmak o kişiyi grafikten çıkarır.

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin })
    ),
    yAxis = ChartAxis(max = 10.0),
    description = "Ada ve Lin'in becerileri",
    tagKey = "plain"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Tasarım", ada = 8, lin = 5, target = 7),
    TeamSkill("Kod", ada = 6, lin = 9, target = 8),
    TeamSkill("Test", ada = 5, lin = 7, target = 7),
    TeamSkill("Yazı", ada = 9, lin = 4, target = 6),
    TeamSkill("Sunum", ada = 7, lin = 6, target = 8),
    TeamSkill("Planlama", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Hedefe karşı

Ölçülen ile hedef: ölçülen dolu bir ağ, hedef kesikli bir çizgi (filled = false, dash), işaretsiz. Halkalar burada yuvarlak (RadarGrid.Circle).

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("now", "Şimdi", skills, x = { it.name }, y = { it.ada }),
        RadarSeries(
            key = "target",
            name = "Hedef",
            data = skills,
            x = { it.name },
            y = { it.target },
            filled = false,
            marker = ChartMarker.None,
            dash = ChartDash.Dashed
        )
    ),
    yAxis = ChartAxis(max = 10.0),
    grid = RadarGrid.Circle,
    description = "Ada'nın becerileri, hedefle birlikte",
    tagKey = "target"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Tasarım", ada = 8, lin = 5, target = 7),
    TeamSkill("Kod", ada = 6, lin = 9, target = 8),
    TeamSkill("Test", ada = 5, lin = 7, target = 7),
    TeamSkill("Yazı", ada = 9, lin = 4, target = 6),
    TeamSkill("Sunum", ada = 7, lin = 6, target = 8),
    TeamSkill("Planlama", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Serileri ayrı göstermek

ChartTooltip(shared = false) ile tooltip kolun bütün serilerini değil, imlece en yakın olanı yazar. Klavyede yukarı ve aşağı oklar aynı koldaki serilerden birinden ötekine geçer.

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin }, marker = ChartMarker.Square)
    ),
    yAxis = ChartAxis(max = 10.0),
    tooltip = ChartTooltip(shared = false),
    description = "Ada ve Lin'in becerileri",
    tagKey = "apart"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Tasarım", ada = 8, lin = 5, target = 7),
    TeamSkill("Kod", ada = 6, lin = 9, target = 8),
    TeamSkill("Test", ada = 5, lin = 7, target = 7),
    TeamSkill("Yazı", ada = 9, lin = 4, target = 6),
    TeamSkill("Sunum", ada = 7, lin = 6, target = 8),
    TeamSkill("Planlama", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Dolgunun koyuluğu

Ada'nın ağı daha koyu doldurulmuş (fillAlpha = 0.5f), Lin'inki daha açık (0.08f): biri öne çıkar, öteki arkada kalır. Lin'in çizgisi yine Ada'nın dolgusunun üstünde.

val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }, fillAlpha = 0.5f),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin }, fillAlpha = 0.08f)
    ),
    yAxis = ChartAxis(max = 10.0),
    description = "Ada ve Lin'in becerileri",
    tagKey = "fills"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Tasarım", ada = 8, lin = 5, target = 7),
    TeamSkill("Kod", ada = 6, lin = 9, target = 8),
    TeamSkill("Test", ada = 5, lin = 7, target = 7),
    TeamSkill("Yazı", ada = 9, lin = 4, target = 6),
    TeamSkill("Sunum", ada = 7, lin = 6, target = 8),
    TeamSkill("Planlama", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

Bir değere basmak

onSelect, basılan değeri verir: bir kola bas ya da klavyeyle bir kola gidip Enter'a bas, kartın altındaki satır basılanı yazar.

val report = LocalExampleEvents.current
val skills = teamSkills()
PantrixRadarChart(
    series = listOf(RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada })),
    yAxis = ChartAxis(max = 10.0),
    onSelect = { point -> report("${point.label}: ${point.text}") },
    description = "Ada'nın becerileri",
    tagKey = "pressed"
)

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Tasarım", ada = 8, lin = 5, target = 7),
    TeamSkill("Kod", ada = 6, lin = 9, target = 8),
    TeamSkill("Test", ada = 5, lin = 7, target = 7),
    TeamSkill("Yazı", ada = 9, lin = 4, target = 6),
    TeamSkill("Sunum", ada = 7, lin = 6, target = 8),
    TeamSkill("Planlama", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

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 halkalar, adlar ve iki ağ durur; lejant altlarındadır.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
val skills = teamSkills()
PantrixRadarChart(
    series = listOf(
        RadarSeries("ada", "Ada", skills, x = { it.name }, y = { it.ada }),
        RadarSeries("lin", "Lin", skills, x = { it.name }, y = { it.lin })
    ),
    yAxis = ChartAxis(max = 10.0),
    description = "Ada ve Lin'in becerileri",
    tagKey = "exported",
    export = ChartExport(fileName = "beceriler") { file = it }
)
ExportedFile(file, tagKey = "exported")

internal fun teamSkills(): List<TeamSkill> = listOf(
    TeamSkill("Tasarım", ada = 8, lin = 5, target = 7),
    TeamSkill("Kod", ada = 6, lin = 9, target = 8),
    TeamSkill("Test", ada = 5, lin = 7, target = 7),
    TeamSkill("Yazı", ada = 9, lin = 4, target = 6),
    TeamSkill("Sunum", ada = 7, lin = 6, target = 8),
    TeamSkill("Planlama", ada = 4, lin = 8, target = 7)
)

internal class TeamSkill(
    val name: String,
    val ada: Int,
    val lin: Int,
    val target: Int
)

API

series

Parametre	Tür	Varsayılan	Ne olduğu
`series`	`List<RadarSeries<*>>`		seriler, çizildikleri ve listelendikleri sırayla: sonraki, öncekinin üstüne çizilir. Anahtarları onları birbirinden ayırır; aynı anahtarlı iki seri reddedilir.
`modifier`	`Modifier`	`Modifier`	grafiğin modifier'ı. Buradaki bir yükseklik grafiğindir, lejantınki de içinde.
`xAxis`	`ChartAxis?`	`ChartAxis()`	kollar: adlarının grafiğin çevresine yazılıp yazılmadığı (`labels`), bir adın nasıl yazıldığı (`label`) ve kolların çizilip çizilmediği (`line`). `null` onlardan hiçbir şey çizmez.
`yAxis`	`ChartAxis?`	`ChartAxis()`	değerlerin ekseni, grafiğin ortasından dışarı: uçları, yaklaşık kaç değer işaretlediği, bir değerin nasıl yazıldığı, işaretli değerlerin yazılıp yazılmadığı (`labels`) ve her birinde bir halka çizilip çizilmediği (`grid`). `startFromZero` ya da `min` başka söylemedikçe sıfırdan başlar. `null` ondan hiçbir şey çizmez.
`grid`	`RadarGrid`	`RadarGrid.Polygon`	bir halkanın koldan kola düz mü, bir ağ gibi, yoksa yuvarlak mı gittiği.
`legend`	`ChartLegend?`	`ChartLegend()`	serilerin adlarının durduğu yer. `null` hiç göstermez.
`tooltip`	`ChartTooltip?`	`ChartTooltip()`	gösterilen kol için gösterilen. `null` hiç göstermez.
`empty`	`(@Composable () -> Unit)?`	`null`	grafiğin çizecek değeri yokken gösterdiği şey: temanın bunun için yazdığı sözün ("Veri yok") yerine; o zaman ekran okuyucuya da o söz söylenmez. `null` sözü yazar.
`state`	`ChartState`	`rememberChartState()`	okuyucunun gizledikleri ve gösterdiği yer: verilmezse grafiğin kendisininki.
`description`	`String?`	`null`	grafiğin ne gösterdiği, birkaç sözcükle, ekran okuyucu için: grafik hakkında söylediği ilk şey. Verilmezse grafik serilerinin adlarıyla duyurulur.
`onSelect`	`((ChartPoint) -> Unit)?`	`null`	basılan değerle çağrılır: gösterilen değer, ya da kolun değerleri birlikte gösteriliyorsa basışa en yakın serinin değeri.
`style`	`ChartStyle?`	`null`	bu grafiğin kendi geometrisi: burada verilen alanlar, gerisi için temanınkiler.
`colors`	`ChartColors?`	`null`	bu grafiğin kendi renkleri, temanınkiler olmadıkları yerde.
`tagKey`	`String?`	`null`	grafiğin otomasyon anahtarı: grafik `RadarChart_<tagKey>`, çizim alanı `RadarChart_<tagKey>.Plot`, bir kolu birden sayılarak `RadarChart_<tagKey>.Point_<number>`, bir serinin lejant kaydı `RadarChart_<tagKey>.Legend_<series' key>` ve tooltip `RadarChart_<tagKey>.Tooltip` olur. Bir değere basış, serinin anahtarıyla bir `RadarChart` `select` olayı olarak, bir lejant kaydına basış da anahtarla ve serinin gösterilip gösterilmediğiyle bir `toggle` olayı olarak bildirilir. Değerlerden hiçbir şey bildirilmez.
`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.

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

ChartColors

Temanın renklerini almayan bir grafik için, onun neyle boyandığı: verilen renk kullanılır, verilmeyen temanınki kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`series`	`List<Color>`	`emptyList()`	Serilerin çizildiği renkler, dağıtıldıkları sırayla, kendi rengini söylemeyen seriler için. Boşsa temanın grafik renkleridir.
`grid`	`Color`	`Color.Unspecified`	Bir eksenin işaretlerinde grafik boyunca çizilen çizgiler. Temanın `divider`'ı.
`axis`	`Color`	`Color.Unspecified`	Bir eksen boyunca çizilen çizgi. Temanın `border`'ı.
`label`	`Color`	`Color.Unspecified`	Eksenlerin yanına yazılanlar: değerler, yerler ve eksenlerin başlıkları, bir de lejanttaki adlar. Temanın `textSecondary`'si.
`crosshair`	`Color`	`Color.Unspecified`	Gösterilen yeri işaretleyen çizgi. Temanın `borderHover`'ı: içinden geçtiği kılavuz çizgilerinden güçlü, arkasında durduğu serilerden sessiz.
`tooltipContainer`	`Color`	`Color.Unspecified`	Tooltip'in dolgusu. Temanın `surface`'i.
`tooltipBorder`	`Color`	`Color.Unspecified`	Tooltip'in kenarı. Temanın `border`'ı.
`tooltipText`	`Color`	`Color.Unspecified`	Tooltip'in başlığı ve değerleri. Temanın `textPrimary`'si.
`tooltipLabel`	`Color`	`Color.Unspecified`	Tooltip'teki seri adları. Temanın `textSecondary`'si.
`rising`	`Color`	`Color.Unspecified`	Yukarı giden bir değerin çizildiği renk: bir şelalenin ekleyen adımı. Temanın `success`'i.
`falling`	`Color`	`Color.Unspecified`	Aşağı giden bir değerin çizildiği renk: bir şelalenin götüren adımı. Temanın `danger`'ı.

Erişilebilirlik

Klavye. Grafik, Tab için tek duraktır: oklar koldan kola grafiğin çevresinde döner, sondan sonra başa gelir; Home ve End ilk ve son kola gider, Escape bırakır, Enter ve boşluk gösterilen değere basar.
Ekran okuyucu. Grafik description'ını, ardından her kolu serilerin oradaki değerleriyle söyler.