react-sensor-meters

2.0.2 • Public • Published

react-sensor-meters

Meter-like components for building homemade dashboards for your data loggers.

Demo

LIVE DEMO!!!

GitHub ( PRs welcome! :) )

https://github.com/chrismilheim/react-sensor-meters

I could not find React components that suited my needs for my Arduino/Nodemcu data logger dashboards, so I decided to publish the ones I've made. Hopefully you will also find value in some of them. Feel free to open a PR for new meters/fixes to existing meters/fixes to anything broken.

Shoutout to https://www.svgrepo.com for providing the svg files.

alt text

Install

npm install react-sensor-meters

Import Example
import { TempSimple, Battery, HumidityDropPercent } from "react-sensor-meters";

Possible values for import:

  • TempLines
  • TempRound
  • TempSimple
  • H20Drop
  • WaterPlant
  • LightThick
  • HumidityDropPercent
  • AirQualityMask
  • AirQualityVent
  • Battery
  • CarBattery
  • BasicCircle
  • BasicRectangle
  • NEW! BasicNumber
  • NEW! BasicList
Props (*_ in Prop Name = required _)
Prop Name Value Type Description Possible Values Examples
data* Number Value to be displayed. Any Number 58
topEndDataLimit * Number Max value of data. Any Number 1000
date* String Value to be displayed. Any String "" or "12/25/2024" or "12/25/2024 11:45AM"
animate Boolean Animates the fill of the meter. true/false true
neon String Removes backfill on meter leaving only outline. null, border, noBorder "border"
fillColor String Color of the fill. Any string that can translate to a color "grey" or "#ffff" or"rgba(1,1,1,1)"
highFillColor String Use with highFillThreshhold. Changes fill color after a certian amount. Any string that can translate to a color “grey” or “#ffff” or”rgba(1,1,1,1)”
highFillThreshold Number Use with highFillColor. Sets the threshhold for fill color change. Any number 90
backFillColor String Back fill color of meter. Any string that can translate to a color “grey” or “#ffff” or”rgba(1,1,1,1)”
dotColor String Special features of meter that do not fill (not all meters have one). Any string that can translate to a color “grey” or “#ffff” or”rgba(1,1,1,1)”
gaugeSize String Sets the size of the meter. small,medium,large medium
valueColor String Changes the color of the value displayed. Any string that can translate to a color "grey” or “#ffff” or”rgba(1,1,1,1)”
labelColor String Changes the color of the label text. Any string that can translate to a color "grey” or “#ffff” or”rgba(1,1,1,1)”
cardColor String Changes the color of the div the gauge is on. Any string that can translate to a color "grey” or “#ffff” or”rgba(1,1,1,1)”
hover Boolean On hover it increases meter size. true/false true
labelText String Text to be displayed under meter. Any string value "Garage" or "Family Room"
borderColor String Color of the border of meter. Any string that can translate to a color “grey” or “#ffff” or”rgba(1,1,1,1)”

Default colors are black on white if only using the required props.

alt text

Meters

TempLines

alt text

<TempLines
  data={85}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={false}
  neon={""}
  fillColor={"rgb(182, 25, 13)"}
  backFillColor={"green"}
  valueColor={"rgb(48, 13, 10)"}
  labelColor={"orange"}
  cardColor={"grey"}
  dotColor={"purple"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"TempLines"}
  highFillColor={"purple"}
  highFillThreshold={95}
/>

TempRound

alt text

<TempRound
  data={96}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"red"}
  backFillColor={"orange"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"blue"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"TempRound"}
  highFillColor={"purple"}
  highFillThreshold={95}
/>

TempSimple

alt text

<TempSimple
  data={92}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"rgba(49, 78, 55, 0.627)"}
  backFillColor={"rgba(43, 42, 42, 0.627)"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"blue"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"TempSimple"}
  highFillColor={"purple"}
  highFillThreshold={95}
  borderColor={"purple"}
/>

H20Drop

!!!! IMPORTANT !!!!!: Water detecting sensors work on an inverse. The higher the number means there is no presense of water. The lower the number means more of a presense of water. This corresponds to the resistance of the sensor.

This component operates on that principal. Give it a higher number, the meter will have low fill. Give it a lower number the meter will have more fill.

alt text

<H2ODrop
  data={1000}
  topEndDataLimit={2000}
  date={"12/24/2024"}
  animate={false}
  neon={""}
  fillColor={"blue"}
  backFillColor={"green"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"black"}
  hover={false}
  gaugeSize={"medium"}
  labelText={"H20Drop"}
/>

WaterPlant

!!!! IMPORTANT !!!!!: Water detecting sensors work on an inverse. The higher the number means there is no presense of water. The lower the number means more of a presense of water. This corresponds to the resistance of the sensor.

This component operates on that principal. Give it a higher number, the meter will have low fill. Give it a lower number the meter will have more fill.

This meter changes the color of the plant leaves as water depletes. 100% - 60% green leaves = plant is watered, 60% - 30% brown leaves = plant should be watered soon, 30% - 0% black leaves = plant has no water.

alt text

<WaterPlant
  data={400}
  topEndDataLimit={2000}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"blue"}
  backFillColor={"green"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"teal"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"WaterPlant"}
/>

LightThick

alt text

<LightThick
  data={80}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={" yellow "}
  backFillColor={"lightgrey"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"black"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"LightThick"}
/>

HumidityDropPercent

alt text

<HumidityDropPercent
  data={22}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"lightblue"}
  backFillColor={"rgba(43, 42, 42, 0.627)"}
  valueColor={"blue"}
  labelColor={"black"}
  cardColor={"white"}
  dotColor={"blue"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"HumidityDropPercent "}
  highFillColor={"purple"}
  highFillThreshold={95}
  borderColor={"lightGreen"}
/>

AirQualityMask

alt text

<AirQualityMask
  data={50}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={" yellow "}
  backFillColor={"lightgrey"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"teal"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"AirQualityMask"}
/>

AirQualityVent

alt text

<AirQualityVent
  data={100}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={" grey "}
  backFillColor={"lightgrey"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"teal"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"AirQualityVent"}
/>

Battery

alt text

<Battery
  data={90}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"lightgreen"}
  backFillColor={"green"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"teal"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"Battery "}
  highFillThreshold={80}
/>

CarBattery

alt text

<CarBattery
  data={90}
  topEndDataLimit={120}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"black"}
  backFillColor={"grey"}
  valueColor={"black"}
  labelColor={"black"}
  cardColor={"white"}
  dotColor={"teal"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"CarBattery"}
  highFillThreshold={80}
/>

BasicCircle

alt text

<BasicCircle
  data={900}
  topEndDataLimit={1220}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"lightgreen"}
  backFillColor={"green"}
  valueColor={"black"}
  labelColor={"black"}
  cardColor={"white"}
  dotColor={"teal"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"BasicCircle"}
  highFillColor={"purple"}
  highFillThreshold={80}
/>

BasicRectangle

alt text

<BasicRectangle
  data={500}
  topEndDataLimit={1000}
  date={"12/24/2024"}
  animate={true}
  neon={""}
  fillColor={"lightgreen"}
  backFillColor={"green"}
  valueColor={"blue"}
  labelColor={"blue"}
  cardColor={"white"}
  dotColor={"teal"}
  hover={true}
  gaugeSize={"medium"}
  labelText={"BasicRectangle"}
  highFillThreshold={80}
/>
Build NPM Package

From the root folder run:

npm run build-lib

Package Sidebar

Install

npm i react-sensor-meters

Weekly Downloads

11

Version

2.0.2

License

MIT

Unpacked Size

137 kB

Total Files

6

Last publish

Collaborators

  • chrismilheim