Added responsible UI

src/app/modules/salaries/components/add-salary/add-salary.component.html

@@ -47,7 +47,7 @@
 
           <div class="mb-3">
             <select formControlName="profession" class="form-select" aria-label="Select your profession">
-              <option [value]="null" selected disabled>Ваша профессия</option>
+              <option [value]="null" selected disabled>Ваша специализация</option>
               <option *ngFor="let option of professions" [value]="option.value">{{ option.label }}</option>
             </select>
             <app-field-error [field]="addSalaryForm.get('profession')"></app-field-error>

src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.scss

@@ -0,0 +1,3 @@
+#canvas {
+    min-height: 400px;
+}

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,

src/app/modules/salaries/components/salaries-chart/salaries-chart.component.html

@@ -24,30 +24,42 @@
       <div class="card-body">
 
         <div *ngIf="salariesChart" class="row">
-          <div class="col-3">
+          <div class="col-3 d-none d-md-block">
             <div class="mb-3 text-muted">Квалификации:</div>
 
             <div title="Coming soon" class="mb-3" *ngFor="let grade of grades">
-              <button disabled type="button" class="text-start btn btn-light w-100" >{{ grade }}</button>
+              <button disabled type="button" class="text-start btn btn-outline-secondary w-100" >{{ grade }}</button>
             </div>
           </div>
 
-          <div class="col-9 ps-5">
-            <div class="mb-5">
-              <div class="text-muted">Медианная зарплата:</div>
-              <div class="">
-                <span class="display-2 me-3">{{ salariesChart.medianSalary }}</span>
-                <span class="h4 text-muted">тенге.</span>
-              </div>
+          <div class="col-md-9">
+            <div class="mb-5 d-flex justify-content-between align-items-end">
+              <app-salary-block-value
+                [title]="'Медианная зарплата:'"
+                [value]="salariesChart.medianSalary"></app-salary-block-value>
+
+                <div *ngIf="salariesChart.medianRemoteSalary" class="d-none d-md-block">
+                  <app-salary-block-remote-value
+                    [title]="'На удаленке:'"
+                    [value]="salariesChart.medianRemoteSalary"></app-salary-block-remote-value>
+                </div>
+
             </div>
 
-            <div class="mb-3">
-              <div class="text-muted">Средняя зарплата:</div>
-              <div class="">
-                <span class="display-2 me-3">{{ salariesChart.averageSalary }}</span>
-                <span class="h4 text-muted">тенге.</span>
-              </div>
+            <div class="mb-3 d-flex justify-content-between align-items-end">
+
+              <app-salary-block-value
+                [title]="'Средняя зарплата:'"
+                [value]="salariesChart.averageSalary"></app-salary-block-value>
+
+                <div *ngIf="salariesChart.averageRemoteSalary" class="d-none d-md-block">
+                  <app-salary-block-remote-value
+                    [title]="'На удаленке:'"
+                    [value]="salariesChart.averageRemoteSalary"></app-salary-block-remote-value>
+                </div>
+
             </div>
+
 
             <div *ngIf="!showDataStub" class="mb-3 fst-italic">
               <div class="text-muted">Рассчитано на основании {{ salariesChart.countOfRecords }} анкет(ы)</div>
@@ -87,4 +99,5 @@
     <div class="container mt-5">
       <app-data-loader></app-data-loader>
     </div>
-  </ng-template>
+  </ng-template>
+

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<SalariesByProfession>;
     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;
+    }
 }

src/app/modules/salaries/components/salaries-chart/salary-block-remote-value/salary-block-remote-value.component.html

@@ -0,0 +1,7 @@
+<div>
+  <div class="text-muted">{{ title }}</div>
+  <div class="text-muted">
+    <span class="h3 me-1">{{ value }}</span>
+    <span class="h4">тг.</span>
+  </div>
+</div>

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<SalaryBlockRemoteValueComponent>;
+
+  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();
+  });
+});

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 = '';
+}

src/app/modules/salaries/components/salaries-chart/salary-block-value/salary-block-value.component.html

@@ -0,0 +1,7 @@
+<div>
+  <div class="text-muted">{{ title }}</div>
+  <div class="">
+    <span class="display-2 me-2">{{ value }}</span>
+    <span class="h4 text-muted">тг.</span>
+  </div>
+</div>

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<SalaryBlockValueComponent>;
+
+  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();
+  });
+});

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 = '';
+}

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: [],

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,

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;
 }