Tesserae - Contribution Bar

Contribution Bar

Description

A stacked horizontal bar showing how weighted segments add up to a total

ContributionBar renders a single horizontal bar divided into colored segments, each sized proportionally to its value. An optional legend below the bar lists every segment with its label and numeric value. It is useful for making the composition of a score visible at a glance — for example, showing how each signal contributes to a similarity score.

Add segments with Add. By default the bar fills entirely (full width equals the sum of all segments). Call Max to pin the full-width value; when the segments sum to less than that value, the remaining space is left as an empty track.

Segments are colored using a built-in eight-color palette. Pass an explicit CSS color string to Add to override the palette color for a specific segment.

API reference

class

ContributionBar

public sealed class ContributionBar : ComponentBase<ContributionBar, HTMLElement>

A single stacked horizontal bar that shows how a set of weighted components add up to a total (for example, how each signal contributes to a similarity score). Each segment is sized proportionally to its value and gets a distinct color, and an optional legend lists every segment with its label and numeric value.

Remarks

Add segments with Add. By default the bar fills entirely (the largest extent equals the sum of all segments); call Max to pin the full-width value so a remainder track is shown when the segments do not reach it.

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

Constructors

Name	Description
ContributionBar	Initializes a new instance of this class.

Constructor

ContributionBar

public ContributionBar()

Initializes a new instance of this class.

Methods

Name	Description
Add	Adds a contribution segment. When `color` is null a color is picked from `DefaultPalette` based on the segment's position.
Max	Pins the value that corresponds to a full-width bar. When the segments sum to less than this value the remaining space is rendered as an empty track. Defaults to the sum of all segments.
ShowLegend	Controls whether the legend below the bar is shown. Defaults to `true`.
HideLegend	Hides the legend below the bar.
ShowValues	Controls whether the numeric value of each segment is shown in the legend. Defaults to `true`.
Decimals	Sets the number of decimal places used when formatting segment values. Defaults to 2.
Thickness	Sets the thickness (height) of the bar. Defaults to `10px`.
Render	Renders the component's root HTML element.

Method

ContributionBar.Add

public ContributionBar Add(string label, double value, string color = null)

Adds a contribution segment. When color is null a color is picked from DefaultPalette based on the segment's position.

Method

ContributionBar.Max

public ContributionBar Max(double max)

Pins the value that corresponds to a full-width bar. When the segments sum to less than this value the remaining space is rendered as an empty track. Defaults to the sum of all segments.

Method

ContributionBar.ShowLegend

public ContributionBar ShowLegend(bool show = true)

Controls whether the legend below the bar is shown. Defaults to true.

Method

ContributionBar.HideLegend

public ContributionBar HideLegend()

Hides the legend below the bar.

Method

ContributionBar.ShowValues

public ContributionBar ShowValues(bool show = true)

Controls whether the numeric value of each segment is shown in the legend. Defaults to true.

Method

ContributionBar.Decimals

public ContributionBar Decimals(int decimals)

Sets the number of decimal places used when formatting segment values. Defaults to 2.

Method

ContributionBar.Thickness

public ContributionBar Thickness(UnitSize size)

Sets the thickness (height) of the bar. Defaults to 10px.

Method

ContributionBar.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Fields

Name	Description
DefaultPalette	The default color palette used for segments that do not specify an explicit color, cycled in order.

Field

ContributionBar.DefaultPalette

public static readonly string[] DefaultPalette = { Theme.Colors.Blue500, Theme.Colors.Teal500, Theme.Colors.Green500, Theme.Colors.Orange500, Theme.Colors.Purple500, Theme.Colors.Magenta500, Theme.Colors.Red500, Theme.Colors.Blue400, }

The default color palette used for segments that do not specify an explicit color, cycled in order.

Samples

Basic contribution bar

contribution-bar-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 = ContributionBar()
                .Add("Keyword match",   0.45)
                .Add("Semantic score",  0.30)
                .Add("Recency boost",   0.15)
                .Add("Popularity",      0.10);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

With a fixed maximum (remainder track)

When the sum of segments is less than the pinned maximum, the remaining space is shown as an empty track.

contribution-bar-max-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 = ContributionBar()
                .Max(1.0)
                .Add("Signal A", 0.35)
                .Add("Signal B", 0.25)
                .Add("Signal C", 0.20);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

Custom colors and thicker bar

Pass an explicit CSS color string as the third argument to Add to override the palette for that segment. Use Thickness to increase the bar height.

contribution-bar-colors-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 = ContributionBar()
                .Thickness(18.px())
                .Add("Critical",  0.55, Theme.Colors.Red500)
                .Add("Warning",   0.25, Theme.Colors.Orange500)
                .Add("Info",      0.20, Theme.Colors.Blue500);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

Legend hidden, integer values

contribution-bar-nologend-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 = ContributionBar()
                .HideLegend()
                .Decimals(0)
                .Add("Feature A", 40)
                .Add("Feature B", 35)
                .Add("Feature C", 25);

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.WS().Padding(16.px()));
        }
    }
}

Similarity score breakdown

A typical use case: showing how each signal contributes to a ranked search result score.

contribution-bar-similarity-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 score = TextBlock("Score: 0.87").SemiBold().MB(8);

            var bar = ContributionBar()
                .Max(1.0)
                .Decimals(3)
                .Add("Embedding similarity", 0.52)
                .Add("BM25 keyword",          0.21)
                .Add("Recency",               0.09)
                .Add("Click-through boost",   0.05);

            var component = VStack().Children(score, bar).Padding(16.px());

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

Contribution Bar

Description

API reference

Constructors

ContributionBar

Methods

ContributionBar.Add

ContributionBar.Max

ContributionBar.ShowLegend

ContributionBar.HideLegend

ContributionBar.ShowValues

ContributionBar.Decimals

ContributionBar.Thickness

ContributionBar.Render

Fields

ContributionBar.DefaultPalette

Samples

Basic contribution bar

With a fixed maximum (remainder track)

Custom colors and thicker bar

Legend hidden, integer values

Similarity score breakdown

See also