newhome Gauge

SVG gauge with zero dependencies. Used in newhome sustainability check

Table of contents

• Usage
  • Importing in a Typescript project
  • Importing via script tag
  • Run locally
• Browser support
• Contributing
  • Build
  • Authenticate
  • Publish

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