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.

Samples

Basic contribution bar

contribution-bar-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 = 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 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 = 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 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 = 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 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 = 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 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 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());
        }
    }
}

API reference

enum

ContributionBarReveal

public enum ContributionBarReveal

Controls how a collapsable ContributionBar reveals its detailed, multi-colored breakdown.

Namespace: Tesserae

Values

Name	Description
Expand	Shows an `AngleUp` / `AngleDown` toggle that expands the multi-colored segments and legend inline, in place.
Tooltip	Shows an `Info` icon; hovering it reveals the multi-colored breakdown and legend in a popover (Tippy) instead of expanding inline.

Value

ContributionBarReveal.Expand

Expand

Shows an AngleUp / AngleDown toggle that expands the multi-colored segments and legend inline, in place.

Value

ContributionBarReveal.Tooltip

Tooltip

Shows an Info icon; hovering it reveals the multi-colored breakdown and legend in a popover (Tippy) instead of expanding inline.

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.
Collapsable	Makes the bar collapsable: a tiny toggle button (showing an `AngleUp` / `AngleDown` icon) is shown next to the bar. When collapsed, all of the individually colored segments merge into a single bar painted with `color` (defaulting to `Background`) and the legend is hidden. Expanding restores the multi-colored segments and the legend.
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.Collapsable

public ContributionBar Collapsable(string color = Theme.Primary.Background, bool initiallyCollapsed = true, ContributionBarReveal reveal = ContributionBarReveal.Expand)

Makes the bar collapsable: a tiny toggle button (showing an AngleUp / AngleDown icon) is shown next to the bar. When collapsed, all of the individually colored segments merge into a single bar painted with color (defaulting to Background) and the legend is hidden. Expanding restores the multi-colored segments and the legend.

Parameters

color: The color used for the single, collapsed bar. Defaults to Background.
initiallyCollapsed: Whether the bar starts collapsed. Defaults to true. Ignored when reveal is Tooltip.
reveal: How the detailed breakdown is revealed. Expand (the default) expands it inline; Tooltip shows an info icon that reveals it in a popover.

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.

Contribution Bar

Description

Samples

Basic contribution bar

With a fixed maximum (remainder track)

Custom colors and thicker bar

Legend hidden, integer values

Similarity score breakdown

API reference

Values

ContributionBarReveal.Expand

ContributionBarReveal.Tooltip

Constructors

ContributionBar

Methods

ContributionBar.Add

ContributionBar.Max

ContributionBar.Collapsable

Parameters

ContributionBar.ShowLegend

ContributionBar.HideLegend

ContributionBar.ShowValues

ContributionBar.Decimals

ContributionBar.Thickness

ContributionBar.Render

Fields

ContributionBar.DefaultPalette

See also