Skip to content

Latest commit

 

History

History
25 lines (16 loc) · 918 Bytes

README.md

File metadata and controls

25 lines (16 loc) · 918 Bytes

Nikola Gauge

Proof of concept animated realtime circular gauge written in TypeScript.

Gauge animation example

Features

  • Configurable minimum and maximum, target range, font, background, size, label, and colors
  • Circular bar graph showing realtime value
  • Line graph showing historical values
  • Target range highlighted on bar and line graphs
  • Line and bar graph colors change when inside or outside target range

Demo

https://coreyshuman.github.io/nikola-gauge/dist/index.html

The demo currently shows two gauges using different size canvas and different configurations for range and target. The ring becomes red if the value is under target, and green when over. The historical line graph is green when within target and red when outside target range.

Running the Project

  1. Install dependencies - yarn
  2. Build and Serve - yarn run serve
  3. Visit - http://127.0.0.1:8080