Skip to content
CanopyX
Get started

Time slider

Snapshots the host supplies, replayed on a matrix or a propagation view with play, step and a timeline.

CanopyTimeSliderThree snapshots of a rolloutDocumentation for the time slider

2 demos

Rollout over time Open this demo full screen

Snapshots the host supplies, replayed on a matrix or a propagation view with play, step and a timeline.

Build one like it

The smallest complete version, in each language CanopyX supports for this view. The demo above is the same API with more data.

using CanopyX;
using CanopyX.Html;

var start = new DateTimeOffset(2026, 10, 25, 10, 0, 0, TimeSpan.Zero);
var rollout = Health(0);
rollout.TimeSlider = new CanopyTimeSlider<CanopyMatrix> {
    IntervalMilliseconds = 1500
};
foreach (var (step, label) in new[] {
    (0, "Rollout started"), (1, "Update spreading"), (2, "All ready")
}) {
    rollout.TimeSlider.Snapshots.Add(
        new(start.AddMinutes(step), Health(step), label));
}
rollout.SaveHtmlPage("time.html");

static CanopyMatrix Health(int step) {
    var matrix = new CanopyMatrix("rollout", "Service health over time");
    matrix.State("waiting", "Waiting", CanopyTone.Warning,
            CanopyMatrixSymbol.Clock, attention: true)
        .State("ready", "Ready", CanopyTone.Success, CanopyMatrixSymbol.Check);
    matrix.Columns.Item("east", "East").Item("west", "West");
    var services = new[] { "API", "Search", "Cache" };
    for (var i = 0; i < services.Length; i++) {
        matrix.Rows.Item("s" + i, services[i]);
        matrix.Set("s" + i, "east", i <= step ? "ready" : "waiting");
        matrix.Set("s" + i, "west", i < step ? "ready" : "waiting");
    }
    return matrix;
}

Run this snippet (time slider, C#)Its output, generated with the site.

Try this in the demo

  1. Play

    Press Play.

    The matrix steps through the three snapshots the host supplied; states change in place.

  2. Step

    Drag the timeline back to the first snapshot.

    Each snapshot keeps its own label and time, and counts update with it.

  3. Only problems

    Turn on Only problems.

    Rows and columns without a waiting service drop out of the matrix.