Currency seleciton

src/app/modules/salaries/components/edit-salary/edit-salary.component.ts

@@ -18,9 +18,9 @@ import {
   KazakhstanCity,
   KazakhstanCityEnum,
 } from "@models/salaries/kazakhstan-city";
-import { SalariesChart } from "../salaries-chart/salaries-chart";
 import { LabelEntityDto } from "@services/label-entity.model";
 import { Gender, GenderEnum } from "@models/enums/gender.enum";
+import { formatNumber } from "@angular/common";
 
 @Component({
   selector: "app-edit-salary-modal",
@@ -102,7 +102,7 @@ export class EditSalaryComponent implements OnInit, OnDestroy {
     }
 
     this.salaryValue = this.showSalaryValue
-      ? SalariesChart.formatNumber(this.salarytoBeEdited.value)
+      ? formatNumber(this.salarytoBeEdited.value, "en-US", "1.0-2")
       : "* * * * *";
     this.form = new EditSalaryForm(
       this.salarytoBeEdited,
@@ -139,7 +139,7 @@ export class EditSalaryComponent implements OnInit, OnDestroy {
   showOrHideSalary(): void {
     this.showSalaryValue = !this.showSalaryValue;
     this.salaryValue = this.showSalaryValue
-      ? SalariesChart.formatNumber(this.salarytoBeEdited!.value)
+      ? formatNumber(this.salarytoBeEdited!.value, "en-US", "1.0-2")
       : "* * * * *";
   }
 

src/app/modules/salaries/components/grades-min-max-salaries-chart/grades-min-max-chart.component.html

@@ -1,5 +1,5 @@
 <div class="">
-  <div class="h4 mb-3">Зарплаты по грейдам</div>
+  <div class="h4 mb-3">Зарплаты по грейдам в графике (тенге)</div>
 
   <div class="" *ngIf="canvasId">
     <div id="canvas-container">

src/app/modules/salaries/components/grades-min-max-salaries-chart/grades-min-max-chart.component.ts

@@ -1,14 +1,15 @@
-import { Component, Input } from "@angular/core";
+import { Component, Input, OnDestroy } from "@angular/core";
 import { UserSalary } from "@models/salaries/salary.model";
 import { GradesMinMaxSalariesChartObject } from "./grades-min-max-chart-object";
 import { SalariesChart } from "../salaries-chart/salaries-chart";
+import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
 
 @Component({
   selector: "app-grades-min-max-chart",
   templateUrl: "./grades-min-max-chart.component.html",
   styleUrl: "./grades-min-max-chart.component.scss",
 })
-export class GradesMinMaxChartComponent {
+export class GradesMinMaxChartComponent implements OnDestroy {
   @Input()
   source: SalariesChart | null = null;
 
@@ -23,6 +24,8 @@ export class GradesMinMaxChartComponent {
     this.initChart();
   }
 
+  ngOnDestroy(): void {}
+
   private initChart(): void {
     if (this.source == null) {
       return;

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

@@ -3,7 +3,7 @@
 
   <div class="mb-3" *ngIf="barsForLocal.length > 0">
     <div class="mb-3">
-      <span>Казахстанские компании:</span>
+      <span>Казахстанские компании (тенге)</span>
       <span class="ms-2">{{ totalCountLocal }} анкет</span>
     </div>
     <div class="progress" (click)="toggleCountAndPercent()">
@@ -28,7 +28,7 @@
 
   <div class="mb-3" *ngIf="barsForRemote.length > 0">
     <div class="mb-3">
-      <span>Иностранные компании:</span>
+      <span>Иностранные компании (тенге)</span>
       <span class="ms-2">{{ totalCountRemote }} анкет</span>
     </div>
     <div class="progress" (click)="toggleCountAndPercent()">

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

@@ -33,9 +33,6 @@ export class PeopleByGradesChartComponent implements OnInit {
 
   showPercents = true;
 
-  @Input()
-  title: string | null = null;
-
   constructor() {}
 
   ngOnInit(): void {

src/app/modules/salaries/components/salaries-chart/currency-select-box/currency-select-box.component.html

@@ -1,5 +1,5 @@
-<div *ngIf="currencies && currencies.length > 0" title="Cooming soon">
-  <label>Выберите валюту отображения статистики</label>
+<div *ngIf="currenciesAsItems && currenciesAsItems.length > 0" title="Cooming soon">
+  <label>Выберите валюту отображения статистики (дата курса: {{currencyDate | date: "yyyy-MM-dd" }})</label>
     <ng-select
       [items]="currenciesAsItems"
       [selectOnTab]="true"
@@ -9,7 +9,6 @@
       appendTo="body"
       [(ngModel)]="selectedCurrency"
       (change)="onSelectionChange($event)"
-      [readonly]="true"
     >
     </ng-select>
 

src/app/modules/salaries/components/salaries-chart/currency-select-box/currency-select-box.component.ts

@@ -1,47 +1,59 @@
 import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
 import { CurrencyData, CurrencyType } from "@services/admin-tools.service";
 import { SelectItem } from "@shared/select-boxes/select-item";
+import { SalariesChart } from "../salaries-chart";
 
 @Component({
   selector: "app-currency-select-box",
   templateUrl: "./currency-select-box.component.html",
   styleUrl: "./currency-select-box.component.scss",
 })
 export class CurrencySelectBoxComponent implements OnInit {
+
   @Input()
-  currencies: Array<CurrencyData> | null = null;
+  chart: SalariesChart | null = null;
 
   @Output()
   readonly currencyDataSelected = new EventEmitter<void>();
 
   selectedCurrency: CurrencyType | null = null;
   currenciesAsItems: Array<SelectItem<CurrencyType>> = [];
+  currencies: Array<CurrencyData> | null = null;
+  currencyDate: Date | null = null;
 
   constructor() {}
 
   ngOnInit(): void {
 
-    if (!this.currencies || this.currencies.length === 0) {
-      this.currencies = [
+    if (!this.chart) {
+      return;
+    }
+
+    this.currencies = this.chart.currencies;
+    if (this.currencies.length === 0) {
+      this.currencies.push(
         {
           value: 1,
           currency: CurrencyType.KZT,
           currencyString: "тг",
           pubDate: new Date(),
-        },
-      ];
+        }
+      );
     }
 
     this.currenciesAsItems = this.currencies
       .map((x) => {
         return {
           value: CurrencyType[x.currency],
-          label: CurrencyType[x.currency],
+          label: x.currency === CurrencyType.KZT
+            ? CurrencyType[x.currency]
+            : `${CurrencyType[x.currency]} (${x.value} тг.)`,
           item: x.currency,
         };
       });
 
     this.selectedCurrency = this.currenciesAsItems[0].item;
+    this.currencyDate = this.currencies[0].pubDate;
   }
 
   onSelectionChange(e: SelectItem<CurrencyType>): void {
@@ -52,6 +64,6 @@ export class CurrencySelectBoxComponent implements OnInit {
     }
 
     const selectedCurrencyData = this.currencies!.find(x => x.currency === e.item);
-    console.log("Currency selected: ", selectedCurrencyData);
+    this.chart?.setCurrentCurrency(e.item);
   }
 }

src/app/modules/salaries/components/salaries-chart/salaries-by-grade/salaries-by-grade-block.component.html

@@ -1,10 +1,10 @@
-<div *ngIf="source">
+<div *ngIf="items">
   <table class="table table-hover table-sm">
     <thead>
       <tr>
         <th scope="col">Грейд</th>
-        <th scope="col">Медианная, тг.</th>
-        <th scope="col">Средняя, тг.</th>
+        <th scope="col">Медианная, {{currentCurrencyLabel}}</th>
+        <th scope="col">Средняя, {{currentCurrencyLabel}}</th>
         <th scope="col">Кол-во анкет</th>
       </tr>
     </thead>

src/app/modules/salaries/components/salaries-chart/salaries-by-grade/salaries-by-grade-block.component.ts

@@ -1,7 +1,10 @@
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, Input, OnDestroy, OnInit } from "@angular/core";
 import { DeveloperGrade } from "@models/enums";
 import { SalariesByGrade } from "@services/user-salaries.service";
 import { SalariesChart } from "../salaries-chart";
+import { formatNumber } from "@angular/common";
+import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
+import { CurrencyType } from "@services/admin-tools.service";
 
 interface Item extends SalariesByGrade {
   gradeAsString: string;
@@ -14,21 +17,47 @@ interface Item extends SalariesByGrade {
   templateUrl: "./salaries-by-grade-block.component.html",
   styleUrl: "./salaries-by-grade-block.component.scss",
 })
-export class SalariesByGradeBlockComponent implements OnInit {
+export class SalariesByGradeBlockComponent implements OnInit, OnDestroy {
   items: Array<Item> | null = null;
 
   @Input()
-  source: Array<SalariesByGrade> | null = null;
+  chart: SalariesChart | null = null;
+
+  @Input()
+  showLocal: boolean = true;
 
   totalCount: number = 0;
 
+  currentCurrencyLabel: string | null = null;
+
   ngOnInit(): void {
-    if (this.source == null) {
+
+    if (this.chart == null) {
+      this.items = [];
+      return;
+    }
+
+    this.recaulculate();
+    this.chart.currentCurrencyChanged$
+      .pipe(untilDestroyed(this))
+      .subscribe(() => {
+        this.items = null;
+        this.totalCount = 0;
+        this.currentCurrencyLabel = null;
+
+        this.recaulculate();
+      });
+  }
+
+  private recaulculate(): void {
+    const source = this.showLocal ? this.chart!.localSalariesByGrade : this.chart!.remoteSalariesByGrade;
+    if (source == null) {
       this.items = [];
       return;
     }
 
-    this.items = this.source.map((x) => {
+    this.currentCurrencyLabel = this.chart!.getCurrentCurrencyLabel();
+    this.items = source.map((x) => {
       this.totalCount += x.count;
       return {
         gradeAsString: DeveloperGrade[x.grade],
@@ -37,10 +66,11 @@ export class SalariesByGradeBlockComponent implements OnInit {
         hasData: x.hasData,
         averageSalary: x.averageSalary,
         medianSalary: x.medianSalary,
-        medianSalaryAsString: SalariesChart.formatNumber(x.medianSalary) ?? "",
-        averageSalaryAsString:
-          SalariesChart.formatNumber(x.averageSalary) ?? "",
+        medianSalaryAsString: x.medianSalary != null ? formatNumber(x.medianSalary, "en-US", "1.0-2") : "",
+        averageSalaryAsString: x.averageSalary != null ? formatNumber(x.averageSalary, "en-US", "1.0-2") : "",
       };
     });
   }
+
+  ngOnDestroy(): void {}
 }

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

@@ -197,7 +197,7 @@
       >
         <div class="mb-5">
           <app-currency-select-box
-            [currencies]="salariesChart.currencies"
+            [chart]="salariesChart"
           ></app-currency-select-box>
         </div>
 
@@ -223,13 +223,15 @@
             <div class="col-md-6 mb-3">
               <div class="h5 mb-2">Казахстан</div>
               <app-salaries-by-grade-block
-                [source]="salariesChart.localSalariesByGrade"
+                [chart]="salariesChart"
+                [showLocal]="true"
               ></app-salaries-by-grade-block>
             </div>
             <div class="col-md-6 mb-3">
               <div class="h5 mb-2">Удаленка</div>
               <app-salaries-by-grade-block
-                [source]="salariesChart.remoteSalariesByGrade"
+                [chart]="salariesChart"
+                [showLocal]="false"
               ></app-salaries-by-grade-block>
             </div>
           </div>
@@ -314,7 +316,6 @@
         <div class="mt-5 mb-5">
           <app-salaries-by-grades-chart
             [chart]="salariesChart.salariesByMoneyBarChart"
-            [title]="'Казахстанские компании'"
             [salaries]="salariesChart.salariesPerProfessionForLocal"
             [professions]="professions"
           >
@@ -324,9 +325,6 @@
         <div class="mt-5 mb-5" *ngIf="salariesChart.hasRemoteSalaries">
           <app-salaries-by-grades-chart
             [chart]="salariesChart.salariesByMoneyBarChartForRemote"
-            [title]="
-              'Зарплаты тех, кто работает удаленно в иностранных компаниях'
-            "
             [salaries]="salariesChart.salariesPerProfessionForRemote"
             [professions]="professions"
           >