Skip to content

Commit

Permalink
added spinner to numbers
Browse files Browse the repository at this point in the history
  • Loading branch information
@dweinholz
dweinholz committed Sep 4, 2024
1 parent 67c2573 commit ceea116
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 78 deletions.
162 changes: 87 additions & 75 deletions src/app/vo_manager/number-charts/number-charts.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,89 +3,101 @@
<div class="card">
<div class="card-header">Project Numbers</div>
<div class="card-body">
<div id="projectNumbersBarChart" [class.hidden]="!showProjectNumbersBarChart"></div>
<div id="projectNumbersAreaChart" [class.hidden]="!showProjectNumbersAreaChart"></div>
<div class="btn-group">
<button
class="btn btn-outline-primary"
*ngIf="showProjectNumbersBarChart"
(click)="downloadAsPNG('projectNumbersBarChart', 'projectNumbers')"
>
Download as PNG
</button>
<button
class="btn btn-outline-primary"
*ngIf="showProjectNumbersAreaChart"
(click)="downloadAsPNG('projectNumbersAreaChart', 'projectNumbers')"
>
Download as PNG
</button>
<!--<button class="btn btn-outline-primary"
(click)="downloadAsPDF('projectNumbersSVG', 'projectNumbers')">
Download as PDF
</button>-->
<button class="btn btn-outline-primary" (click)="toggleGraph('projects')">
{{ !this.showProjectNumbersAreaChart ? 'show as area chart' : 'show as bar chart' }}
</button>
</div>
@if (generatingNumbersCharts) {
<span class="spinner-border text-info"></span>
} @else {
<div id="projectNumbersBarChart" [class.hidden]="!showProjectNumbersBarChart"></div>
<div id="projectNumbersAreaChart" [class.hidden]="!showProjectNumbersAreaChart"></div>
<div class="btn-group">
<button
class="btn btn-outline-primary"
*ngIf="showProjectNumbersBarChart"
(click)="downloadAsPNG('projectNumbersBarChart', 'projectNumbers')"
>
Download as PNG
</button>
<button
class="btn btn-outline-primary"
*ngIf="showProjectNumbersAreaChart"
(click)="downloadAsPNG('projectNumbersAreaChart', 'projectNumbers')"
>
Download as PNG
</button>
<!--<button class="btn btn-outline-primary"
(click)="downloadAsPDF('projectNumbersSVG', 'projectNumbers')">
Download as PDF
</button>-->
<button class="btn btn-outline-primary" (click)="toggleGraph('projects')">
{{ !showProjectNumbersAreaChart ? 'show as area chart' : 'show as bar chart' }}
</button>
</div>
}
</div>
</div>
<div class="card">
<div class="card-header">Cloud Resources</div>
<div class="card-body">
<div id="ramBarChart" [class.hidden]="!showRamBarChart"></div>
<div id="ramAreaChart" [class.hidden]="!showRamAreChart"></div>
<div class="btn-group">
<button
class="btn btn-outline-primary"
*ngIf="showRamBarChart"
(click)="downloadAsPNG('ramBarChart', 'resourcesRamNumbers')"
>
Download as PNG
</button>
<button
class="btn btn-outline-primary"
*ngIf="showRamAreChart"
(click)="downloadAsPNG('ramAreaChart', 'resourcesRamNumbers')"
>
Download as PNG
</button>
<!--<button class="btn btn-outline-primary"
(click)="downloadAsPDF('ramNumbersSVG', 'resourcesRamNumbers')">
Download as PDF
</button>-->
<button class="btn btn-outline-primary" (click)="toggleGraph('ram')">
{{ !this.showRamAreChart ? 'show as area chart' : 'show as bar chart' }}
</button>
</div>
@if (generatingRamsCharts) {
<span class="spinner-border text-info"></span>
} @else {
<div id="ramBarChart" [class.hidden]="!showRamBarChart"></div>
<div id="ramAreaChart" [class.hidden]="!showRamAreChart"></div>
<div class="btn-group">
<button
class="btn btn-outline-primary"
*ngIf="showRamBarChart"
(click)="downloadAsPNG('ramBarChart', 'resourcesRamNumbers')"
>
Download as PNG
</button>
<button
class="btn btn-outline-primary"
*ngIf="showRamAreChart"
(click)="downloadAsPNG('ramAreaChart', 'resourcesRamNumbers')"
>
Download as PNG
</button>
<!--<button class="btn btn-outline-primary"
(click)="downloadAsPDF('ramNumbersSVG', 'resourcesRamNumbers')">
Download as PDF
</button>-->
<button class="btn btn-outline-primary" (click)="toggleGraph('ram')">
{{ !this.showRamAreChart ? 'show as area chart' : 'show as bar chart' }}
</button>
</div>
}
</div>
<div class="card-body">
<div id="coresBarChart" [class.hidden]="!showCoresBarChart"></div>
<div id="coresAreaChart" [class.hidden]="!showCoresAreChart"></div>
@if (generatingCoresCharts) {
<span class="spinner-border text-info"></span>
} @else {
<div id="coresBarChart" [class.hidden]="!showCoresBarChart"></div>
<div id="coresAreaChart" [class.hidden]="!showCoresAreChart"></div>

<div class="btn-group">
<button
class="btn btn-outline-primary"
*ngIf="showCoresBarChart"
(click)="downloadAsPNG('coresBarChart', 'resourcesCoresNumbers')"
>
Download as PNG
</button>
<button
class="btn btn-outline-primary"
*ngIf="showCoresAreChart"
(click)="downloadAsPNG('coresAreaChart', 'resourcesCoresNumbers')"
>
Download as PNG
</button>
<!--<button class="btn btn-outline-primary"
(click)="downloadAsPDF('coresNumbersSVG', 'resourcesCoresNumbers')">
Download as PDF
</button>-->
<button class="btn btn-outline-primary" (click)="toggleGraph('cores')">
{{ !this.showCoresAreChart ? 'show as area chart' : 'show as bar chart' }}
</button>
</div>
<div class="btn-group">
<button
class="btn btn-outline-primary"
*ngIf="showCoresBarChart"
(click)="downloadAsPNG('coresBarChart', 'resourcesCoresNumbers')"
>
Download as PNG
</button>
<button
class="btn btn-outline-primary"
*ngIf="showCoresAreChart"
(click)="downloadAsPNG('coresAreaChart', 'resourcesCoresNumbers')"
>
Download as PNG
</button>
<!--<button class="btn btn-outline-primary"
(click)="downloadAsPDF('coresNumbersSVG', 'resourcesCoresNumbers')">
Download as PDF
</button>-->
<button class="btn btn-outline-primary" (click)="toggleGraph('cores')">
{{ !this.showCoresAreChart ? 'show as area chart' : 'show as bar chart' }}
</button>
</div>
}
</div>
</div>
</div>
15 changes: 12 additions & 3 deletions src/app/vo_manager/number-charts/number-charts.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ export class NumberChartsComponent implements OnInit {
is_vo_admin: boolean = true
title: string = 'Cloud Numbers'

constructor(private numbersService: NumbersService) {
this.numbersService = numbersService
}
constructor(private numbersService: NumbersService) {}

/**
* Charts
Expand All @@ -41,6 +39,9 @@ export class NumberChartsComponent implements OnInit {
showRamAreChart: boolean = true
showProjectNumbersAreaChart: boolean = true
showProjectNumbersBarChart: boolean = false
generatingNumbersCharts: boolean = true
generatingRamsCharts: boolean = true
generatingCoresCharts: boolean = true

/**
* Lists for numbers of projects per project type and status.
Expand Down Expand Up @@ -141,6 +142,8 @@ export class NumberChartsComponent implements OnInit {
* Draws the cores Chart into the template.
*/
drawCoresNumbersChart(): void {
this.generatingCoresCharts = true

this.coresAreaChart = bb.generate({
bindto: '#coresAreaChart',
size: {
Expand Down Expand Up @@ -228,13 +231,16 @@ export class NumberChartsComponent implements OnInit {
show: false
}
})
this.generatingCoresCharts = false
}

/**
* Maybe refactor, so only one function is necessary and independent from chart to draw.
* Draws the ram Chart into the template.
*/
drawRamNumbersChart(): void {
this.generatingRamsCharts = true

this.ramAreaChart = bb.generate({
bindto: '#ramAreaChart',
size: {
Expand Down Expand Up @@ -322,12 +328,14 @@ export class NumberChartsComponent implements OnInit {
show: false
}
})
this.generatingRamsCharts = false
}

/**
* Draws the project numbers chart in the template.
*/
drawProjectNumbersChart(): void {
this.generatingNumbersCharts = true
this.projectNumbersAreaChart = bb.generate({
bindto: '#projectNumbersAreaChart',
size: {
Expand Down Expand Up @@ -431,6 +439,7 @@ export class NumberChartsComponent implements OnInit {
show: false
}
})
this.generatingNumbersCharts = false
}

toggleGraph(chart: string): void {
Expand Down

0 comments on commit ceea116

Please sign in to comment.