Tesserae - Dashboard

Dashboard

Description

A KPI scorecard built from sparklines, deltas and target bars

This page is a recipe, not a component. A scorecard row answers four questions about a metric: what is the trend, what is the figure, what changed since last week, and how far along is it against its target. Each question has one component:

Question	Component
The trend	Sparkline, with `EndMarker()` and `ReferenceLine()`
The change	`TrendBadge`, usually `TrendBadge.For(change, text, higherIsBetter)`
Progress against a target	`TargetBar`
The rows themselves	`DataTable`, one component per column
Legend and counts	Chip with `Pill()` and `Dot(color)`

DataTable shows the components you hand it. It has no sorting, selection or paging; use DetailsList when a table needs those. Below 640px wide it scrolls sideways. Add every Column(...) before the first Row(...). A row can take a CSS color as its first argument, which draws an accent on its leading edge.

Two rules keep a scorecard readable:

Color by status, not by direction. A falling cost is good news and a falling revenue is bad news. TrendBadge.For(change, text, higherIsBetter) derives the arrow from the sign of the change and the color from which way is better, so the same arrow can be green or red. A metric with no target stays gray: call .Neutral() on the badge and use TargetBar(0).NoValue("Context").
Use one status color for the row accent, the sparkline and the target bar, so the row reads as one signal.

TargetBar(value, target = 100, max = 150) fills the bar up to value and draws a tick at target on the same scale. A value past its target still shows how far over it went while the tick stays put.

Samples

A two-row scorecard

Each row below pairs a fixed 52-point series with a figure, a change and a run-rate bar. The chips above the table are the legend.

dashboard-scorecard-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 double[] Series(double start, double drift)
        {
            // A fixed zigzag around a drift, so the sample renders the same on every run.
            var offsets = new double[] { 0, 2, -1, 3, -2, 1, 4, -3, 2, 0, -2, 3, 1 };
            var data    = new double[52];
            var level   = start;

            for (int i = 0; i < data.Length; i++)
            {
                level  += drift + offsets[i % offsets.Length] * 0.4;
                data[i] = level;
            }

            return data;
        }

        private static void Main()
        {
            var onTrack = Theme.Colors.Green700;
            var watch   = Theme.Colors.Orange600;
            var offPace = Theme.Colors.Red600;
            var context = Theme.Colors.Neutral500;

            var legend = HStack().Gap(8.px()).Wrap().Children(
                Chip("On track").Pill().Dot(onTrack),
                Chip("Watch").Pill().Dot(watch),
                Chip("Off pace").Pill().Dot(offPace),
                Chip("Context (no target)").Pill().Dot(context));

            var table = DataTable()
                .Column("Metric", 3.fr())
                .Column("Trend (52wk)", 2.fr(), DataTableAlign.Center)
                .Column("This week", 1.fr(), DataTableAlign.End)
                .Column("WoW", 1.fr(), DataTableAlign.Center)
                .Column("vs run rate", 2.fr())
                .Row(onTrack,
                    TextBlock("New customers").Small(),
                    Sparkline(Series(40, 0.6), width: 200, height: 36, color: onTrack).EndMarker().ReferenceLine().WS(),
                    TextBlock("1,284").SmallPlus().SemiBold(),
                    TrendBadge.For(96, "96", higherIsBetter: true),
                    TargetBar(112).Color(onTrack).Label("On track").ValueText("112%"))
                .Row(offPace,
                    TextBlock("Refund rate").Small(),
                    Sparkline(Series(40, 0.1), width: 200, height: 36, color: offPace).EndMarker().ReferenceLine().WS(),
                    TextBlock("6.2%").SmallPlus().SemiBold(),
                    TrendBadge.For(-0.4, "0.4pp", higherIsBetter: false),
                    TargetBar(93).Color(offPace).Label("Off pace").ValueText("93%"))
                .Row(context,
                    TextBlock("Average basket size").Small(),
                    Sparkline(Series(55, -0.1), width: 200, height: 36, color: context).EndMarker().ReferenceLine().WS(),
                    TextBlock("5.1%").SmallPlus().SemiBold(),
                    TrendBadge.For(0.8, "0.8pp", higherIsBetter: true).Neutral(),
                    TargetBar(0).NoValue("Context"));

            var component = VStack().W(900.px()).Gap(12.px()).Children(
                TextBlock("Online").Medium().Bold(),
                Card(legend),
                table);

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

Dashboard

Description

Samples

A two-row scorecard

See also