newhome Gauge
SVG gauge with zero dependencies. Used in newhome sustainability check
Table of contents
Usage
<div class="newhome-gauge">
<div class="newhome-gauge__container">
<svg xmlns="http://www.w3.org/2000/svg" width="290" height="290" viewbox="0 0 290 290" class="newhome-gauge__svg js-newhome-gauge">
<circle class="newhome-gauge__circle newhome-gauge__circle--above" />
<circle class="newhome-gauge__circle newhome-gauge__circle--mid" />
<circle class="newhome-gauge__circle newhome-gauge__circle--below" />
</svg>
<div class="newhome-gauge__control">
<div class="newhome-gauge__needle">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="154" viewBox="0 0 8 154" class="js-newhome-gauge-needle">
<polygon id="needle" points="4 0 5 1 8 150 4 154 0 150 3 1 4 0" />
</svg>
</div>
</div>
</div>
</div>
Importing in a Typescript project
npm install @exanic/newhome-gauge
import NewhomeGauge from '@exanic/newhome-gauge';
var myGauge = new NewhomeGauge();
// Init gauge
if (myGauge.init()) {
// Set sections according to your circle elements in percent
myGauge.setSections([35, 5, 60]);
// Set status of the needle in percent
myGauge.setStatus(29);
}
Importing via script tag
<script src="newhome-gauge.js"></script>
var NewhomeGauge = NewhomeGauge.default;
var myGauge = new NewhomeGauge();
// Init gauge
if (myGauge.init()) {
// Set sections according to your circle elements in percent
myGauge.setSections([35, 5, 60]);
// Set status of the needle in percent
myGauge.setStatus(29);
}
Run locally
npm run start
This will start a web server on localhost:8080
Browser Support
All modern browser are supported.
IE 11 is only supported if the gsap core library is loaded on your page. That way shortcomings with transforms and transform-origin on SVG elements are fixed.
Contributing
Here's how to contribute to this package and publish new versions.
Run
Run the project by running the following command
npm run start
Build
Build your changes by running the following command
npm run build
Authenticate
Login with your npmjs.com account. Your account must be a member of the exanic
organisation.
npm login
Publish
Increase the version number in package.json
and publish the package to npmjs.com
npm publish
The updated version should now be available under https://www.npmjs.com/package/@exanic/newhome-gauge