@theredhead — Frontend Library - v1.0.0
    Preparing search index...

    Class UIGauge

    Configurable gauge component that delegates rendering to a GaugePresentationStrategy.

    The component clamps the value between min and max, resolves design tokens from the host element's CSS context, and passes everything to the active strategy. The strategy returns either an SVGSVGElement or raw ImageData, which the component inserts into the DOM.

    Built-in strategies:

    • AnalogGaugeStrategy — circular speedometer
    • VuMeterStrategy — vertical LED bar
    • DigitalGaugeStrategy — seven-segment numeric readout

    Custom strategies: extend GaugePresentationStrategy and implement render() to produce your own SVG or bitmap output.

    <ui-gauge
      [value]="speed"
      [min]="0"
      [max]="220"
      unit="km/h"
      [strategy]="analogStrategy"
      [zones]="speedZones"
      [animated]="true"
    />
    Index

    Constructors

    constructor

    Properties

    animated animationDuration ariaLabel clampedValue detailLevel fit formatValue height max min size strategy thresholds unit value width zones

    Constructors

    • Returns UIGauge

    Properties

    animated: InputSignal<boolean> = ...

    Whether value changes are animated. When true, the gauge smoothly interpolates between old and new values.

    animationDuration: InputSignal<number> = ...

    Duration of the value animation in milliseconds. Only applies when animated is true.

    ariaLabel: InputSignal<string> = ...

    Accessible label for the gauge.

    clampedValue: Signal<number> = ...

    Value clamped between min and max.

    detailLevel: InputSignal<GaugeDetailLevel> = ...

    Level of visual detail strategies should render.

    fit: InputSignal<boolean> = ...

    Whether the gauge fills its parent container.

    When true, the gauge uses a ResizeObserver to track the host element's dimensions and re-renders automatically on resize. The width and height inputs are used as fallbacks only.

    <div style="width: 100%; height: 300px">
      <ui-gauge [fit]="true" [value]="speed" [strategy]="strategy" />
    </div>
    formatValue: InputSignal<((value: number) => string) | undefined> = ...

    Optional formatter for numeric values displayed by the strategy.

    When provided, strategies use this callback for all numeric labels (value readout, tick marks, min/max). This lets consumers control locale, precision, currency symbols, etc.

    <ui-gauge [formatValue]="formatCurrency" />

    formatCurrency = (n: number) => '$' + n.toFixed(2);
    height: InputSignal<number> = ...

    Height in CSS pixels.

    max: InputSignal<number> = ...

    Scale maximum (default 100).

    min: InputSignal<number> = ...

    Scale minimum (default 0).

    size: Signal<GaugeSize> = ...

    Target render size — observed dimensions when fit, else explicit inputs.

    strategy: InputSignal<GaugePresentationStrategy> = ...

    Presentation strategy that renders the gauge.

    thresholds: InputSignal<readonly number[]> = ...

    Optional reference values rendered as marker lines on the gauge.

    Strategies draw a thin reference line at each threshold position. Useful for target set-points, limits, or alarm values.

    <ui-gauge [thresholds]="[75, 90]" />
    unit: InputSignal<string> = ...

    Unit label displayed beside the value (e.g. "km/h", "dB").

    value: InputSignal<number> = ...

    Current gauge value. Clamped to [min, max].

    width: InputSignal<number> = ...

    Width in CSS pixels.

    zones: InputSignal<readonly GaugeZone[]> = ...

    Coloured zones overlaid on the gauge face.

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties