Added pipe

src/app/modules/admin/components/salaries/salaries-admin-paginated-table/salaries-admin-paginated-table.component.html

@@ -99,7 +99,7 @@
     </thead>
     <tbody>
       <tr class="small" *ngFor="let item of salaries; let i = index">
-        <td>{{ item.value | number : "1.0-0" }}</td>
+        <td>{{ item.value | formatAsMoney }}</td>
         <td>{{ item.quarter }}.{{ item.year }}</td>
         <td>{{ item.age }}</td>
         <td>{{ item.gender }}</td>

src/app/modules/admin/components/telegram/telegram-bot-usages/telegram-bot-usages.component.html

@@ -21,7 +21,7 @@
           <tbody>
             <tr class="small" *ngFor="let item of items; let i = index">
               <td>{{ item.username }}</td>
-              <td>{{ item.usageCount | number : "1.0-0" }}</td>
+              <td>{{ item.usageCount | formatAsMoney }}</td>
               <td>{{ item.channelName ?? "-" }}</td>
               <td>{{ item.channelId ?? "-" }}</td>
               <td>{{ item.usageTypeAsString }}</td>

src/app/modules/salaries/components/add-salary/add-salary-form.ts

@@ -6,6 +6,7 @@ import { Currency } from "@models/salaries/currency";
 import { KazakhstanCity } from "@models/salaries/kazakhstan-city";
 import { UserSalary } from "@models/salaries/salary.model";
 import { CreateUserSalaryRequest } from "@services/user-salaries.service";
+import { FormatAsMoneyPipe } from "@shared/directives/format-as-money.pipe";
 
 export class AddSalaryForm extends FormGroup {
   static readonly digitsPattern = "^[0-9]*$";
@@ -18,7 +19,7 @@ export class AddSalaryForm extends FormGroup {
     const currentQuarter = Math.floor((now.getMonth() + 3) / 3);
     const salaryValue =
       salarytoBeEdited?.value != null
-        ? formatNumber(salarytoBeEdited.value, "en-US", "1.0-2")
+        ? FormatAsMoneyPipe.formatNumber(salarytoBeEdited.value)
         : null;
 
     super({

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

@@ -21,6 +21,7 @@ import {
 import { LabelEntityDto } from "@services/label-entity.model";
 import { Gender, GenderEnum } from "@models/enums/gender.enum";
 import { formatNumber } from "@angular/common";
+import { FormatAsMoneyPipe } from "@shared/directives/format-as-money.pipe";
 
 @Component({
   selector: "app-edit-salary-modal",
@@ -102,7 +103,7 @@ export class EditSalaryComponent implements OnInit, OnDestroy {
     }
 
     this.salaryValue = this.showSalaryValue
-      ? formatNumber(this.salarytoBeEdited.value, "en-US", "1.0-2")
+      ? FormatAsMoneyPipe.formatNumber(this.salarytoBeEdited.value)
       : "* * * * *";
     this.form = new EditSalaryForm(
       this.salarytoBeEdited,
@@ -139,7 +140,7 @@ export class EditSalaryComponent implements OnInit, OnDestroy {
   showOrHideSalary(): void {
     this.showSalaryValue = !this.showSalaryValue;
     this.salaryValue = this.showSalaryValue
-      ? formatNumber(this.salarytoBeEdited!.value, "en-US", "1.0-2")
+      ? FormatAsMoneyPipe.formatNumber(this.salarytoBeEdited!.value)
       : "* * * * *";
   }
 

src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html

@@ -1,29 +1,31 @@
 <div class="mb-5">
   <div class="h4 mb-2">Польза статистики, все ответы вместе</div>
-  <div class="mb-2">
+  <div class="chart-container">
+    <canvas class="chart" id="usefulness-chart">{{ usefulnessChart }}</canvas>
+  </div>
+  <div class="mt-2">
     График показывает соотношение ответов на вопрос "Полезна ли статистика по
     зарплатам?". Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы
     построены в столбик, высотка столбика - 100%. Первый столбик - ответы
     респондентов, работающих в Казахстанских компаниях, второй - ответы
     респондентов, работающих на удаленке.
   </div>
-  <div class="chart-container">
-    <canvas class="chart" id="usefulness-chart">{{ usefulnessChart }}</canvas>
-  </div>
 </div>
 
 <div class="mb-5">
   <div class="h4 mb-3">Ожидания от статистики, все ответы вместе</div>
-  <div class="mb-2">
+
+  <div class="chart-container">
+    <canvas class="chart" id="expectation-chart">{{ expectationChart }}</canvas>
+  </div>
+
+  <div class="mt-2">
     График показывает соотношение ответов на вопрос "Насколько ожидаемой
     оказалась статистика?". Вариантов было три: "Выше ожиданий", "Ожидаемая",
     "Ниже ожиданий". На графике ответы построены в столбик, высотка столбика -
     100%. Первый столбик - ответы респондентов, работающих в Казахстанских
     компаниях, второй - ответы респондентов, работающих на удаленке.
   </div>
-  <div class="chart-container">
-    <canvas class="chart" id="expectation-chart">{{ expectationChart }}</canvas>
-  </div>
 </div>
 
 <div class="mb-5 display-4">Распределение ответов по грейдам</div>
@@ -46,68 +48,73 @@
   <div class="h4 mb-2">
     Польза статистики по мнению тех, кто работает на Казахстан
   </div>
-  <div class="mb-2">
-    График показывает соотношение ответов на вопрос "Полезна ли статистика по
-    зарплатам?". Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы
-    построены в столбик, высотка столбика - 100%. Каждый столбик - ответы
-    респондентов одного грейда: Junior, Middle, Senior, Lead.
-  </div>
+
   <div class="chart-container">
     <canvas class="chart" id="usefulness-grade-local-chart">{{
       usefulnessGradeLocalChart
     }}</canvas>
   </div>
-</div>
 
-<div class="mb-5">
-  <div class="h4 mb-2">
-    Польза статистики по мнению тех, кто работает на удаленке
-  </div>
-  <div class="mb-2">
+  <div class="mt-2">
     График показывает соотношение ответов на вопрос "Полезна ли статистика по
     зарплатам?". Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы
     построены в столбик, высотка столбика - 100%. Каждый столбик - ответы
     респондентов одного грейда: Junior, Middle, Senior, Lead.
   </div>
+</div>
+
+<div class="mb-5">
+  <div class="h4 mb-2">
+    Польза статистики по мнению тех, кто работает на удаленке
+  </div>
+
   <div class="chart-container">
     <canvas class="chart" id="usefulness-grade-remote-chart">{{
       usefulnessGradeRemoteChart
     }}</canvas>
   </div>
+  <div class="mt-2">
+    График показывает соотношение ответов на вопрос "Полезна ли статистика по
+    зарплатам?". Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы
+    построены в столбик, высотка столбика - 100%. Каждый столбик - ответы
+    респондентов одного грейда: Junior, Middle, Senior, Lead.
+  </div>
 </div>
 
 <div class="mb-5">
   <div class="h4 mb-2">
     Ожидания по статистике у тех, кто работает на Казахстан
   </div>
-  <div class="mb-2">
+
+  <div class="chart-container">
+    <canvas class="chart" id="expectation-grade-local-chart">{{
+      expectationGradeLocalChart
+    }}</canvas>
+  </div>
+  <div class="mt-2">
     График показывает соотношение ответов на вопрос "Насколько ожидаемой
     оказалась статистика?". Вариантов было три: "Выше ожиданий", "Ожидаемая",
     "Ниже ожиданий". На графике ответы построены в столбик, высотка столбика -
     100%. Каждый столбик - ответы респондентов одного грейда: Junior, Middle,
     Senior, Lead.
   </div>
-  <div class="chart-container">
-    <canvas class="chart" id="expectation-grade-local-chart">{{
-      expectationGradeLocalChart
-    }}</canvas>
-  </div>
 </div>
 
 <div class="mb-5">
   <div class="h4 mb-2">
     Ожидания по статистике у тех, кто работает на удаленке
   </div>
-  <div class="mb-2">
+
+  <div class="chart-container">
+    <canvas class="chart" id="expectation-grade-remote-chart">{{
+      expectationGradeRemoteChart
+    }}</canvas>
+  </div>
+  <div class="mt-2">
     График показывает соотношение ответов на вопрос "Насколько ожидаемой
     оказалась статистика?". Вариантов было три: "Выше ожиданий", "Ожидаемая",
     "Ниже ожиданий". На графике ответы построены в столбик, высотка столбика -
     100%. Каждый столбик - ответы респондентов одного грейда: Junior, Middle,
     Senior, Lead.
   </div>
-  <div class="chart-container">
-    <canvas class="chart" id="expectation-grade-remote-chart">{{
-      expectationGradeRemoteChart
-    }}</canvas>
-  </div>
 </div>

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

@@ -16,12 +16,12 @@
           <tbody>
             <tr *ngFor="let item of barsForLocal" class="small">
               <td>{{ item.label }}</td>
-              <td>{{ item.value }}</td>
-              <td>{{ item.part | number : "1.3" }}%</td>
+              <td>{{ item.value | formatAsMoney : 0 }}</td>
+              <td>{{ item.part | formatAsMoney : 3 }}%</td>
             </tr>
             <tr class="small">
               <td class="text-muted">Всего</td>
-              <td>{{ totalCountLocal }}</td>
+              <td>{{ totalCountLocal | formatAsMoney : 0 }}</td>
               <td></td>
             </tr>
           </tbody>

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

@@ -5,6 +5,7 @@ import { SalariesChart } from "../salaries-chart";
 import { formatNumber } from "@angular/common";
 import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
 import { CurrencyType } from "@services/admin-tools.service";
+import { FormatAsMoneyPipe } from "@shared/directives/format-as-money.pipe";
 
 interface Item extends SalariesByGrade {
   gradeAsString: string;
@@ -69,11 +70,11 @@ export class SalariesByGradeBlockComponent implements OnInit, OnDestroy {
         medianSalary: x.medianSalary,
         medianSalaryAsString:
           x.medianSalary != null
-            ? formatNumber(x.medianSalary, "en-US", "1.0-2")
+            ? FormatAsMoneyPipe.formatNumber(x.medianSalary)
             : "",
         averageSalaryAsString:
           x.averageSalary != null
-            ? formatNumber(x.averageSalary, "en-US", "1.0-2")
+            ? FormatAsMoneyPipe.formatNumber(x.averageSalary)
             : "",
       };
     });

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

@@ -278,7 +278,7 @@
         <ul class="mt-2 font-weight-normal">
           <li>
             <a class="btn-link-sm" routerLink="/salaries/historical-data">
-              Тенденция измненения зарплат</a
+              Тенденция изменения зарплат</a
             >
           </li>
           <li>

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

@@ -1,6 +1,7 @@
 import { Component, Input } from "@angular/core";
 import { SalariesChart } from "../salaries-chart";
 import { formatNumber } from "@angular/common";
+import { FormatAsMoneyPipe } from "@shared/directives/format-as-money.pipe";
 
 @Component({
   selector: "app-salary-block-remote-value",
@@ -12,22 +13,14 @@ export class SalaryBlockRemoteValueComponent {
   source: SalariesChart | null = null;
 
   get median(): string {
-    return SalaryBlockRemoteValueComponent.formatNumber(
+    return FormatAsMoneyPipe.formatNumber(
       this.source?.medianRemoteSalary
     );
   }
 
   get average(): string {
-    return SalaryBlockRemoteValueComponent.formatNumber(
+    return FormatAsMoneyPipe.formatNumber(
       this.source?.averageRemoteSalary
     );
   }
-
-  private static formatNumber(value: number | null | undefined): string {
-    if (value == null) {
-      return "";
-    }
-
-    return formatNumber(value, "en-US", "1.0-2");
-  }
 }

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

@@ -2,6 +2,7 @@ import { Component, Input, OnInit, OnDestroy } from "@angular/core";
 import { SalariesChart } from "../salaries-chart";
 import { formatNumber } from "@angular/common";
 import { untilDestroyed } from "@shared/subscriptions/until-destroyed";
+import { FormatAsMoneyPipe } from "@shared/directives/format-as-money.pipe";
 
 @Component({
   selector: "app-salary-block-value",
@@ -37,26 +38,18 @@ export class SalaryBlockValueComponent implements OnInit, OnDestroy {
       return;
     }
 
-    this.median = SalaryBlockValueComponent.formatNumber(
+    this.median = FormatAsMoneyPipe.formatNumber(
       this.source.medianSalary
     );
-    this.average = SalaryBlockValueComponent.formatNumber(
+    this.average = FormatAsMoneyPipe.formatNumber(
       this.source.averageSalary
     );
-    this.medianRemote = SalaryBlockValueComponent.formatNumber(
+    this.medianRemote = FormatAsMoneyPipe.formatNumber(
       this.source.medianRemoteSalary
     );
-    this.averageRemote = SalaryBlockValueComponent.formatNumber(
+    this.averageRemote = FormatAsMoneyPipe.formatNumber(
       this.source.averageRemoteSalary
     );
     this.currentCurrencyLabel = this.source.getCurrentCurrencyLabel();
   }
-
-  private static formatNumber(value: number | null | undefined): string {
-    if (value == null) {
-      return "";
-    }
-
-    return formatNumber(value, "en-US", "1.0-2");
-  }
 }

src/app/modules/salaries/components/salaries-paginated-table/salaries-paginated-table.component.html

@@ -20,7 +20,7 @@
       </thead>
       <tbody>
         <tr class="small" *ngFor="let item of items; let i = index">
-          <td>{{ item.value | number : "1.0-0" }}</td>
+          <td>{{ item.value | formatAsMoney }}</td>
           <td>{{ item.quarter }}.{{ item.year }}</td>
           <td>{{ item.age }}</td>
           <td>{{ item.gender }}</td>

src/app/shared/directives/format-as-money.pipe.spec.ts

@@ -0,0 +1,45 @@
+import { FormatAsMoneyPipe } from "./format-as-money.pipe";
+
+describe("FormatAsMoneyPipe", () => {
+  it("return value less than 100", () => {
+    const target = new FormatAsMoneyPipe();
+
+    var result = target.transform(99.99);
+    expect(result).toBe("99.99");
+  });
+
+  it("return value greater than 100", () => {
+    const target = new FormatAsMoneyPipe();
+
+    var result = target.transform(105.05);
+    expect(result).toBe("105.05");
+  });
+
+  it("return value greater than 1000", () => {
+    const target = new FormatAsMoneyPipe();
+
+    var result = target.transform(1050.05);
+    expect(result).toBe("1 050.05");
+  });
+
+  it("return value greater than 10000", () => {
+    const target = new FormatAsMoneyPipe();
+
+    var result = target.transform(10500.05);
+    expect(result).toBe("10 500.05");
+  });
+
+  it("return value greater than 100000", () => {
+    const target = new FormatAsMoneyPipe();
+
+    var result = target.transform(100500.05);
+    expect(result).toBe("100 500.05");
+  });
+
+  it("return value greater than 1000000", () => {
+    const target = new FormatAsMoneyPipe();
+
+    var result = target.transform(1000500.05);
+    expect(result).toBe("1 000 500.05");
+  });
+});

src/app/shared/directives/format-as-money.pipe.ts

@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'formatAsMoney'
+})
+export class FormatAsMoneyPipe implements PipeTransform {
+  transform(value: number | null, fractionSize: number = 2): string {
+    return FormatAsMoneyPipe.formatNumber(value, fractionSize);
+  }
+
+  public static formatNumber(value: number | null | undefined, fractionSize: number = 2): string {
+    if (value == null) {
+      return '';
+    }
+
+    return value.toFixed(fractionSize).replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+  }
+}