> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/basic/gauge.md).

# Gauge

## Usage

**app.html**

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

**app.ts**

```typescript
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**

```css
/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                                          |