Tesserae - TargetBar

TargetBar

Description

TargetBar measures a value against a target: a thin bar filled up to the value, a tick at the target, and a caption under it with a state on the left and a figure on the right. Use it for run rate, quota or SLA progress in KPI tables such as DataTable.

The scale runs from zero to max, 150 by default, and the tick sits at target, 100 by default. A value past its target still fills past the tick, up to the end of the bar. A value above max fills the bar completely.

For a figure with no target to judge it against, NoValue draws an empty track with no fill and no tick.

Samples

Value against target

target-bar-basic-sample.cs

using System;
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 = VStack().Gap(16.px()).Children(
                TargetBar(84).Warning().Label("Watch").ValueText("84%"),
                TargetBar(100).Success().Label("On target").ValueText("100%"),
                TargetBar(128).Success().Label("Ahead").ValueText("128%")
            ).W(320);

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

State colors

target-bar-colors-sample.cs

using System;
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 = VStack().Gap(16.px()).Children(
                TargetBar(112).Success().Label("Success").ValueText("112%"),
                TargetBar(84).Warning().Label("Warning").ValueText("84%"),
                TargetBar(46).Danger().Label("Danger").ValueText("46%"),
                TargetBar(70).Neutral().Label("Neutral").ValueText("70%"),
                TargetBar(70).Color(Theme.Colors.Blue600).Label("Custom").ValueText("70%")
            ).W(320);

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

Success, Warning, Danger and Neutral use theme variables, so they follow the active theme. Color accepts any CSS color or variable.

Custom scale and thickness

target-bar-scale-sample.cs

using System;
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 = VStack().Gap(16.px()).Children(
                TargetBar(340, target: 500, max: 600).Warning().Label("Tickets closed").ValueText("340 of 500"),
                TargetBar(99.2, target: 99.9, max: 100).Danger().Thickness(8.px()).Label("Availability").ValueText("99.2%"),
                TargetBar(0).NoValue("Context")
            ).W(320);

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

value, target and max share one unit, so the bar does not have to be a percentage. NoValue(label, valueText) takes an optional caption pair; valueText is an em dash when omitted. Thickness sets the bar height, 4px by default.

API reference

class

TargetBar

public sealed class TargetBar : ComponentBase<TargetBar, HTMLElement>

A thin bar that measures a value against a target: the bar is filled up to the value, a tick marks where the target sits on the same scale, and a line under it names the state on the left and the figure on the right ("Watch ... 84%").

Remarks

The scale runs from zero to Max (150 by default), so a value that overshoots its target - 231% of a run rate - still shows how far past it went, and the tick stays put at the target (100 by default). A bar with no target to speak of is drawn as an empty track by NoValue.

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

Constructors

Name	Description
TargetBar	Initializes a new instance of this class.

Constructor

TargetBar

public TargetBar(double value, double target = 100, double max = 150)

Initializes a new instance of this class.

Parameters

value: What was reached, on the same scale as target.
target: Where the tick goes. 100 by default, for a value expressed as a percentage of its target.
max: The value at which the bar is full.

Methods

Name	Description
Value	Sets what was reached.
Target	Sets where the tick sits on the scale.
Max	Sets the value at which the bar is full.
Label	Sets the text at the left of the line under the bar - the state the value puts the metric in.
ValueText	Sets the text at the right of the line under the bar - the figure itself.
NoValue	Draws an empty track with no fill and no tick, for a figure that has no target to be measured against.
Color	Colors the fill with any CSS color, or a theme variable.
Success	Colors the fill with the theme's success color.
Warning	Colors the fill with the theme's warning color.
Danger	Colors the fill with the theme's danger color.
Neutral	Colors the fill with a muted neutral.
Thickness	Sets how thick the bar is. 4px by default.
Render	Renders the component's root HTML element.

Method

TargetBar.Value

public TargetBar Value(double value)

Sets what was reached.

Method

TargetBar.Target

public TargetBar Target(double target)

Sets where the tick sits on the scale.

Method

TargetBar.Max

public TargetBar Max(double max)

Sets the value at which the bar is full.

Method

TargetBar.Label

public TargetBar Label(string text)

Sets the text at the left of the line under the bar - the state the value puts the metric in.

Method

TargetBar.ValueText

public TargetBar ValueText(string text)

Sets the text at the right of the line under the bar - the figure itself.

Method

TargetBar.NoValue

public TargetBar NoValue(string label = null, string valueText = "—")

Draws an empty track with no fill and no tick, for a figure that has no target to be measured against.

Method

TargetBar.Color

public TargetBar Color(string color)

Colors the fill with any CSS color, or a theme variable.

Method

TargetBar.Success

public TargetBar Success()

Colors the fill with the theme's success color.

Method

TargetBar.Warning

public TargetBar Warning()

Colors the fill with the theme's warning color.

Method

TargetBar.Danger

public TargetBar Danger()

Colors the fill with the theme's danger color.

Method

TargetBar.Neutral

public TargetBar Neutral()

Colors the fill with a muted neutral.

Method

TargetBar.Thickness

public TargetBar Thickness(UnitSize size)

Sets how thick the bar is. 4px by default.

Method

TargetBar.Render

public override HTMLElement Render()

Renders the component's root HTML element.

TargetBar

Description

Samples

Value against target

State colors

Custom scale and thickness

API reference

Constructors

TargetBar

Parameters

Methods

TargetBar.Value

TargetBar.Target

TargetBar.Max

TargetBar.Label

TargetBar.ValueText

TargetBar.NoValue

TargetBar.Color

TargetBar.Success

TargetBar.Warning

TargetBar.Danger

TargetBar.Neutral

TargetBar.Thickness

TargetBar.Render

See also