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").
Compact	Draws the title and the value on one line instead of two - "42 Open tickets" - for a row of counters, a toolbar or a card header that has no room for a tile two lines tall. The title follows the value when `ValueFirst` is set and leads it otherwise. A change indicator stays on the same line, after both; a chart still goes under them.
ValueBackground	Puts the value on a filled, rounded background - a badge for the number, to set it apart from the words around it (most of all in a `Compact` metric). Takes any CSS color, or a theme variable such as `var(--tss-primary-background-color)`; the foreground, when given, recolors the value to match it. A null background takes the fill away again.
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.
OnClick	Registers a callback invoked when the tile is clicked - to drill into what the number counts. A clickable tile shows the pointer, answers the hover, and becomes keyboard reachable: it is activated with Enter or Space while the tile itself has focus.
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.Compact

public Metric Compact(bool value = true)

Draws the title and the value on one line instead of two - "42 Open tickets" - for a row of counters, a toolbar or a card header that has no room for a tile two lines tall. The title follows the value when ValueFirst is set and leads it otherwise. A change indicator stays on the same line, after both; a chart still goes under them.

Method

Metric.ValueBackground

public Metric ValueBackground(string background, string foreground = null)

Puts the value on a filled, rounded background - a badge for the number, to set it apart from the words around it (most of all in a Compact metric). Takes any CSS color, or a theme variable such as var(--tss-primary-background-color); the foreground, when given, recolors the value to match it. A null background takes the fill away again.

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.OnClick

Overload
OnClick(ComponentEventHandler<Metric, MouseEvent>, bool)	Registers a callback invoked when the tile is clicked - to drill into what the number counts. A clickable tile shows the pointer, answers the hover, and becomes keyboard reachable: it is activated with Enter or Space while the tile itself has focus.
OnClick(Action)	Registers a callback invoked when the tile is clicked. See `OnClick`.

OnClick(ComponentEventHandler<Metric, MouseEvent>, bool)

public override Metric OnClick(ComponentEventHandler<Metric, MouseEvent> onClick, bool clearPrevious = true)

Registers a callback invoked when the tile is clicked - to drill into what the number counts. A clickable tile shows the pointer, answers the hover, and becomes keyboard reachable: it is activated with Enter or Space while the tile itself has focus.

Parameters

onClick ComponentEventHandler<Metric, MouseEvent>
clearPrevious bool

OnClick(Action)

public Metric OnClick(Action action)

Registers a callback invoked when the tile is clicked. See OnClick.

Parameters

action Action

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.Compact

Metric.ValueBackground

Metric.ChangeInHeader

Metric.Chart

Metric.Change

Metric.OnClick

OnClick(ComponentEventHandler<Metric, MouseEvent>, bool)

Parameters

OnClick(Action)

Parameters

Metric.Render

See also