]>
Commit | Line | Data |
---|---|---|
11fdf7f2 TL |
1 | import { Component, Input, OnChanges } from '@angular/core'; |
2 | ||
20effc67 TL |
3 | import _ from 'lodash'; |
4 | ||
11fdf7f2 TL |
5 | @Component({ |
6 | selector: 'cd-usage-bar', | |
7 | templateUrl: './usage-bar.component.html', | |
8 | styleUrls: ['./usage-bar.component.scss'] | |
9 | }) | |
10 | export class UsageBarComponent implements OnChanges { | |
11 | @Input() | |
f6b5b4d7 | 12 | total: number; |
11fdf7f2 | 13 | @Input() |
33c7a0ef | 14 | used: any; |
f6b5b4d7 | 15 | @Input() |
20effc67 TL |
16 | warningThreshold: number; |
17 | @Input() | |
18 | errorThreshold: number; | |
19 | @Input() | |
f6b5b4d7 TL |
20 | isBinary = true; |
21 | @Input() | |
22 | decimals = 0; | |
33c7a0ef TL |
23 | @Input() |
24 | calculatePerc = true; | |
39ae355f TL |
25 | @Input() |
26 | title = $localize`usage`; | |
aee94f69 TL |
27 | @Input() |
28 | customLegend?: string; | |
29 | @Input() | |
30 | customLegendValue?: string; | |
31 | @Input() | |
32 | showFreeToolTip = true; | |
33 | @Input() | |
34 | showMultisiteTooltip = false; | |
11fdf7f2 TL |
35 | |
36 | usedPercentage: number; | |
37 | freePercentage: number; | |
11fdf7f2 | 38 | |
11fdf7f2 | 39 | ngOnChanges() { |
33c7a0ef TL |
40 | if (this.calculatePerc) { |
41 | this.usedPercentage = this.total > 0 ? (this.used / this.total) * 100 : 0; | |
42 | this.freePercentage = 100 - this.usedPercentage; | |
43 | } else { | |
44 | if (this.used) { | |
45 | this.used = this.used.slice(0, -1); | |
46 | this.usedPercentage = Number(this.used); | |
47 | this.freePercentage = 100 - this.usedPercentage; | |
48 | } else { | |
49 | this.usedPercentage = 0; | |
50 | } | |
51 | } | |
11fdf7f2 TL |
52 | } |
53 | } |