@drayman/elements
Options
All
  • Public
  • Public/Protected
  • All
Menu

<drayman-gauge />

Gauge powered by Angular Material library.

Example of usage

 

export const component: DraymanComponent = async ({ forceUpdate }) => {
    let value = Math.round(Math.random() * 100);

    setInterval(() => {
        value = Math.round(Math.random() * 100);
        forceUpdate();
    }, 3000);

    return async () => {
        return (
            <drayman-gauge
                type="arch"
                min={0}
                max={100}
                value={value}
                thick={35}
                margin={20}
            />
        );
    };
}

Hierarchy

Index

Properties

Properties

Optional animate

animate: boolean

Toggles the gauge animation.

Optional append

append: string

Specifies a string appended to the Gauge's reading.

Optional backgroundColor

backgroundColor: string

Specifies the background color of the Gauge's bar.

Optional cap

cap: "round" | "butt"

The style of line ending at the gauge's end.

Optional duration

duration: number

Specifies the duration (in milliseconds) of the Gauge's animation.

Optional foregroundColor

foregroundColor: string

Specifies the foreground color of the Gauge's bar.

Optional horizontalMarkerLabels

horizontalMarkerLabels: boolean

Specifies if the marker labels should be horizontal.

Optional label

label: string

Specifies the text to display below the Gauge's reading.

Optional margin

margin: number

Specifies an optional margin for the chart.

Optional markers

markers: {}

Specifies an object of marker values at which value to place a marker.

Type declaration

  • [key: number]: { color: string; font?: string; label?: string; size: number; type: "line" | "triangle" }
    • color: string
    • Optional font?: string
    • Optional label?: string
    • size: number
    • type: "line" | "triangle"

Optional max

max: number

Specifies the maximum numeric value for gauge's scale.

Optional min

min: number

Specifies the minimum numeric value for gauge's scale.

Optional prepend

prepend: string

Specifies a string prepended to the Gauge's reading.

Optional ref

ref: string

Optional style

style: CSS

Optional thick

thick: number

Specifies the thickness of the gauge's bar.

Optional thresholds

thresholds: {}

Specifies an object of threshold values at which the gauge's color changes.

Type declaration

  • [key: number]: { bgOpacity?: number; color: string }
    • Optional bgOpacity?: number
    • color: string

Optional type

type: "full" | "semi" | "arch"

Specifies the gauge's type.

value

value: number

Specifies the current value of the Gauge in the range specified by min and max.

Optional valueLabel

valueLabel: string

Specifies the text to display inside the Gauge's bar instead of the value.

Optional valueStyle

valueStyle: any

Specifies the style of the text to display inside the Gauge's bar.