Tesserae - TrendBadge

TrendBadge

Description

TrendBadge is a small pill showing how a figure moved: an arrow and the size of the change. Use it for week-on-week deltas in KPI tables and dashboards, next to a Sparkline or inside a Metric.

The arrow shows the direction (TrendDirection.Up, Down or Flat). The color shows the sentiment (TrendSentiment.Good, Bad or Neutral): green for good news, red for bad news, gray for a figure with no good direction. The two are independent, so a falling cost is an arrow down in green and a falling revenue is an arrow down in red.

TrendBadge.For derives both from the sign of the change and from which way is better. A change of zero draws a flat, neutral badge.

Samples

Derived from the change

trend-badge-for-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 = HStack().AlignItemsCenter().Gap(12.px()).Children(
                TrendBadge.For(change: 4.2, text: "4.2%"),
                TrendBadge.For(change: -3.1, text: "3.1%"),
                TrendBadge.For(change: 0, text: "0%")
            );

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

higherIsBetter defaults to true: a rise is green and a fall is red. A change of zero is flat and gray whatever higherIsBetter says.

Lower is better

trend-badge-lower-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(12.px()).Children(
                HStack().AlignItemsCenter().Gap(12.px()).Children(
                    TextBlock("Cost per ticket").W(140.px()),
                    TrendBadge.For(change: -31, text: "£31", higherIsBetter: false)
                ),
                HStack().AlignItemsCenter().Gap(12.px()).Children(
                    TextBlock("Error rate").W(140.px()),
                    TrendBadge.For(change: 1.7, text: "1.7pp", higherIsBetter: false)
                )
            );

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

A falling cost is an arrow down in green. A rising error rate is an arrow up in red.

Set direction and sentiment directly

trend-badge-explicit-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 = HStack().AlignItemsCenter().Gap(12.px()).Children(
                TrendBadge("12", TrendDirection.Up, TrendSentiment.Good),
                TrendBadge("12", TrendDirection.Down).Bad(),
                TrendBadge("0.8pp", TrendDirection.Up).Neutral(),
                TrendBadge("flat")
            );

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

The constructor takes the text, a direction (Flat by default) and a sentiment (Neutral by default). Direction, Sentiment, Good, Bad and Neutral change them afterwards, and SetText changes the text.

API reference

enum

TrendDirection

public enum TrendDirection

Which way a value moved.

Namespace: Tesserae

enum

TrendSentiment

public enum TrendSentiment

Whether a movement is good news. The direction and the sentiment are independent: a falling cost is Good, a falling revenue is Bad, and a figure with no target to judge it against is Neutral.

Namespace: Tesserae

class

TrendBadge

public sealed class TrendBadge : ComponentBase<TrendBadge, HTMLElement>

A small pill saying how a figure moved - an arrow and the size of the change ("↓ £31", "↑ 1.7pp") - colored by whether that movement is good for the metric rather than by its direction: green is good news, red is bad news, grey is a figure with no good direction.

Remarks

Use For to derive both from the sign of the change and which way is better.

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

Constructors

Name	Description
TrendBadge	Initializes a new instance of this class.

Constructor

TrendBadge

public TrendBadge(string text, TrendDirection direction = TrendDirection.Flat, TrendSentiment sentiment = TrendSentiment.Neutral)

Initializes a new instance of this class.

Methods

Name	Description
For	Builds a badge from the signed size of a change: the arrow follows its sign, and the color says whether that is good news given which way is better for the metric.
SetText	Sets the text of the badge.
Direction	Sets which way the arrow points.
Sentiment	Sets whether the movement is good or bad news, which decides the color.
Good	The movement is good news.
Bad	The movement is bad news.
Neutral	The movement is neither: a figure with no target or no good direction.
Render	Renders the component's root HTML element.

Method

TrendBadge.For

public static TrendBadge For(double change, string text, bool higherIsBetter = true)

Builds a badge from the signed size of a change: the arrow follows its sign, and the color says whether that is good news given which way is better for the metric.

Parameters

change: The signed change; zero draws a flat, neutral badge.
text: The text to show - the formatted change, typically without its sign.
higherIsBetter: False for a metric where less is better (cost, churn, errors).

Method

TrendBadge.SetText

public TrendBadge SetText(string text)

Sets the text of the badge.

Method

TrendBadge.Direction

public TrendBadge Direction(TrendDirection direction)

Sets which way the arrow points.

Method

TrendBadge.Sentiment

public TrendBadge Sentiment(TrendSentiment sentiment)

Sets whether the movement is good or bad news, which decides the color.

Method

TrendBadge.Good

public TrendBadge Good()

The movement is good news.

Method

TrendBadge.Bad

public TrendBadge Bad()

The movement is bad news.

Method

TrendBadge.Neutral

public TrendBadge Neutral()

The movement is neither: a figure with no target or no good direction.

Method

TrendBadge.Render

public override HTMLElement Render()

Renders the component's root HTML element.

TrendBadge

Description

Samples

Derived from the change

Lower is better

Set direction and sentiment directly

API reference

Constructors

TrendBadge

Methods

TrendBadge.For

Parameters

TrendBadge.SetText

TrendBadge.Direction

TrendBadge.Sentiment

TrendBadge.Good

TrendBadge.Bad

TrendBadge.Neutral

TrendBadge.Render

See also