Pantrix UI

Sankey Chart

Bir sankey grafiği: neyin nereden nereye, ne kadar aktığı. Düğümler kolonlarda durur; aralarında, akan miktar kadar geniş bantlar olarak akışlar uzanır: bir sitenin ziyaretçilerinin nereden gelip neye devam ettiği, bir bütçenin neyden oluşup neye harcandığı, bir santralin enerjisinin nereye vardığı.

import com.pantrixui.components.chart.sankey.PantrixSankeyChart

Örnekler

Ziyaretçiler nereden gelip nereye gidiyor

Üç kolon: ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son. Kolonları grafik bağlantılardan kendi çıkarır; bir kolonun düğümlerini de akışları kesişmesin diye kendi sıralar.

İmleci bir düğümün üstüne getir ya da düğüme dokun: düğümün akışları belirginleşir ve tooltip her birini öbür ucundaki düğümle birlikte yazar. Bir akışın üstünde yalnızca o akış belirginleşir ve tooltip onu iki düğümüyle yazar.

PantrixSankeyChart(
    nodes = VISITOR_NODES,
    links = VISITOR_LINKS,
    modifier = Modifier.height(280.dp),
    description = "Ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son",
    tagKey = "plain"
)

private val VISITOR_NODES = listOf(
    SankeyNode("search", "Arama"),
    SankeyNode("social", "Sosyal"),
    SankeyNode("direct", "Doğrudan"),
    SankeyNode("signup", "Üye oldu"),
    SankeyNode("browse", "Gezindi"),
    SankeyNode("paid", "Ödedi"),
    SankeyNode("free", "Ücretsiz kaldı"),
    SankeyNode("left", "Ayrıldı")
)

private val VISITOR_LINKS = listOf(
    SankeyLink("search", "signup", 300),
    SankeyLink("search", "browse", 200),
    SankeyLink("social", "signup", 100),
    SankeyLink("social", "browse", 200),
    SankeyLink("direct", "signup", 120),
    SankeyLink("direct", "browse", 80),
    SankeyLink("signup", "paid", 220),
    SankeyLink("signup", "free", 300),
    SankeyLink("browse", "free", 180),
    SankeyLink("browse", "left", 300)
)

Gelir ve harcama

İki kolon: bir ayın gelirleri ve harcandıkları yerler. Tooltip'in değerleri kısa yazılıyor (ChartTooltip'in format'ı). Anahtarı çevir: düğümlerin adları kalkar (names = false) ve adlar yalnızca tooltip'te durur.

var named by remember { mutableStateOf(true) }
val strings = PantrixTheme.strings
PantrixSwitchButton(
    checked = named,
    onCheckedChange = { named = it },
    label = "Düğüm adları",
    tagKey = "sankey_names"
)
PantrixSankeyChart(
    nodes = BUDGET_NODES,
    links = BUDGET_LINKS,
    names = named,
    tooltip = ChartTooltip(format = { strings.compact(it) + " TL" }),
    description = "Bir ayın gelirleri ve harcandıkları yerler",
    tagKey = "budget"
)

private val BUDGET_NODES = listOf(
    SankeyNode("salary", "Maaş"),
    SankeyNode("extra", "Ek gelir"),
    SankeyNode("rent", "Kira"),
    SankeyNode("food", "Mutfak"),
    SankeyNode("bills", "Faturalar"),
    SankeyNode("saved", "Birikim")
)

private val BUDGET_LINKS = listOf(
    SankeyLink("salary", "rent", 28_000),
    SankeyLink("salary", "food", 16_000),
    SankeyLink("salary", "bills", 9_000),
    SankeyLink("salary", "saved", 12_000),
    SankeyLink("extra", "saved", 8_000),
    SankeyLink("extra", "food", 4_000)
)

Bir düğüme basmak

Bir basış, düğümü alır: anahtarı series'inde, adı name'inde, saydığı miktar value'sundadır. Bir akışa basış akışı alır: çıktığı düğümün anahtarı series'inde, vardığı düğümünkü x'inde. Bir düğüme ya da iki kolon arasında bir akışa bas: alttaki satır basılanı yazar.

var pressed by remember { mutableStateOf<String?>(null) }
PantrixSankeyChart(
    nodes = VISITOR_NODES,
    links = VISITOR_LINKS,
    modifier = Modifier.height(280.dp),
    onSelect = { pressed = "${it.name}: ${it.text} ziyaretçi" },
    description = "Ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son",
    tagKey = "press"
)
PantrixText(text = pressed ?: "Bir düğüme bas")

private val VISITOR_NODES = listOf(
    SankeyNode("search", "Arama"),
    SankeyNode("social", "Sosyal"),
    SankeyNode("direct", "Doğrudan"),
    SankeyNode("signup", "Üye oldu"),
    SankeyNode("browse", "Gezindi"),
    SankeyNode("paid", "Ödedi"),
    SankeyNode("free", "Ücretsiz kaldı"),
    SankeyNode("left", "Ayrıldı")
)

private val VISITOR_LINKS = listOf(
    SankeyLink("search", "signup", 300),
    SankeyLink("search", "browse", 200),
    SankeyLink("social", "signup", 100),
    SankeyLink("social", "browse", 200),
    SankeyLink("direct", "signup", 120),
    SankeyLink("direct", "browse", 80),
    SankeyLink("signup", "paid", 220),
    SankeyLink("signup", "free", 300),
    SankeyLink("browse", "free", 180),
    SankeyLink("browse", "left", 300)
)

Kolonların hizası ve sıra

Kolonların hizası (align). Reklamdan gelenler doğrudan ödemeye, aramadan gelenlerin bir kısmı hemen çıkışa akar: bu iki düğüm birden çok kolonda durabilir. "Yasla" dışına bir şey akmayanı son kolona, "Sola" olabildiğince öne, "Sağa" içine bir şey akmayanı olabildiğince geriye, "Ortala" içine bir şey akmayanı aktığı ilk düğümün bir önüne koyar. Anahtarı çevir: düğümler kolonda verildikleri sırada durur (order = SankeyOrder.Given).

var align by remember { mutableStateOf(SankeyAlign.Justify) }
var given by remember { mutableStateOf(false) }
PantrixSegmentButton(
    options = SANKEY_ALIGNS,
    selected = align,
    onSelect = { align = it },
    fullWidth = false,
    tagKey = "sankey_align"
)
PantrixSwitchButton(
    checked = given,
    onCheckedChange = { given = it },
    label = "Verildiği sırayla",
    tagKey = "sankey_given"
)
PantrixSankeyChart(
    nodes = ALIGN_NODES,
    links = ALIGN_LINKS,
    modifier = Modifier.height(260.dp),
    align = align,
    order = if (given) SankeyOrder.Given else SankeyOrder.Untangled,
    description = "Ziyaretçilerin geldiği yerler ve vardıkları son",
    tagKey = "align"
)

private val ALIGN_NODES = listOf(
    SankeyNode("search", "Arama"),
    SankeyNode("ads", "Reklam"),
    SankeyNode("signup", "Üye oldu"),
    SankeyNode("browse", "Gezindi"),
    SankeyNode("left", "Ayrıldı"),
    SankeyNode("paid", "Ödedi"),
    SankeyNode("bounce", "Hemen çıktı")
)

private val ALIGN_LINKS = listOf(
    SankeyLink("search", "signup", 300),
    SankeyLink("search", "browse", 200),
    SankeyLink("search", "bounce", 100),
    SankeyLink("ads", "paid", 60),
    SankeyLink("signup", "paid", 120),
    SankeyLink("signup", "left", 180),
    SankeyLink("browse", "left", 200)
)

private val SANKEY_ALIGNS = listOf(
    SegmentOption(value = SankeyAlign.Justify, label = "Yasla", tagKey = "justify"),
    SegmentOption(value = SankeyAlign.Left, label = "Sola", tagKey = "left"),
    SegmentOption(value = SankeyAlign.Right, label = "Sağa", tagKey = "right"),
    SegmentOption(value = SankeyAlign.Center, label = "Ortala", tagKey = "center")
)

Kendi ölçülerin

Düğümlerin kendi ölçüleri: daha geniş düğümler (nodeWidth) ve bir kolonun düğümleri arasında daha çok boşluk (nodeGap). Verilmeyen alan temanınki kalır.

PantrixSankeyChart(
    nodes = BUDGET_NODES,
    links = BUDGET_LINKS,
    description = "Bir ayın gelirleri ve harcandıkları yerler",
    style = ChartStyle(nodeWidth = 24.dp, nodeGap = 16.dp),
    tagKey = "own_sizes"
)

private val BUDGET_NODES = listOf(
    SankeyNode("salary", "Maaş"),
    SankeyNode("extra", "Ek gelir"),
    SankeyNode("rent", "Kira"),
    SankeyNode("food", "Mutfak"),
    SankeyNode("bills", "Faturalar"),
    SankeyNode("saved", "Birikim")
)

private val BUDGET_LINKS = listOf(
    SankeyLink("salary", "rent", 28_000),
    SankeyLink("salary", "food", 16_000),
    SankeyLink("salary", "bills", 9_000),
    SankeyLink("salary", "saved", 12_000),
    SankeyLink("extra", "saved", 8_000),
    SankeyLink("extra", "food", 4_000)
)

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 düğümler, akışlar ve adlar durur; gösterilen akış ya da düğüm dosyada öne çıkmaz.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixSankeyChart(
    nodes = VISITOR_NODES,
    links = VISITOR_LINKS,
    modifier = Modifier.height(280.dp),
    description = "Ziyaretçilerin geldiği kaynaklar, sitede yaptıkları ve vardıkları son",
    tagKey = "exported",
    export = ChartExport(fileName = "ziyaretciler") { file = it }
)
ExportedFile(file, tagKey = "exported")

private val VISITOR_NODES = listOf(
    SankeyNode("search", "Arama"),
    SankeyNode("social", "Sosyal"),
    SankeyNode("direct", "Doğrudan"),
    SankeyNode("signup", "Üye oldu"),
    SankeyNode("browse", "Gezindi"),
    SankeyNode("paid", "Ödedi"),
    SankeyNode("free", "Ücretsiz kaldı"),
    SankeyNode("left", "Ayrıldı")
)

private val VISITOR_LINKS = listOf(
    SankeyLink("search", "signup", 300),
    SankeyLink("search", "browse", 200),
    SankeyLink("social", "signup", 100),
    SankeyLink("social", "browse", 200),
    SankeyLink("direct", "signup", 120),
    SankeyLink("direct", "browse", 80),
    SankeyLink("signup", "paid", 220),
    SankeyLink("signup", "free", 300),
    SankeyLink("browse", "free", 180),
    SankeyLink("browse", "left", 300)
)

API

nodes

Bir sankey grafiği: neyin nereden nereye, ne kadar aktığı. Düğümler kolonlarda durur; aralarında, akan miktar kadar geniş bantlar olarak akışlar uzanır: bir sitenin ziyaretçilerinin nereden gelip neye devam ettiği, bir bütçenin neyden oluşup neye harcandığı, bir santralin enerjisinin nereye vardığı.

ParametreTürVarsayılanNe olduğu
nodesList<SankeyNode>düğümler. Anahtarları onları ayırır; aynı anahtarı taşıyan iki düğüm reddedilir.
linksList<SankeyLink>düğümler arasında akanlar: her biri bir düğümden ötekine, anahtarlarıyla.
modifierModifierModifiergrafiğin modifier'ı. Buradaki bir yükseklik grafiğindir.
namesBooleantrueher düğümün adının, yeri olduğunda, yanına yazılıp yazılmadığı.
tooltipChartTooltip?ChartTooltip()gösterilen düğüm için gösterilen: adı ve saydığı miktar, altlarında da içine ve dışına akan her akış, öbür ucundaki düğümle. Değerleri format'ı yazar; shared ve crosshair okunmaz. null hiç göstermez.
empty(@Composable () -> Unit)?nullgrafiğ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.
stateChartStaterememberChartState()okuyucunun gösterdiği yer: verilmezse grafiğin kendisininki.
descriptionString?nullgrafiğin ne gösterdiği, birkaç sözcükle, ekran okuyucu için: grafik hakkında söylediği ilk şey. Verilmezse grafik düğümlerinin adlarıyla duyurulur.
onSelect((ChartPoint) -> Unit)?nullbasılan düğümle çağrılır: anahtarı series'i ve x'idir, adı name'i ve label'ı, value'su da saydığı miktardır; ve basılan akışla: çıktığı düğümün anahtarı series'i, vardığı düğümünkü x'idir, name'i iki düğümün adı, value'su da akan miktardır.
styleChartStyle?nullbu grafiğin kendi geometrisi: burada verilen alanlar, gerisi temanınkiyle. Bir düğüm nodeWidth kadar geniştir, bir kolonun iki düğümünün arası bir nodeGap kadardır, bir düğümün köşeleri de barRadius'un söylediği kadar yuvarlaktır.
colorsChartColors?nullbu grafiğin kendi renkleri, temanınkiler olmadıkları yerde.
tagKeyString?nullgrafiğin otomasyon anahtarı: grafik Sankey_<tagKey>, düğümleri ve akışları birlikte Sankey_<tagKey>.Plot, bir düğüm birden sayılarak, kolon kolon ve her kolonda yukarıdan aşağı, Sankey_<tagKey>.Node_<number>, tooltip Sankey_<tagKey>.Tooltip'tir. Bir düğüme basış, düğümün anahtarıyla, bir akışa basış iki düğümünün anahtarlarıyla (from>to) bir Sankey select olayı olarak bildirilir. Değerlerden hiçbir şey bildirilmez.
alignSankeyAlignSankeyAlign.Justifyher düğümün, durabileceği kolonlardan hangisinde durduğu.
orderSankeyOrderSankeyOrder.Untangledbir kolonun düğümlerinin dizildiği sıra: akışların kesişmesini önleyen sıra ya da verildikleri sıra.
exportChartExport?nullgrafiğ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ığı.

ParametreTürVarsayılanNe olduğu
heightDpDp.UnspecifiedGrafiğ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.
lineWidthDpDp.UnspecifiedBir serinin çizgisinin kalınlığı.
markerSizeDpDp.UnspecifiedBir noktadaki işaretin genişliği ve yüksekliği.
selectedMarkerSizeDpDp.UnspecifiedAynısı, gösterilen noktadaki işaret için.
gridWidthDpDp.UnspecifiedKılavuz çizgilerinin, eksenler boyunca çizilen çizgilerin ve gösterilen yeri işaretleyen çizginin kalınlığı. Sıfır hiçbirini çizmez.
labelGapDpDp.UnspecifiedÇizim alanıyla yanına ve altına yazılanın arası, ve onunla bir eksenin başlığının arası.
tickSpacingDpDp.UnspecifiedDeğ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.
legendGapDpDp.UnspecifiedLejantla yanında durduğu grafiğin arası.
legendItemGapDpDp.UnspecifiedLejantın bir kaydıyla sonrakinin arası.
swatchSizeDpDp.UnspecifiedBir serinin lejanttaki ve tooltip'teki örneğinin ne kadar geniş olduğu: çizgisinin kısa bir parçası ya da dolgusunun bir yaması.
swatchGapDpDp.UnspecifiedO örnekle ardındaki adın arası.
tooltipShapeShapeSpecShapeSpec.UnspecifiedTooltip'in köşeleri: markanın şekil ölçeğinin bir basamağı ya da sabit bir şekil.
tooltipHorizontalPaddingDpDp.UnspecifiedTooltip'in yanlarıyla içindekinin arası.
tooltipVerticalPaddingDpDp.UnspecifiedÜstü ve altıyla içindekinin arası, ve başlığıyla satırlarının arası.
tooltipGapDpDp.UnspecifiedGösterilen yerle yanındaki tooltip'in arası.
tooltipElevationDpDp.UnspecifiedTooltip'in gölgesi.
barGapDpDp.UnspecifiedBir yerde yan yana duran iki çubuğun arası. Bunun için fazla ince olan çubuklar daha yakın durur.
barMaxWidthDpDp.UnspecifiedBir çubuğun en fazla ne kadar geniş olduğu, yerinin ne kadar yeri olursa olsun: üç yerli bir grafik üç kalas değildir.
barRadiusDpDp.UnspecifiedBir çubuğun ucunun, sıfırdan uzak ucunun, köşelerinin ne kadar yuvarlak olduğu.
sliceGapDpDp.UnspecifiedBir pastanın yan yana duran iki dilimi arasında; pastanın ortasından kenarına kadar aynı genişlikte.
selectedSliceOffsetDpDp.UnspecifiedBir 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.
gaugeWidthDpDp.UnspecifiedBir göstergenin yayının kalınlığı. Bir yay, yarıçapının yarısından kalın olmaz.
meterHeightDpDp.UnspecifiedBir ölçüm grubunun çubuğunun yüksekliği.
trackerHeightDpDp.UnspecifiedBir durum izleyicinin bloklarının yüksekliği.
bubbleMinSizeDpDp.UnspecifiedBir 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.
bubbleMaxSizeDpDp.UnspecifiedEn büyük balonunun genişliği: büyüklüğü grafiğin en büyüğü olanın.
navigatorHeightDpDp.UnspecifiedZoom'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.
barBandShareFloatFloat.NaNBir 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.
markLineWidthDpDp.UnspecifiedBir 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.
markBandAlphaFloatFloat.NaNBir işaretin bandının renginin ne kadarıyla çizildiği, sıfırdan bire: bant serilerin arkasında durur ve bir tondur.
patternsBoolean?nullBir 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ı.
nodeWidthDpDp.UnspecifiedBir sankey düğümünün ne kadar geniş olduğu.
nodeGapDpDp.UnspecifiedBir 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.

ParametreTürVarsayılanNe olduğu
seriesList<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.
gridColorColor.UnspecifiedBir eksenin işaretlerinde grafik boyunca çizilen çizgiler. Temanın divider'ı.
axisColorColor.UnspecifiedBir eksen boyunca çizilen çizgi. Temanın border'ı.
labelColorColor.UnspecifiedEksenlerin yanına yazılanlar: değerler, yerler ve eksenlerin başlıkları, bir de lejanttaki adlar. Temanın textSecondary'si.
crosshairColorColor.UnspecifiedGösterilen yeri işaretleyen çizgi. Temanın borderHover'ı: içinden geçtiği kılavuz çizgilerinden güçlü, arkasında durduğu serilerden sessiz.
tooltipContainerColorColor.UnspecifiedTooltip'in dolgusu. Temanın surface'i.
tooltipBorderColorColor.UnspecifiedTooltip'in kenarı. Temanın border'ı.
tooltipTextColorColor.UnspecifiedTooltip'in başlığı ve değerleri. Temanın textPrimary'si.
tooltipLabelColorColor.UnspecifiedTooltip'teki seri adları. Temanın textSecondary'si.
risingColorColor.UnspecifiedYukarı giden bir değerin çizildiği renk: bir şelalenin ekleyen adımı. Temanın success'i.
fallingColorColor.UnspecifiedAşağı giden bir değerin çizildiği renk: bir şelalenin götüren adımı. Temanın danger'ı.

Erişilebilirlik