Gantt

@* The default: today alone, fitted to the width, with only today's work listed. *@
<VetoGantt Items="Tasks"
           TodayOverride="Today"
           SidebarWidth="13rem"
           Height="14rem"
           @bind-View="_view" />

@code {
    private VetoGanttView _view = VetoGanttView.Today;

    // The demos' fixed today, so the March 2026 rows are on screen. Leave TodayOverride
    // out and the chart takes the real date.
    private static readonly DateOnly Today = new(2026, 3, 18);

    // Tasks: the list written out under "A schedule".
}

@* Today's jobs by the hour, a whole day of them on the Operations line. *@
<VetoGantt Items="Jobs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(11, 30)"
           SubItemLayout="VetoGanttSubItemLayout.Inline"
           SidebarWidth="13rem"
           Height="11rem" />

@* Only 14:00 to 20:00, stretched across the chart. *@
<VetoGantt Items="Jobs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(11, 30)"
           StartTime="new TimeOnly(14, 0)"
           EndTime="new TimeOnly(20, 0)"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="11rem" />

@code {
    // The demos' fixed now. Leave both overrides out and the chart takes the real clock.
    private static readonly DateOnly Today = new(2026, 3, 18);

    private const string Engineering = "var(--veto-color-primary)";
    private const string Research = "var(--veto-color-warning)";
    private const string Marketing = "var(--veto-color-success)";

    // A day of jobs on 18 March, plus one either side of it that the today view leaves out.
    private static readonly IReadOnlyList<VetoGanttItem> Jobs =
    [
        new() { Id = "ops", Name = "Operations",
                Start = new(2026, 3, 18), End = new(2026, 3, 18), StartTime = new(6, 0), EndTime = new(21, 0),
                Category = "Engineering", Color = Engineering },
        new() { Id = "etl", Name = "Data load", ParentId = "ops",
                Start = new(2026, 3, 18), End = new(2026, 3, 18), StartTime = new(6, 0), EndTime = new(8, 30),
                Category = "Engineering", Color = Engineering },
        new() { Id = "reports", Name = "Reports", ParentId = "ops",
                Start = new(2026, 3, 18), End = new(2026, 3, 18), StartTime = new(9, 0), EndTime = new(10, 0),
                Category = "Research", Color = Research },
        new() { Id = "deploy", Name = "Deploy", ParentId = "ops",
                Start = new(2026, 3, 18), End = new(2026, 3, 18), StartTime = new(14, 0), EndTime = new(15, 30),
                Category = "Engineering", Color = Engineering },
        new() { Id = "cleanup", Name = "Cleanup", ParentId = "ops",
                Start = new(2026, 3, 18), End = new(2026, 3, 18), StartTime = new(19, 0), EndTime = new(21, 0),
                Category = "Engineering", Color = Engineering },
        new() { Id = "support", Name = "Support rota",
                Start = new(2026, 3, 18), End = new(2026, 3, 18), StartTime = new(8, 0), EndTime = new(17, 0),
                Category = "Marketing", Color = Marketing },
        new() { Id = "backup", Name = "Backup (last night)",
                Start = new(2026, 3, 17), End = new(2026, 3, 17), StartTime = new(22, 0), EndTime = new(23, 30),
                Category = "Engineering", Color = Engineering },
        new() { Id = "release", Name = "Release (tomorrow)",
                Start = new(2026, 3, 19), End = new(2026, 3, 19), StartTime = new(9, 0), EndTime = new(10, 0),
                Category = "Engineering", Color = Engineering }
    ];
}

<VetoGantt Items="Runs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(9, 20)"
           StartTime="new TimeOnly(7, 0)"
           EndTime="new TimeOnly(12, 0)"
           GroupBy="ServerOf"
           SubItemLayout="VetoGanttSubItemLayout.Inline"
           ShowCategoryFilter="false"
           SidebarWidth="11rem" />

@* Quarter-hour columns for the busy part of the morning. *@
<VetoGantt Items="Runs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(9, 20)"
           StartTime="new TimeOnly(8, 0)"
           EndTime="new TimeOnly(10, 0)"
           TodayScale="VetoGanttScale.QuarterHour"
           GroupBy="ServerOf"
           SubItemLayout="VetoGanttSubItemLayout.Inline"
           ShowToolbar="false"
           SidebarWidth="11rem" />

@code {
    // The demos' fixed now. Leave both overrides out and the chart takes the real clock.
    private static readonly DateOnly Today = new(2026, 3, 18);

    private static string? ServerOf ( VetoGanttItem job ) => job.Category;

    // Exact timestamps, as an API hands them over, with the server in Category.
    private static readonly DateTime Morning = new(2026, 3, 18);

    private static VetoGanttItem Run ( string id, string name, string server, string color,
                                       int fromHour, int fromMinute, int toHour, int toMinute )
        => new(id, name, Morning.AddHours(fromHour).AddMinutes(fromMinute), Morning.AddHours(toHour).AddMinutes(toMinute))
        {
            Category = server,
            Color = color
        };

    private static readonly IReadOnlyList<VetoGanttItem> Runs =
    [
        Run("deploy", "Deploy", "web-01", "var(--veto-color-primary)", 8, 0, 8, 30),
        Run("smoke", "Smoke test", "web-01", "var(--veto-color-primary)", 8, 30, 8, 40),
        Run("warm", "Cache warm", "web-01", "var(--veto-color-primary)", 10, 15, 10, 45),
        Run("import", "Nightly import", "batch-01", "var(--veto-color-warning)", 8, 0, 9, 30),
        Run("reindex", "Reindex", "batch-01", "var(--veto-color-warning)", 8, 45, 10, 0),
        Run("ping", "Health ping", "batch-01", "var(--veto-color-warning)", 9, 10, 9, 15),
        Run("backup", "Backup", "db-01", "var(--veto-color-success)", 7, 0, 7, 45),
        Run("vacuum", "Vacuum", "db-01", "var(--veto-color-success)", 11, 0, 11, 20),
        new VetoGanttItem("yesterday", "Late export", new DateTime(2026, 3, 17, 22, 0, 0), new DateTime(2026, 3, 17, 23, 0, 0))
        {
            Category = "db-01",
            Color = "var(--veto-color-success)"
        }
    ];
}

@* Compact rows, with the projects taller. *@
<VetoGantt Items="Sized"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           RowHeight="28"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="20rem"
           ScrollToTodayOnLoad="false" />

@* Not shown above: the rows GroupBy makes have a height of their own. *@
<VetoGantt Items="Runs" GroupBy="ServerOf" GroupRowHeight="44" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    // The schedule under "A schedule", with every top-level row - a project - at 48px.
    private static readonly IReadOnlyList<VetoGanttItem> Sized =
        Tasks.Select(task => task.ParentId is null ? task with { RowHeight = 48 } : task).ToList();
}

@* Seven days, stretched across the whole chart. *@
<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Start="new DateOnly(2026, 3, 14)"
           End="new DateOnly(2026, 3, 20)"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="17rem" />

@* Not shown above: the same week at the scale's own density. *@
<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           Start="new DateOnly(2026, 3, 14)"
           End="new DateOnly(2026, 3, 20)"
           FitToWidth="false" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    // Tasks: the list written out under "A schedule".
}

@* Today alone: Later scrolls to the end of the day, then moves on to the next one. *@
<VetoGantt Items="Jobs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(11, 30)"
           ShowViewPicker="false"
           ShowSearch="false"
           ShowCategoryFilter="false"
           Exportable="false"
           SidebarWidth="13rem"
           Height="11rem"
           OnRangeChanged="range => _dayRange = range" />

@* A week fitted to the width: nothing to scroll, so Later moves it a week on. The page owns
   the range - each new one is fed back as Start and End, as a page loading rows per range does. *@
<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Start="_weekRange?.Start ?? new DateOnly(2026, 3, 16)"
           End="_weekRange?.End ?? new DateOnly(2026, 3, 22)"
           ShowViewPicker="false"
           ShowScalePicker="false"
           ShowSearch="false"
           ShowCategoryFilter="false"
           Exportable="false"
           SidebarWidth="13rem"
           Height="17rem"
           OnRangeChanged="range => _weekRange = range" />

<span>
    Day: @(_dayRange is { } day ? day.Start.ToString("d MMM") : "as opened")
    · Week: @(_weekRange is { } week ? $"{week.Start:d MMM} – {week.End:d MMM}" : "as opened")
</span>

@* Not shown above: arrows that only scroll, and do nothing at either end. *@
<VetoGantt Items="Tasks" PageBeyondRange="false" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private VetoGanttRange? _dayRange;
    private VetoGanttRange? _weekRange;

    // Jobs: the list written out under "Jobs by the hour"; Tasks: under "A schedule".
}

@* Each pipeline's jobs on its own line; the fold arrow opens them into rows. *@
<VetoGantt Items="Pipelines"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           SubItemLayout="VetoGanttSubItemLayout.Inline"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="9rem"
           ScrollToTodayOnLoad="false" />

@* Always one line: no fold arrows. *@
<VetoGantt Items="Pipelines"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           SubItemLayout="VetoGanttSubItemLayout.Inline"
           Collapsible="false"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="9rem"
           ScrollToTodayOnLoad="false" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private const string Engineering = "var(--veto-color-primary)";
    private const string Research = "var(--veto-color-warning)";

    private static readonly IReadOnlyList<VetoGanttItem> Pipelines =
    [
        new() { Id = "nightly", Name = "Nightly build", Start = new(2026, 3, 16), End = new(2026, 3, 20), Category = "Engineering", Color = Engineering },
        new() { Id = "compile", Name = "Compile", ParentId = "nightly", Start = new(2026, 3, 16), End = new(2026, 3, 16), Category = "Engineering", Color = Engineering },
        new() { Id = "test", Name = "Test", ParentId = "nightly", Start = new(2026, 3, 17), End = new(2026, 3, 17), Category = "Engineering", Color = Engineering },
        new() { Id = "package", Name = "Package", ParentId = "nightly", Start = new(2026, 3, 18), End = new(2026, 3, 18), Category = "Engineering", Color = Engineering },
        new() { Id = "deploy", Name = "Deploy", ParentId = "nightly", Start = new(2026, 3, 19), End = new(2026, 3, 20), Category = "Engineering", Color = Engineering },

        new() { Id = "reports", Name = "Reports", Start = new(2026, 3, 16), End = new(2026, 3, 19), Category = "Research", Color = Research },
        new() { Id = "extract", Name = "Extract", ParentId = "reports", Start = new(2026, 3, 16), End = new(2026, 3, 16), Category = "Research", Color = Research },
        new() { Id = "publish", Name = "Publish", ParentId = "reports", Start = new(2026, 3, 18), End = new(2026, 3, 19), Category = "Research", Color = Research }
    ];
}

<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           @bind-Scale="_scale"
           @bind-SelectedId="_selectedId"
           Height="26rem"
           OnExport="OnExport" />

@code {
    private VetoGanttScale _scale = VetoGanttScale.Day;
    private string? _selectedId;
    private string? _exportNote;

    // The demos' fixed today. Leave TodayOverride out and the chart takes the real date.
    private static readonly DateOnly Today = new(2026, 3, 18);

    private Task OnExport ( VetoGanttExportRequest request )
    {
        _exportNote = $"Exported {request.Items.Count} rows as {request.Format}.";
        return Task.CompletedTask;
    }

    // A colour per category, so the category chips read as a key to the bars.
    private const string Engineering = "var(--veto-color-primary)";
    private const string Design = "var(--veto-color-secondary)";
    private const string Research = "var(--veto-color-warning)";
    private const string Marketing = "var(--veto-color-success)";

    private static readonly IReadOnlyList<VetoGanttItem> Tasks =
    [
        new() { Id = "platform", Name = "Platform", Start = new(2026, 3, 2), End = new(2026, 4, 10), Category = "Engineering", Color = Engineering, Progress = 0.55 },
        new() { Id = "design", Name = "Design system", ParentId = "platform", Start = new(2026, 3, 2), End = new(2026, 3, 13), Category = "Design", Color = Design, Progress = 1 },
        new() { Id = "shell", Name = "App shell", ParentId = "platform", Start = new(2026, 3, 9), End = new(2026, 3, 24), Category = "Engineering", Color = Engineering, Progress = 0.8, DependsOn = ["design"] },
        new() { Id = "components", Name = "Component library", ParentId = "platform", Start = new(2026, 3, 16), End = new(2026, 4, 10), Category = "Engineering", Color = Engineering, Progress = 0.35, DependsOn = ["design"] },

        new() { Id = "mobile", Name = "Mobile", Start = new(2026, 3, 23), End = new(2026, 4, 24), Category = "Engineering", Color = Engineering, Progress = 0.1 },
        new() { Id = "spike", Name = "Feasibility spike", ParentId = "mobile", Start = new(2026, 3, 23), End = new(2026, 3, 27), Category = "Research", Color = Research, Progress = 0.6 },
        new() { Id = "build", Name = "Build", ParentId = "mobile", Start = new(2026, 3, 30), End = new(2026, 4, 24), Category = "Engineering", Color = Engineering, DependsOn = ["spike", "shell"] },

        new() { Id = "launch", Name = "Launch", Start = new(2026, 4, 13), End = new(2026, 5, 1), Category = "Marketing", Color = Marketing, Progress = 0 },
        new() { Id = "copy", Name = "Write the copy", ParentId = "launch", Start = new(2026, 4, 13), End = new(2026, 4, 22), Category = "Marketing", Color = Marketing, DependsOn = ["components"] },
        new() { Id = "ship", Name = "Ship", ParentId = "launch", Start = new(2026, 5, 1), End = new(2026, 5, 1), Category = "Marketing", Color = Marketing, IsMilestone = true, DependsOn = ["build", "copy"] }
    ];
}

<button @onclick='() => _hidden = ["Marketing"]'>Hide Marketing</button>
<button @onclick='() => _active = ["underway"]'>Only work under way</button>
<button @onclick="() => _chart.ClearFiltersAsync()">Clear filters</button>

<VetoGantt @ref="_chart"
           Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Filters="TaskFilters"
           @bind-HiddenCategories="_hidden"
           @bind-ActiveFilters="_active"
           OnFilterChanged="OnFilterChanged"
           Exportable="false"
           SidebarWidth="13rem"
           Height="17rem"
           ScrollToTodayOnLoad="false" />

<span>@_filterState</span>

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private VetoGantt _chart = default!;
    private IReadOnlyCollection<string> _hidden = [];
    private IReadOnlyCollection<string> _active = [];
    private string _filterState = "No filter changed yet.";

    private static readonly IReadOnlyList<VetoGanttFilter> TaskFilters =
    [
        new("underway", "Under way", item => item.Progress is > 0 and < 1) { Tooltip = "Started, not finished" },
        new("unstarted", "Not started", item => item.Progress is null or 0)
    ];

    private void OnFilterChanged ( VetoGanttFilterState state )
    {
        var active = state.ActiveFilters.Count == 0 ? "none" : string.Join(", ", state.ActiveFilters);
        var hidden = state.HiddenCategories.Count == 0 ? "none" : string.Join(", ", state.HiddenCategories);

        _filterState = $"Filters: {active} · Hidden: {hidden} · {state.VisibleItems.Count} rows";
    }

    // Tasks: the list written out under "A schedule".
}

@* Day only: one scale, so no picker. CSV only in the export menu. *@
<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Scales="DayOnly"
           ExportFormats="CsvOnly"
           ShowDateLine="false"
           ShowSearch="false"
           ShowCategoryFilter="false"
           SidebarWidth="13rem"
           Height="12rem" />

@* Not shown above: no export at all. *@
<VetoGantt Items="Tasks" View="VetoGanttView.Schedule" ExportFormats="[]" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private static readonly VetoGanttScale[] DayOnly = [VetoGanttScale.Day];
    private static readonly VetoGanttExportFormat[] CsvOnly = [VetoGanttExportFormat.Csv];

    // Tasks: the list written out under "A schedule".
}

<VetoGantt Items="Jobs"
           View="VetoGanttView.Schedule"
           Scale="VetoGanttScale.Hour"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(11, 30)"
           DateLineFormat="ddd d MMM"
           HeaderFormat="H:mm"
           HeaderGroupFormat="dddd"
           SearchPlaceholder="Search jobs"
           TodayViewLabel="Now"
           ScheduleViewLabel="Plan"
           TodayButtonText="Back to now"
           ExportText="Download"
           SidebarWidth="13rem"
           Height="11rem" />

@* Not shown above: the date line drawn your own way - or not at all. *@
<VetoGantt Items="Jobs">
    <DateLineTemplate Context="day">
        On shift: <strong>@day.ToString("dddd")</strong>
    </DateLineTemplate>
</VetoGantt>

<VetoGantt Items="Jobs" ShowDateLine="false" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    // Jobs: the list written out under "Jobs by the hour".
}

@* Once, in Program.cs: *@
builder.Services.AddVetoTheming();

@* Once, in <head> - before the stylesheet, so the saved theme applies before first paint: *@
<script src="_content/Veto.Theming/veto-theme-init.js"></script>
<link rel="stylesheet" href="_content/Veto.Core/VetoStyles.css" />

@* Once, in the layout: *@
<VetoThemeProvider />

@* The chart follows the page, with a toggle in its own toolbar: *@
<VetoGantt Items="Jobs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(11, 30)"
           ShowSearch="false"
           ShowCategoryFilter="false"
           Exportable="false"
           SidebarWidth="13rem"
           Height="11rem">
    <Toolbar>
        <VetoThemeToggle />
    </Toolbar>
</VetoGantt>

@* Always dark, whatever the page is in - and the time on the needle with no tab: *@
<VetoGantt Items="Jobs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(11, 30)"
           ColorScheme="VetoColorScheme.Dark"
           NowLabelAppearance="VetoGanttNowLabelAppearance.Text"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="9rem" />

@* Always light: *@
<VetoGantt Items="Jobs"
           TodayOverride="Today"
           TimeOverride="new TimeOnly(11, 30)"
           ColorScheme="VetoColorScheme.Light"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="9rem" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    // Jobs: the list written out under "Jobs by the hour".
}

@* Not shown above: switching from code... *@
@inject IVetoThemeService Theme
<button @onclick="() => Theme.ToggleAsync()">Dark / light</button>

@* ...and your own colours, one palette per mode. The bars take Primary unless an item
   has a Color of its own; a Color given as a token - var(--veto-color-success) - follows
   the mode too. *@
@code {
    protected override Task OnInitializedAsync () => Theme.SetThemeAsync(new VetoTheme
    {
        Light = new VetoPalette
        {
            Primary = "#0f766e",
            Danger = "#b91c1c",            // the now marker and its time
            Surface = "#ffffff",
            Text = "#0f172a",
            Border = "#e2e8f0"
        },
        Dark = new VetoPalette
        {
            Primary = "#2dd4bf",
            Danger = "#f87171",
            Surface = "#0b1220",
            Text = "#e2e8f0",
            Border = "#1e293b"
        }
    });
}

@* The chart is the one under "A schedule"; these lines report what it selects and exports. *@
<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           @bind-Scale="_scale"
           @bind-SelectedId="_selectedId"
           Height="26rem"
           OnExport="OnExport" />

<span>@(_selectedId is null ? "Nothing selected — click a bar above." : $"Selected: {_selectedId}")</span>
<span>@_exportNote</span>

@* Not shown above: OnItemSelected hands you the whole row, not just its id. *@
<VetoGantt Items="Tasks" View="VetoGanttView.Schedule" OnItemSelected="item => _detail = item" />

@code {
    private VetoGanttItem? _detail;

    // _scale, _selectedId, _exportNote, OnExport, Today and Tasks: as under "A schedule".
}

<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           ShowToolbar="false"
           SidebarWidth="13rem"
           Height="17rem">
    <ItemContextMenu Context="item">
        <VetoMenuLabel Text="@item.Name" />
        <VetoMenuItem Text="Open" OnClick='() => _contextNote = $"Opened {item.Name}"' />
        <VetoMenuItem Text="Copy id" OnClick='() => _contextNote = $"Copied {item.Id}"' />
        <VetoMenuDivider />
        @* Any item can be switched off for the row it was opened on. *@
        <VetoMenuItem Text="Delete" Destructive="true" Disabled="@(item.Progress == 1)"
                      OnClick='() => _contextNote = $"Deleted {item.Name}"' />
    </ItemContextMenu>
</VetoGantt>

<span>@(_contextNote ?? "Right-click a bar or a name.")</span>

@code {
    private string? _contextNote;

    // Today and Tasks: as under "A schedule".
}

<VetoGantt Items="Milestones"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Scale="VetoGanttScale.Week"
           ShowToolbar="false"
           SidebarWidth="12rem"
           Height="14rem"
           ScrollToTodayOnLoad="false" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    // A milestone is a single day with IsMilestone; the colours are theme tokens, so they
    // follow light and dark.
    private static readonly IReadOnlyList<VetoGanttItem> Milestones =
    [
        new() { Id = "a", Name = "Discovery", Start = new(2026, 3, 2), End = new(2026, 3, 20), Color = "var(--veto-color-success)", Progress = 1 },
        new() { Id = "b", Name = "Alpha", Start = new(2026, 3, 20), End = new(2026, 3, 20), IsMilestone = true, Color = "var(--veto-color-warning)" },
        new() { Id = "c", Name = "Hardening", Start = new(2026, 3, 23), End = new(2026, 4, 17), Color = "var(--veto-color-secondary)", Progress = 0.4 },
        new() { Id = "d", Name = "Release", Start = new(2026, 4, 17), End = new(2026, 4, 17), IsMilestone = true, Color = "var(--veto-color-danger)" }
    ];
}

<VetoGantt Items="Chain"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           ShowToolbar="false"
           SidebarWidth="12rem"
           Height="15rem"
           ScrollToTodayOnLoad="false"
           @bind-SelectedId="_selected" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);
    private string? _selected;

    private static readonly IReadOnlyList<VetoGanttItem> Chain =
    [
        new() { Id = "survey", Name = "Survey", Start = new(2026, 3, 2), End = new(2026, 3, 6), Progress = 1 },
        new() { Id = "draft", Name = "Draft", Start = new(2026, 3, 9), End = new(2026, 3, 17), DependsOn = ["survey"], Progress = 0.5 },
        new() { Id = "review", Name = "Review", Start = new(2026, 3, 18), End = new(2026, 3, 24), DependsOn = ["draft"] },
        // Starts before Review finishes: the arrow routes back rather than cutting through.
        new() { Id = "publish", Name = "Publish", Start = new(2026, 3, 20), End = new(2026, 3, 26), DependsOn = ["review"] }
    ];
}

@* Your own text in the native tooltip. Return null for no tooltip on that row. *@
<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           ShowToolbar="false"
           SidebarWidth="12rem"
           Height="14rem"
           ScrollToTodayOnLoad="false"
           TooltipText="ShortTooltip" />

@* Or a card you lay out yourself. *@
<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           ShowToolbar="false"
           SidebarWidth="12rem"
           Height="14rem"
           ScrollToTodayOnLoad="false">
    <TooltipTemplate Context="task">
        <strong>@task.Name</strong>
        <div>@task.Start.ToString("d MMM") – @task.End.ToString("d MMM") · @task.DurationDays days</div>
        @if (task.Progress is { } done)
        {
            <div>@done.ToString("P0") done</div>
        }
        @if (task.Category is not null)
        {
            <div>@task.Category</div>
        }
    </TooltipTemplate>
</VetoGantt>

@* Not shown above: no tooltips at all. *@
<VetoGantt Items="Tasks" View="VetoGanttView.Schedule" ShowTooltips="false" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private static string? ShortTooltip ( VetoGanttItem item )
        => item.IsMilestone ? item.Name : $"{item.Name} - {item.DurationDays} days";

    // Tasks: the list written out under "A schedule".
}

<button @onclick='() => _chart.SelectAsync("shell")'>Select App shell</button>
<button @onclick="() => _chart.CollapseAll()">Collapse all</button>
<button @onclick="() => _chart.ExpandAll()">Expand all</button>
<button @onclick="() => _chart.SetScaleAsync(VetoGanttScale.Week)">Week view</button>
<button @onclick="() => _chart.ScrollToDateAsync(new(2026, 4, 13))">Go to launch</button>
<button @onclick='() => _chart.ShowTooltip("design")'>Point out Design</button>
<button @onclick="() => _chart.HideTooltip()">Hide card</button>

<VetoGantt @ref="_chart"
           TooltipZIndex="2500"
           View="VetoGanttView.Schedule"
           Items="Tasks"
           TodayOverride="Today"
           ShowToolbar="false"
           SidebarWidth="12rem"
           Height="16rem"
           ScrollToTodayOnLoad="false"
           @bind-SelectedId="_selected"
           @bind-Scale="_scale">
    <TooltipTemplate Context="task">
        <strong>@task.Name</strong>
        <div>@task.DurationDays days</div>
    </TooltipTemplate>
</VetoGantt>

<span>Selected: @(_selected ?? "none") · Scale: @_scale</span>

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private VetoGantt _chart = default!;
    private string? _selected;
    private VetoGanttScale _scale = VetoGanttScale.Day;

    // Tasks: the list written out under "A schedule".
}

<VetoGantt Items="Editable"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Editable="true"
           PersistKey="veto-docs-gantt"
           SortBy="_sort"
           Height="17rem"
           SidebarWidth="13rem"
           ScrollToTodayOnLoad="false"
           ShowScalePicker="true"
           ShowCategoryFilter="false"
           ShowSearch="false"
           OnItemChanged="OnChanged" />

<span>Order</span>
<button @onclick="() => _sort = VetoGanttSort.Source">As supplied</button>
<button @onclick="() => _sort = VetoGanttSort.Name">Alphabetical</button>
<button @onclick="() => _sort = VetoGanttSort.Start">By start date</button>

<span>@(_change ?? "Drag a bar, or focus one and press an arrow key.")</span>

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private VetoGanttSort _sort = VetoGanttSort.Source;
    private string? _change;

    // The chart reports the change; it does not edit the list you gave it.
    private void OnChanged ( VetoGanttChange change )
        => _change = $"{change.Id}: {change.Edit} by {change.Days} days — now {change.Start:d MMM} to {change.End:d MMM}";

    // Deliberately not in alphabetical order, so the ordering buttons visibly do something.
    private static readonly IReadOnlyList<VetoGanttItem> Editable =
    [
        new() { Id = "wiring", Name = "Wiring", Start = new(2026, 3, 9), End = new(2026, 3, 17), Color = "var(--veto-color-primary)", Progress = 0.7 },
        new() { Id = "audit", Name = "Audit", Start = new(2026, 3, 4), End = new(2026, 3, 10), Color = "var(--veto-color-warning)", Progress = 1 },
        new() { Id = "rollout", Name = "Rollout", Start = new(2026, 3, 20), End = new(2026, 3, 31), Color = "var(--veto-color-success)" },
        new() { Id = "design", Name = "Blueprint", Start = new(2026, 3, 2), End = new(2026, 3, 6), Color = "var(--veto-color-secondary)", Progress = 1 }
    ];
}

<VetoButton Size="VetoSize.Small" Variant="VetoVariant.Outlined" Color="VetoColor.Neutral"
            OnClick="FirstLoadAsync">
    First load
</VetoButton>
<VetoButton Size="VetoSize.Small" Variant="VetoVariant.Outlined" Color="VetoColor.Neutral"
            OnClick="RefreshAsync">
    Refresh
</VetoButton>

<VetoGantt Items="Chain"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Loading="_loading"
           Refreshing="_refreshing"
           ShowToolbar="false"
           SidebarWidth="12rem"
           Height="15rem"
           LoadingRows="4"
           ScrollToTodayOnLoad="false" />

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    private bool _loading;
    private bool _refreshing;

    // Nothing on screen yet: a placeholder chart holds the layout. The delay stands in
    // for the fetch.
    private async Task FirstLoadAsync ()
    {
        _loading = true;
        await Task.Delay(2200);
        _loading = false;
    }

    // Rows already on screen: veil them rather than replacing them.
    private async Task RefreshAsync ()
    {
        _refreshing = true;
        await Task.Delay(2200);
        _refreshing = false;
    }

    // Chain: the list written out under "Chained tasks".
}

<VetoGantt Items="Tasks"
           View="VetoGanttView.Schedule"
           TodayOverride="Today"
           Search="a task that does not exist"
           ShowToolbar="false"
           Height="9rem"
           ScrollToTodayOnLoad="false" />

@* The message is EmptyText, "No tasks match these filters." unless you set your own. *@

@code {
    private static readonly DateOnly Today = new(2026, 3, 18);

    // Tasks: the list written out under "A schedule".
}

<VetoGantt Items="Tasks" View="VetoGanttView.Schedule" OnExport="OnExport" ExportFileName="schedule" />

@code {
    private async Task OnExport(VetoGanttExportRequest request)
    {
        // request.Items holds the rows as currently filtered.
        if (request.Format == VetoGanttExportFormat.Csv)
        {
            await Server.SaveAsync(request.Items);
            request.Handled = true;   // the component will not download anything
        }
    }
}