Gantt Chart

Bir Gantt grafiği: bir planın görevleri, her biri bir satırda, her biri tek bir zaman ekseni boyunca başladığı andan bittiği ana uzanan bir çubuk. Neyin ne zaman yürüdüğünü, nelerin üst üste geldiğini ve her görevin nereye vardığını gösterir.

import com.pantrixui.components.chart.gantt.PantrixGanttChart

• Görevler. Grafik görevlerini (GanttTask) satırlarının sırasıyla alır; her görevin bir anahtarı, bir adı, başladığı ve bittiği an vardır. Anlar kotlin.time.Instant'tır: tarih kütüphanesi gerekmez.
• Zaman. Zaman, ilk görevin başından son görevin sonuna, grafik boyunca uzanır. Ekseni yuvarlak anlara işaretlenir (gün, hafta, ay), yeri olduğu kadarına, ve her işarette satırların içinden bir çizgi geçer. Anlar cihazın saatiyle okunur ve temanın diliyle yazılır; time (ChartTime) başka söylemedikçe.
• İlerleme. progress veren görevin çubuğunun o kadarı tam renkte, gerisi soluk çizilir.
• Kilometre taşı. Başladığı anda biten görev bir andır ve bir baklava olarak çizilir.
• Bugün. today verilirse ve grafiğin zamanının içindeyse, o anda çubukların üstünden bir çizgi geçer ve satırların üstündeki kendi satırına "Bugün" yazılır. Grafiğin kendi saati yoktur: okunduğu anı çağıran verir.
• Gruplar. group veren görevler grubun kendi satırının altında toplanır: grubun çubuğu ilk görevinin başından son görevinin sonuna uzanır, uçları aşağı sivrilir; görevlerin adları grubunkinden biraz içeride durur. Grubun adı görevlerin tooltip'inde başlık olur ve ekran okuyucu da onu söyler.
• Satırlar. Aynı row'u veren görevler bir satırı paylaşır, zamanda yan yana, ve satır o adla anılır: bir kişinin işleri kendi satırında. Zamanları çakışan görevler satırın içinde alt alta durur ve satır her biri için bir satır boyu uzar. İmleç satırın içinde üstünde durduğu göreve gider; görevler satırı aralarındaki yarı yoldan paylaşır.
• Döngü. Birbirinin ardından gelen görevler bir halka kuramaz: kendisinin ardından gelen bir görevin ardından gelen görev reddedilir.
• Bağımlılıklar. after, görevin ardından geldiği görevlerin anahtarlarıdır: her birinin bittiği yerden bu görevin başladığı yere dik açıyla dönen bir ok çizilir; görev erken başlıyorsa ok alttan ya da üstten dolanır. Grafikte olmayan bir anahtar ya da görevin kendisi reddedilir.
• Hafta sonları. weekends = true cumartesileri ve pazarları grafiğin saatine göre soluk boyar; bir gün iki pikselden darsa boyamaz.
• Adlar. Görev adları satırların başında bir kolonda durur, grafiğin beşte ikisinden geniş olmayan; sığmayan ad üç noktayla kısaltılır. names = false kolonu kaldırır.
• Gösterilen görev. İmlecin ya da parmağın satırında durduğu görevin çubuğu halkalanır ve tooltip adını, başladığı ve bittiği anı, bittiyse ne kadarının bittiğini yazar. Klavyede yukarı ve aşağı oklar görevden göreve geçer.
• Boyut. Yükseklik verilmezse grafik satırlarının gerektirdiği kadar yüksektir: grup başlıkları da içinde, satır başına otuz iki dp; "Bugün" yazılıyorsa üstüne bir satır daha.
• 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.
• Yakınlaşma. zoom ile zamanın bir kısmı grafiğin genişliğinde gösterilir: tekerlek (Ctrl ya da Command ile), iki parmak, artı ve eksi tuşları ve düğmeler yakınlaşır; sürükleme ve düğmeler zamanda ilerletir.
• Otomasyon. Grafik Gantt_<tagKey>, bir görev Gantt_<tagKey>.Task_<numara> olarak etiketlenir. Bir göreve basış, görevin anahtarıyla bir select olayı olarak bildirilir.

Örnekler

Bir sürümün planı

Bir sürümün planı: dört görev ve iki kilometre taşı. Biten görevler tam renkte, sürenlerin bitmiş kısmı tam renkte ve kalanı soluk. Dikey çizgi bugünü gösterir (today): solunda kalan geçmiştir.

İmleci bir satırın üstüne getir ya da satıra dokun: çubuk halkalanır ve tooltip görevin başını, sonunu ve ilerlemesini yazar. Günler UTC'nin günleri olduğu için grafik de UTC'ye göre okunuyor (ChartTime'ın offset'i).

PantrixGanttChart(
    tasks = RELEASE_PLAN,
    time = ChartTime(offset = { Duration.ZERO }),
    today = dayAt("04-14"),
    description = "Bahar sürümünün planı: araştırmadan yayına",
    tagKey = "plain"
)

private val RELEASE_PLAN = listOf(
    GanttTask("research", "Araştırma", start = dayAt("03-02"), end = dayAt("03-14"), progress = 1f),
    GanttTask("design", "Tasarım", start = dayAt("03-09"), end = dayAt("03-28"), progress = 1f),
    GanttTask("build", "Geliştirme", start = dayAt("03-23"), end = dayAt("04-25"), progress = 0.55f),
    GanttTask("test", "Test", start = dayAt("04-13"), end = dayAt("05-02"), progress = 0.1f),
    GanttTask("candidate", "Sürüm adayı", start = dayAt("04-27"), end = dayAt("04-27")),
    GanttTask("release", "Yayın", start = dayAt("05-04"), end = dayAt("05-04"))
)

private fun dayAt(day: String): Instant = Instant.parse("2026-${day}T00:00:00Z")

Kendi renklerin ve adsız satırlar

Her görev kendi rengini taşıyabilir (GanttTask'ın color alanı): burada tasarım işleri bir renkte, yazılım işleri öbüründe, kilometre taşları üçüncüsünde. Anahtarı çevir: adların kolonu kalkar (names = false) ve çubuklar bütün genişliği alır; adlar tooltip'te ve ekran okuyucuda kalır.

var named by remember { mutableStateOf(true) }
val theme = PantrixTheme.colors
val design = setOf("research", "design")
PantrixSwitchButton(
    checked = named,
    onCheckedChange = { named = it },
    label = "Görev adları",
    tagKey = "gantt_names"
)
PantrixGanttChart(
    tasks = RELEASE_PLAN.map { task ->
        val color = when {
            task.start == task.end -> theme.warning.color
            task.key in design -> theme.info.color
            else -> theme.success.color
        }
        GanttTask(task.key, task.name, task.start, task.end, task.progress, color)
    },
    time = ChartTime(offset = { Duration.ZERO }),
    names = named,
    description = "Bahar sürümünün planı, ekiplerin renkleriyle",
    tagKey = "own_colors"
)

private val RELEASE_PLAN = listOf(
    GanttTask("research", "Araştırma", start = dayAt("03-02"), end = dayAt("03-14"), progress = 1f),
    GanttTask("design", "Tasarım", start = dayAt("03-09"), end = dayAt("03-28"), progress = 1f),
    GanttTask("build", "Geliştirme", start = dayAt("03-23"), end = dayAt("04-25"), progress = 0.55f),
    GanttTask("test", "Test", start = dayAt("04-13"), end = dayAt("05-02"), progress = 0.1f),
    GanttTask("candidate", "Sürüm adayı", start = dayAt("04-27"), end = dayAt("04-27")),
    GanttTask("release", "Yayın", start = dayAt("05-04"), end = dayAt("05-04"))
)

private fun dayAt(day: String): Instant = Instant.parse("2026-${day}T00:00:00Z")

Bir günün saatleri

Bir günün saatleri: bir yayın gününün adımları. Anlar aynı günün içinde olduğu için eksen saatlere işaretlenir ve tooltip başı ve sonu saatiyle yazar. Dar bir ekranda ikinci görevin adı kolonuna sığmaz ve üç noktayla kısalır; tooltip adı tam yazar.

PantrixGanttChart(
    tasks = RELEASE_DAY,
    time = ChartTime(offset = { Duration.ZERO }),
    today = hourAt("11:20"),
    description = "Yayın gününün adımları, saat saat",
    tagKey = "hours"
)

private val RELEASE_DAY = listOf(
    GanttTask("freeze", "Kod dondurma", start = hourAt("08:00"), end = hourAt("09:00"), progress = 1f),
    GanttTask(
        key = "checks",
        name = "Son denetimler, onaylar ve sürüm notları",
        start = hourAt("09:00"),
        end = hourAt("11:30"),
        progress = 0.9f
    ),
    GanttTask("rollout", "Kademeli yayın", start = hourAt("11:30"), end = hourAt("15:00")),
    GanttTask("watch", "İzleme", start = hourAt("11:30"), end = hourAt("18:00")),
    GanttTask("done", "Tamamlandı", start = hourAt("18:00"), end = hourAt("18:00"))
)

private fun hourAt(time: String): Instant = Instant.parse("2026-05-04T$time:00Z")

Bir göreve basmak

Bir basış görevi alır: anahtarı series'inde, adı name'inde, kaç gün sürdüğü value'sunda, grafiğin yazdığı metin text'indedir. Bir satıra bas: alttaki satır basılanı yazar.

var pressed by remember { mutableStateOf<String?>(null) }
val strings = PantrixTheme.strings
PantrixGanttChart(
    tasks = RELEASE_PLAN,
    time = ChartTime(offset = { Duration.ZERO }),
    onSelect = { pressed = "${it.name}: ${strings.decimal(it.value)} gün" },
    description = "Bahar sürümünün planı",
    tagKey = "press"
)
PantrixText(text = pressed ?: "Bir göreve bas")

private val RELEASE_PLAN = listOf(
    GanttTask("research", "Araştırma", start = dayAt("03-02"), end = dayAt("03-14"), progress = 1f),
    GanttTask("design", "Tasarım", start = dayAt("03-09"), end = dayAt("03-28"), progress = 1f),
    GanttTask("build", "Geliştirme", start = dayAt("03-23"), end = dayAt("04-25"), progress = 0.55f),
    GanttTask("test", "Test", start = dayAt("04-13"), end = dayAt("05-02"), progress = 0.1f),
    GanttTask("candidate", "Sürüm adayı", start = dayAt("04-27"), end = dayAt("04-27")),
    GanttTask("release", "Yayın", start = dayAt("05-04"), end = dayAt("05-04"))
)

private fun dayAt(day: String): Instant = Instant.parse("2026-${day}T00:00:00Z")

Gruplar ve bağımlılıklar

Görevler ekiplerinin gruplarında (group): her grubun kendi satırı ve görevlerini baştan sona özetleyen çubuğu var. Oklar hangi görevin hangisinin ardından geldiğini gösterir (after): Geliştirme, Tasarım bitince başlar. Test, Geliştirme bitmeden başladığı için onun oku alttan dolanıyor.

PantrixGanttChart(
    tasks = GROUPED_PLAN,
    time = ChartTime(offset = { Duration.ZERO }),
    today = dayAt("04-14"),
    description = "Bahar sürümünün planı, ekiplere göre",
    tagKey = "groups"
)

private val GROUPED_PLAN = listOf(
    GanttTask("research", "Araştırma", dayAt("03-02"), dayAt("03-14"), progress = 1f, group = "Ürün"),
    GanttTask(
        key = "design",
        name = "Tasarım",
        start = dayAt("03-16"),
        end = dayAt("03-28"),
        progress = 1f,
        after = listOf("research"),
        group = "Ürün"
    ),
    GanttTask(
        key = "build",
        name = "Geliştirme",
        start = dayAt("03-30"),
        end = dayAt("04-25"),
        progress = 0.55f,
        after = listOf("design"),
        group = "Yazılım"
    ),
    GanttTask(
        key = "test",
        name = "Test",
        start = dayAt("04-13"),
        end = dayAt("05-02"),
        progress = 0.1f,
        after = listOf("build"),
        group = "Yazılım"
    ),
    GanttTask("release", "Yayın", dayAt("05-04"), dayAt("05-04"), after = listOf("test"))
)

private fun dayAt(day: String): Instant = Instant.parse("2026-${day}T00:00:00Z")

Kişilerin satırları ve hafta sonları

Kişilerin satırları (row): her kişinin görevleri kendi satırında, yan yana. Ada'nın acil düzeltmesi profille aynı günlere düştüğü için satırında onun altında durur. Hafta sonları soluk (weekends). İmleci bir satırda gezdir: üstünde durduğun görev gösterilir.

PantrixGanttChart(
    tasks = SPRINT,
    time = ChartTime(offset = { Duration.ZERO }),
    description = "İki haftalık sprintte kim ne yapıyor",
    tagKey = "rows",
    weekends = true
)

private val SPRINT = listOf(
    GanttTask("login", "Giriş ekranı", dayAt("03-02"), dayAt("03-05"), progress = 1f, row = "Ada"),
    GanttTask("profile", "Profil", dayAt("03-05"), dayAt("03-11"), progress = 0.5f, row = "Ada"),
    GanttTask("hotfix", "Acil düzeltme", dayAt("03-06"), dayAt("03-10"), progress = 0.3f, row = "Ada"),
    GanttTask("api", "API", dayAt("03-02"), dayAt("03-07"), progress = 1f, row = "Lin"),
    GanttTask("sync", "Eşitleme", dayAt("03-09"), dayAt("03-14"), after = listOf("api"), row = "Lin"),
    GanttTask("review", "Gözden geçirme", dayAt("03-11"), dayAt("03-14"), after = listOf("profile"), row = "Can"),
    GanttTask("demo", "Demo", dayAt("03-16"), dayAt("03-16"), after = listOf("review", "sync"), row = "Can")
)

private fun dayAt(day: String): Instant = Instant.parse("2026-${day}T00:00:00Z")

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 satırlar, çubuklar, zamanın işaretleri ve bugünün çizgisi ile adı durur.

var file by remember { mutableStateOf<ChartExportFile?>(null) }
PantrixGanttChart(
    tasks = RELEASE_PLAN,
    time = ChartTime(offset = { Duration.ZERO }),
    today = dayAt("04-14"),
    description = "Bahar sürümünün planı: araştırmadan yayına",
    tagKey = "exported",
    export = ChartExport(fileName = "bahar-surumu") { file = it }
)
ExportedFile(file, tagKey = "exported")

private val RELEASE_PLAN = listOf(
    GanttTask("research", "Araştırma", start = dayAt("03-02"), end = dayAt("03-14"), progress = 1f),
    GanttTask("design", "Tasarım", start = dayAt("03-09"), end = dayAt("03-28"), progress = 1f),
    GanttTask("build", "Geliştirme", start = dayAt("03-23"), end = dayAt("04-25"), progress = 0.55f),
    GanttTask("test", "Test", start = dayAt("04-13"), end = dayAt("05-02"), progress = 0.1f),
    GanttTask("candidate", "Sürüm adayı", start = dayAt("04-27"), end = dayAt("04-27")),
    GanttTask("release", "Yayın", start = dayAt("05-04"), end = dayAt("05-04"))
)

private fun dayAt(day: String): Instant = Instant.parse("2026-${day}T00:00:00Z")

Zamanda yakınlaşma

zoom = ChartZoom() zamana yakından bakmayı sağlar: Ctrl ya da Command ile tekerlek, iki parmak, grafikteyken artı ve eksi, ve grafiğin üstündeki düğmeler zamanın bir kısmını grafiğin genişliğinde gösterir. Fareyle sürükleme ve düğmeler zamanda ilerletir; oklarla gidilen görev görünüre gelir.

Görünen kısmın dışı zamanın iki ucunda kesilir, adlar yerinde kalır. Kısım durumdadır (state.window): bu grafik planın ilk yarısını göstererek açılır, sıfır tuşu ya da son düğme hepsini yeniden gösterir.

val state = rememberChartState()
// Grafik planın ilk yarısını göstererek açılır.
LaunchedEffect(state) { state.zoomTo(start = 0f, end = 0.5f) }
PantrixGanttChart(
    tasks = RELEASE_PLAN,
    time = ChartTime(offset = { Duration.ZERO }),
    today = dayAt("04-14"),
    state = state,
    description = "Bahar sürümünün planı: araştırmadan yayına",
    tagKey = "zoomed",
    zoom = ChartZoom()
)

private val RELEASE_PLAN = listOf(
    GanttTask("research", "Araştırma", start = dayAt("03-02"), end = dayAt("03-14"), progress = 1f),
    GanttTask("design", "Tasarım", start = dayAt("03-09"), end = dayAt("03-28"), progress = 1f),
    GanttTask("build", "Geliştirme", start = dayAt("03-23"), end = dayAt("04-25"), progress = 0.55f),
    GanttTask("test", "Test", start = dayAt("04-13"), end = dayAt("05-02"), progress = 0.1f),
    GanttTask("candidate", "Sürüm adayı", start = dayAt("04-27"), end = dayAt("04-27")),
    GanttTask("release", "Yayın", start = dayAt("05-04"), end = dayAt("05-04"))
)

private fun dayAt(day: String): Instant = Instant.parse("2026-${day}T00:00:00Z")

API

tasks

Bir Gantt grafiği: bir planın görevleri, her biri bir satırda, her biri tek bir zaman ekseni boyunca başladığı andan bittiği ana uzanan bir çubuk. Neyin ne zaman yürüdüğünü, nelerin üst üste geldiğini ve her görevin nereye vardığını gösterir.

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. Önce grafiğin açıklaması, bugün çizgisi varsa "Bugün" ve günü, sonra görevlerin sırasıyla her görev: grubu ve satırı varsa onlar, adı, başı, sonu ve ilerlemesi.