Thermometer

Contents

• Thermometer

  • Example

  • Parameters

  • CSS classes

  • CSS Example

React component. Provides a termometer visualization component.

If showValue parameter is used, the component additionally accepts all parameters of ItemValue.

Example

import { Thermometer } from "@eva-ics/webengine-react";

const MyComponent = () => {
  return (
    <>
      <Thermometer
        oid="sensor:tests/temp"
        minValue={0}
        maxValue={100}
        critValue={70}
        warnValue={40}
        units="&#8451;"
        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
formula	string	no	value modification formula e.g. “x/1000”
digits	number	no	round digits after comma
label	string	no	Bottom label
showValue	boolean	no	Display item value
warnValue	number	no	Thermometer warning upper threshold
critValue	number	no	Thermometer critical upper threshold
lowWarnValue	number	no	Thermometer warning lower threshold
lowCritValue	number	no	Thermometer critical lower threshold
showMinMax	number	no	Show min/max tick labels
engine	Eva	no	WebEngine object (if no default set)

CSS classes

name	description
.eva-thermometer-container	the primary container
.eva-thermometer-progress-container	the bar container
.eva-thermometer-seperator	bar separator ticks
.eva-thermometer-min-value	min. value tick label
.eva-thermometer-max-value	max. value tick label
.eva-thermometer-values-container	label/value container
.eva-thermometer-label	label class
.eva-thermometer-progress-color	the default bar color
.eva-thermometer-warning-progress-color	warning color
.eva-thermometer-critical-progress-color	critical color

CSS Example

.eva-thermometer-container {
  position: relative;
  width: 100%;
}

.eva-thermometer-min-value {
  margin-left: -20px;
  color: #c1c1c1;
  font-size: 12px;
  font-style: normal;
}

.eva-thermometer-progress-container {
  position: relative;
  width: 10px;
  height: 100px;
  background-color: #F3F3F3;
  transform: rotate(180deg);
}

.eva-thermometer-max-value {
  margin-left: -20px;
  color: #c1c1c1;
  font-size: 12px;
  font-style: normal;
}

.eva-thermometer-separator {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  color: #c1c1c1;
  right: -8px;
  top: 0;
  height: 100%;
}

.eva-thermometer-values-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin-top: 5px;
  font-weight: normal;
  color: #c1c1c1;
}

.eva-thermometer-label {
  margin: 0;
}

.eva-thermometer-progress-color {
  background-color: #02CA2E;
}

.eva-thermometer-warning-progress-color {
  background-color: #F19F00;
}

.eva-thermometer-critical-progress-color {
  background-color: #E71B21;
}