Wondering what’s next for npm?Check out our public roadmap! »

    @biacsics/ng-canvas-gauges
    TypeScript icon, indicating that this package has built-in type declarations

    6.0.7 • Public • Published

    Angular 9+ component wrapper for @Mikhus' canvas-gauges library.

    a fork from https://github.com/MeetmeLeave/ng-canvas-gauges to support angular 9.x

    Getting Started

    1. Install the package in your angular 9 or greater app
    npm install @biacsics/ng-canvas-gauges
    
    1. Import the GaugesModule to your AppModule file and register it in the imports:
    import {BrowserModule} from '@angular/platform-browser';
    import {NgModule} from '@angular/core';
    import {AppComponent} from './app.component';
     
    import {GaugesModule} from '@biacsics/ng-canvas-gauges';
     
    @NgModule({
        declarations: [
            AppComponent,
        ],
        imports: [
            BrowserModule,
            GaugesModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule {
    }
    1. Add the linear-gauge or radial-gauge element to your template:
    <linear-gauge width="150" height="400"></linear-gauge>
    <radial-gauge width="400" height="400"></radial-gauge>

    Example gauges

    More specific examples of data binding using attributes and component properties

    <linear-gauge
        width="150"
        height="400"
        units="°C"
        title="Temperature"
        min-value="-50"
        max-value="50"
        major-ticks="[-50,-40,-30,-20,-10,0,10,20,30,40,50]"
        minor-ticks="5"
        stroke-ticks="true"
        ticks-width="15"
        ticks-width-minor="7.5"
        highlights='[ {"from": -50, "to": 0, "color": "rgba(0,0, 255, .3)"},
        {"from": 0, "to": 50, "color": "rgba(255, 0, 0, .3)"} ]'
        color-major-ticks="#ffe66a"
        color-minor-ticks="#ffe66a"
        color-title="#eee"
        color-units="#ccc"
        color-numbers="#eee"
        color-plate="#2465c0"
        color-plate-end="#327ac0"
        border-shadow-width="0"
        borders="false"
        border-radius="10"
        needle-type="arrow"
        needle-width="3"
        animation-duration="250"
        animation-rule="linear"
        animated-value="true"
        color-needle="#222"
        color-needle-end=""
        color-bar-progress="#327ac0"
        color-bar="#f5f5f5"
        bar-stroke="0"
        bar-width="8"
        bar-begin-circle="false"
        [attr.value]="myValueProperty"
      ></linear-gauge>
     
      <radial-gauge 
        [options]="myOptionsProperty"
        [value]="myValueProperty"
      ><radial-gauge>

    All canvas-gauge attributes are supported as shown above (kebab format) or programmatically (camelCase format). Learn more: https://canvas-gauges.com/documentation/user-guide/configuration


    Build

    This repo layout is based on an Angular 9.x or greater workspace consists of the ng-canvas-gauge library project and a demo angular app project.

    1. Install dependencies
    npm install
    
    1. Create an installable library (.tgz) for upload to the npm public repository or for local installation. Output is to ./dist/ng-canvas-gauges/ folder.
    npm run build:package
    

    Special Thanks

    The upgrade of this library to angular 9.x and the demos project were developed using CodeMix.

    Lohika

    For supporting development!

    Install

    npm i @biacsics/ng-canvas-gauges

    DownloadsWeekly Downloads

    129

    Version

    6.0.7

    License

    MIT

    Unpacked Size

    4.56 MB

    Total Files

    33

    Last publish

    Collaborators

    • avatar