Author: | smontanus |
---|---|
Views Total: | 623 views |
Official Page: | Go to website |
Last Update: | December 15, 2023 |
License: | MIT |
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.