diff --git a/src/app/components/admin-navbar/admin-navbar.component.ts b/src/app/components/admin-navbar/admin-navbar.component.ts index 8216d098..1a7e4198 100644 --- a/src/app/components/admin-navbar/admin-navbar.component.ts +++ b/src/app/components/admin-navbar/admin-navbar.component.ts @@ -54,6 +54,10 @@ export class AdminNavbarComponent { { title: 'All salaries', url: '/admin/salaries' + }, + { + title: 'Salaries adding chart', + url: '/admin/salaries/salaries-adding-trend-chart' } ] }, diff --git a/src/app/modules/admin/admin-routing.module.ts b/src/app/modules/admin/admin-routing.module.ts index 90e8b7bb..0fdf865a 100644 --- a/src/app/modules/admin/admin-routing.module.ts +++ b/src/app/modules/admin/admin-routing.module.ts @@ -6,6 +6,7 @@ import { InterviewTemplatesAdminPageComponent } from './components/interviews/in import { AllOrganizationsAdminComponent } from './components/organizations/all-organizations-admin/all-organizations-admin.component'; import { UsersAdminPageComponent } from './components/users/users-admin-page/users-admin-page.component'; import { SalariesAdminPageComponent } from './components/salaries/salaries-admin-page/salaries-admin-page.component'; +import { SalariesAddingChartComponent } from './components/salaries/salaries-adding-chart/salaries-adding-chart.component'; const routes: Routes = [ { path: '', component: AdminStartPageComponent }, @@ -13,7 +14,8 @@ const routes: Routes = [ { path: 'interview-templates', component: InterviewTemplatesAdminPageComponent }, { path: 'background-jobs', component: BackgroundJobsComponent }, { path: 'organizations', component: AllOrganizationsAdminComponent }, - { path: 'salaries', component: SalariesAdminPageComponent } + { path: 'salaries', component: SalariesAdminPageComponent }, + { path: 'salaries/salaries-adding-trend-chart', component: SalariesAddingChartComponent }, ]; @NgModule({ diff --git a/src/app/modules/admin/admin.module.ts b/src/app/modules/admin/admin.module.ts index 31dbd104..a117455a 100644 --- a/src/app/modules/admin/admin.module.ts +++ b/src/app/modules/admin/admin.module.ts @@ -12,6 +12,7 @@ import { UsersAdminPageComponent } from './components/users/users-admin-page/use import { AllOrganizationsAdminComponent } from './components/organizations/all-organizations-admin/all-organizations-admin.component'; import { AdminStartPageComponent } from './components/admin-start-page/admin-start-page.component'; import { SalariesAdminPageComponent } from './components/salaries/salaries-admin-page/salaries-admin-page.component'; +import { SalariesAddingChartComponent } from './components/salaries/salaries-adding-chart/salaries-adding-chart.component'; @NgModule({ declarations: [ @@ -22,7 +23,8 @@ import { SalariesAdminPageComponent } from './components/salaries/salaries-admin UsersAdminPageComponent, AllOrganizationsAdminComponent, AdminStartPageComponent, - SalariesAdminPageComponent + SalariesAdminPageComponent, + SalariesAddingChartComponent, ], imports: [CommonModule, SharedModule, AdminRoutingModule, FormsModule, ReactiveFormsModule] }) diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html new file mode 100644 index 00000000..0f03acff --- /dev/null +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.html @@ -0,0 +1,15 @@ +All salaries chart + +
+
+
+ +
+
+ {{ chart }} +
+
+ +
+
+
diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.scss b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.scss new file mode 100644 index 00000000..260e2ae6 --- /dev/null +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.scss @@ -0,0 +1,10 @@ +#canvas { + min-height: 400px; +} + +#canvas-container { + position: relative; + width: 100%; + height: 100%; + min-height: 400px; +} diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.spec.ts b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.spec.ts new file mode 100644 index 00000000..1348dd1d --- /dev/null +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.spec.ts @@ -0,0 +1,29 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { UserAdminService } from '@services/user-admin.service'; +import { mostUsedImports, testUtilStubs, mostUsedServices } from '@shared/test-utils'; +import { SalariesAddingChartComponent } from './salaries-adding-chart.component'; + +describe('SalariesAddingChartComponent', () => { + let component: SalariesAddingChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SalariesAddingChartComponent], + imports: [...mostUsedImports], + providers: [...testUtilStubs, ...mostUsedServices, UserAdminService], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(SalariesAddingChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts new file mode 100644 index 00000000..841e2a49 --- /dev/null +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.component.ts @@ -0,0 +1,37 @@ +import { Component, OnDestroy, OnInit } from '@angular/core'; +import { TitleService } from '@services/title.service'; +import { SalariesAddingTrendAdminChart, UserSalariesService } from '@services/user-salaries.service'; +import { untilDestroyed } from '@shared/subscriptions/until-destroyed'; +import { SalariesAddingChart } from './salaries-adding-chart'; + +@Component({ + templateUrl: './salaries-adding-chart.component.html', + styleUrl: './salaries-adding-chart.component.scss' +}) +export class SalariesAddingChartComponent implements OnInit, OnDestroy { + + data: SalariesAddingTrendAdminChart | null = null; + chart: SalariesAddingChart | null = null; + + constructor( + private readonly service: UserSalariesService, + private readonly titleService: TitleService) { + this.titleService.setTitle('All salaries chart'); + } + + ngOnInit(): void { + + this.chart = null; + this.service + .addingSalariesaTrendAdminChart() + .pipe(untilDestroyed(this)) + .subscribe((x) => { + this.data = x; + this.chart = new SalariesAddingChart('canvas', this.data); + }); + } + + ngOnDestroy(): void { + // ignored + } +} diff --git a/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.ts b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.ts new file mode 100644 index 00000000..00c3b4c0 --- /dev/null +++ b/src/app/modules/admin/components/salaries/salaries-adding-chart/salaries-adding-chart.ts @@ -0,0 +1,63 @@ +import { RandomRgbColor } from "@modules/salaries/components/salaries-by-grades-chart/random-rgb-color"; +import { SalariesAddingTrendAdminChart } from "@services/user-salaries.service"; +import { Chart, ChartType } from 'chart.js/auto'; + +interface ChartDatasetType { + label: string; + data: Array; + borderWidth: number; + borderColor: string; + backgroundColor: string; +} + +export class SalariesAddingChart extends Chart { + + private readonly datasets: Array = []; + + constructor(canvasId: string, chartData: SalariesAddingTrendAdminChart) { + const randomColor = new RandomRgbColor(); + const datasets: Array = [ + { + label: 'All salaries', + data: chartData.items.map(x => x.count), + borderWidth: 1, + borderColor: randomColor.toString(1), + backgroundColor: randomColor.toString(0.5), + }, + ]; + + super( + canvasId, + { + type: 'line' as ChartType, + data: { + labels: chartData.labels, + datasets: datasets, + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + beginAtZero: true, + }, + }, + elements: { + line: { + tension: 0.4 + }, + }, + plugins: { + legend: { + position: 'bottom', + title: { + position: 'start', + }, + } + } + }, + }); + + this.datasets = datasets; + } +} \ No newline at end of file diff --git a/src/app/modules/salaries/components/add-salary/add-salary.component.html b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html similarity index 83% rename from src/app/modules/salaries/components/add-salary/add-salary.component.html rename to src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html index 3b9c31ee..7367625d 100644 --- a/src/app/modules/salaries/components/add-salary/add-salary.component.html +++ b/src/app/modules/salaries/components/add-salary/add-or-edit-salary.component.html @@ -2,28 +2,28 @@