Gauge
React component. Provides a classical gauge visualization component.
If showValue parameter is used, the component additionally accepts all parameters of ItemValue.
Example

import { Gauge, GaugeType } from "@eva-ics/webengine-react";
const MyComponent = () => {
return (
<>
<Gauge
type={GaugeType.Light}
oid="sensor:tests/temp"
minValue={0}
maxValue={100}
critValue={70}
warnValue={40}
diameter={250}
units="℃"
showValue
label="Temp"
/>
</>
);
};
Parameters
name |
type |
required |
description |
---|---|---|---|
minValue |
number |
yes |
Minimum value |
maxValue |
number |
yes |
Maximum value |
oid |
string |
no |
item OID |
state |
ItemState |
no |
item state |
label |
string |
no |
Bottom label |
showValue |
boolean |
no |
Display item value |
type |
GaugeType |
no |
Gauge type |
diameter |
number |
no |
Gauge total size |
warnValue |
number |
no |
Gauge warning threshold |
critValue |
number |
no |
Gauge critical threshold |
startAngle |
number |
no |
Starting angle |
endAngle |
number |
no |
Ending angle |
numTicks |
number |
no |
Number of ticks |
offset |
number |
no |
Gauge progress offset |
arcStrokeWidth |
number |
no |
Arc width |
strokeLineCap |
GaugeStrokeLineCap |
no |
Arc stroke ending |
tickLength |
number |
no |
Length of ticks |
baseRadius |
number |
no |
Base radius |
tipRadius |
number |
no |
Tip radius |
middleRadius |
number |
no |
Middle radius |
needleOffset |
number |
no |
Needle offset |
engine |
Eva |
no |
WebEngine object (if no default set) |
Types
GaugeType
enum GaugeType {
Standart = "standard",
Sphere = "sphere",
Minimal = "minimal",
Light = "light"
}
GaugeStrokeLineCap
enum StrokeLineCap {
Butt = "butt",
Round = "round",
Square = "square",
Inherit = "inherit"
}
CSS classes
name |
description |
---|---|
.gauge-container |
the primary container |
.gauge-wrapper |
gauge wrapper layer |
.gauge-preview |
gauge svg layer |
.gauge-value |
gauge value (if displayed) |
.gauge-label |
gauge label (if set) |
.gauge-progress-background-color |
the default arc background color |
.gauge-text-default-color |
the default text color |
.gauge-middle-base-color |
middle base color |
.gauge-midpoint-color |
middle point color |
.gauge-tick-color |
tick color |
.gauge-needle-color |
needle color |
.gauge-progress-color |
the default arc color |
.gauge-warning-progress-color |
warning color |
.gauge-critical-progress-color |
critical color |