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.

Samples

Basic Metrics

metric-basic-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 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 Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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 Transpose.Core;
using Tesserae;
using static Transpose.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);
        }
    }
}

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. Beside the number it can lead with an IconTile - the same rounded, tinted square an OmniResult{T} row leads with - saying what is being counted, and it can hold a chart (a Sparkline, a ContributionBar) under the value to show how the number got there.

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) : this(TextBlock(title).SmallPlus().SemiBold().Foreground(Theme.Secondary.Foreground).Render(), TextBlock(value).XLarge().SemiBold().Render())

Initializes a new instance of this class.

Parameters

title string
value string

Metric(IComponent, IComponent)

public Metric(IComponent title, IComponent value) : this(title.Render(), value.Render())

Initializes a new instance of this class.

Parameters

title IComponent
value IComponent

Methods

Name	Description
SetIcon	Puts an icon on a tile in front of the title and the value, in the given color, over a paler wash of that same color - the same tile an `OmniResult{T}` row leads with. Pass the full-strength color the glyph should be; a null color leaves the tile neutral.
IconSize	Sets how big the leading tile is drawn - 44px square by default, which is the size a KPI wants beside a number two lines tall.
ValueFirst	Draws the value above the title rather than under it - the shape a counter takes when the number is the point and the words under it only say what was counted ("5 / In my scope").
ChangeInHeader	Pulls the change indicator up onto the title's own line, pushed to its far end - for a card whose trend belongs beside the label rather than under the chart.
Chart	Configures the component to chart.
Change	Configures the component to change.
Render	Renders the component's root HTML element.

Method

Metric.SetIcon

Overload
SetIcon(UIcons, string, UIconsWeight)	Puts an icon on a tile in front of the title and the value, in the given color, over a paler wash of that same color - the same tile an `OmniResult{T}` row leads with. Pass the full-strength color the glyph should be; a null color leaves the tile neutral.
SetIcon(string, string, TextSize?)	Puts a few letters on the tile in place of a glyph - a unit, a currency, a file type - in the given color, over a paler wash of that same color.
SetIcon(IComponent, string)	Puts the given component on the tile - an `Image`, an `Avatar`, an emoji. A null value takes the tile away again.

SetIcon(UIcons, string, UIconsWeight)

public Metric SetIcon(UIcons icon, string color = null, UIconsWeight weight = UIconsWeight.Regular)

Puts an icon on a tile in front of the title and the value, in the given color, over a paler wash of that same color - the same tile an OmniResult{T} row leads with. Pass the full-strength color the glyph should be; a null color leaves the tile neutral.

Parameters

icon UIcons
color string
weight UIconsWeight

SetIcon(string, string, TextSize?)

public Metric SetIcon(string text, string color = null, TextSize? size = null)

Puts a few letters on the tile in place of a glyph - a unit, a currency, a file type - in the given color, over a paler wash of that same color.

Parameters

text string
color string
size TextSize?

SetIcon(IComponent, string)

public Metric SetIcon(IComponent iconOrImage, string color = null)

Puts the given component on the tile - an Image, an Avatar, an emoji. A null value takes the tile away again.

Parameters

iconOrImage IComponent
color string

Method

Metric.IconSize

public Metric IconSize(UnitSize size)

Sets how big the leading tile is drawn - 44px square by default, which is the size a KPI wants beside a number two lines tall.

Method

Metric.ValueFirst

public Metric ValueFirst(bool value = true)

Draws the value above the title rather than under it - the shape a counter takes when the number is the point and the words under it only say what was counted ("5 / In my scope").

Method

Metric.ChangeInHeader

public Metric ChangeInHeader(bool value = true)

Pulls the change indicator up onto the title's own line, pushed to its far end - for a card whose trend belongs beside the label rather than under the chart.

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.

Metric

Description

Samples

Basic Metrics

Metrics with Change Indicator

Card With Header & Tags

With Tooltips inside title

Metrics with Sparkline Charts

API reference

Constructors

Metric

Metric(string, string)

Parameters

Metric(IComponent, IComponent)

Parameters

Methods

Metric.SetIcon

SetIcon(UIcons, string, UIconsWeight)

Parameters

SetIcon(string, string, TextSize?)

Parameters

SetIcon(IComponent, string)

Parameters

Metric.IconSize

Metric.ValueFirst

Metric.ChangeInHeader

Metric.Chart

Metric.Change

Metric.Render

See also