Gauge

Usage

app.html

<cf-gauge [properties]="myGauge" [styling]="myGaugeStyles"></cf-gauge>

app.ts

myGauge = new GaugeModel({
    max: 100,
    value: 65,
    type: 'arch',
    size: 150,
    suffix: '%',
    label: 'Value in percentage',
    animationDuration: 2
});

myGaugeStyles = new GaugeStylingModel({
    container: {
        class: 'my-gauge-container-class'
    },
    gauge: {
        class: 'my-gauge-element-class'
    },
    valueContainer: {
        class: 'my-value-container-class'
    },
    value: {
        class: 'my-gauge-value-class'
    },
    prefix: {
        class: 'my-gauge-prefix-class'
    },
    suffix: {
        class: 'my-gauge-suffix-class'
    },
    label: {
        class: 'my-gauge-label-class'
    },
});

app.scss

/deep/ {
    .demo-gages {
        display: flex;
        justify-content: space-around;
    }
    .my-gauge-container-class {
        padding: 20px;
        background: #456;
        border: 10px solid #345;
        .cf-gauge-bar {
            stroke: #345;
            stroke-width: 80;
            stroke-dasharray: 10 14;
        }
        .cf-gauge-track {
            stroke: #2fe3ff;
            stroke-width: 100;
            stroke-dasharray: 10 14;
        }
        .my-gauge-value-class,
        .my-gauge-prefix-class,
        .my-gauge-suffix-class,
        .my-gauge-label-class {
            color: #2fe3ff;
        }
        .mat-input-underline .mat-input-ripple {
            background-color: #2fe3ff;
        }
    }
}

Input Properties

Attr	Type	Details
max	number	Maximum integer value of gauge
value	number	Current integer value of gauge
inputValue	boolean	Able gauge to input it value
label	string	Label of gauge
prefix	string	Prefix to gauge value
suffix	string	Suffix to gauge value
type	string	Type value of gauge. Can be: full, arch, semi. Default is full.
size	number	Size for width/height of gauge. It means number of pixels.
animationDuration	number	Animation duration of gauge in seconds