Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Dependencies): Update dependency ng2-charts to v6 #6129

Merged
merged 3 commits into from
Sep 4, 2024
Merged

feat(Dependencies): Update dependency ng2-charts to v6 #6129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
92ee815
feat(Dependencies): Update dependency ng2-charts to v6
renovate[bot] Sep 4, 2024
67c2573
updated
dweinholz Sep 4, 2024
ceea116
added spinner to numbers
dweinholz Sep 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 11 additions & 10 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@denbi/cloud-portal-webapp",
"version": "4.873.0",
"version": "4.874.0",
"description": "de.NBI Cloud Portal",
"scripts": {
"ng": "ng serve",
Expand Down Expand Up @@ -60,7 +60,7 @@
"keypairs": "1.2.14",
"mime": "4.0.4",
"moment": "2.30.1",
"ng2-charts": "5.0.4",
"ng2-charts": "6.0.1",
"ng2-cookies": "1.0.12",
"ngx-bootstrap": "18.0.2",
"ngx-clipboard": "16.0.0",
Expand Down
4 changes: 2 additions & 2 deletions src/app/app.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { BrowserModule, Title } from '@angular/platform-browser'
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
import { TabsModule } from 'ngx-bootstrap/tabs'
import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
import { NgChartsModule } from 'ng2-charts'
import { provideCharts, withDefaultRegisterables } from 'ng2-charts'
import { ModalModule } from 'ngx-bootstrap/modal'
import { PaginationModule } from 'ngx-bootstrap/pagination'
import { ClipboardModule } from 'ngx-clipboard'
Expand Down Expand Up @@ -73,7 +73,6 @@ import { TitleService } from './title.service'
CommonModule,
BsDropdownModule.forRoot(),
TabsModule.forRoot(),
NgChartsModule,
ModalModule.forRoot(),
PaginationModule.forRoot(),
SharedModuleModule,
Expand Down Expand Up @@ -110,6 +109,7 @@ import { TitleService } from './title.service'
provide: ErrorHandler,
useClass: UncaughtExceptionHandler
},
provideCharts(withDefaultRegisterables()),
ApiSettings,
UserService,
CookieService,
Expand Down
2 changes: 0 additions & 2 deletions src/app/projectmanagement/projectmanagement.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { CommonModule } from '@angular/common'
import { ModalModule } from 'ngx-bootstrap/modal'
import { FormsModule } from '@angular/forms'
import { AccordionModule } from 'ngx-bootstrap/accordion'
import { NgChartsModule } from 'ng2-charts'
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
import { AlertModule } from 'ngx-bootstrap/alert'
import { NgSelectModule } from '@ng-select/ng-select'
Expand Down Expand Up @@ -40,7 +39,6 @@ import { WithdrawModalComponent } from './modals/withdraw/withdraw-modal.compone
ModalModule.forRoot(),
ApplicationsModule,
SharedDirectivesModule,
NgChartsModule,
PipeModuleModule,
BsDropdownModule,
AlertModule,
Expand Down
162 changes: 87 additions & 75 deletions src/app/vo_manager/number-charts/number-charts.component.html
View file
Open in desktop
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
Open in desktop
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
Loading