Tesserae

Sparkline

Description

A compact inline trend chart

Sparkline renders a compact SVG area chart designed to be embedded alongside metric values, table cells, or dashboard cards. It conveys the shape of a trend at a glance without axes, labels, or interactive controls.

The chart accepts a data array of doubles and optional width, height, and color parameters, making it easy to match any layout or brand color.

Samples

Upward Trend

sparkline-upward-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Revenue").W(120.px()),
                Sparkline(new double[] { 10, 14, 18, 15, 22, 28, 25, 35, 40, 50 }, width: 150, height: 40, color: Theme.Colors.Green600)
            );

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

Downward Trend

sparkline-downward-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Error Rate").W(120.px()),
                Sparkline(new double[] { 50, 45, 40, 48, 30, 28, 20, 15, 12, 10 }, width: 150, height: 40, color: "var(--tss-danger-background-color)")
            );

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

Flat / Stable

sparkline-flat-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Latency (ms)").W(120.px()),
                Sparkline(new double[] { 30, 31, 29, 30, 32, 30, 31, 29, 30, 31 }, width: 150, height: 40, color: Theme.Colors.Neutral500)
            );

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

Volatile / Random

sparkline-volatile-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Requests").W(120.px()),
                Sparkline(new double[] { 10, 40, 15, 55, 20, 60, 5, 45, 30, 70, 25, 50 }, width: 150, height: 40, color: Theme.Colors.Blue600)
            );

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

Primary Color (default)

sparkline-primary-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = HStack().AlignItemsCenter().Children(
                TextBlock("Conversions").W(120.px()),
                Sparkline(new double[] { 10, 20, 15, 30, 25, 40, 35, 50 }, width: 150, height: 40)
            );

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

Larger Chart

sparkline-large-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = Sparkline(new double[] { 5, 10, 8, 20, 18, 35, 30, 45, 42, 60, 55, 70 }, width: 300, height: 80, color: Theme.Colors.Green600).WS();

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

Dashboard Card with Metric and Sparkline

Sparklines are most useful when paired with a headline metric. The cards below combine a primary number, the period-over-period delta, and a sparkline for shape — each tile uses a different palette to highlight the trend direction.

sparkline-card-sample.js

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

namespace Tesserae.Tests
{
    internal static class App
    {
        private static IComponent Tile(string title, string value, string change, double[] data, string color)
        {
            return Card(VStack().Children(
                TextBlock(title).Small().Muted(),
                TextBlock(value).XXLarge().SemiBold(),
                TextBlock(change).Small(),
                Sparkline(data, width: 200, height: 40, color: color).WS().PT(8)
            ).Padding(16.px())).MinWidth(220.px());
        }

        private static void Main()
        {
            var dashboard = HStack().Children(
                Tile("Revenue",   "$48,231", "+12.4% vs last week", new double[]{ 22, 25, 28, 26, 32, 38, 48 }, Theme.Colors.Green600),
                Tile("Errors",    "1.8%",    "-0.6% vs last week", new double[]{ 50, 45, 40, 48, 30, 28, 20 }, "var(--tss-danger-background-color)"),
                Tile("Sessions",  "12,408",  "stable",            new double[]{ 30, 31, 29, 30, 32, 30, 31 }, Theme.Colors.Neutral500)
            ).Gap(12.px()).Padding(16.px());

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

Dynamic Sparkline (Refresh on Click)

Sparkline re-renders whenever it is added to a container, so you can drive interactivity by swapping the chart for a new instance on a user action. The button below replaces the current chart with a freshly-randomised data set.

sparkline-dynamic-sample.js

using System;
using System.Linq;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var random = new Random();
            double[] Generate() =>
                Enumerable.Range(0, 12).Select(_ => random.NextDouble() * 100).ToArray();

            var host = Stack();
            var chart = Sparkline(Generate(), width: 300, height: 60, color: Theme.Colors.Blue600);

            void Refresh()
            {
                var fresh = Sparkline(Generate(), width: 300, height: 60, color: Theme.Colors.Blue600);
                host.Replace(fresh, chart);
                chart = fresh;
            }

            var component = VStack().Children(
                host.Children(chart),
                Button("Refresh data").Primary().SetIcon(UIcons.Refresh).MT(12)
                    .OnClick((s, e) => Refresh())
            ).Padding(16.px());

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