Gauge
Gauge displays an indicator within a range of values.
Selector
smart-gauge
Properties
analogDisplayTypeGaugeAnalogDisplayType
Determines the type of gauge's indicator.
Default valueneedle
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
animationDurationnumber
Sets or gets gauge's animation duration. Applicable only when animation is not 'none'.
Default value300
coerceboolean
With the coerce property true, the value is set to the nearest value allowed by the interval property.
Default valuefalse
customIntervalboolean
Sets or gets whether custom ticks at (possibly) uneven interval will be plotted. The ticks to be plotted are defined with the property customTicks.
Default valuefalse
customTicksnumber[]
If customInterval is enabled, sets a list of ticks to be plotted. If coerce is set to true, the value will snap to these ticks.
dateLabelFormatStringstring
Determines the date pattern of the labels when mode is 'date'.
Default value"d
decimalSeparatorstring
Sets or gets the char to use as the decimal separator in numeric values.
Default value""."
digitalDisplayboolean
Enables or disables the digital display of the element.
Default valuefalse
digitalDisplayPositionGaugeDigitalDisplayPosition
Sets the position of the digital display inside the element.
Default valuebottom
disabledboolean
Enables or disables the element.
Default valuefalse
drawNeedleany
Callback function which allows rendering of a custom needle. Applicable only to analogDisplayType needle.
endAnglenumber
Sets or gets Gauge's end angle. This property specifies the end of the gauge's scale and is measured in degrees.
Default value210
intervalany
When cooerce property is true, all values coerce to the interval's value.
Default value1
invertedboolean
Sets the direction of the gauge. If true - the positions of the gauge's start and end are switched.
Default valuefalse
labelFormatFunctionany
A callback function that can be used to format the values displayed inside the gauge labels.
labelsVisibilityLabelsVisibility
Determines the visibility of the labels inside the element.
Default valueall
localestring
Sets or gets the locale. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback used to customize the format of the messages that are returned from the Localization Module.
logarithmicScaleboolean
Enables or disables the usage of logarithmic scale in the element.
Default valuefalse
maxany
Determines the maximum value for the scale of the element.
Default value100
mechanicalActionDragMechanicalAction
Determines when the value of the element is updated.
Default valueswitchWhileDragging
messagesany
Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
Default value
"en": {
"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",
"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",
"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",
"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",
"moduleUndefined": "Module is undefined.",
"missingReference": "{{elementType}}: Missing reference to {{files}}.",
"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",
"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",
"significantPrecisionDigits": "{{elementType}}: the properties significantDigits and precisionDigits cannot be set at the same time.",
"invalidMinOrMax": "{{elementType}}: Invalid {{property}} value. Max cannot be lower than Min.",
"noInteger": "{{elementType}}: precisionDigits could be set only on \"floatingPoint\" scaleType."
}
minany
Determines the minimum value for the scale of the element.
Default value0
modeScaleMode
Determines whether the element works with numbers or dates.
Default valuenumeric
namestring
Sets or gets the element's name, which is used as a reference when the data is submitted.
Default value"
needlePositionGaugeNeedlePosition
Determines the position of the needle when analogDisplayType is 'needle'.
Default valuecenter
precisionDigitsnumber
Determines the number of digits after the decimal point. Applicable only when scaleType is 'floatingPoint'.
ranges{startValue: number, endValue: number, className: string}[]
This property represents an array of objects. Each object is a different range. The range is a colored area with specific size.
readonlyboolean
When the element is read only the users cannot interact with it.
Default valuefalse
rightToLeftboolean
Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts. If enabled, the scale is inverted and the labels and digital display are oriented from right to left.
Default valuefalse
scalePositionGaugeScalePosition
Determines the position of the scale in the element.
Default valueinside
scaleTypeScaleType
Determines the type of the gauge's value and scale.
Default valuefloatingPoint
scientificNotationboolean
Enables or disables scientific notation.
Default valuefalse
showRangesboolean
This property indicates whether the gauge ranges are visible or not.
Default valuefalse
showUnitboolean
Enables or disables displaying of units.
Default valuefalse
significantDigitsnumber | null
Determining how many significant digits are in a number. Applicable only when scaleType is 'integer'.
sizeModeGaugeSizeMode
Determines how the Gauge will size.
Default valuecircle
startAnglenumber
Sets or gets gauge's start angle. This property specifies the beggining of the gauge's scale and is measured in degrees.
Default value-30
themestring
Sets or gets the element's visual theme.
Default value"
ticksPositionTicksPosition
Determines the position of the ticks in the Gauge.
Default valuescale
ticksVisibilityTicksVisibility
Determines the visibility of the ticks.
Default valueminor
unfocusableboolean
Sets or gets if the element can be focused.
Default valuefalse
unitstring
Sets or gets the name of unit used for the values on the scale of the element.
Default value"kg
validationValidation
Sets the value's validation by min/max.
Default valuestrict
valuestring | number | Date
Sets or gets the value of the element. The value can be a date only when scaleType is 'date'.
Default value0
wordLengthWordLength
Sets or gets the word length. Applicable only when scaleType is 'integer'.
Default valueint32
onchange((this: Window, ev: Event) => any) | null
This event is triggered when the value of the element is changed.
Arguments
evEvent
ev.detailObject
ev.detail.oldValue - The previous value of the element.
ev.detail.value - The new value of the element.
Methods
focus(): void
Focuses the element.
getOptimalSize(): any
Gets the optimal size of the element (the current width and the height based on the plotted internal elements).
Returnsany
val( value?: string | number | Date): string
Get/set the value of the gauge.
Arguments
value?string | number | Date
The value to be set. If no parameter is passed, returns the current value of the gauge. The value can be a date only when scaleType is 'date'.
Returnsstring