From 2ee27c354fc954edb4bbce98d90f7692d8d62e26 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Mon, 15 Jan 2024 21:40:39 +0600 Subject: [PATCH] Added responsible UI --- .../add-salary/add-salary.component.html | 2 +- .../salaries-by-grades-chart.component.scss | 3 ++ .../salaries-by-grades-chart.component.ts | 1 + .../salaries-chart.component.html | 45 ++++++++++++------- .../salaries-chart/salaries-chart.ts | 18 +++++++- .../salary-block-remote-value.component.html | 7 +++ .../salary-block-remote-value.component.scss | 0 ...alary-block-remote-value.component.spec.ts | 28 ++++++++++++ .../salary-block-remote-value.component.ts | 15 +++++++ .../salary-block-value.component.html | 7 +++ .../salary-block-value.component.scss | 0 .../salary-block-value.component.spec.ts | 28 ++++++++++++ .../salary-block-value.component.ts | 15 +++++++ .../salaries-chart/stub-salaries-chart.ts | 2 + src/app/modules/salaries/salaries.module.ts | 4 ++ src/app/services/user-salaries.service.ts | 4 ++ 16 files changed, 160 insertions(+), 19 deletions(-) create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.scss create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.spec.ts create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.html create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.scss create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.spec.ts create mode 100644 src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.ts diff --git a/src/app/modules/salaries/components/add-salary/add-salary.component.html b/src/app/modules/salaries/components/add-salary/add-salary.component.html index a7e90190..37057b30 100644 --- a/src/app/modules/salaries/components/add-salary/add-salary.component.html +++ b/src/app/modules/salaries/components/add-salary/add-salary.component.html @@ -47,7 +47,7 @@
diff --git a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.scss b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.scss index e69de29b..bcf541aa 100644 --- a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.scss +++ b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.scss @@ -0,0 +1,3 @@ +#canvas { + min-height: 400px; +} diff --git a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts index 00447837..33a08198 100644 --- a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts +++ b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts @@ -70,6 +70,7 @@ export class SalariesByGradesChartComponent implements OnInit, OnDestroy { datasets: datasets, }, options: { + maintainAspectRatio: false, scales: { y: { beginAtZero: true, diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html index 4dc90750..50c16add 100644 --- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html +++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html @@ -24,30 +24,42 @@
-
+
Квалификации:
- +
-
-
-
Медианная зарплата:
-
- {{ salariesChart.medianSalary }} - тенге. -
+
+
+ + +
+ +
+
-
-
Средняя зарплата:
-
- {{ salariesChart.averageSalary }} - тенге. -
+
+ + + +
+ +
+
+
Рассчитано на основании {{ salariesChart.countOfRecords }} анкет(ы)
@@ -87,4 +99,5 @@
- \ No newline at end of file + + diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts index e1b544c7..249096d9 100644 --- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts +++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts @@ -5,15 +5,29 @@ export class SalariesChart { readonly averageSalary: string; readonly medianSalary: string; + + readonly averageRemoteSalary: string | null; + readonly medianRemoteSalary: string | null; + readonly countOfRecords: number; readonly salariesByProfession: Array; readonly salariesByMoneyBarChart: SalariesByMoneyBarChart | null; constructor(readonly data: SalariesChartResponse) { - this.averageSalary = formatNumber(data.averageSalary, 'en-US', '1.0-2'); - this.medianSalary = formatNumber(data.medianSalary, 'en-US', '1.0-2'); + this.averageSalary = SalariesChart.formatNumber(data.averageSalary) ?? ''; + this.medianSalary = SalariesChart.formatNumber(data.medianSalary) ?? ''; + + this.averageRemoteSalary = SalariesChart.formatNumber(data.averageRemoteSalary); + this.medianRemoteSalary = SalariesChart.formatNumber(data.medianRemoteSalary) + this.countOfRecords = data.salaries.length; this.salariesByProfession = data.salariesByProfession; this.salariesByMoneyBarChart = data.salariesByMoneyBarChart; } + + private static formatNumber(value: number | null): string | null { + return value != null + ? formatNumber(value, 'en-US', '1.0-2') + : null; + } } diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html new file mode 100644 index 00000000..7a29e4a7 --- /dev/null +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html @@ -0,0 +1,7 @@ +
+
{{ title }}
+
+ {{ value }} + тг. +
+
\ No newline at end of file diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.scss b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.spec.ts b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.spec.ts new file mode 100644 index 00000000..93f7f132 --- /dev/null +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.spec.ts @@ -0,0 +1,28 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { mostUsedImports, testUtilStubs, mostUsedServices } from '@shared/test-utils'; +import { SalaryBlockRemoteValueComponent } from './salary-block-remote-value.component'; + +describe('SalaryBlockRemoteValueComponent', () => { + let component: SalaryBlockRemoteValueComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SalaryBlockRemoteValueComponent], + imports: [...mostUsedImports], + providers: [...testUtilStubs, ...mostUsedServices], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SalaryBlockRemoteValueComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts new file mode 100644 index 00000000..6a888c7f --- /dev/null +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.ts @@ -0,0 +1,15 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-salary-block-remote-value', + templateUrl: './salary-block-remote-value.component.html', + styleUrl: './salary-block-remote-value.component.scss' +}) +export class SalaryBlockRemoteValueComponent { + + @Input() + title: string = ''; + + @Input() + value: string = ''; +} diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.html b/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.html new file mode 100644 index 00000000..9ada4904 --- /dev/null +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.html @@ -0,0 +1,7 @@ +
+
{{ title }}
+
+ {{ value }} + тг. +
+
\ No newline at end of file diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.scss b/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.scss new file mode 100644 index 00000000..e69de29b diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.spec.ts b/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.spec.ts new file mode 100644 index 00000000..c0d6d271 --- /dev/null +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.spec.ts @@ -0,0 +1,28 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { mostUsedImports, testUtilStubs, mostUsedServices } from '@shared/test-utils'; +import { SalaryBlockValueComponent } from './salary-block-value.component'; + +describe('SalaryBlockValueComponent', () => { + let component: SalaryBlockValueComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [SalaryBlockValueComponent], + imports: [...mostUsedImports], + providers: [...testUtilStubs, ...mostUsedServices], + schemas: [CUSTOM_ELEMENTS_SCHEMA] + }) + .compileComponents(); + + fixture = TestBed.createComponent(SalaryBlockValueComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.ts b/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.ts new file mode 100644 index 00000000..6b12b105 --- /dev/null +++ b/src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.ts @@ -0,0 +1,15 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-salary-block-value', + templateUrl: './salary-block-value.component.html', + styleUrl: './salary-block-value.component.scss' +}) +export class SalaryBlockValueComponent { + + @Input() + title: string = ''; + + @Input() + value: string = ''; +} diff --git a/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts b/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts index 01baea76..0397c482 100644 --- a/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts +++ b/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts @@ -37,6 +37,8 @@ export class StubSalariesChart extends SalariesChart { super({ averageSalary: 450_000, medianSalary: 356_000, + averageRemoteSalary: 750_000, + medianRemoteSalary: 656_000, shouldAddOwnSalary: true, salaries: salaries, salariesByProfession: [], diff --git a/src/app/modules/salaries/salaries.module.ts b/src/app/modules/salaries/salaries.module.ts index 0da8f6da..7cb7af17 100644 --- a/src/app/modules/salaries/salaries.module.ts +++ b/src/app/modules/salaries/salaries.module.ts @@ -7,12 +7,16 @@ import { SharedModule } from '@shared/shared.module'; import { SalariesChartComponent } from './components/salaries-chart/salaries-chart.component'; import { AddSalaryComponent } from './components/add-salary/add-salary.component'; import { SalariesByGradesChartComponent } from './components/salaries-by-grades-chart/salaries-by-grades-chart.component'; +import { SalaryBlockValueComponent } from './components/salaries-chart/salary-block-value/salary-block-value.component'; +import { SalaryBlockRemoteValueComponent } from './components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component'; @NgModule({ declarations: [ SalariesChartComponent, AddSalaryComponent, SalariesByGradesChartComponent, + SalaryBlockValueComponent, + SalaryBlockRemoteValueComponent, ], imports: [ CommonModule, diff --git a/src/app/services/user-salaries.service.ts b/src/app/services/user-salaries.service.ts index dd65ed87..dc5c25d5 100644 --- a/src/app/services/user-salaries.service.ts +++ b/src/app/services/user-salaries.service.ts @@ -24,6 +24,10 @@ export interface SalariesChartResponse { rangeEnd: Date; averageSalary: number; medianSalary: number; + + averageRemoteSalary: number | null; + medianRemoteSalary: number | null; + salariesByProfession: SalariesByProfession[]; salariesByMoneyBarChart: SalariesByMoneyBarChart | null; }