Create Minimal Dial Gauges With JavaScript And SVG

Preview:

Description:

A lightweight and easy-to-use web component to help create minimal clean dial gauges using SVG and plain JavaScript.

It can be used for a variety of applications, from progress indicators to graphical display of real-time numeric data.

How to use it:

1. Install and import the dial-gauge component.

# NPM
$ npm i dial-gauge

<script type="module">
  import {DialGauge} from './dial-gauge.js';
</script>

2. Add the dial-gauge component to the page and customize the gauge with the following props:

• main-title: Title displayed on the top
• sub-title: Title displayed at the bottom
• scale-start: Minimum value
• scale-end: Maximum value
• value: Current value
• scale-offset: custom bottom offset

<dial-gauge 
  main-title="Top" 
  sub-title="Bottom" 
  scale-start="0" 
  scale-end="100" 
  value="80"
  scale-offset="30">
</dial-gauge>

3. Customize the styles of the gauge.

dial-gauge {
  /* Element */
  --dg-background-color: #ffffff;
  --dg-border: 1px solid #000000;
  --dg-border-radius: 5px;
  --dg-box-shadow: 3px 3px 5px 1px rgba(0,0,0,0.35);
  --dg-display: inline-block;
  --dg-height: 200px;
  --dg-margin: 0;
  --dg-width: 200px;
  --dg-z-index: 0;
  /* Title */
  --dg-title-color: #000000;
  --dg-title-font-family: Verdana, Geneva, Tahoma, sans-serif;
  --dg-title-font-size: 1.5em;
  /* Dial Arc */
  --dg-arc-background-color: #efefef;
  --dg-arc-color: #000000;
  --dg-arc-width: 20;
  /* Numeric Display */
  --dg-numeric-color: #000000;
  --dg-numeric-font-family: Verdana, Geneva, Tahoma, sans-serif;
  --dg-numeric-font-size: 2.5em;
  /* Subtitle */
  --dg-subtitle-color: #000000;
  --dg-subtitle-font-family: Verdana, Geneva, Tahoma, sans-serif;
  --dg-subtitle-font-size: 1em;
}

Changelog:

v0.1.5 (12/15/2023)

• Bugfix

v0.1.4 (12/11/2023)

• Added :host() pseudo-class for direct access to shadow DOM CSS.
• Implemented an AdoptedStylesheet.
• Added custom-element.json file reference to package.json.

v0.1.3 (11/10/2023)

• Added scale offset attribute.
• Fixed value out of scale limit when scale changed.

v0.1.2 (03/06/2023)

• Fixed a bug where repeating values were not displayed.
• Added handling of values outside the scale limits.