Tesserae - GanttChart

GanttChart

Description

Labelled rows of bars on a shared horizontal axis

GanttChart lists rows in a label column and draws each row's bars on one axis shared by every row, so when things happen and what overlaps what can be read at a glance. Use it for schedules, the steps of a process, or any set of spans over time.

The axis is either a set of named, equal-width columns (Columns(...)) or a numeric range with evenly spaced ticks. Without Columns, the axis spans the bars, or the range set with Range(...). The label column stays in place while the timeline scrolls sideways once it is narrower than its minimum width (TrackMinWidth, 480px by default).

Create a chart with GanttChart(), add rows with Add(GanttRow(label, bars...)), and create bars with GanttBar(start, end) in the axis's unit. With named columns, column i spans i to i + 1, so GanttBar(0, 2) covers the first two columns.

Samples

Named columns

Columns(...) splits the axis into equal columns. Color(GanttBarColor) picks one of the preset hues and Tooltip(...) sets the hover text.

gantt-chart-columns-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Card(
                GanttChart()
                    .Columns("Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday")
                    .Add(GanttRow("Wireframing", GanttBar(0.05, 1.95).Color(GanttBarColor.Blue).Tooltip("Monday to Tuesday")))
                    .Add(GanttRow("Development", GanttBar(1.05, 2.95).Color(GanttBarColor.Green).Tooltip("Tuesday to Wednesday")))
                    .Add(GanttRow("Design",      GanttBar(2.05, 3.95).Color(GanttBarColor.Purple).Tooltip("Wednesday to Thursday")))
                    .Add(GanttRow("Testing",     GanttBar(3.05, 4.95).Color(GanttBarColor.Orange).Tooltip("Thursday to Friday")))
            ).W(640.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

A numeric axis

Without columns the axis is numeric. TickFormat(...) writes the ticks, Text(...) puts a label beside a bar, Indent(...) nests a row under the one above, and Striped() marks a span that was waiting. OnBarClick(...) receives the clicked bar.

gantt-chart-trace-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static string Seconds(double s) => s.ToString("0.0") + " s";

        private static GanttBar Step(double start, double end, GanttBarColor color)
            => GanttBar(start, end).Color(color).Text(Seconds(end - start)).Tooltip(Seconds(start) + " to " + Seconds(end));

        private static void Main()
        {
            var chart = GanttChart()
                .Title("Step")
                .TickFormat(Seconds)
                .OnBarClick(bar => Toast().Information("Bar clicked", Seconds(bar.Start) + " to " + Seconds(bar.End)))
                .Add(GanttRow("Request",           Step(0,   9.4, GanttBarColor.Neutral)))
                .Add(GanttRow("Waiting for model", GanttBar(0, 0.8).Color(GanttBarColor.Neutral).Striped().Text("0.8 s")).Indent())
                .Add(GanttRow("Thinking",          Step(0.8, 2.1, GanttBarColor.Purple)).Indent())
                .Add(GanttRow("Search documents",  Step(2.1, 4.6, GanttBarColor.Green)).Indent())
                .Add(GanttRow("Summarize",         Step(4.9, 7.8, GanttBarColor.Teal)).Indent())
                .Add(GanttRow("Rank results",      Step(5.1, 6.2, GanttBarColor.Green)).Indent(2))
                .Add(GanttRow("Failed lookup",     Step(6.3, 6.5, GanttBarColor.Red)).Indent(2))
                .Add(GanttRow("Answer",            Step(7.9, 9.4, GanttBarColor.Blue)).Indent());

            var component = Card(chart).W(720.px());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Several bars on one row

A row holds any number of bars. Color(string) takes any CSS color and derives the fill and the outline from it. Range(...) and Ticks(...) pin the axis, and EmptyMessage(...) is shown while the chart has no rows.

gantt-chart-shifts-sample.cs

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var shifts = GanttChart()
                .Title("Resource")
                .Range(0, 24)
                .Ticks(8)
                .TickFormat(h => h.ToString("00") + ":00")
                .LabelWidth(160.px())
                .Add(GanttRow("Build agent 1",
                    GanttBar(1, 4).Color(Theme.Colors.Teal500).Text("nightly"),
                    GanttBar(9, 11).Color(Theme.Colors.Teal500),
                    GanttBar(14, 18).Color(Theme.Colors.Magenta500).Text("release")))
                .Add(GanttRow("Build agent 2",
                    GanttBar(0, 2).Color(Theme.Colors.Teal500),
                    GanttBar(10, 16).Color(Theme.Colors.Teal500).Text("tests")))
                .Add(GanttRow("Build agent 3",
                    GanttBar(20, 24).Color(Theme.Colors.Neutral500).Striped().Text("maintenance")));

            var empty = GanttChart().Columns("Q1", "Q2", "Q3", "Q4").EmptyMessage("No milestones planned yet.");

            var component = VStack().W(720.px()).Gap(16.px()).Children(Card(shifts), Card(empty));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

API reference

enum

GanttBarColor

public enum GanttBarColor

The preset colors a GanttBar can be painted with. Each one is a pastel fill under a stronger outline of the same hue, which reads the same in light and dark mode.

Namespace: Tesserae

class

GanttBar

public sealed class GanttBar

One bar on a GanttChart row: a span from Start to End, in whatever unit the chart's axis is in (days, seconds, milliseconds since an origin, …).

Namespace: Tesserae

Constructors

Name	Description
GanttBar	Initializes a new instance of this class.

Constructor

GanttBar

public GanttBar(double start, double end)

Initializes a new instance of this class.

Properties

Name	Description
Start	Where the bar starts, on the chart's axis.
End	Where the bar ends, on the chart's axis. Never before `Start`.
PresetColor	The preset color, when no custom color was set.
CustomColor	The custom CSS color, or null for `PresetColor`.
Label	The text drawn beside the bar, or null for none.
TooltipContent	What the bar shows on hover, or null for nothing.
IsStriped	Whether the bar is drawn hatched, for a span that is pending or still running.
Tag	Any value the caller wants back from `OnBarClick`.

Property

GanttBar.Start

public double Start { get; }

Where the bar starts, on the chart's axis.

Property

GanttBar.End

public double End { get; }

Where the bar ends, on the chart's axis. Never before Start.

Property

GanttBar.PresetColor

public GanttBarColor PresetColor { get; private set; }

The preset color, when no custom color was set.

Property

GanttBar.CustomColor

public string CustomColor { get; private set; }

The custom CSS color, or null for PresetColor.

Property

GanttBar.Label

public string Label { get; private set; }

The text drawn beside the bar, or null for none.

Property

GanttBar.TooltipContent

public IComponent TooltipContent { get; private set; }

What the bar shows on hover, or null for nothing.

Property

GanttBar.IsStriped

public bool IsStriped { get; private set; }

Whether the bar is drawn hatched, for a span that is pending or still running.

Property

GanttBar.Tag

public object Tag { get; private set; }

Any value the caller wants back from OnBarClick.

Methods

Name	Description
Color	Paints the bar with one of the preset colors.
Text	Draws `text` beside the bar, after its end (or before its start, near the right edge).
Tooltip	Shows `text` when the bar is hovered.
Striped	Draws the bar hatched, for a span that is pending, queued or still running.
SetTag	Attaches a value that `OnBarClick` hands back.

Method

GanttBar.Color

Overload
Color(GanttBarColor)	Paints the bar with one of the preset colors.
Color(string)	Paints the bar with a CSS color; the fill and outline are derived from it.

Color(GanttBarColor)

public GanttBar Color(GanttBarColor color)

Paints the bar with one of the preset colors.

Parameters

color GanttBarColor

Color(string)

public GanttBar Color(string cssColor)

Paints the bar with a CSS color; the fill and outline are derived from it.

Parameters

cssColor string

Method

GanttBar.Text

public GanttBar Text(string text)

Draws text beside the bar, after its end (or before its start, near the right edge).

Method

GanttBar.Tooltip

Overload
Tooltip(string)	Shows `text` when the bar is hovered.
Tooltip(IComponent)	Shows `content` when the bar is hovered.

Tooltip(string)

public GanttBar Tooltip(string text)

Shows text when the bar is hovered.

Parameters

text string

Tooltip(IComponent)

public GanttBar Tooltip(IComponent content)

Shows content when the bar is hovered.

Parameters

content IComponent

Method

GanttBar.Striped

public GanttBar Striped(bool striped = true)

Draws the bar hatched, for a span that is pending, queued or still running.

Method

GanttBar.SetTag

public GanttBar SetTag(object tag)

Attaches a value that OnBarClick hands back.

class

GanttRow

public sealed class GanttRow

One row of a GanttChart: a label in the first column and any number of bars on the timeline.

Namespace: Tesserae

Constructors

Name	Description
GanttRow	Initializes a new instance of this class with a text label.

Constructor

GanttRow

Overload
GanttRow(string, GanttBar[])	Initializes a new instance of this class with a text label.
GanttRow(IComponent, GanttBar[])	Initializes a new instance of this class with a component as its label.

GanttRow(string, GanttBar[])

public GanttRow(string label, params GanttBar[] bars) : this(TextBlock(label ?? "").Ellipsis().Tooltip(TextBlock(label ?? "")), bars)

Initializes a new instance of this class with a text label.

Parameters

label string
bars GanttBar[]

GanttRow(IComponent, GanttBar[])

public GanttRow(IComponent label, params GanttBar[] bars)

Initializes a new instance of this class with a component as its label.

Parameters

label IComponent
bars GanttBar[]

Properties

Name	Description
LabelComponent	What the first column shows for this row.
Bars	The row's bars.
IndentLevel	How many levels the label is indented by, to show a row belongs under the one above.

Property

GanttRow.LabelComponent

public IComponent LabelComponent { get; }

What the first column shows for this row.

Property

GanttRow.Bars

public IReadOnlyList<GanttBar> Bars

The row's bars.

Property

GanttRow.IndentLevel

public int IndentLevel { get; private set; }

How many levels the label is indented by, to show a row belongs under the one above.

Methods

Name	Description
Add	Adds a bar to the row.
Indent	Indents the label by `level` steps, to nest the row under the one above it.

Method

GanttRow.Add

public GanttRow Add(GanttBar bar)

Adds a bar to the row.

Method

GanttRow.Indent

public GanttRow Indent(int level = 1)

Indents the label by level steps, to nest the row under the one above it.

class

GanttChart

public sealed class GanttChart : ComponentBase<GanttChart, HTMLElement>

A timeline of labelled rows, each holding one or more bars laid out on a shared horizontal axis - a schedule of tasks over days, or the steps of a process over seconds. The axis is either a set of named, equal-width columns (Columns) or a numeric range with evenly spaced ticks (Range, TickFormat).

Remarks

The label column stays put while the timeline scrolls sideways once it is narrower than TrackMinWidth. Without an explicit range the axis spans the bars.

Namespace: Tesserae
Inheritance: ComponentBase<GanttChart, HTMLElement> → GanttChart

Constructors

Name	Description
GanttChart	Initializes a new instance of this class.

Constructor

GanttChart

public GanttChart()

Initializes a new instance of this class.

Methods

Name	Description
Title	Sets the heading of the label column. Defaults to "Task".
Columns	Lays the axis out as named, equal-width columns - days of a week, sprints, phases. Column `i` spans `i` to `i + 1` on the axis, so a bar from 0 to 2 covers the first two.
Range	Pins the numeric axis to `start`..`end`. Defaults to the span of the bars.
Ticks	Sets roughly how many ticks the numeric axis shows; the step is rounded to 1, 2 or 5 times a power of ten. Defaults to 6.
TickFormat	Sets how a tick of the numeric axis is written - for example as a duration.
LabelWidth	Sets the width of the label column. Defaults to 240px.
RowHeight	Sets the height of each row. Defaults to 44px.
TrackMinWidth	Sets the narrowest the timeline gets before the chart scrolls sideways. Defaults to 480px.
EmptyMessage	Sets what the chart says when it has no rows.
OnBarClick	Calls `onClick` with the bar that was clicked.
Add	Adds a row.
Rows	Replaces every row with `rows`.
Clear	Removes every row.
Render	Renders the component's root HTML element.

Method

GanttChart.Title

public GanttChart Title(string title)

Sets the heading of the label column. Defaults to "Task".

Method

GanttChart.Columns

public GanttChart Columns(params string[] columns)

Lays the axis out as named, equal-width columns - days of a week, sprints, phases. Column i spans i to i + 1 on the axis, so a bar from 0 to 2 covers the first two.

Method

GanttChart.Range

public GanttChart Range(double start, double end)

Pins the numeric axis to start..end. Defaults to the span of the bars.

Method

GanttChart.Ticks

public GanttChart Ticks(int approximateCount)

Sets roughly how many ticks the numeric axis shows; the step is rounded to 1, 2 or 5 times a power of ten. Defaults to 6.

Method

GanttChart.TickFormat

public GanttChart TickFormat(Func<double, string> format)

Sets how a tick of the numeric axis is written - for example as a duration.

Method

GanttChart.LabelWidth

public GanttChart LabelWidth(UnitSize width)

Sets the width of the label column. Defaults to 240px.

Method

GanttChart.RowHeight

public GanttChart RowHeight(UnitSize height)

Sets the height of each row. Defaults to 44px.

Method

GanttChart.TrackMinWidth

public GanttChart TrackMinWidth(UnitSize width)

Sets the narrowest the timeline gets before the chart scrolls sideways. Defaults to 480px.

Method

GanttChart.EmptyMessage

public GanttChart EmptyMessage(string message)

Sets what the chart says when it has no rows.

Method

GanttChart.OnBarClick

public GanttChart OnBarClick(Action<GanttBar> onClick)

Calls onClick with the bar that was clicked.

Method

GanttChart.Add

public GanttChart Add(GanttRow row)

Adds a row.

Method

GanttChart.Rows

public GanttChart Rows(params GanttRow[] rows)

Replaces every row with rows.

Method

GanttChart.Clear

public GanttChart Clear()

Removes every row.

Method

GanttChart.Render

public override HTMLElement Render()

Renders the component's root HTML element.

GanttChart

Description

Samples

Named columns

A numeric axis

Several bars on one row

API reference

Constructors

GanttBar

Properties

GanttBar.Start

GanttBar.End

GanttBar.PresetColor

GanttBar.CustomColor

GanttBar.Label

GanttBar.TooltipContent

GanttBar.IsStriped

GanttBar.Tag

Methods

GanttBar.Color

Color(GanttBarColor)

Parameters

Color(string)

Parameters

GanttBar.Text

GanttBar.Tooltip

Tooltip(string)

Parameters

Tooltip(IComponent)

Parameters

GanttBar.Striped

GanttBar.SetTag

Constructors

GanttRow

GanttRow(string, GanttBar[])

Parameters

GanttRow(IComponent, GanttBar[])

Parameters

Properties

GanttRow.LabelComponent

GanttRow.Bars

GanttRow.IndentLevel

Methods

GanttRow.Add

GanttRow.Indent

Constructors

GanttChart

Methods

GanttChart.Title

GanttChart.Columns

GanttChart.Range

GanttChart.Ticks

GanttChart.TickFormat

GanttChart.LabelWidth

GanttChart.RowHeight

GanttChart.TrackMinWidth

GanttChart.EmptyMessage

GanttChart.OnBarClick

GanttChart.Add

GanttChart.Rows

GanttChart.Clear

GanttChart.Render

See also