hawkgs / ng2-gauge

⏲ SVG gauge component for Angular

ng2-gauge

SVG gauge component for Angular

Suitable for building virtual dashboards (initially designed for that).

v1.3.2 | CHANGELOG

Installation

npm install ng2-gauge --save

How to?

You should import the GaugeModule to your desired module:

import { NgModule } from '@angular/core';
import { GaugeModule } from 'ng2-gauge';

@NgModule({
  imports: [CommonModule, GaugeModule],
})
export class SharedModule {}

Then you can simply use the component in your template:

@Component({
  selector: 'app-my-component',
  template: `
    <ng2-gauge
      [max]="9000"
      [value]="value$ | async"
    </ng2-gauge>`,
})
export class MyComponent {
  value$: Observable<number>;
}

Options

The component provides a list of the following options:

• max: number (required) – The maximal value of the gauge. It is suggested to use a number that is divisible by 10^n (e.g. 100, 1000, etc.)
• value: number – The current value of the gauge
• unit: string – The unit of the gauge (i.e. mph, psi, etc.)
• size: number – Size/width of the gauge in pixels
• arcStart: number – The start/beginning of the scale arc in degrees. Default 225
• arcEnd: number – The end of the scale arc in degrees. Default: 135
• digitalDisplay: boolean – Displays the current value as digital number inside the gauge
• darkTheme: boolean – Enables the dark theme
• activateRedLightAfter: number - Shows a red light when the specified limit is reached
• sectors: Sectors[] – Defines the coloring of specified sectors
• config: GaugeConfig (Not recommended) – Alters the default configuration; This may lead to unexpected behavior; GaugeConfig

Sectors

Sectors are used for marking parts of the arc with a different color.

Example:

const max = 9000;
const sectors = [
  {
    from: 6500,
    to: 8000,
    color: 'orange',
  },
  {
    from: 8000,
    to: 9000,
    color: 'red',
  },
];

Styling

The component provides two themes - light (default) and dark. Yet, you can easily alter the CSS through the parent component in order to fit your needs. The font used for the gauge is Orbitron (Google Fonts).

ng2-gauge's Issues

Error on prod mode

I got this error when building in production mode

[19:43:52] typescript error ng2-gauge/ng2-gauge.ts(6,2): Error during template compile of 'GaugeModule' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule' 'NgModule' calls 'ɵmakeDecorator'.

Dynamically set sectors

Unable to set sectors dynamically

Error during template compile of 'GaugeModule'

I'm getting the following error when I run yarn build command:

ERROR in ng2-gauge/ng2-gauge.ts(6,2): Error during template compile of 'GaugeModule'
Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
'NgModule' calls 'ɵmakeDecorator'.

My package configuration:
"dependencies": {
"@angular/animations": "6.0.4",
"@angular/common": "6.0.4",
"@angular/compiler": "6.0.4",
"@angular/core": "6.0.4",
"@angular/forms": "6.0.4",
"@angular/platform-browser": "6.0.4",
"@angular/platform-browser-dynamic": "6.0.4",
"@angular/router": "6.0.4",
"core-js": "2.5.7",
"font-awesome": "4.7.0",
"jquery": "3.3.1",
"moment": "2.21.0",
"moment-locales-webpack-plugin": "^1.0.7",
"ng-circle-progress": "^1.2.0",
"ng-jhipster": "0.5.3",
"ng-recaptcha": "^3.0.5",
"ng2-gauge": "^1.1.7",
"ng2-google-charts": "^3.4.0",
"ng2-semantic-ui": "0.9.7",
"ng2-webstorage": "1.8.0",
"ngx-cookie": "2.0.1",
"ngx-infinite-scroll": "0.5.1",
"ngx-pagination": "^3.1.0",
"ngx-webstorage": "2.0.1",
"reflect-metadata": "0.1.12",
"rxjs": "6.2.0",
"rxjs-compat": "6.1.0",
"sockjs-client": "1.1.4",
"swagger-ui": "2.2.10",
"tether": "1.4.0",
"tslib": "1.9.0",
"webdriver-manager": "^12.0.6",
"webstomp-client": "1.2.0",
"zone.js": "0.8.26"
},

change color of gauge

Hello,
This is not a issue, but I'm not able to change the color of guage.
I try to copy and modify the code on that page on mycomponent.component.css and also con styles.css

What can I do?
thanks

problem in arrow css

I have to change arrow css to:
.angular-gauge rect.arrow {
transform-origin: 50% 50%;
}
It was:
transform-origin: 50% 100%;

Missing last scale value

Sometimes the last scale value is not displayed.

How to reproduce?:
For instance: max should be 25000

Fix max value not set error

The gauge prints in the console The maximal value is not set. error on load even though max is set.

Display problem with negative values

Hi Hawkgs,

I am trying to use this component and find it very attractfull but 1 issue I am finding is display does not work properly with negative values.
Let me know if there are any other alternatives.
Can you confirm?

Thanks,
Manoj

Use Renderer2

Multiple Gauges like on Demo Image

How it is possible to create a view with multiple gauges like on the demo image of the readme?

Regards

Update build status image

After updating the max property, it does not allow re-rendering the scale

I was using the component, but in my situation the maximum value could not be static.
When you updated the maximum value, the chart did not render again.

I modified the component code and got it fixed, but I'm sure I will not be the only one facing this problem. I tried to commit,
but apparently you have not left public to make modifications.

The problem is in the file: gauge.component.ts, at line 49.

was like this:

@input()
set input(val: number) {
this._input = val;
this._updateArrowPos(val);
}

modified to:

@input()
set input(val: number) {
this._input = val;
this.scaleLines = [];
this.scaleValues = [];
this._updateArrowPos(val);
this._calculateSectors();
this.scaleFactor = this.factor || this._determineScaleFactor();
this._createScale();
}

I ask you to leave the code open so that I and other people can contribute to your work.

max 2 not working

i want set max 2 . and for sectors separate 0.4 numbers. but not show labels .

Export Sector interface

... so that the end-user can use it, if he/she desires so. GaugeConfig as well.