From 15b792c1e5f28953446ee425fd110b8d818a1283 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Mon, 15 Jan 2024 18:43:50 +0600 Subject: [PATCH] Added stub chart --- .../salaries-by-grades-chart.component.ts | 3 +- .../salaries-chart.component.html | 79 +++++++++++-------- .../salaries-chart.component.ts | 34 ++++++-- .../salaries-chart/salaries-chart.ts | 2 +- .../salaries-chart/stub-salaries-chart.ts | 63 +++++++++++++++ src/app/services/user-salaries.service.ts | 2 +- 6 files changed, 139 insertions(+), 44 deletions(-) create mode 100644 src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts 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 1607938d..00447837 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 @@ -23,7 +23,8 @@ export class SalariesByGradesChartComponent implements OnInit, OnDestroy { constructor() {} ngOnInit(): void { - if (this.chart == null) { + if (this.chart == null || + this.chart.salariesByMoneyBarChart == null) { return; } 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 cc8ff36c..4dc90750 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 @@ -1,41 +1,35 @@ -Зарплаты в Казахстане +Зарплаты IT в Казахстане -
-
-
-
- На графике можно увидеть зарплаты в Казахстане по разным специальностям IT. Данные заполняются самими пользователями. -
+
-
- Вы сможете посмотреть график только после добавления хотя бы одной зарплаты за последний год. -
+ -
- TODO: в скором времени будут добавлены график и возможность фльтрации данных по специальностям, грейдам и фреймворкам/языкам программирования -
+ +
+ +
+
+
+
Квалификации:
-
    -
  • -
    Всего зарплат
    -
    {{ salariesChart.countOfRecords }}
    -
    • - -
  • -
    Специальностей
    -
    {{ salariesChart.salariesByProfession?.length ?? "-" }}
    -
    • - -
  • -
    Действия
    -
    - -
    -
    • -
+
+ +
@@ -47,7 +41,7 @@
-
+
Средняя зарплата:
{{ salariesChart.averageSalary }} @@ -55,13 +49,30 @@
-
-
График зарплат по профессиям
+
+
Рассчитано на основании {{ salariesChart.countOfRecords }} анкет(ы)
+
+ +
+
Данные сгенерированы для демонстрации. + для получения актуальных данных.
+
+ +
+
По всем IT-специалистам
+
+ TODO: в скором времени будет добавлена возможность фильтрации данных по специальностям, грейдам и фреймворкам/языкам программирования +
+
+ +
+ Идея подсмотрена у сервиса Habr.Карьера, за что им большая благодарность. +
diff --git a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts index 04acbcb5..73abb689 100644 --- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts +++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.component.ts @@ -7,6 +7,7 @@ import { untilDestroyed } from '@shared/subscriptions/until-destroyed'; import { SalariesChart } from './salaries-chart'; import { AuthService } from '@shared/services/auth/auth.service'; import { CookieService } from 'ngx-cookie-service'; +import { StubSalariesChart } from './stub-salaries-chart'; @Component({ templateUrl: './salaries-chart.component.html', @@ -15,8 +16,16 @@ import { CookieService } from 'ngx-cookie-service'; export class SalariesChartComponent implements OnInit, OnDestroy { salariesChart: SalariesChart | null = null; - + showDataStub = false; openAddSalaryModal = false; + isAuthenticated = false; + + readonly grades: Array = [ + "Junior", + "Middle", + "Senior", + "Lead", + ]; constructor( private readonly service: UserSalariesService, @@ -28,29 +37,40 @@ export class SalariesChartComponent implements OnInit, OnDestroy { } ngOnInit(): void { - if (this.authService.isAuthenticated()) { + this.isAuthenticated = this.authService.isAuthenticated(); + if (this.isAuthenticated) { this.load(); return; } - console.log('Saving url to cookie', this.router.url); - this.cookieService.set('url', this.router.url); - this.authService.login(); + this.showDataStub = true; + this.salariesChart = new StubSalariesChart(); } load(): void { this.service.charts() .pipe(untilDestroyed(this)) .subscribe((x) => { - this.salariesChart = new SalariesChart(x); if (x.shouldAddOwnSalary) { this.openAddSalaryModal = true; + this.showDataStub = true; + this.salariesChart = new StubSalariesChart(); + } else { + this.salariesChart = new SalariesChart(x); + this.showDataStub = false; } }); } openAddSalaryAction(): void { - this.openAddSalaryModal = true; + if (this.authService.isAuthenticated()) { + this.openAddSalaryModal = true; + return; + } + + console.log('Saving url to cookie', this.router.url); + this.cookieService.set('url', this.router.url); + this.authService.login(); } closeAddSalaryAction(): void { 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 70d7987c..e1b544c7 100644 --- a/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts +++ b/src/app/modules/salaries/components/salaries-chart/salaries-chart.ts @@ -7,7 +7,7 @@ export class SalariesChart { readonly medianSalary: string; readonly countOfRecords: number; readonly salariesByProfession: Array; - readonly salariesByMoneyBarChart: SalariesByMoneyBarChart; + readonly salariesByMoneyBarChart: SalariesByMoneyBarChart | null; constructor(readonly data: SalariesChartResponse) { this.averageSalary = formatNumber(data.averageSalary, 'en-US', '1.0-2'); 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 new file mode 100644 index 00000000..01baea76 --- /dev/null +++ b/src/app/modules/salaries/components/salaries-chart/stub-salaries-chart.ts @@ -0,0 +1,63 @@ +import { Currency } from "@models/salaries/currency"; +import { SalariesChart } from "./salaries-chart"; +import { CompanyType } from "@models/salaries/company-type"; +import { DeveloperGrade } from "@models/enums"; +import { UserProfession } from "@models/salaries/user-profession"; + +export class StubSalariesChart extends SalariesChart { + + private static readonly salaryLabels = [ + "250000", + "500000", + "750000", + "1000000", + "1250000", + "1500000", + ] + + constructor() { + const salariesCount = 10; + const thisYearDate = new Date(); + const salaries = []; + + for (let index = 0; index < salariesCount; index++) { + salaries.push( + { + value: StubSalariesChart.getRandomNumber(1_500_000, 250_000), + quarter: 1, + year: thisYearDate.getFullYear(), + currency: Currency.KZT, + company: CompanyType.Local, + grade: DeveloperGrade.Middle, + profession: UserProfession.Developer, // TODO mgorbatyuk: randomize + createdAt: thisYearDate, + }); + } + + super({ + averageSalary: 450_000, + medianSalary: 356_000, + shouldAddOwnSalary: true, + salaries: salaries, + salariesByProfession: [], + salariesByMoneyBarChart: { + items: StubSalariesChart.salaryLabels.map((x) => { + const value = parseInt(x); + return { + start: value, + end: value + 250_000, + count: StubSalariesChart.getRandomNumber(100, 25), + }; + }), + itemsByProfession: [], + labels: StubSalariesChart.salaryLabels, + }, + rangeStart: new Date(), + rangeEnd: new Date(), + }); + } + + private static getRandomNumber(max: number, min: number): number { + return Math.floor(Math.random() * (max - min + 1)) + min; + } +} diff --git a/src/app/services/user-salaries.service.ts b/src/app/services/user-salaries.service.ts index e829cc4b..dd65ed87 100644 --- a/src/app/services/user-salaries.service.ts +++ b/src/app/services/user-salaries.service.ts @@ -25,7 +25,7 @@ export interface SalariesChartResponse { averageSalary: number; medianSalary: number; salariesByProfession: SalariesByProfession[]; - salariesByMoneyBarChart: SalariesByMoneyBarChart; + salariesByMoneyBarChart: SalariesByMoneyBarChart | null; } export interface SalariesByProfession {