Tesserae - Metric

Metric

Description

A component to display a metric

A Metric component displays a key value alongside a title and an optional indicator of change.

API reference

class

Metric

public class Metric : ComponentBase<Metric, HTMLElement>

A large numeric KPI tile used inside dashboards, showing a value with optional label and trend indicator.

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

Constructors

Name	Description
Metric	Initializes a new instance of this class.

Constructor

Metric

Overload
Metric(string, string)	Initializes a new instance of this class.
Metric(IComponent, IComponent)	Initializes a new instance of this class.

Metric(string, string)

public Metric(string title, string value)

Initializes a new instance of this class.

Parameters

title string
value string

Metric(IComponent, IComponent)

public Metric(IComponent title, IComponent value)

Initializes a new instance of this class.

Parameters

title IComponent
value IComponent

Methods

Name	Description
Chart	Configures the component to chart.
Change	Configures the component to change.
Render	Renders the component's root HTML element.

Method

Metric.Chart

public Metric Chart(IComponent chart)

Configures the component to chart.

Method

Metric.Change

public Metric Change(IComponent change)

Configures the component to change.

Method

Metric.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Basic Metrics

metric-basic-sample.cs

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().Children(
                Card(Metric("Requests", "1.1k").Change(TextBlock("").SmallPlus().Foreground(Theme.Colors.Neutral600))).W(200.px()),
                Card(Metric("Tokens", "196.97k")).W(200.px()),
                Card(Metric("Cost", "$0.09")).W(200.px())
            );

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

Metrics with Change Indicator

metric-change-sample.cs

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().Children(
                Card(Metric("Requests", "688.46k").Change(HStack().AlignItemsCenter().PT(16).Children(Icon(UIcons.ArrowDown).Foreground(Theme.Colors.Red600).S(), TextBlock("-0.4%").Foreground(Theme.Colors.Red600)))).W(250.px()),
                Card(Metric("Tokens", "10.57B").Change(HStack().AlignItemsCenter().PT(16).Children(Icon(UIcons.ArrowDown).Foreground(Theme.Colors.Red600).S(), TextBlock("-0.32%").Foreground(Theme.Colors.Red600)))).W(250.px())
            );

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

Card With Header & Tags

metric-card-header-sample.cs

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().Children(
                Card(HStack().Children(Metric("Requests", "688.46k").Change(HStack().AlignItemsCenter().PT(16).Children(Icon(UIcons.ArrowDown).Foreground(Theme.Colors.Red600).S(), TextBlock("-0.4%").Foreground(Theme.Colors.Red600))).W(250.px()), Metric("Tokens", "10.57B").Change(HStack().AlignItemsCenter().PT(16).Children(Icon(UIcons.ArrowDown).Foreground(Theme.Colors.Red600).S(), TextBlock("-0.32%").Foreground(Theme.Colors.Red600))).W(250.px()))).SetTitle("Metrics")
            );

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

With Tooltips inside title

metric-tooltips-sample.cs

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().Children(
                Card(Metric(HStack().AlignItemsCenter().PT(16).Children(TextBlock("Requests").SmallPlus().SemiBold().Foreground(Theme.Secondary.Foreground), Icon(UIcons.Info).S().PL(4).Tooltip("Total number of requests")), TextBlock("1.1k").XLarge().SemiBold())).W(200.px()),
                Card(Metric(HStack().AlignItemsCenter().PT(16).Children(TextBlock("Cost").SmallPlus().SemiBold().Foreground(Theme.Secondary.Foreground), Icon(UIcons.Info).S().PL(4).Tooltip("Total estimated cost")), TextBlock("$0.09").XLarge().SemiBold())).W(200.px())
            );

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

Metrics with Sparkline Charts

metric-sparkline-sample.cs

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().Children(
                Card(Metric("Web traffic", "1,234,567").Chart(Sparkline(new double[] { 10, 20, 15, 30, 25, 40, 35, 50 })).Change(HStack().AlignItemsCenter().PT(16).Children(Icon(UIcons.ArrowUp).Foreground(Theme.Colors.Green600).S(), TextBlock("+12.3%").Foreground(Theme.Colors.Green600)))).W(250.px()),
                Card(Metric("Worker invocations", "14,352").Chart(Sparkline(new double[] { 50, 45, 40, 48, 30, 20, 15, 10 }, color: "var(--tss-danger-background-color)")).Change(HStack().AlignItemsCenter().PT(16).Children(Icon(UIcons.ArrowDown).Foreground(Theme.Colors.Red600).S(), TextBlock("-5.1%").Foreground(Theme.Colors.Red600)))).W(250.px())
            );

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

Metric

Description

API reference

Constructors

Metric

Metric(string, string)

Parameters

Metric(IComponent, IComponent)

Parameters

Methods

Metric.Chart

Metric.Change

Metric.Render

Samples

Basic Metrics

Metrics with Change Indicator

Card With Header & Tags

With Tooltips inside title

Metrics with Sparkline Charts

See also