From ce0d0d87a47d4087afbcf74553adf38d615bf7ea Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Tue, 18 Jun 2024 22:28:10 +0400 Subject: [PATCH 01/16] Added models --- .../historical-charts-page.component.html | 8 +++- .../historical-charts-page.component.ts | 8 ++++ src/app/services/historical-charts.models.ts | 48 +++++++++++++++++++ src/app/services/historical-charts.service.ts | 5 ++ 4 files changed, 68 insertions(+), 1 deletion(-) create mode 100644 src/app/services/historical-charts.models.ts diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html index 16cb7243..ae2b970a 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html @@ -32,7 +32,13 @@ /> -
+
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts index 5b075cd0..558d6463 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts @@ -60,6 +60,14 @@ export class HistoricalChartsPageComponent implements OnInit, OnDestroy { this.filterData = x; this.load(this.filterData); }); + + this.service + .surveyChart() + .pipe(untilDestroyed(this)) + .subscribe((x) => { + console.log(x); + }); + return; } diff --git a/src/app/services/historical-charts.models.ts b/src/app/services/historical-charts.models.ts new file mode 100644 index 00000000..f5c5223d --- /dev/null +++ b/src/app/services/historical-charts.models.ts @@ -0,0 +1,48 @@ +import { + ExpectationReplyType, + UsefulnessReplyType, +} from "./salaries-survey.service"; + +export interface HistoricalSurveyChartResponse { + surveyResultsByWeeksChart: SurveyResultsByWeeksChart; + shouldAddOwnSalary: boolean; + hasAuthentication: boolean; + from: Date; + to: Date; + chartFrom: Date; + chartTo: Date; +} + +export interface SurveyResultsByWeeksChart { + weekEnds: Date[]; + items: SurveyResultsByWeeksChartItem[]; + gradeItems: SurveyResultsByWeeksChartGradeItem[]; + hasGradeItems: boolean; +} + +export interface SurveyResultsByWeeksChartItem { + totalCount: number; + localUsefulnessPercentage: UsefulnessPercentage[]; + remoteUsefulnessPercentage: UsefulnessPercentage[]; + localExpectationPercentage: ExpectationPercentage[]; + remoteExpectationPercentage: ExpectationPercentage[]; +} + +export interface UsefulnessPercentage { + replyType: UsefulnessReplyType; + percentage: number; +} + +export interface ExpectationPercentage { + replyType: ExpectationReplyType; + percentage: number; +} + +export interface SurveyResultsByWeeksChartGradeItem { + grade: number; + totalCount: number; + localUsefulnessPercentage: UsefulnessPercentage[]; + remoteUsefulnessPercentage: UsefulnessPercentage[]; + localExpectationPercentage: ExpectationPercentage[]; + remoteExpectationPercentage: ExpectationPercentage[]; +} diff --git a/src/app/services/historical-charts.service.ts b/src/app/services/historical-charts.service.ts index 7ae852b9..0af25bfa 100644 --- a/src/app/services/historical-charts.service.ts +++ b/src/app/services/historical-charts.service.ts @@ -4,6 +4,7 @@ import { ApiService } from "./api.service"; import { ConvertObjectToHttpParams } from "@shared/value-objects/convert-object-to-http"; import { DeveloperGrade } from "@models/enums"; import { KazakhstanCity } from "@models/salaries/kazakhstan-city"; +import { HistoricalSurveyChartResponse } from "./historical-charts.models"; export interface SalariesCountWeekByWeekChartItem { totalCount: number; @@ -58,4 +59,8 @@ export class HistoricalChartsService { this.apiUrl + "salaries?" + new ConvertObjectToHttpParams(params).get() ); } + + surveyChart(): Observable { + return this.api.get(this.apiUrl + "survey"); + } } From d35c3177b3ad3b6e00153e0b7f4fedbfc46f7b0c Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Tue, 18 Jun 2024 22:53:14 +0400 Subject: [PATCH 02/16] Added basic --- .../historical-charts-page.component.html | 16 +++- .../historical-charts-page.component.ts | 4 + .../historical-survey-chart-object.ts | 86 +++++++++++++++++++ .../historical-survey-chart.component.html | 7 ++ .../historical-survey-chart.component.scss | 10 +++ .../historical-survey-chart.component.spec.ts | 32 +++++++ .../historical-survey-chart.component.ts | 26 ++++++ src/app/modules/salaries/salaries.module.ts | 2 + 8 files changed, 180 insertions(+), 3 deletions(-) create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.spec.ts create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html index ae2b970a..1209b59e 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html @@ -1,8 +1,8 @@ Исторические данные -
-
-
+
+
+
Тенденция изменения зарплат
@@ -47,6 +47,16 @@
+
+
+
Тенденция опроса о статистике
+ +
+ +
+
+
+
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts index 558d6463..4bfc1ecf 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts @@ -19,6 +19,7 @@ import { ClipboardCopier, } from "@shared/value-objects/clipboard-copier"; import { ConvertObjectToHttpParams } from "@shared/value-objects/convert-object-to-http"; +import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; @Component({ templateUrl: "./historical-charts-page.component.html", @@ -28,6 +29,8 @@ export class HistoricalChartsPageComponent implements OnInit, OnDestroy { readonly activatedRoute: SalariesChartActivatedRoute; data: GetSalariesHistoricalChartResponse | null = null; + surveyData: HistoricalSurveyChartResponse | null = null; + filterData = new SalaryChartGlobalFiltersData(); isAuthenticated = false; shouldAddOwnSalary = false; @@ -65,6 +68,7 @@ export class HistoricalChartsPageComponent implements OnInit, OnDestroy { .surveyChart() .pipe(untilDestroyed(this)) .subscribe((x) => { + this.surveyData = x; console.log(x); }); diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts new file mode 100644 index 00000000..1ace6a30 --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts @@ -0,0 +1,86 @@ +import { Chart, ChartType, PointStyle } from "chart.js/auto"; +import { RandomRgbColor } from "../../random-rgb-color"; +import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; + +interface ChartDatasetType { + label: string; + data: Array; + borderWidth: number; + borderColor: string; + backgroundColor: string; + pointStyle: PointStyle; + yAxisID: "y" | "y1"; +} + +export class HistoricalSurveyChartObject extends Chart { + private readonly datasets: Array = []; + + constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { + + const data = chartData.surveyResultsByWeeksChart; + const datasets: Array = [ + new DatasetItem( + "Количество ответов", + data.items.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + false as PointStyle, + "y1" + ), + ]; + + super(canvasId, { + type: "line" as ChartType, + data: { + labels: data.weekEnds.map((x) => x.toISOString().slice(0, 10)), + datasets: datasets, + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + y: { + beginAtZero: true, + position: "left", + }, + y1: { + beginAtZero: true, + position: "right", + }, + }, + elements: { + line: { + tension: 0.4, + }, + }, + plugins: { + legend: { + position: "bottom", + title: { + position: "start", + }, + }, + }, + }, + }); + + this.datasets = datasets; + } +} + +class DatasetItem implements ChartDatasetType { + constructor( + readonly label: string, + readonly data: number[], + readonly borderWidth: number, + readonly color: RandomRgbColor, + readonly pointStyle: PointStyle, + readonly yAxisID: "y1" | "y" + ) { + this.borderColor = color.toString(1); + this.backgroundColor = color.toString(0.5); + } + + readonly borderColor: string; + readonly backgroundColor: string; +} diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html new file mode 100644 index 00000000..992bd57a --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -0,0 +1,7 @@ +
+
Изменение опроса о статистики
+
+ {{ surveyChart }} +
+
+ diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss new file mode 100644 index 00000000..6d2ee5e2 --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss @@ -0,0 +1,10 @@ +.chart { + min-height: 600px; +} + +.chart-container { + position: relative; + width: 100%; + height: 100%; + min-height: 600px; +} diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.spec.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.spec.ts new file mode 100644 index 00000000..ebefdaf0 --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.spec.ts @@ -0,0 +1,32 @@ +import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; +import { ComponentFixture, TestBed } from "@angular/core/testing"; +import { + mostUsedImports, + mostUsedServices, + testUtilStubs, +} from "@shared/test-utils"; +import { HistoricalSurveyChartComponent } from "./historical-survey-chart.component"; + +describe("HistoricalSurveyChartComponent", () => { + let component: HistoricalSurveyChartComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [HistoricalSurveyChartComponent], + imports: [...mostUsedImports], + providers: [...testUtilStubs, ...mostUsedServices], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(HistoricalSurveyChartComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it("should create", () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts new file mode 100644 index 00000000..252380e0 --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -0,0 +1,26 @@ +import { Component, Input, OnInit } from "@angular/core"; +import { SalariesCountWeekByWeekChart } from "@services/historical-charts.service"; +import { HistoricalSurveyChartObject } from "./historical-survey-chart-object"; +import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; +@Component({ + selector: "app-historical-survey-chart", + templateUrl: "./historical-survey-chart.component.html", + styleUrls: ["./historical-survey-chart.component.scss"], +}) +export class HistoricalSurveyChartComponent implements OnInit { + @Input() + data: HistoricalSurveyChartResponse | null = null; + + surveyChart: HistoricalSurveyChartObject | null = null; + + ngOnInit(): void { + if (this.data == null) { + return; + } + + this.surveyChart = new HistoricalSurveyChartObject( + "historical-survey-chart", + this.data + ); + } +} diff --git a/src/app/modules/salaries/salaries.module.ts b/src/app/modules/salaries/salaries.module.ts index 70c5f964..878862bb 100644 --- a/src/app/modules/salaries/salaries.module.ts +++ b/src/app/modules/salaries/salaries.module.ts @@ -30,6 +30,7 @@ import { CurrencySelectBoxComponent } from "./components/salaries-chart/currency import { HistoricalChartsPageComponent } from "./components/historical-charts-page/historical-charts-page.component"; import { HistoricalSalariesChartComponent } from "./components/historical-charts-page/historical-salaries-chart/historical-charts-page.component"; import { HistoricalSalariesByGradeChartComponent } from "./components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart.component"; +import { HistoricalSurveyChartComponent } from "./components/historical-charts-page/historical-survey-chart/historical-survey-chart.component"; @NgModule({ declarations: [ @@ -60,6 +61,7 @@ import { HistoricalSalariesByGradeChartComponent } from "./components/historical HistoricalChartsPageComponent, HistoricalSalariesChartComponent, HistoricalSalariesByGradeChartComponent, + HistoricalSurveyChartComponent, ], imports: [ CommonModule, From 55d9df2dcd1355c59cd88f7e7dc88638199c516d Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Wed, 19 Jun 2024 22:12:11 +0400 Subject: [PATCH 03/16] Added working chart by grades --- .../historical-charts-page.component.ts | 1 - .../historical-survey-chart.component.html | 8 +- .../historical-survey-chart.component.ts | 7 + .../historical-survey-grade-chart-object.ts | 208 ++++++++++++++++++ .../salaries/components/random-rgb-color.ts | 22 +- .../modules/salaries/components/rgb-color.ts | 28 +++ src/app/services/historical-charts.models.ts | 2 + 7 files changed, 259 insertions(+), 17 deletions(-) create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts create mode 100644 src/app/modules/salaries/components/rgb-color.ts diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts index 4bfc1ecf..adaa76a7 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.ts @@ -69,7 +69,6 @@ export class HistoricalChartsPageComponent implements OnInit, OnDestroy { .pipe(untilDestroyed(this)) .subscribe((x) => { this.surveyData = x; - console.log(x); }); return; diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index 992bd57a..95226243 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -1,7 +1,13 @@ -
+
Изменение опроса о статистики
{{ surveyChart }}
+
+
Изменение опроса о статистики по грейдам
+
+ {{ surveyGradeChart }} +
+
\ No newline at end of file diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts index 252380e0..3d2bcd11 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -2,6 +2,7 @@ import { Component, Input, OnInit } from "@angular/core"; import { SalariesCountWeekByWeekChart } from "@services/historical-charts.service"; import { HistoricalSurveyChartObject } from "./historical-survey-chart-object"; import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; +import { HistoricalSurveyGradeChartObject } from "./historical-survey-grade-chart-object"; @Component({ selector: "app-historical-survey-chart", templateUrl: "./historical-survey-chart.component.html", @@ -12,6 +13,7 @@ export class HistoricalSurveyChartComponent implements OnInit { data: HistoricalSurveyChartResponse | null = null; surveyChart: HistoricalSurveyChartObject | null = null; + surveyGradeChart: HistoricalSurveyGradeChartObject | null = null; ngOnInit(): void { if (this.data == null) { @@ -22,5 +24,10 @@ export class HistoricalSurveyChartComponent implements OnInit { "historical-survey-chart", this.data ); + + this.surveyGradeChart = new HistoricalSurveyGradeChartObject( + "historical-survey-grade-chart", + this.data + ); } } diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts new file mode 100644 index 00000000..2acb1628 --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts @@ -0,0 +1,208 @@ +import { Chart, ChartType, PointStyle } from "chart.js/auto"; +import { RandomRgbColor } from "../../random-rgb-color"; +import { ExpectationPercentage, HistoricalSurveyChartResponse, SurveyResultsByWeeksChartGradeItem, UsefulnessPercentage } from "@services/historical-charts.models"; +import { DeveloperGrade } from "@models/enums"; +import { ExpectationReplyType, UsefulnessReplyType } from "@services/salaries-survey.service"; +import { RgbColor } from "../../rgb-color"; + +export class HistoricalSurveyGradeChartObject extends Chart { + private readonly datasets: Array = []; + + constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { + + const items = chartData.surveyResultsByWeeksChart.gradeItems; + + const datasets: Array = [ + ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Junior, + items, + "1", + 0 + ), + ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Middle, + items, + "2", + 20 + ), + ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Senior, + items, + "3", + 30 + ), + ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Lead, + items, + "4", + 40 + ), + ]; + + super(canvasId, { + type: "line" as ChartType, + data: { + labels: chartData.surveyResultsByWeeksChart + .weekEnds + .map((x) => x.toISOString().slice(0, 10)), + datasets: datasets, + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + x: { + stacked: true, + }, + y: { + beginAtZero: true, + position: "left", + stacked: true, + }, + y1: { + beginAtZero: true, + position: "right", + }, + }, + elements: { + line: { + tension: 0.4, + }, + }, + plugins: { + legend: { + position: "bottom", + title: { + position: "start", + }, + }, + }, + }, + }); + + this.datasets = datasets; + } + + toggle(grade: DeveloperGrade): void { + this.datasets + .filter((x) => x.grade === grade) + .forEach((x) => x.toggle()); + + this.update(); + } + + static prepareDatasetsForGrade( + grade: DeveloperGrade, + gradeItems: SurveyResultsByWeeksChartGradeItem[], + stack: string, + darken = 0 + ): Array { + const items = gradeItems.filter((x) => x.grade === grade); + const postfix = DeveloperGrade[grade]; + return [ + new DatasetItem( + grade, + "Да, " + postfix, + items.map((x) => HistoricalSurveyGradeChartObject + .getUsefulnessPercentage(UsefulnessReplyType.Yes, x.localUsefulnessPercentage)), + 1, + RgbColor.green(darken), + false as PointStyle, + "y", + "bar", + stack, + false, + 1, + 0.8 + ), + new DatasetItem( + grade, + "Нет, " + postfix, + items.map((x) => HistoricalSurveyGradeChartObject + .getUsefulnessPercentage(UsefulnessReplyType.No, x.localUsefulnessPercentage)), + 1, + RgbColor.red(darken), + false as PointStyle, + "y", + "bar", + stack, + false, + 1, + 0.8 + ), + new DatasetItem( + grade, + "Не уверен, " + postfix, + items.map((x) => HistoricalSurveyGradeChartObject + .getUsefulnessPercentage(UsefulnessReplyType.NotSure, x.localUsefulnessPercentage)), + 1, + RgbColor.grey(darken), + false as PointStyle, + "y", + "bar", + stack, + false, + 1, + 0.8 + ), + new DatasetItem( + grade, + "Количество ответов, " + postfix, + items.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + false as PointStyle, + "y1", + "line", + "0" + ), + ]; + } + + static getUsefulnessPercentage( + type: UsefulnessReplyType, + records: UsefulnessPercentage[] + ) : number { + const record = records.find((x) => x.replyType === type); + return record ? record.percentage : 0; + } + + static getExpectationReplyType( + type: ExpectationReplyType, + records: ExpectationPercentage[] + ) : number { + const record = records.find((x) => x.replyType === type); + return record ? record.percentage : 0; + } +} + +class DatasetItem { + constructor( + grade: DeveloperGrade, + readonly label: string, + readonly data: number[], + readonly borderWidth: number, + readonly color: RandomRgbColor, + readonly pointStyle: PointStyle, + readonly yAxisID: "y1" | "y", + readonly type: "line" | "bar", + readonly stack: string, + hidden = false, + borderColorOpacity: number = 1, + bgColorOpacity: number = 0.5, + ) { + this.borderColor = color.toString(borderColorOpacity); + this.backgroundColor = color.toString(bgColorOpacity); + this.hidden = hidden; + this.grade = grade; + } + + readonly borderColor: string; + readonly backgroundColor: string; + hidden: boolean; + grade: DeveloperGrade; + + toggle(): void { + this.hidden = !this.hidden; + } +} diff --git a/src/app/modules/salaries/components/random-rgb-color.ts b/src/app/modules/salaries/components/random-rgb-color.ts index 28d6e639..9b4aad04 100644 --- a/src/app/modules/salaries/components/random-rgb-color.ts +++ b/src/app/modules/salaries/components/random-rgb-color.ts @@ -1,20 +1,12 @@ -export class RandomRgbColor { - private readonly _r: number; - private readonly _g: number; - private readonly _b: number; +import { RgbColor } from "./rgb-color"; +export class RandomRgbColor extends RgbColor { constructor() { - this._r = RandomRgbColor.randomNumber(); - this._g = RandomRgbColor.randomNumber(); - this._b = RandomRgbColor.randomNumber(); - } - - toString(transparent: number | null): string { - if (transparent != null) { - return `rgba(${this._r}, ${this._g}, ${this._b}, ${transparent})`; - } - - return `rgb(${this._r}, ${this._g}, ${this._b})`; + super( + RandomRgbColor.randomNumber(), + RandomRgbColor.randomNumber(), + RandomRgbColor.randomNumber() + ); } private static randomNumber(): number { diff --git a/src/app/modules/salaries/components/rgb-color.ts b/src/app/modules/salaries/components/rgb-color.ts new file mode 100644 index 00000000..7fd1e4bc --- /dev/null +++ b/src/app/modules/salaries/components/rgb-color.ts @@ -0,0 +1,28 @@ +export class RgbColor { + constructor( + readonly _r: number, + readonly _g: number, + readonly _b: number + ) { + } + + toString(transparent: number | null): string { + if (transparent != null) { + return `rgba(${this._r}, ${this._g}, ${this._b}, ${transparent})`; + } + + return `rgb(${this._r}, ${this._g}, ${this._b})`; + } + + static red(darken = 0): RgbColor { + return new RgbColor(219 - darken, 61 - darken, 67 - darken); + } + + static green(darken = 0): RgbColor { + return new RgbColor(16 - darken, 98 - darken, 43 - darken); + } + + static grey(darken = 0): RgbColor { + return new RgbColor(170 - darken, 170 - darken, 171 - darken); + } +} diff --git a/src/app/services/historical-charts.models.ts b/src/app/services/historical-charts.models.ts index f5c5223d..45c0fc86 100644 --- a/src/app/services/historical-charts.models.ts +++ b/src/app/services/historical-charts.models.ts @@ -40,6 +40,8 @@ export interface ExpectationPercentage { export interface SurveyResultsByWeeksChartGradeItem { grade: number; + localCount: number; + remoteCount: number; totalCount: number; localUsefulnessPercentage: UsefulnessPercentage[]; remoteUsefulnessPercentage: UsefulnessPercentage[]; From 42e583c770b1a44379651a0844f49d7e724adbcb Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Wed, 19 Jun 2024 22:24:34 +0400 Subject: [PATCH 04/16] Added components --- .../historical-survey-chart.component.html | 9 +- .../historical-survey-chart.component.ts | 7 + ...l-survey-expectation-grade-chart-object.ts | 200 ++++++++++++++++++ .../modules/salaries/components/rgb-color.ts | 4 + 4 files changed, 219 insertions(+), 1 deletion(-) create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index 95226243..4b68cb10 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -6,8 +6,15 @@
-
Изменение опроса о статистики по грейдам
+
Польза статистики. Разделение по грейдам
{{ surveyGradeChart }}
+
+ +
+
Ожидания по статистике. Разделение по грейдам
+
+ {{ surveyExpectationGradeChart }} +
\ No newline at end of file diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts index 3d2bcd11..5bed2cc2 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -3,6 +3,7 @@ import { SalariesCountWeekByWeekChart } from "@services/historical-charts.servic import { HistoricalSurveyChartObject } from "./historical-survey-chart-object"; import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; import { HistoricalSurveyGradeChartObject } from "./historical-survey-grade-chart-object"; +import { HistoricalSurveyExpectationGradeChartObject } from "./historical-survey-expectation-grade-chart-object"; @Component({ selector: "app-historical-survey-chart", templateUrl: "./historical-survey-chart.component.html", @@ -14,6 +15,7 @@ export class HistoricalSurveyChartComponent implements OnInit { surveyChart: HistoricalSurveyChartObject | null = null; surveyGradeChart: HistoricalSurveyGradeChartObject | null = null; + surveyExpectationGradeChart: HistoricalSurveyExpectationGradeChartObject | null = null; ngOnInit(): void { if (this.data == null) { @@ -29,5 +31,10 @@ export class HistoricalSurveyChartComponent implements OnInit { "historical-survey-grade-chart", this.data ); + + this.surveyExpectationGradeChart = new HistoricalSurveyExpectationGradeChartObject( + "historical-survey-expectation-grade-chart", + this.data + ); } } diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts new file mode 100644 index 00000000..7d130433 --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts @@ -0,0 +1,200 @@ +import { Chart, ChartType, PointStyle } from "chart.js/auto"; +import { RandomRgbColor } from "../../random-rgb-color"; +import { ExpectationPercentage, HistoricalSurveyChartResponse, SurveyResultsByWeeksChartGradeItem, UsefulnessPercentage } from "@services/historical-charts.models"; +import { DeveloperGrade } from "@models/enums"; +import { ExpectationReplyType } from "@services/salaries-survey.service"; +import { RgbColor } from "../../rgb-color"; + +export class HistoricalSurveyExpectationGradeChartObject extends Chart { + private readonly datasets: Array = []; + + constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { + + const items = chartData.surveyResultsByWeeksChart.gradeItems; + + const datasets: Array = [ + ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Junior, + items, + "1", + 0 + ), + ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Middle, + items, + "2", + 20 + ), + ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Senior, + items, + "3", + 30 + ), + ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Lead, + items, + "4", + 40 + ), + ]; + + super(canvasId, { + type: "line" as ChartType, + data: { + labels: chartData.surveyResultsByWeeksChart + .weekEnds + .map((x) => x.toISOString().slice(0, 10)), + datasets: datasets, + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + x: { + stacked: true, + }, + y: { + beginAtZero: true, + position: "left", + stacked: true, + }, + y1: { + beginAtZero: true, + position: "right", + }, + }, + elements: { + line: { + tension: 0.4, + }, + }, + plugins: { + legend: { + position: "bottom", + title: { + position: "start", + }, + }, + }, + }, + }); + + this.datasets = datasets; + } + + toggle(grade: DeveloperGrade): void { + this.datasets + .filter((x) => x.grade === grade) + .forEach((x) => x.toggle()); + + this.update(); + } + + static prepareDatasetsForGrade( + grade: DeveloperGrade, + gradeItems: SurveyResultsByWeeksChartGradeItem[], + stack: string, + darken = 0 + ): Array { + const items = gradeItems.filter((x) => x.grade === grade); + const postfix = DeveloperGrade[grade]; + return [ + new DatasetItem( + grade, + "Выше ожиданий, " + postfix, + items.map((x) => HistoricalSurveyExpectationGradeChartObject + .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, x.localExpectationPercentage)), + 1, + RgbColor.green(darken), + false as PointStyle, + "y", + "bar", + stack, + false, + 1, + 0.8 + ), + new DatasetItem( + grade, + "Ожидаемо, " + postfix, + items.map((x) => HistoricalSurveyExpectationGradeChartObject + .getExpectationReplyType(ExpectationReplyType.Expected, x.localExpectationPercentage)), + 1, + RgbColor.blue(darken), + false as PointStyle, + "y", + "bar", + stack, + false, + 1, + 0.8 + ), + new DatasetItem( + grade, + "Ниже ожиданий, " + postfix, + items.map((x) => HistoricalSurveyExpectationGradeChartObject + .getExpectationReplyType(ExpectationReplyType.LessThanExpected, x.localExpectationPercentage)), + 1, + RgbColor.red(darken), + false as PointStyle, + "y", + "bar", + stack, + false, + 1, + 0.8 + ), + new DatasetItem( + grade, + "Количество ответов, " + postfix, + items.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + false as PointStyle, + "y1", + "line", + "0" + ), + ]; + } + + static getExpectationReplyType( + type: ExpectationReplyType, + records: ExpectationPercentage[] + ) : number { + const record = records.find((x) => x.replyType === type); + return record ? record.percentage : 0; + } +} + +class DatasetItem { + constructor( + grade: DeveloperGrade, + readonly label: string, + readonly data: number[], + readonly borderWidth: number, + readonly color: RandomRgbColor, + readonly pointStyle: PointStyle, + readonly yAxisID: "y1" | "y", + readonly type: "line" | "bar", + readonly stack: string, + hidden = false, + borderColorOpacity: number = 1, + bgColorOpacity: number = 0.5, + ) { + this.borderColor = color.toString(borderColorOpacity); + this.backgroundColor = color.toString(bgColorOpacity); + this.hidden = hidden; + this.grade = grade; + } + + readonly borderColor: string; + readonly backgroundColor: string; + hidden: boolean; + grade: DeveloperGrade; + + toggle(): void { + this.hidden = !this.hidden; + } +} diff --git a/src/app/modules/salaries/components/rgb-color.ts b/src/app/modules/salaries/components/rgb-color.ts index 7fd1e4bc..5fbe8daf 100644 --- a/src/app/modules/salaries/components/rgb-color.ts +++ b/src/app/modules/salaries/components/rgb-color.ts @@ -25,4 +25,8 @@ export class RgbColor { static grey(darken = 0): RgbColor { return new RgbColor(170 - darken, 170 - darken, 171 - darken); } + + static blue(darken = 0): RgbColor { + return new RgbColor(0 - darken, 158 - darken, 255 - darken); + } } From e370a3a378d5f68b4137ec80ab604b68e3e0ba44 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Wed, 19 Jun 2024 22:48:14 +0400 Subject: [PATCH 05/16] charts --- .../historical-survey-chart.component.html | 22 +++++++++-- .../historical-survey-chart.component.ts | 38 +++++++++++++++---- ...l-survey-expectation-grade-chart-object.ts | 30 +++++++++++---- .../historical-survey-grade-chart-object.ts | 34 ++++++++++++----- 4 files changed, 94 insertions(+), 30 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index 4b68cb10..12e25dd1 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -6,15 +6,29 @@
-
Польза статистики. Разделение по грейдам
+
Польза статистики по мнению тех, кто работает на Казахстан
- {{ surveyGradeChart }} + {{ surveyGradeLocalChart }}
-
Ожидания по статистике. Разделение по грейдам
+
Польза статистики по мнению тех, кто работает на удаленке
- {{ surveyExpectationGradeChart }} + {{ surveyGradeRemoteChart }} +
+
+ +
+
Ожидания по статистике у тех, кто работает на Казахстан
+
+ {{ surveyExpectationGradeLocalChart }} +
+
+ +
+
Ожидания по статистике у тех, кто работает на удаленке
+
+ {{ surveyExpectationGradeRemoteChart }}
\ No newline at end of file diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts index 5bed2cc2..c281a779 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -14,8 +14,12 @@ export class HistoricalSurveyChartComponent implements OnInit { data: HistoricalSurveyChartResponse | null = null; surveyChart: HistoricalSurveyChartObject | null = null; - surveyGradeChart: HistoricalSurveyGradeChartObject | null = null; - surveyExpectationGradeChart: HistoricalSurveyExpectationGradeChartObject | null = null; + + surveyGradeLocalChart: HistoricalSurveyGradeChartObject | null = null; + surveyGradeRemoteChart: HistoricalSurveyGradeChartObject | null = null; + + surveyExpectationGradeLocalChart: HistoricalSurveyExpectationGradeChartObject | null = null; + surveyExpectationGradeRemoteChart: HistoricalSurveyExpectationGradeChartObject | null = null; ngOnInit(): void { if (this.data == null) { @@ -27,14 +31,32 @@ export class HistoricalSurveyChartComponent implements OnInit { this.data ); - this.surveyGradeChart = new HistoricalSurveyGradeChartObject( - "historical-survey-grade-chart", - this.data + this.surveyGradeLocalChart = new HistoricalSurveyGradeChartObject( + "historical-survey-grade-local-chart", + this.data, + (x) => x.localUsefulnessPercentage, + (x) => x.localCount ); - this.surveyExpectationGradeChart = new HistoricalSurveyExpectationGradeChartObject( - "historical-survey-expectation-grade-chart", - this.data + this.surveyGradeRemoteChart = new HistoricalSurveyGradeChartObject( + "historical-survey-grade-remote-chart", + this.data, + (x) => x.remoteUsefulnessPercentage, + (x) => x.remoteCount + ); + + this.surveyExpectationGradeLocalChart = new HistoricalSurveyExpectationGradeChartObject( + "historical-survey-expectation-grade-local-chart", + this.data, + (x) => x.localExpectationPercentage, + (x) => x.localCount + ); + + this.surveyExpectationGradeRemoteChart = new HistoricalSurveyExpectationGradeChartObject( + "historical-survey-expectation-grade-remote-chart", + this.data, + (x) => x.remoteExpectationPercentage, + (x) => x.remoteCount ); } } diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts index 7d130433..95f2b14b 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts @@ -8,7 +8,11 @@ import { RgbColor } from "../../rgb-color"; export class HistoricalSurveyExpectationGradeChartObject extends Chart { private readonly datasets: Array = []; - constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { + constructor( + canvasId: string, + chartData: HistoricalSurveyChartResponse, + dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => ExpectationPercentage[], + totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number) { const items = chartData.surveyResultsByWeeksChart.gradeItems; @@ -17,25 +21,33 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { DeveloperGrade.Junior, items, "1", - 0 + 0, + dispatcher, + totalCountDispatcher ), ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Middle, items, "2", - 20 + 20, + dispatcher, + totalCountDispatcher ), ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Senior, items, "3", - 30 + 30, + dispatcher, + totalCountDispatcher ), ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Lead, items, "4", - 40 + 40, + dispatcher, + totalCountDispatcher ), ]; @@ -95,7 +107,9 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { grade: DeveloperGrade, gradeItems: SurveyResultsByWeeksChartGradeItem[], stack: string, - darken = 0 + darken = 0, + dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => ExpectationPercentage[], + totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number ): Array { const items = gradeItems.filter((x) => x.grade === grade); const postfix = DeveloperGrade[grade]; @@ -104,7 +118,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { grade, "Выше ожиданий, " + postfix, items.map((x) => HistoricalSurveyExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, x.localExpectationPercentage)), + .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), 1, RgbColor.green(darken), false as PointStyle, @@ -148,7 +162,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { new DatasetItem( grade, "Количество ответов, " + postfix, - items.map((x) => x.totalCount), + items.map((x) => totalCountDispatcher(x)), 4, new RandomRgbColor(), false as PointStyle, diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts index 2acb1628..21d73e57 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts @@ -8,7 +8,11 @@ import { RgbColor } from "../../rgb-color"; export class HistoricalSurveyGradeChartObject extends Chart { private readonly datasets: Array = []; - constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { + constructor( + canvasId: string, + chartData: HistoricalSurveyChartResponse, + dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => UsefulnessPercentage[], + totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number) { const items = chartData.surveyResultsByWeeksChart.gradeItems; @@ -17,25 +21,33 @@ export class HistoricalSurveyGradeChartObject extends Chart { DeveloperGrade.Junior, items, "1", - 0 + 0, + dispatcher, + totalCountDispatcher ), ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Middle, items, "2", - 20 + 20, + dispatcher, + totalCountDispatcher ), ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Senior, items, "3", - 30 + 30, + dispatcher, + totalCountDispatcher ), ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Lead, items, "4", - 40 + 40, + dispatcher, + totalCountDispatcher ), ]; @@ -95,7 +107,9 @@ export class HistoricalSurveyGradeChartObject extends Chart { grade: DeveloperGrade, gradeItems: SurveyResultsByWeeksChartGradeItem[], stack: string, - darken = 0 + darken = 0, + dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => UsefulnessPercentage[], + totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number ): Array { const items = gradeItems.filter((x) => x.grade === grade); const postfix = DeveloperGrade[grade]; @@ -104,7 +118,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { grade, "Да, " + postfix, items.map((x) => HistoricalSurveyGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.Yes, x.localUsefulnessPercentage)), + .getUsefulnessPercentage(UsefulnessReplyType.Yes, dispatcher(x))), 1, RgbColor.green(darken), false as PointStyle, @@ -119,7 +133,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { grade, "Нет, " + postfix, items.map((x) => HistoricalSurveyGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.No, x.localUsefulnessPercentage)), + .getUsefulnessPercentage(UsefulnessReplyType.No, dispatcher(x))), 1, RgbColor.red(darken), false as PointStyle, @@ -134,7 +148,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { grade, "Не уверен, " + postfix, items.map((x) => HistoricalSurveyGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.NotSure, x.localUsefulnessPercentage)), + .getUsefulnessPercentage(UsefulnessReplyType.NotSure, dispatcher(x))), 1, RgbColor.grey(darken), false as PointStyle, @@ -148,7 +162,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { new DatasetItem( grade, "Количество ответов, " + postfix, - items.map((x) => x.totalCount), + items.map((x) => totalCountDispatcher(x)), 4, new RandomRgbColor(), false as PointStyle, From 86a4e06333fe17a28ddaa947d5a32e720ff9f4eb Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Wed, 19 Jun 2024 23:10:30 +0400 Subject: [PATCH 06/16] adjustments --- .../historical-charts-page.component.html | 4 +-- ...cal-salaries-by-grade-chart.component.html | 2 +- .../historical-salaries-chart.component.html | 2 +- .../historical-survey-chart-object.ts | 2 +- .../historical-survey-chart.component.html | 16 +++++++++ .../historical-survey-chart.component.ts | 33 +++++++++++++++++++ ...l-survey-expectation-grade-chart-object.ts | 2 +- .../historical-survey-grade-chart-object.ts | 2 +- 8 files changed, 56 insertions(+), 7 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html index 1209b59e..fcaabc01 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html @@ -3,7 +3,7 @@
-
Тенденция изменения зарплат
+
Тенденция изменения медианы и средней зарплаты

@@ -49,7 +49,7 @@

-
Тенденция опроса о статистике
+
Тенденция мнения о статистике
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart.component.html index 42a2d44f..ab3c1059 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart.component.html @@ -1,5 +1,5 @@
- Зарплаты по грейдам + Тенденция изменений, разделение по грейдам
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart.component.html index 2ee5c346..05082786 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart.component.html @@ -1,5 +1,5 @@
- Изменение медианной и средней зарплат по времени + Общие данные
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts index 1ace6a30..a384d3fe 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts @@ -24,7 +24,7 @@ export class HistoricalSurveyChartObject extends Chart { data.items.map((x) => x.totalCount), 4, new RandomRgbColor(), - false as PointStyle, + "circle", "y1" ), ]; diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index 12e25dd1..fc56b337 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -5,6 +5,22 @@
+
+
+ Ниже вы можете включить группы графиков для соответствующего грейда +
+
+ +
+
+
Польза статистики по мнению тех, кто работает на Казахстан
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts index c281a779..a142759b 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -4,6 +4,15 @@ import { HistoricalSurveyChartObject } from "./historical-survey-chart-object"; import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; import { HistoricalSurveyGradeChartObject } from "./historical-survey-grade-chart-object"; import { HistoricalSurveyExpectationGradeChartObject } from "./historical-survey-expectation-grade-chart-object"; +import { DeveloperGrade, DeveloperGradeEnum } from "@models/enums"; + +interface GradeToggleButton { + label: string; + bgCss: string; + textCss: string; + toggle(): void; +} + @Component({ selector: "app-historical-survey-chart", templateUrl: "./historical-survey-chart.component.html", @@ -13,6 +22,8 @@ export class HistoricalSurveyChartComponent implements OnInit { @Input() data: HistoricalSurveyChartResponse | null = null; + gradesButtons: Array = []; + surveyChart: HistoricalSurveyChartObject | null = null; surveyGradeLocalChart: HistoricalSurveyGradeChartObject | null = null; @@ -26,6 +37,13 @@ export class HistoricalSurveyChartComponent implements OnInit { return; } + this.gradesButtons = [ + this.createGradeToggleButton(DeveloperGrade.Junior), + this.createGradeToggleButton(DeveloperGrade.Middle), + this.createGradeToggleButton(DeveloperGrade.Senior), + this.createGradeToggleButton(DeveloperGrade.Lead), + ]; + this.surveyChart = new HistoricalSurveyChartObject( "historical-survey-chart", this.data @@ -59,4 +77,19 @@ export class HistoricalSurveyChartComponent implements OnInit { (x) => x.remoteCount ); } + + private createGradeToggleButton(grade: DeveloperGrade): GradeToggleButton { + const color = DeveloperGradeEnum.getColorData(grade); + return { + label: color.label, + bgCss: color.cssBackground, + textCss: color.cssText, + toggle: () => { + this.surveyGradeLocalChart?.toggle(grade); + this.surveyGradeRemoteChart?.toggle(grade); + this.surveyExpectationGradeLocalChart?.toggle(grade); + this.surveyExpectationGradeRemoteChart?.toggle(grade); + }, + }; + } } diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts index 95f2b14b..ca343158 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts @@ -165,7 +165,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { items.map((x) => totalCountDispatcher(x)), 4, new RandomRgbColor(), - false as PointStyle, + 'circle', "y1", "line", "0" diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts index 21d73e57..e516896b 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts @@ -165,7 +165,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { items.map((x) => totalCountDispatcher(x)), 4, new RandomRgbColor(), - false as PointStyle, + "circle", "y1", "line", "0" From db37e9aa8d16755f3b8a40986bd9e953663db686 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 07:53:24 +0400 Subject: [PATCH 07/16] adjusted --- .../historical-survey-chart-object.ts | 116 +++++++++++++++--- 1 file changed, 97 insertions(+), 19 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts index a384d3fe..eea974c9 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts @@ -1,31 +1,42 @@ import { Chart, ChartType, PointStyle } from "chart.js/auto"; import { RandomRgbColor } from "../../random-rgb-color"; -import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; +import { ExpectationPercentage, HistoricalSurveyChartResponse, SurveyResultsByWeeksChartItem } from "@services/historical-charts.models"; +import { ExpectationReplyType } from "@services/salaries-survey.service"; +import { RgbColor } from "../../rgb-color"; -interface ChartDatasetType { - label: string; - data: Array; - borderWidth: number; - borderColor: string; - backgroundColor: string; - pointStyle: PointStyle; - yAxisID: "y" | "y1"; -} export class HistoricalSurveyChartObject extends Chart { - private readonly datasets: Array = []; + private readonly datasets: Array = []; + + constructor( + canvasId: string, + chartData: HistoricalSurveyChartResponse) { - constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { - const data = chartData.surveyResultsByWeeksChart; - const datasets: Array = [ + const datasets: Array = [ + ...HistoricalSurveyChartObject.prepareExpectationDatasets( + data.items, + "Казахстанские компании", + "1", + 0, + (x) => x.localExpectationPercentage + ), + ...HistoricalSurveyChartObject.prepareExpectationDatasets( + data.items, + "Удаленка", + "2", + 50, + (x) => x.remoteExpectationPercentage + ), new DatasetItem( "Количество ответов", data.items.map((x) => x.totalCount), 4, new RandomRgbColor(), "circle", - "y1" + "y1", + "line", + "0" ), ]; @@ -39,13 +50,18 @@ export class HistoricalSurveyChartObject extends Chart { responsive: true, maintainAspectRatio: false, scales: { + x: { + stacked: true, + }, y: { beginAtZero: true, position: "left", + stacked: true, }, y1: { beginAtZero: true, position: "right", + stacked: true, }, }, elements: { @@ -66,19 +82,81 @@ export class HistoricalSurveyChartObject extends Chart { this.datasets = datasets; } + + static prepareExpectationDatasets( + items: SurveyResultsByWeeksChartItem[], + postfix: string, + stack: string, + darken = 0, + dispatcher: (x: SurveyResultsByWeeksChartItem) => ExpectationPercentage[] + ): Array { + return [ + new DatasetItem( + "Выше ожиданий, " + postfix, + items.map((x) => HistoricalSurveyChartObject + .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), + 1, + RgbColor.green(darken), + false as PointStyle, + "y", + "bar", + stack, + 1, + 0.8 + ), + new DatasetItem( + "Ожидаемо, " + postfix, + items.map((x) => HistoricalSurveyChartObject + .getExpectationReplyType(ExpectationReplyType.Expected, x.localExpectationPercentage)), + 1, + RgbColor.blue(darken), + false as PointStyle, + "y", + "bar", + stack, + 1, + 0.8 + ), + new DatasetItem( + "Ниже ожиданий, " + postfix, + items.map((x) => HistoricalSurveyChartObject + .getExpectationReplyType(ExpectationReplyType.LessThanExpected, x.localExpectationPercentage)), + 1, + RgbColor.red(darken), + false as PointStyle, + "y", + "bar", + stack, + 1, + 0.8 + ), + ]; + } + + static getExpectationReplyType( + type: ExpectationReplyType, + records: ExpectationPercentage[] + ) : number { + const record = records.find((x) => x.replyType === type); + return record ? record.percentage : 0; + } } -class DatasetItem implements ChartDatasetType { +class DatasetItem { constructor( readonly label: string, readonly data: number[], readonly borderWidth: number, readonly color: RandomRgbColor, readonly pointStyle: PointStyle, - readonly yAxisID: "y1" | "y" + readonly yAxisID: "y1" | "y", + readonly type: "line" | "bar", + readonly stack: string, + borderColorOpacity: number = 1, + bgColorOpacity: number = 0.5, ) { - this.borderColor = color.toString(1); - this.backgroundColor = color.toString(0.5); + this.borderColor = color.toString(borderColorOpacity); + this.backgroundColor = color.toString(bgColorOpacity); } readonly borderColor: string; From 20a8350a1f52c1c7cca15e44aef9ba4d8dbad0e6 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 07:57:40 +0400 Subject: [PATCH 08/16] Renames --- ...-object.ts => expectation-chart-object.ts} | 12 ++++----- ...t.ts => expectation-grade-chart-object.ts} | 16 +++++------ .../historical-survey-chart.component.html | 6 ++--- .../historical-survey-chart.component.ts | 27 +++++++++---------- 4 files changed, 30 insertions(+), 31 deletions(-) rename src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/{historical-survey-chart-object.ts => expectation-chart-object.ts} (92%) rename src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/{historical-survey-expectation-grade-chart-object.ts => expectation-grade-chart-object.ts} (89%) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts similarity index 92% rename from src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts rename to src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts index eea974c9..2fa22ddc 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts @@ -5,7 +5,7 @@ import { ExpectationReplyType } from "@services/salaries-survey.service"; import { RgbColor } from "../../rgb-color"; -export class HistoricalSurveyChartObject extends Chart { +export class ExpectationChartObject extends Chart { private readonly datasets: Array = []; constructor( @@ -14,14 +14,14 @@ export class HistoricalSurveyChartObject extends Chart { const data = chartData.surveyResultsByWeeksChart; const datasets: Array = [ - ...HistoricalSurveyChartObject.prepareExpectationDatasets( + ...ExpectationChartObject.prepareExpectationDatasets( data.items, "Казахстанские компании", "1", 0, (x) => x.localExpectationPercentage ), - ...HistoricalSurveyChartObject.prepareExpectationDatasets( + ...ExpectationChartObject.prepareExpectationDatasets( data.items, "Удаленка", "2", @@ -93,7 +93,7 @@ export class HistoricalSurveyChartObject extends Chart { return [ new DatasetItem( "Выше ожиданий, " + postfix, - items.map((x) => HistoricalSurveyChartObject + items.map((x) => ExpectationChartObject .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), 1, RgbColor.green(darken), @@ -106,7 +106,7 @@ export class HistoricalSurveyChartObject extends Chart { ), new DatasetItem( "Ожидаемо, " + postfix, - items.map((x) => HistoricalSurveyChartObject + items.map((x) => ExpectationChartObject .getExpectationReplyType(ExpectationReplyType.Expected, x.localExpectationPercentage)), 1, RgbColor.blue(darken), @@ -119,7 +119,7 @@ export class HistoricalSurveyChartObject extends Chart { ), new DatasetItem( "Ниже ожиданий, " + postfix, - items.map((x) => HistoricalSurveyChartObject + items.map((x) => ExpectationChartObject .getExpectationReplyType(ExpectationReplyType.LessThanExpected, x.localExpectationPercentage)), 1, RgbColor.red(darken), diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts similarity index 89% rename from src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts rename to src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts index ca343158..d7161974 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts @@ -5,7 +5,7 @@ import { DeveloperGrade } from "@models/enums"; import { ExpectationReplyType } from "@services/salaries-survey.service"; import { RgbColor } from "../../rgb-color"; -export class HistoricalSurveyExpectationGradeChartObject extends Chart { +export class ExpectationGradeChartObject extends Chart { private readonly datasets: Array = []; constructor( @@ -17,7 +17,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { const items = chartData.surveyResultsByWeeksChart.gradeItems; const datasets: Array = [ - ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + ...ExpectationGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Junior, items, "1", @@ -25,7 +25,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { dispatcher, totalCountDispatcher ), - ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + ...ExpectationGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Middle, items, "2", @@ -33,7 +33,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { dispatcher, totalCountDispatcher ), - ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + ...ExpectationGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Senior, items, "3", @@ -41,7 +41,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { dispatcher, totalCountDispatcher ), - ...HistoricalSurveyExpectationGradeChartObject.prepareDatasetsForGrade( + ...ExpectationGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Lead, items, "4", @@ -117,7 +117,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { new DatasetItem( grade, "Выше ожиданий, " + postfix, - items.map((x) => HistoricalSurveyExpectationGradeChartObject + items.map((x) => ExpectationGradeChartObject .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), 1, RgbColor.green(darken), @@ -132,7 +132,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { new DatasetItem( grade, "Ожидаемо, " + postfix, - items.map((x) => HistoricalSurveyExpectationGradeChartObject + items.map((x) => ExpectationGradeChartObject .getExpectationReplyType(ExpectationReplyType.Expected, x.localExpectationPercentage)), 1, RgbColor.blue(darken), @@ -147,7 +147,7 @@ export class HistoricalSurveyExpectationGradeChartObject extends Chart { new DatasetItem( grade, "Ниже ожиданий, " + postfix, - items.map((x) => HistoricalSurveyExpectationGradeChartObject + items.map((x) => ExpectationGradeChartObject .getExpectationReplyType(ExpectationReplyType.LessThanExpected, x.localExpectationPercentage)), 1, RgbColor.red(darken), diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index fc56b337..f51fdfcb 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -1,7 +1,7 @@
Изменение опроса о статистики
- {{ surveyChart }} + {{ expectationChart }}
@@ -38,13 +38,13 @@
Ожидания по статистике у тех, кто работает на Казахстан
- {{ surveyExpectationGradeLocalChart }} + {{ expectationGradeLocalChart }}
Ожидания по статистике у тех, кто работает на удаленке
- {{ surveyExpectationGradeRemoteChart }} + {{ expectationGradeRemoteChart }}
\ No newline at end of file diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts index a142759b..dba4efaa 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -1,9 +1,8 @@ import { Component, Input, OnInit } from "@angular/core"; -import { SalariesCountWeekByWeekChart } from "@services/historical-charts.service"; -import { HistoricalSurveyChartObject } from "./historical-survey-chart-object"; +import { ExpectationChartObject } from "./expectation-chart-object"; import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; import { HistoricalSurveyGradeChartObject } from "./historical-survey-grade-chart-object"; -import { HistoricalSurveyExpectationGradeChartObject } from "./historical-survey-expectation-grade-chart-object"; +import { ExpectationGradeChartObject } from "./expectation-grade-chart-object"; import { DeveloperGrade, DeveloperGradeEnum } from "@models/enums"; interface GradeToggleButton { @@ -24,13 +23,13 @@ export class HistoricalSurveyChartComponent implements OnInit { gradesButtons: Array = []; - surveyChart: HistoricalSurveyChartObject | null = null; + expectationChart: ExpectationChartObject | null = null; surveyGradeLocalChart: HistoricalSurveyGradeChartObject | null = null; surveyGradeRemoteChart: HistoricalSurveyGradeChartObject | null = null; - surveyExpectationGradeLocalChart: HistoricalSurveyExpectationGradeChartObject | null = null; - surveyExpectationGradeRemoteChart: HistoricalSurveyExpectationGradeChartObject | null = null; + expectationGradeLocalChart: ExpectationGradeChartObject | null = null; + expectationGradeRemoteChart: ExpectationGradeChartObject | null = null; ngOnInit(): void { if (this.data == null) { @@ -44,8 +43,8 @@ export class HistoricalSurveyChartComponent implements OnInit { this.createGradeToggleButton(DeveloperGrade.Lead), ]; - this.surveyChart = new HistoricalSurveyChartObject( - "historical-survey-chart", + this.expectationChart = new ExpectationChartObject( + "expectation-chart", this.data ); @@ -63,15 +62,15 @@ export class HistoricalSurveyChartComponent implements OnInit { (x) => x.remoteCount ); - this.surveyExpectationGradeLocalChart = new HistoricalSurveyExpectationGradeChartObject( - "historical-survey-expectation-grade-local-chart", + this.expectationGradeLocalChart = new ExpectationGradeChartObject( + "expectation-grade-local-chart", this.data, (x) => x.localExpectationPercentage, (x) => x.localCount ); - this.surveyExpectationGradeRemoteChart = new HistoricalSurveyExpectationGradeChartObject( - "historical-survey-expectation-grade-remote-chart", + this.expectationGradeRemoteChart = new ExpectationGradeChartObject( + "expectation-grade-remote-chart", this.data, (x) => x.remoteExpectationPercentage, (x) => x.remoteCount @@ -87,8 +86,8 @@ export class HistoricalSurveyChartComponent implements OnInit { toggle: () => { this.surveyGradeLocalChart?.toggle(grade); this.surveyGradeRemoteChart?.toggle(grade); - this.surveyExpectationGradeLocalChart?.toggle(grade); - this.surveyExpectationGradeRemoteChart?.toggle(grade); + this.expectationGradeLocalChart?.toggle(grade); + this.expectationGradeRemoteChart?.toggle(grade); }, }; } From dae12e8e89c4920ff03bf841f6a6a1fb9b7575c7 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 07:59:46 +0400 Subject: [PATCH 09/16] Rename --- .../historical-survey-chart.component.html | 4 ++-- .../historical-survey-chart.component.ts | 18 +++++++++--------- ...ect.ts => usefulness-grade-chart-object.ts} | 16 ++++++++-------- 3 files changed, 19 insertions(+), 19 deletions(-) rename src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/{historical-survey-grade-chart-object.ts => usefulness-grade-chart-object.ts} (91%) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index f51fdfcb..8e2857ee 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -24,14 +24,14 @@
Польза статистики по мнению тех, кто работает на Казахстан
- {{ surveyGradeLocalChart }} + {{ usefulnessGradeLocalChart }}
Польза статистики по мнению тех, кто работает на удаленке
- {{ surveyGradeRemoteChart }} + {{ usefulnessGradeRemoteChart }}
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts index dba4efaa..db003fed 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -1,7 +1,7 @@ import { Component, Input, OnInit } from "@angular/core"; import { ExpectationChartObject } from "./expectation-chart-object"; import { HistoricalSurveyChartResponse } from "@services/historical-charts.models"; -import { HistoricalSurveyGradeChartObject } from "./historical-survey-grade-chart-object"; +import { UsefulnessGradeChartObject } from "./usefulness-grade-chart-object"; import { ExpectationGradeChartObject } from "./expectation-grade-chart-object"; import { DeveloperGrade, DeveloperGradeEnum } from "@models/enums"; @@ -25,8 +25,8 @@ export class HistoricalSurveyChartComponent implements OnInit { expectationChart: ExpectationChartObject | null = null; - surveyGradeLocalChart: HistoricalSurveyGradeChartObject | null = null; - surveyGradeRemoteChart: HistoricalSurveyGradeChartObject | null = null; + usefulnessGradeLocalChart: UsefulnessGradeChartObject | null = null; + usefulnessRemoteChart: UsefulnessGradeChartObject | null = null; expectationGradeLocalChart: ExpectationGradeChartObject | null = null; expectationGradeRemoteChart: ExpectationGradeChartObject | null = null; @@ -48,15 +48,15 @@ export class HistoricalSurveyChartComponent implements OnInit { this.data ); - this.surveyGradeLocalChart = new HistoricalSurveyGradeChartObject( - "historical-survey-grade-local-chart", + this.usefulnessGradeLocalChart = new UsefulnessGradeChartObject( + "usefulness-grade-local-chart", this.data, (x) => x.localUsefulnessPercentage, (x) => x.localCount ); - this.surveyGradeRemoteChart = new HistoricalSurveyGradeChartObject( - "historical-survey-grade-remote-chart", + this.usefulnessRemoteChart = new UsefulnessGradeChartObject( + "usefulness-grade-remote-chart", this.data, (x) => x.remoteUsefulnessPercentage, (x) => x.remoteCount @@ -84,8 +84,8 @@ export class HistoricalSurveyChartComponent implements OnInit { bgCss: color.cssBackground, textCss: color.cssText, toggle: () => { - this.surveyGradeLocalChart?.toggle(grade); - this.surveyGradeRemoteChart?.toggle(grade); + this.usefulnessGradeLocalChart?.toggle(grade); + this.usefulnessRemoteChart?.toggle(grade); this.expectationGradeLocalChart?.toggle(grade); this.expectationGradeRemoteChart?.toggle(grade); }, diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts similarity index 91% rename from src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts rename to src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts index e516896b..c5879597 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts @@ -5,7 +5,7 @@ import { DeveloperGrade } from "@models/enums"; import { ExpectationReplyType, UsefulnessReplyType } from "@services/salaries-survey.service"; import { RgbColor } from "../../rgb-color"; -export class HistoricalSurveyGradeChartObject extends Chart { +export class UsefulnessGradeChartObject extends Chart { private readonly datasets: Array = []; constructor( @@ -17,7 +17,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { const items = chartData.surveyResultsByWeeksChart.gradeItems; const datasets: Array = [ - ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + ...UsefulnessGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Junior, items, "1", @@ -25,7 +25,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { dispatcher, totalCountDispatcher ), - ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + ...UsefulnessGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Middle, items, "2", @@ -33,7 +33,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { dispatcher, totalCountDispatcher ), - ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + ...UsefulnessGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Senior, items, "3", @@ -41,7 +41,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { dispatcher, totalCountDispatcher ), - ...HistoricalSurveyGradeChartObject.prepareDatasetsForGrade( + ...UsefulnessGradeChartObject.prepareDatasetsForGrade( DeveloperGrade.Lead, items, "4", @@ -117,7 +117,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { new DatasetItem( grade, "Да, " + postfix, - items.map((x) => HistoricalSurveyGradeChartObject + items.map((x) => UsefulnessGradeChartObject .getUsefulnessPercentage(UsefulnessReplyType.Yes, dispatcher(x))), 1, RgbColor.green(darken), @@ -132,7 +132,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { new DatasetItem( grade, "Нет, " + postfix, - items.map((x) => HistoricalSurveyGradeChartObject + items.map((x) => UsefulnessGradeChartObject .getUsefulnessPercentage(UsefulnessReplyType.No, dispatcher(x))), 1, RgbColor.red(darken), @@ -147,7 +147,7 @@ export class HistoricalSurveyGradeChartObject extends Chart { new DatasetItem( grade, "Не уверен, " + postfix, - items.map((x) => HistoricalSurveyGradeChartObject + items.map((x) => UsefulnessGradeChartObject .getUsefulnessPercentage(UsefulnessReplyType.NotSure, dispatcher(x))), 1, RgbColor.grey(darken), From 684dda54c382904bbe8faa2f955ccbf54235cb08 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 08:06:48 +0400 Subject: [PATCH 10/16] Added all charts --- .../expectation-chart-object.ts | 4 +- .../expectation-grade-chart-object.ts | 4 +- .../historical-survey-chart.component.html | 9 +- .../historical-survey-chart.component.ts | 13 +- .../usefulness-chart-object.ts | 164 ++++++++++++++++++ 5 files changed, 186 insertions(+), 8 deletions(-) create mode 100644 src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts index 2fa22ddc..de05bc8a 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts @@ -107,7 +107,7 @@ export class ExpectationChartObject extends Chart { new DatasetItem( "Ожидаемо, " + postfix, items.map((x) => ExpectationChartObject - .getExpectationReplyType(ExpectationReplyType.Expected, x.localExpectationPercentage)), + .getExpectationReplyType(ExpectationReplyType.Expected, dispatcher(x))), 1, RgbColor.blue(darken), false as PointStyle, @@ -120,7 +120,7 @@ export class ExpectationChartObject extends Chart { new DatasetItem( "Ниже ожиданий, " + postfix, items.map((x) => ExpectationChartObject - .getExpectationReplyType(ExpectationReplyType.LessThanExpected, x.localExpectationPercentage)), + .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), 1, RgbColor.red(darken), false as PointStyle, diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts index d7161974..d9d877e7 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts @@ -133,7 +133,7 @@ export class ExpectationGradeChartObject extends Chart { grade, "Ожидаемо, " + postfix, items.map((x) => ExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.Expected, x.localExpectationPercentage)), + .getExpectationReplyType(ExpectationReplyType.Expected, dispatcher(x))), 1, RgbColor.blue(darken), false as PointStyle, @@ -148,7 +148,7 @@ export class ExpectationGradeChartObject extends Chart { grade, "Ниже ожиданий, " + postfix, items.map((x) => ExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.LessThanExpected, x.localExpectationPercentage)), + .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), 1, RgbColor.red(darken), false as PointStyle, diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index 8e2857ee..ee899f11 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -1,5 +1,12 @@
-
Изменение опроса о статистики
+
Польза статистики, все ответы вместе
+
+ {{ usefulnessChart }} +
+
+ +
+
Ожидания от статистики, все ответы вместе
{{ expectationChart }}
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts index db003fed..8050e8e1 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.ts @@ -4,6 +4,7 @@ import { HistoricalSurveyChartResponse } from "@services/historical-charts.model import { UsefulnessGradeChartObject } from "./usefulness-grade-chart-object"; import { ExpectationGradeChartObject } from "./expectation-grade-chart-object"; import { DeveloperGrade, DeveloperGradeEnum } from "@models/enums"; +import { UsefulnessChartObject } from "./usefulness-chart-object"; interface GradeToggleButton { label: string; @@ -23,10 +24,11 @@ export class HistoricalSurveyChartComponent implements OnInit { gradesButtons: Array = []; + usefulnessChart: UsefulnessChartObject | null = null; expectationChart: ExpectationChartObject | null = null; usefulnessGradeLocalChart: UsefulnessGradeChartObject | null = null; - usefulnessRemoteChart: UsefulnessGradeChartObject | null = null; + usefulnessGradeRemoteChart: UsefulnessGradeChartObject | null = null; expectationGradeLocalChart: ExpectationGradeChartObject | null = null; expectationGradeRemoteChart: ExpectationGradeChartObject | null = null; @@ -43,6 +45,11 @@ export class HistoricalSurveyChartComponent implements OnInit { this.createGradeToggleButton(DeveloperGrade.Lead), ]; + this.usefulnessChart = new UsefulnessChartObject( + "usefulness-chart", + this.data + ); + this.expectationChart = new ExpectationChartObject( "expectation-chart", this.data @@ -55,7 +62,7 @@ export class HistoricalSurveyChartComponent implements OnInit { (x) => x.localCount ); - this.usefulnessRemoteChart = new UsefulnessGradeChartObject( + this.usefulnessGradeRemoteChart = new UsefulnessGradeChartObject( "usefulness-grade-remote-chart", this.data, (x) => x.remoteUsefulnessPercentage, @@ -85,7 +92,7 @@ export class HistoricalSurveyChartComponent implements OnInit { textCss: color.cssText, toggle: () => { this.usefulnessGradeLocalChart?.toggle(grade); - this.usefulnessRemoteChart?.toggle(grade); + this.usefulnessGradeRemoteChart?.toggle(grade); this.expectationGradeLocalChart?.toggle(grade); this.expectationGradeRemoteChart?.toggle(grade); }, diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts new file mode 100644 index 00000000..ff50cbd5 --- /dev/null +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts @@ -0,0 +1,164 @@ +import { Chart, ChartType, PointStyle } from "chart.js/auto"; +import { RandomRgbColor } from "../../random-rgb-color"; +import { HistoricalSurveyChartResponse, SurveyResultsByWeeksChartItem, UsefulnessPercentage } from "@services/historical-charts.models"; +import { UsefulnessReplyType } from "@services/salaries-survey.service"; +import { RgbColor } from "../../rgb-color"; + + +export class UsefulnessChartObject extends Chart { + private readonly datasets: Array = []; + + constructor( + canvasId: string, + chartData: HistoricalSurveyChartResponse) { + + const data = chartData.surveyResultsByWeeksChart; + const datasets: Array = [ + ...UsefulnessChartObject.prepareExpectationDatasets( + data.items, + "Казахстанские компании", + "1", + 0, + (x) => x.localUsefulnessPercentage + ), + ...UsefulnessChartObject.prepareExpectationDatasets( + data.items, + "Удаленка", + "2", + 50, + (x) => x.remoteUsefulnessPercentage + ), + new DatasetItem( + "Количество ответов", + data.items.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + "circle", + "y1", + "line", + "0" + ), + ]; + + super(canvasId, { + type: "line" as ChartType, + data: { + labels: data.weekEnds.map((x) => x.toISOString().slice(0, 10)), + datasets: datasets, + }, + options: { + responsive: true, + maintainAspectRatio: false, + scales: { + x: { + stacked: true, + }, + y: { + beginAtZero: true, + position: "left", + stacked: true, + }, + y1: { + beginAtZero: true, + position: "right", + stacked: true, + }, + }, + elements: { + line: { + tension: 0.4, + }, + }, + plugins: { + legend: { + position: "bottom", + title: { + position: "start", + }, + }, + }, + }, + }); + + this.datasets = datasets; + } + + static prepareExpectationDatasets( + items: SurveyResultsByWeeksChartItem[], + postfix: string, + stack: string, + darken = 0, + dispatcher: (x: SurveyResultsByWeeksChartItem) => UsefulnessPercentage[] + ): Array { + return [ + new DatasetItem( + "Да, " + postfix, + items.map((x) => UsefulnessChartObject + .getExpectationReplyType(UsefulnessReplyType.Yes, dispatcher(x))), + 1, + RgbColor.green(darken), + false as PointStyle, + "y", + "bar", + stack, + 1, + 0.8 + ), + new DatasetItem( + "Не уверен, " + postfix, + items.map((x) => UsefulnessChartObject + .getExpectationReplyType(UsefulnessReplyType.NotSure, dispatcher(x))), + 1, + RgbColor.grey(darken), + false as PointStyle, + "y", + "bar", + stack, + 1, + 0.8 + ), + new DatasetItem( + "Нет, " + postfix, + items.map((x) => UsefulnessChartObject + .getExpectationReplyType(UsefulnessReplyType.No, dispatcher(x))), + 1, + RgbColor.red(darken), + false as PointStyle, + "y", + "bar", + stack, + 1, + 0.8 + ), + ]; + } + + static getExpectationReplyType( + type: UsefulnessReplyType, + records: UsefulnessPercentage[] + ) : number { + const record = records.find((x) => x.replyType === type); + return record ? record.percentage : 0; + } +} + +class DatasetItem { + constructor( + readonly label: string, + readonly data: number[], + readonly borderWidth: number, + readonly color: RandomRgbColor, + readonly pointStyle: PointStyle, + readonly yAxisID: "y1" | "y", + readonly type: "line" | "bar", + readonly stack: string, + borderColorOpacity: number = 1, + bgColorOpacity: number = 0.5, + ) { + this.borderColor = color.toString(borderColorOpacity); + this.backgroundColor = color.toString(bgColorOpacity); + } + + readonly borderColor: string; + readonly backgroundColor: string; +} From ea538fec9a775b4177cdba74143013027531c3d4 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 08:15:28 +0400 Subject: [PATCH 11/16] Colors --- .../expectation-chart-object.ts | 12 +++++----- .../expectation-grade-chart-object.ts | 12 +++++----- .../usefulness-chart-object.ts | 12 +++++----- .../usefulness-grade-chart-object.ts | 24 +++++++++---------- .../modules/salaries/components/rgb-color.ts | 4 ++++ 5 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts index de05bc8a..b965d78f 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts @@ -92,11 +92,11 @@ export class ExpectationChartObject extends Chart { ): Array { return [ new DatasetItem( - "Выше ожиданий, " + postfix, + "Ниже ожиданий, " + postfix, items.map((x) => ExpectationChartObject - .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), + .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), 1, - RgbColor.green(darken), + RgbColor.red(darken), false as PointStyle, "y", "bar", @@ -118,11 +118,11 @@ export class ExpectationChartObject extends Chart { 0.8 ), new DatasetItem( - "Ниже ожиданий, " + postfix, + "Выше ожиданий, " + postfix, items.map((x) => ExpectationChartObject - .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), + .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), 1, - RgbColor.red(darken), + RgbColor.lightGreen(darken), false as PointStyle, "y", "bar", diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts index d9d877e7..43c94102 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts @@ -116,11 +116,11 @@ export class ExpectationGradeChartObject extends Chart { return [ new DatasetItem( grade, - "Выше ожиданий, " + postfix, + "Ниже ожиданий, " + postfix, items.map((x) => ExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), + .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), 1, - RgbColor.green(darken), + RgbColor.red(darken), false as PointStyle, "y", "bar", @@ -146,11 +146,11 @@ export class ExpectationGradeChartObject extends Chart { ), new DatasetItem( grade, - "Ниже ожиданий, " + postfix, + "Выше ожиданий, " + postfix, items.map((x) => ExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), + .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), 1, - RgbColor.red(darken), + RgbColor.lightGreen(darken), false as PointStyle, "y", "bar", diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts index ff50cbd5..b7a66da6 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts @@ -92,11 +92,11 @@ export class UsefulnessChartObject extends Chart { ): Array { return [ new DatasetItem( - "Да, " + postfix, + "Нет, " + postfix, items.map((x) => UsefulnessChartObject - .getExpectationReplyType(UsefulnessReplyType.Yes, dispatcher(x))), + .getExpectationReplyType(UsefulnessReplyType.No, dispatcher(x))), 1, - RgbColor.green(darken), + RgbColor.red(darken), false as PointStyle, "y", "bar", @@ -118,11 +118,11 @@ export class UsefulnessChartObject extends Chart { 0.8 ), new DatasetItem( - "Нет, " + postfix, + "Да, " + postfix, items.map((x) => UsefulnessChartObject - .getExpectationReplyType(UsefulnessReplyType.No, dispatcher(x))), + .getExpectationReplyType(UsefulnessReplyType.Yes, dispatcher(x))), 1, - RgbColor.red(darken), + RgbColor.lightGreen(darken), false as PointStyle, "y", "bar", diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts index c5879597..6d6ec5c4 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts @@ -29,7 +29,7 @@ export class UsefulnessGradeChartObject extends Chart { DeveloperGrade.Middle, items, "2", - 20, + 30, dispatcher, totalCountDispatcher ), @@ -37,7 +37,7 @@ export class UsefulnessGradeChartObject extends Chart { DeveloperGrade.Senior, items, "3", - 30, + 60, dispatcher, totalCountDispatcher ), @@ -45,7 +45,7 @@ export class UsefulnessGradeChartObject extends Chart { DeveloperGrade.Lead, items, "4", - 40, + 90, dispatcher, totalCountDispatcher ), @@ -116,11 +116,11 @@ export class UsefulnessGradeChartObject extends Chart { return [ new DatasetItem( grade, - "Да, " + postfix, + "Нет, " + postfix, items.map((x) => UsefulnessGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.Yes, dispatcher(x))), + .getUsefulnessPercentage(UsefulnessReplyType.No, dispatcher(x))), 1, - RgbColor.green(darken), + RgbColor.red(darken), false as PointStyle, "y", "bar", @@ -131,11 +131,11 @@ export class UsefulnessGradeChartObject extends Chart { ), new DatasetItem( grade, - "Нет, " + postfix, + "Не уверен, " + postfix, items.map((x) => UsefulnessGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.No, dispatcher(x))), + .getUsefulnessPercentage(UsefulnessReplyType.NotSure, dispatcher(x))), 1, - RgbColor.red(darken), + RgbColor.grey(darken), false as PointStyle, "y", "bar", @@ -146,11 +146,11 @@ export class UsefulnessGradeChartObject extends Chart { ), new DatasetItem( grade, - "Не уверен, " + postfix, + "Да, " + postfix, items.map((x) => UsefulnessGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.NotSure, dispatcher(x))), + .getUsefulnessPercentage(UsefulnessReplyType.Yes, dispatcher(x))), 1, - RgbColor.grey(darken), + RgbColor.lightGreen(darken), false as PointStyle, "y", "bar", diff --git a/src/app/modules/salaries/components/rgb-color.ts b/src/app/modules/salaries/components/rgb-color.ts index 5fbe8daf..c6a624e9 100644 --- a/src/app/modules/salaries/components/rgb-color.ts +++ b/src/app/modules/salaries/components/rgb-color.ts @@ -18,6 +18,10 @@ export class RgbColor { return new RgbColor(219 - darken, 61 - darken, 67 - darken); } + static lightGreen(darken = 0): RgbColor { + return new RgbColor(35 - darken, 255 - darken, 0 - darken); + } + static green(darken = 0): RgbColor { return new RgbColor(16 - darken, 98 - darken, 43 - darken); } From d4f4929671c675ee0161e0cc79c5f364027fb62b Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 08:21:32 +0400 Subject: [PATCH 12/16] fix --- .../expectation-grade-chart-object.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts index 43c94102..ccb29d64 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts @@ -29,7 +29,7 @@ export class ExpectationGradeChartObject extends Chart { DeveloperGrade.Middle, items, "2", - 20, + 30, dispatcher, totalCountDispatcher ), @@ -37,7 +37,7 @@ export class ExpectationGradeChartObject extends Chart { DeveloperGrade.Senior, items, "3", - 30, + 60, dispatcher, totalCountDispatcher ), @@ -45,7 +45,7 @@ export class ExpectationGradeChartObject extends Chart { DeveloperGrade.Lead, items, "4", - 40, + 90, dispatcher, totalCountDispatcher ), @@ -168,7 +168,7 @@ export class ExpectationGradeChartObject extends Chart { 'circle', "y1", "line", - "0" + stack ), ]; } From ae3ad0253388007c56a8d11674b0289afec63c0f Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 08:33:15 +0400 Subject: [PATCH 13/16] adjusted --- .../historical-charts-page.component.html | 5 +- .../historical-survey-chart.component.html | 50 +++++++++++++++++-- .../historical-survey-chart.component.scss | 4 +- 3 files changed, 49 insertions(+), 10 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html index fcaabc01..c5a69f95 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-charts-page.component.html @@ -49,9 +49,8 @@
-
Тенденция мнения о статистике
- -
+
Обратная связь по статистике
+
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index ee899f11..f74bcc2e 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -1,5 +1,11 @@
-
Польза статистики, все ответы вместе
+
Польза статистики, все ответы вместе
+
+ График показывает соотношение ответов на вопрос "Полезна ли статистика по зарплатам?". + Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы построены в столбик, + высотка столбика - 100%. Первый столбик - ответы респондентов, работающих в Казахстанских + компаниях, второй - ответы респондентов, работающих на удаленке. +
{{ usefulnessChart }}
@@ -7,11 +13,21 @@
Ожидания от статистики, все ответы вместе
+
+ График показывает соотношение ответов на вопрос "Насколько ожидаемой оказалась статистика?". + Вариантов было три: "Выше ожиданий", "Ожидаемая", "Ниже ожиданий". На графике ответы построены в столбик, + высотка столбика - 100%. Первый столбик - ответы респондентов, работающих в Казахстанских + компаниях, второй - ответы респондентов, работающих на удаленке. +
{{ expectationChart }}
+
+ Распределение ответов по грейдам +
+
Ниже вы можете включить группы графиков для соответствующего грейда @@ -29,28 +45,52 @@
-
Польза статистики по мнению тех, кто работает на Казахстан
+
Польза статистики по мнению тех, кто работает на Казахстан
+
+ График показывает соотношение ответов на вопрос "Полезна ли статистика по зарплатам?". + Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы построены в столбик, + высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: + Junior, Middle, Senior, Lead. +
{{ usefulnessGradeLocalChart }}
-
Польза статистики по мнению тех, кто работает на удаленке
+
Польза статистики по мнению тех, кто работает на удаленке
+
+ График показывает соотношение ответов на вопрос "Полезна ли статистика по зарплатам?". + Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы построены в столбик, + высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: + Junior, Middle, Senior, Lead. +
{{ usefulnessGradeRemoteChart }}
-
Ожидания по статистике у тех, кто работает на Казахстан
+
Ожидания по статистике у тех, кто работает на Казахстан
+
+ График показывает соотношение ответов на вопрос "Насколько ожидаемой оказалась статистика?". + Вариантов было три: "Выше ожиданий", "Ожидаемая", "Ниже ожиданий". На графике ответы построены в столбик, + высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: + Junior, Middle, Senior, Lead. +
{{ expectationGradeLocalChart }}
-
Ожидания по статистике у тех, кто работает на удаленке
+
Ожидания по статистике у тех, кто работает на удаленке
+
+ График показывает соотношение ответов на вопрос "Насколько ожидаемой оказалась статистика?". + Вариантов было три: "Выше ожиданий", "Ожидаемая", "Ниже ожиданий". На графике ответы построены в столбик, + высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: + Junior, Middle, Senior, Lead. +
{{ expectationGradeRemoteChart }}
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss index 6d2ee5e2..50842d69 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.scss @@ -1,10 +1,10 @@ .chart { - min-height: 600px; + min-height: 400px; } .chart-container { position: relative; width: 100%; height: 100%; - min-height: 600px; + min-height: 400px; } From 13e549c8fc247112735dfa884c996a2599907385 Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 08:36:36 +0400 Subject: [PATCH 14/16] adjusted --- ...storical-salaries-by-grade-chart-object.ts | 33 +++++++++---------- .../historical-salaries-chart-object.ts | 16 ++++----- 2 files changed, 24 insertions(+), 25 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts index e4b25302..76ad20ec 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts @@ -24,18 +24,7 @@ export class HistoricalSalariesByGradeChartObject extends Chart { private readonly datasets: Array = []; constructor(canvasId: string, chartData: SalariesCountWeekByWeekChart) { - const datasets: Array = [ - new DatasetItem( - "Количество анкет", - chartData.totalCountItems.map((x) => x.totalCount), - 4, - new RandomRgbColor(), - false as PointStyle, - null, - "y1", - false - ), - ]; + const datasets: Array = []; const juniorSalaries = []; const middleSalaries = []; @@ -68,23 +57,33 @@ export class HistoricalSalariesByGradeChartObject extends Chart { ...HistoricalSalariesByGradeChartObject.getDatasetForGrade( DeveloperGrade.Junior, juniorSalaries, - true + false ), ...HistoricalSalariesByGradeChartObject.getDatasetForGrade( DeveloperGrade.Middle, middleSalaries, - true + false ), ...HistoricalSalariesByGradeChartObject.getDatasetForGrade( DeveloperGrade.Senior, seniorSalaries, - true + false ), ...HistoricalSalariesByGradeChartObject.getDatasetForGrade( DeveloperGrade.Lead, leadSalaries, - true - ) + false + ), + new DatasetItem( + "Количество анкет", + chartData.totalCountItems.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + "circle", + null, + "y1", + false + ), ); super(canvasId, { diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart-object.ts index a205bba4..c4a2a151 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-chart/historical-salaries-chart-object.ts @@ -18,14 +18,6 @@ export class HistoricalSalariesChartObject extends Chart { constructor(canvasId: string, chartData: SalariesCountWeekByWeekChart) { // По датасету на медиану и среднюю const datasets: Array = [ - new DatasetItem( - "Количество анкет", - chartData.totalCountItems.map((x) => x.totalCount), - 4, - new RandomRgbColor(), - false as PointStyle, - "y1" - ), new DatasetItem( "Медиана, КЗ", chartData.totalCountItems.map((x) => x.localMedian), @@ -58,6 +50,14 @@ export class HistoricalSalariesChartObject extends Chart { true as PointStyle, "y" ), + new DatasetItem( + "Количество анкет", + chartData.totalCountItems.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + "circle", + "y1" + ), ]; super(canvasId, { From 68aeeccdd838f270316c75fd5f00c925cae6c32a Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 08:44:22 +0400 Subject: [PATCH 15/16] Adjusted oredering --- .../expectation-chart-object.ts | 20 ++-- .../expectation-grade-chart-object.ts | 105 ++++++++++-------- .../usefulness-chart-object.ts | 20 ++-- .../usefulness-grade-chart-object.ts | 105 ++++++++++-------- 4 files changed, 140 insertions(+), 110 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts index b965d78f..9118504e 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts @@ -14,6 +14,16 @@ export class ExpectationChartObject extends Chart { const data = chartData.surveyResultsByWeeksChart; const datasets: Array = [ + new DatasetItem( + "Количество ответов", + data.items.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + "circle", + "y1", + "line", + "0" + ), ...ExpectationChartObject.prepareExpectationDatasets( data.items, "Казахстанские компании", @@ -28,16 +38,6 @@ export class ExpectationChartObject extends Chart { 50, (x) => x.remoteExpectationPercentage ), - new DatasetItem( - "Количество ответов", - data.items.map((x) => x.totalCount), - 4, - new RandomRgbColor(), - "circle", - "y1", - "line", - "0" - ), ]; super(canvasId, { diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts index ccb29d64..2baf086d 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts @@ -16,39 +16,51 @@ export class ExpectationGradeChartObject extends Chart { const items = chartData.surveyResultsByWeeksChart.gradeItems; + const juniorsSets = ExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Junior, + items, + "1", + 0, + dispatcher, + totalCountDispatcher + ); + + const middleSets = ExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Middle, + items, + "2", + 30, + dispatcher, + totalCountDispatcher + ); + + const seniorSets = ExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Senior, + items, + "3", + 60, + dispatcher, + totalCountDispatcher + ); + + const leadSets = ExpectationGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Lead, + items, + "4", + 90, + dispatcher, + totalCountDispatcher + ); + const datasets: Array = [ - ...ExpectationGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Junior, - items, - "1", - 0, - dispatcher, - totalCountDispatcher - ), - ...ExpectationGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Middle, - items, - "2", - 30, - dispatcher, - totalCountDispatcher - ), - ...ExpectationGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Senior, - items, - "3", - 60, - dispatcher, - totalCountDispatcher - ), - ...ExpectationGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Lead, - items, - "4", - 90, - dispatcher, - totalCountDispatcher - ), + juniorsSets.countSet, + middleSets.countSet, + seniorSets.countSet, + leadSets.countSet, + ...juniorsSets.sets, + ...middleSets.sets, + ...seniorSets.sets, + ...leadSets.sets, ]; super(canvasId, { @@ -110,10 +122,10 @@ export class ExpectationGradeChartObject extends Chart { darken = 0, dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => ExpectationPercentage[], totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number - ): Array { + ): { sets: Array, countSet: DatasetItem } { const items = gradeItems.filter((x) => x.grade === grade); const postfix = DeveloperGrade[grade]; - return [ + const sets = [ new DatasetItem( grade, "Ниже ожиданий, " + postfix, @@ -159,18 +171,21 @@ export class ExpectationGradeChartObject extends Chart { 1, 0.8 ), - new DatasetItem( - grade, - "Количество ответов, " + postfix, - items.map((x) => totalCountDispatcher(x)), - 4, - new RandomRgbColor(), - 'circle', - "y1", - "line", - stack - ), ]; + + const countSet = new DatasetItem( + grade, + "Количество ответов, " + postfix, + items.map((x) => totalCountDispatcher(x)), + 4, + new RandomRgbColor(), + 'circle', + "y1", + "line", + stack + ); + + return { sets, countSet }; } static getExpectationReplyType( diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts index b7a66da6..b4f64944 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts @@ -14,6 +14,16 @@ export class UsefulnessChartObject extends Chart { const data = chartData.surveyResultsByWeeksChart; const datasets: Array = [ + new DatasetItem( + "Количество ответов", + data.items.map((x) => x.totalCount), + 4, + new RandomRgbColor(), + "circle", + "y1", + "line", + "0" + ), ...UsefulnessChartObject.prepareExpectationDatasets( data.items, "Казахстанские компании", @@ -28,16 +38,6 @@ export class UsefulnessChartObject extends Chart { 50, (x) => x.remoteUsefulnessPercentage ), - new DatasetItem( - "Количество ответов", - data.items.map((x) => x.totalCount), - 4, - new RandomRgbColor(), - "circle", - "y1", - "line", - "0" - ), ]; super(canvasId, { diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts index 6d6ec5c4..c0cf81ef 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts @@ -16,39 +16,51 @@ export class UsefulnessGradeChartObject extends Chart { const items = chartData.surveyResultsByWeeksChart.gradeItems; + const juniors = UsefulnessGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Junior, + items, + "1", + 0, + dispatcher, + totalCountDispatcher + ); + + const middles = UsefulnessGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Middle, + items, + "2", + 30, + dispatcher, + totalCountDispatcher + ); + + const seniors = UsefulnessGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Senior, + items, + "3", + 60, + dispatcher, + totalCountDispatcher + ); + + const leads = UsefulnessGradeChartObject.prepareDatasetsForGrade( + DeveloperGrade.Lead, + items, + "4", + 90, + dispatcher, + totalCountDispatcher + ); + const datasets: Array = [ - ...UsefulnessGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Junior, - items, - "1", - 0, - dispatcher, - totalCountDispatcher - ), - ...UsefulnessGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Middle, - items, - "2", - 30, - dispatcher, - totalCountDispatcher - ), - ...UsefulnessGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Senior, - items, - "3", - 60, - dispatcher, - totalCountDispatcher - ), - ...UsefulnessGradeChartObject.prepareDatasetsForGrade( - DeveloperGrade.Lead, - items, - "4", - 90, - dispatcher, - totalCountDispatcher - ), + juniors.countSet, + middles.countSet, + seniors.countSet, + leads.countSet, + ...juniors.sets, + ...middles.sets, + ...seniors.sets, + ...leads.sets, ]; super(canvasId, { @@ -110,10 +122,10 @@ export class UsefulnessGradeChartObject extends Chart { darken = 0, dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => UsefulnessPercentage[], totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number - ): Array { + ): { sets: Array, countSet: DatasetItem } { const items = gradeItems.filter((x) => x.grade === grade); const postfix = DeveloperGrade[grade]; - return [ + const sets = [ new DatasetItem( grade, "Нет, " + postfix, @@ -159,18 +171,21 @@ export class UsefulnessGradeChartObject extends Chart { 1, 0.8 ), - new DatasetItem( - grade, - "Количество ответов, " + postfix, - items.map((x) => totalCountDispatcher(x)), - 4, - new RandomRgbColor(), - "circle", - "y1", - "line", - "0" - ), ]; + + const countSet = new DatasetItem( + grade, + "Количество ответов, " + postfix, + items.map((x) => totalCountDispatcher(x)), + 4, + new RandomRgbColor(), + "circle", + "y1", + "line", + "0" + ); + + return { sets, countSet }; } static getUsefulnessPercentage( From ed3fb60324b8f836375a6fe53b694a8b34e68b3f Mon Sep 17 00:00:00 2001 From: "maxim.gorbatyuk" Date: Thu, 20 Jun 2024 08:45:10 +0400 Subject: [PATCH 16/16] prettier --- ...storical-salaries-by-grade-chart-object.ts | 2 +- .../expectation-chart-object.ts | 40 ++++++--- .../expectation-grade-chart-object.ts | 61 ++++++++----- .../historical-survey-chart.component.html | 88 +++++++++++-------- .../usefulness-chart-object.ts | 40 ++++++--- .../usefulness-grade-chart-object.ts | 66 +++++++++----- .../modules/salaries/components/rgb-color.ts | 7 +- 7 files changed, 191 insertions(+), 113 deletions(-) diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts index 76ad20ec..dc96a91c 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-salaries-by-grade-chart/historical-salaries-by-grade-chart-object.ts @@ -83,7 +83,7 @@ export class HistoricalSalariesByGradeChartObject extends Chart { null, "y1", false - ), + ) ); super(canvasId, { diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts index 9118504e..0277d964 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts @@ -1,17 +1,17 @@ import { Chart, ChartType, PointStyle } from "chart.js/auto"; import { RandomRgbColor } from "../../random-rgb-color"; -import { ExpectationPercentage, HistoricalSurveyChartResponse, SurveyResultsByWeeksChartItem } from "@services/historical-charts.models"; +import { + ExpectationPercentage, + HistoricalSurveyChartResponse, + SurveyResultsByWeeksChartItem, +} from "@services/historical-charts.models"; import { ExpectationReplyType } from "@services/salaries-survey.service"; import { RgbColor } from "../../rgb-color"; - export class ExpectationChartObject extends Chart { private readonly datasets: Array = []; - constructor( - canvasId: string, - chartData: HistoricalSurveyChartResponse) { - + constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { const data = chartData.surveyResultsByWeeksChart; const datasets: Array = [ new DatasetItem( @@ -93,8 +93,12 @@ export class ExpectationChartObject extends Chart { return [ new DatasetItem( "Ниже ожиданий, " + postfix, - items.map((x) => ExpectationChartObject - .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), + items.map((x) => + ExpectationChartObject.getExpectationReplyType( + ExpectationReplyType.LessThanExpected, + dispatcher(x) + ) + ), 1, RgbColor.red(darken), false as PointStyle, @@ -106,8 +110,12 @@ export class ExpectationChartObject extends Chart { ), new DatasetItem( "Ожидаемо, " + postfix, - items.map((x) => ExpectationChartObject - .getExpectationReplyType(ExpectationReplyType.Expected, dispatcher(x))), + items.map((x) => + ExpectationChartObject.getExpectationReplyType( + ExpectationReplyType.Expected, + dispatcher(x) + ) + ), 1, RgbColor.blue(darken), false as PointStyle, @@ -119,8 +127,12 @@ export class ExpectationChartObject extends Chart { ), new DatasetItem( "Выше ожиданий, " + postfix, - items.map((x) => ExpectationChartObject - .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), + items.map((x) => + ExpectationChartObject.getExpectationReplyType( + ExpectationReplyType.MoreThanExpected, + dispatcher(x) + ) + ), 1, RgbColor.lightGreen(darken), false as PointStyle, @@ -136,7 +148,7 @@ export class ExpectationChartObject extends Chart { static getExpectationReplyType( type: ExpectationReplyType, records: ExpectationPercentage[] - ) : number { + ): number { const record = records.find((x) => x.replyType === type); return record ? record.percentage : 0; } @@ -153,7 +165,7 @@ class DatasetItem { readonly type: "line" | "bar", readonly stack: string, borderColorOpacity: number = 1, - bgColorOpacity: number = 0.5, + bgColorOpacity: number = 0.5 ) { this.borderColor = color.toString(borderColorOpacity); this.backgroundColor = color.toString(bgColorOpacity); diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts index 2baf086d..76899b42 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-grade-chart-object.ts @@ -1,6 +1,11 @@ import { Chart, ChartType, PointStyle } from "chart.js/auto"; import { RandomRgbColor } from "../../random-rgb-color"; -import { ExpectationPercentage, HistoricalSurveyChartResponse, SurveyResultsByWeeksChartGradeItem, UsefulnessPercentage } from "@services/historical-charts.models"; +import { + ExpectationPercentage, + HistoricalSurveyChartResponse, + SurveyResultsByWeeksChartGradeItem, + UsefulnessPercentage, +} from "@services/historical-charts.models"; import { DeveloperGrade } from "@models/enums"; import { ExpectationReplyType } from "@services/salaries-survey.service"; import { RgbColor } from "../../rgb-color"; @@ -11,9 +16,11 @@ export class ExpectationGradeChartObject extends Chart { constructor( canvasId: string, chartData: HistoricalSurveyChartResponse, - dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => ExpectationPercentage[], - totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number) { - + dispatcher: ( + x: SurveyResultsByWeeksChartGradeItem + ) => ExpectationPercentage[], + totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number + ) { const items = chartData.surveyResultsByWeeksChart.gradeItems; const juniorsSets = ExpectationGradeChartObject.prepareDatasetsForGrade( @@ -66,9 +73,9 @@ export class ExpectationGradeChartObject extends Chart { super(canvasId, { type: "line" as ChartType, data: { - labels: chartData.surveyResultsByWeeksChart - .weekEnds - .map((x) => x.toISOString().slice(0, 10)), + labels: chartData.surveyResultsByWeeksChart.weekEnds.map((x) => + x.toISOString().slice(0, 10) + ), datasets: datasets, }, options: { @@ -108,9 +115,7 @@ export class ExpectationGradeChartObject extends Chart { } toggle(grade: DeveloperGrade): void { - this.datasets - .filter((x) => x.grade === grade) - .forEach((x) => x.toggle()); + this.datasets.filter((x) => x.grade === grade).forEach((x) => x.toggle()); this.update(); } @@ -120,17 +125,23 @@ export class ExpectationGradeChartObject extends Chart { gradeItems: SurveyResultsByWeeksChartGradeItem[], stack: string, darken = 0, - dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => ExpectationPercentage[], + dispatcher: ( + x: SurveyResultsByWeeksChartGradeItem + ) => ExpectationPercentage[], totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number - ): { sets: Array, countSet: DatasetItem } { + ): { sets: Array; countSet: DatasetItem } { const items = gradeItems.filter((x) => x.grade === grade); const postfix = DeveloperGrade[grade]; const sets = [ new DatasetItem( grade, "Ниже ожиданий, " + postfix, - items.map((x) => ExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.LessThanExpected, dispatcher(x))), + items.map((x) => + ExpectationGradeChartObject.getExpectationReplyType( + ExpectationReplyType.LessThanExpected, + dispatcher(x) + ) + ), 1, RgbColor.red(darken), false as PointStyle, @@ -144,8 +155,12 @@ export class ExpectationGradeChartObject extends Chart { new DatasetItem( grade, "Ожидаемо, " + postfix, - items.map((x) => ExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.Expected, dispatcher(x))), + items.map((x) => + ExpectationGradeChartObject.getExpectationReplyType( + ExpectationReplyType.Expected, + dispatcher(x) + ) + ), 1, RgbColor.blue(darken), false as PointStyle, @@ -159,8 +174,12 @@ export class ExpectationGradeChartObject extends Chart { new DatasetItem( grade, "Выше ожиданий, " + postfix, - items.map((x) => ExpectationGradeChartObject - .getExpectationReplyType(ExpectationReplyType.MoreThanExpected, dispatcher(x))), + items.map((x) => + ExpectationGradeChartObject.getExpectationReplyType( + ExpectationReplyType.MoreThanExpected, + dispatcher(x) + ) + ), 1, RgbColor.lightGreen(darken), false as PointStyle, @@ -179,7 +198,7 @@ export class ExpectationGradeChartObject extends Chart { items.map((x) => totalCountDispatcher(x)), 4, new RandomRgbColor(), - 'circle', + "circle", "y1", "line", stack @@ -191,7 +210,7 @@ export class ExpectationGradeChartObject extends Chart { static getExpectationReplyType( type: ExpectationReplyType, records: ExpectationPercentage[] - ) : number { + ): number { const record = records.find((x) => x.replyType === type); return record ? record.percentage : 0; } @@ -210,7 +229,7 @@ class DatasetItem { readonly stack: string, hidden = false, borderColorOpacity: number = 1, - bgColorOpacity: number = 0.5, + bgColorOpacity: number = 0.5 ) { this.borderColor = color.toString(borderColorOpacity); this.backgroundColor = color.toString(bgColorOpacity); diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html index f74bcc2e..a4a5dcf9 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/historical-survey-chart.component.html @@ -1,10 +1,11 @@
Польза статистики, все ответы вместе
- График показывает соотношение ответов на вопрос "Полезна ли статистика по зарплатам?". - Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы построены в столбик, - высотка столбика - 100%. Первый столбик - ответы респондентов, работающих в Казахстанских - компаниях, второй - ответы респондентов, работающих на удаленке. + График показывает соотношение ответов на вопрос "Полезна ли статистика по + зарплатам?". Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы + построены в столбик, высотка столбика - 100%. Первый столбик - ответы + респондентов, работающих в Казахстанских компаниях, второй - ответы + респондентов, работающих на удаленке.
{{ usefulnessChart }} @@ -14,9 +15,10 @@
Ожидания от статистики, все ответы вместе
- График показывает соотношение ответов на вопрос "Насколько ожидаемой оказалась статистика?". - Вариантов было три: "Выше ожиданий", "Ожидаемая", "Ниже ожиданий". На графике ответы построены в столбик, - высотка столбика - 100%. Первый столбик - ответы респондентов, работающих в Казахстанских + График показывает соотношение ответов на вопрос "Насколько ожидаемой + оказалась статистика?". Вариантов было три: "Выше ожиданий", "Ожидаемая", + "Ниже ожиданий". На графике ответы построены в столбик, высотка столбика - + 100%. Первый столбик - ответы респондентов, работающих в Казахстанских компаниях, второй - ответы респондентов, работающих на удаленке.
@@ -24,9 +26,7 @@
-
- Распределение ответов по грейдам -
+
Распределение ответов по грейдам
@@ -45,53 +45,71 @@
-
Польза статистики по мнению тех, кто работает на Казахстан
+
+ Польза статистики по мнению тех, кто работает на Казахстан +
- График показывает соотношение ответов на вопрос "Полезна ли статистика по зарплатам?". - Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы построены в столбик, - высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: - Junior, Middle, Senior, Lead. + График показывает соотношение ответов на вопрос "Полезна ли статистика по + зарплатам?". Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы + построены в столбик, высотка столбика - 100%. Каждый столбик - ответы + респондентов одного грейда: Junior, Middle, Senior, Lead.
- {{ usefulnessGradeLocalChart }} + {{ + usefulnessGradeLocalChart + }}
-
Польза статистики по мнению тех, кто работает на удаленке
+
+ Польза статистики по мнению тех, кто работает на удаленке +
- График показывает соотношение ответов на вопрос "Полезна ли статистика по зарплатам?". - Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы построены в столбик, - высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: - Junior, Middle, Senior, Lead. + График показывает соотношение ответов на вопрос "Полезна ли статистика по + зарплатам?". Вариантов было три: "Да", "Нет", "Не уверен". На графике ответы + построены в столбик, высотка столбика - 100%. Каждый столбик - ответы + респондентов одного грейда: Junior, Middle, Senior, Lead.
- {{ usefulnessGradeRemoteChart }} + {{ + usefulnessGradeRemoteChart + }}
-
Ожидания по статистике у тех, кто работает на Казахстан
+
+ Ожидания по статистике у тех, кто работает на Казахстан +
- График показывает соотношение ответов на вопрос "Насколько ожидаемой оказалась статистика?". - Вариантов было три: "Выше ожиданий", "Ожидаемая", "Ниже ожиданий". На графике ответы построены в столбик, - высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: - Junior, Middle, Senior, Lead. + График показывает соотношение ответов на вопрос "Насколько ожидаемой + оказалась статистика?". Вариантов было три: "Выше ожиданий", "Ожидаемая", + "Ниже ожиданий". На графике ответы построены в столбик, высотка столбика - + 100%. Каждый столбик - ответы респондентов одного грейда: Junior, Middle, + Senior, Lead.
- {{ expectationGradeLocalChart }} + {{ + expectationGradeLocalChart + }}
-
Ожидания по статистике у тех, кто работает на удаленке
+
+ Ожидания по статистике у тех, кто работает на удаленке +
- График показывает соотношение ответов на вопрос "Насколько ожидаемой оказалась статистика?". - Вариантов было три: "Выше ожиданий", "Ожидаемая", "Ниже ожиданий". На графике ответы построены в столбик, - высотка столбика - 100%. Каждый столбик - ответы респондентов одного грейда: - Junior, Middle, Senior, Lead. + График показывает соотношение ответов на вопрос "Насколько ожидаемой + оказалась статистика?". Вариантов было три: "Выше ожиданий", "Ожидаемая", + "Ниже ожиданий". На графике ответы построены в столбик, высотка столбика - + 100%. Каждый столбик - ответы респондентов одного грейда: Junior, Middle, + Senior, Lead.
- {{ expectationGradeRemoteChart }} + {{ + expectationGradeRemoteChart + }}
-
\ No newline at end of file +
diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts index b4f64944..3c78e37a 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-chart-object.ts @@ -1,17 +1,17 @@ import { Chart, ChartType, PointStyle } from "chart.js/auto"; import { RandomRgbColor } from "../../random-rgb-color"; -import { HistoricalSurveyChartResponse, SurveyResultsByWeeksChartItem, UsefulnessPercentage } from "@services/historical-charts.models"; +import { + HistoricalSurveyChartResponse, + SurveyResultsByWeeksChartItem, + UsefulnessPercentage, +} from "@services/historical-charts.models"; import { UsefulnessReplyType } from "@services/salaries-survey.service"; import { RgbColor } from "../../rgb-color"; - export class UsefulnessChartObject extends Chart { private readonly datasets: Array = []; - constructor( - canvasId: string, - chartData: HistoricalSurveyChartResponse) { - + constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) { const data = chartData.surveyResultsByWeeksChart; const datasets: Array = [ new DatasetItem( @@ -93,8 +93,12 @@ export class UsefulnessChartObject extends Chart { return [ new DatasetItem( "Нет, " + postfix, - items.map((x) => UsefulnessChartObject - .getExpectationReplyType(UsefulnessReplyType.No, dispatcher(x))), + items.map((x) => + UsefulnessChartObject.getExpectationReplyType( + UsefulnessReplyType.No, + dispatcher(x) + ) + ), 1, RgbColor.red(darken), false as PointStyle, @@ -106,8 +110,12 @@ export class UsefulnessChartObject extends Chart { ), new DatasetItem( "Не уверен, " + postfix, - items.map((x) => UsefulnessChartObject - .getExpectationReplyType(UsefulnessReplyType.NotSure, dispatcher(x))), + items.map((x) => + UsefulnessChartObject.getExpectationReplyType( + UsefulnessReplyType.NotSure, + dispatcher(x) + ) + ), 1, RgbColor.grey(darken), false as PointStyle, @@ -119,8 +127,12 @@ export class UsefulnessChartObject extends Chart { ), new DatasetItem( "Да, " + postfix, - items.map((x) => UsefulnessChartObject - .getExpectationReplyType(UsefulnessReplyType.Yes, dispatcher(x))), + items.map((x) => + UsefulnessChartObject.getExpectationReplyType( + UsefulnessReplyType.Yes, + dispatcher(x) + ) + ), 1, RgbColor.lightGreen(darken), false as PointStyle, @@ -136,7 +148,7 @@ export class UsefulnessChartObject extends Chart { static getExpectationReplyType( type: UsefulnessReplyType, records: UsefulnessPercentage[] - ) : number { + ): number { const record = records.find((x) => x.replyType === type); return record ? record.percentage : 0; } @@ -153,7 +165,7 @@ class DatasetItem { readonly type: "line" | "bar", readonly stack: string, borderColorOpacity: number = 1, - bgColorOpacity: number = 0.5, + bgColorOpacity: number = 0.5 ) { this.borderColor = color.toString(borderColorOpacity); this.backgroundColor = color.toString(bgColorOpacity); diff --git a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts index c0cf81ef..7764343c 100644 --- a/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts +++ b/src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/usefulness-grade-chart-object.ts @@ -1,8 +1,16 @@ import { Chart, ChartType, PointStyle } from "chart.js/auto"; import { RandomRgbColor } from "../../random-rgb-color"; -import { ExpectationPercentage, HistoricalSurveyChartResponse, SurveyResultsByWeeksChartGradeItem, UsefulnessPercentage } from "@services/historical-charts.models"; +import { + ExpectationPercentage, + HistoricalSurveyChartResponse, + SurveyResultsByWeeksChartGradeItem, + UsefulnessPercentage, +} from "@services/historical-charts.models"; import { DeveloperGrade } from "@models/enums"; -import { ExpectationReplyType, UsefulnessReplyType } from "@services/salaries-survey.service"; +import { + ExpectationReplyType, + UsefulnessReplyType, +} from "@services/salaries-survey.service"; import { RgbColor } from "../../rgb-color"; export class UsefulnessGradeChartObject extends Chart { @@ -11,9 +19,11 @@ export class UsefulnessGradeChartObject extends Chart { constructor( canvasId: string, chartData: HistoricalSurveyChartResponse, - dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => UsefulnessPercentage[], - totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number) { - + dispatcher: ( + x: SurveyResultsByWeeksChartGradeItem + ) => UsefulnessPercentage[], + totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number + ) { const items = chartData.surveyResultsByWeeksChart.gradeItems; const juniors = UsefulnessGradeChartObject.prepareDatasetsForGrade( @@ -66,9 +76,9 @@ export class UsefulnessGradeChartObject extends Chart { super(canvasId, { type: "line" as ChartType, data: { - labels: chartData.surveyResultsByWeeksChart - .weekEnds - .map((x) => x.toISOString().slice(0, 10)), + labels: chartData.surveyResultsByWeeksChart.weekEnds.map((x) => + x.toISOString().slice(0, 10) + ), datasets: datasets, }, options: { @@ -108,9 +118,7 @@ export class UsefulnessGradeChartObject extends Chart { } toggle(grade: DeveloperGrade): void { - this.datasets - .filter((x) => x.grade === grade) - .forEach((x) => x.toggle()); + this.datasets.filter((x) => x.grade === grade).forEach((x) => x.toggle()); this.update(); } @@ -120,17 +128,23 @@ export class UsefulnessGradeChartObject extends Chart { gradeItems: SurveyResultsByWeeksChartGradeItem[], stack: string, darken = 0, - dispatcher: (x: SurveyResultsByWeeksChartGradeItem) => UsefulnessPercentage[], + dispatcher: ( + x: SurveyResultsByWeeksChartGradeItem + ) => UsefulnessPercentage[], totalCountDispatcher: (x: SurveyResultsByWeeksChartGradeItem) => number - ): { sets: Array, countSet: DatasetItem } { + ): { sets: Array; countSet: DatasetItem } { const items = gradeItems.filter((x) => x.grade === grade); const postfix = DeveloperGrade[grade]; const sets = [ new DatasetItem( grade, "Нет, " + postfix, - items.map((x) => UsefulnessGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.No, dispatcher(x))), + items.map((x) => + UsefulnessGradeChartObject.getUsefulnessPercentage( + UsefulnessReplyType.No, + dispatcher(x) + ) + ), 1, RgbColor.red(darken), false as PointStyle, @@ -144,8 +158,12 @@ export class UsefulnessGradeChartObject extends Chart { new DatasetItem( grade, "Не уверен, " + postfix, - items.map((x) => UsefulnessGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.NotSure, dispatcher(x))), + items.map((x) => + UsefulnessGradeChartObject.getUsefulnessPercentage( + UsefulnessReplyType.NotSure, + dispatcher(x) + ) + ), 1, RgbColor.grey(darken), false as PointStyle, @@ -159,8 +177,12 @@ export class UsefulnessGradeChartObject extends Chart { new DatasetItem( grade, "Да, " + postfix, - items.map((x) => UsefulnessGradeChartObject - .getUsefulnessPercentage(UsefulnessReplyType.Yes, dispatcher(x))), + items.map((x) => + UsefulnessGradeChartObject.getUsefulnessPercentage( + UsefulnessReplyType.Yes, + dispatcher(x) + ) + ), 1, RgbColor.lightGreen(darken), false as PointStyle, @@ -191,7 +213,7 @@ export class UsefulnessGradeChartObject extends Chart { static getUsefulnessPercentage( type: UsefulnessReplyType, records: UsefulnessPercentage[] - ) : number { + ): number { const record = records.find((x) => x.replyType === type); return record ? record.percentage : 0; } @@ -199,7 +221,7 @@ export class UsefulnessGradeChartObject extends Chart { static getExpectationReplyType( type: ExpectationReplyType, records: ExpectationPercentage[] - ) : number { + ): number { const record = records.find((x) => x.replyType === type); return record ? record.percentage : 0; } @@ -218,7 +240,7 @@ class DatasetItem { readonly stack: string, hidden = false, borderColorOpacity: number = 1, - bgColorOpacity: number = 0.5, + bgColorOpacity: number = 0.5 ) { this.borderColor = color.toString(borderColorOpacity); this.backgroundColor = color.toString(bgColorOpacity); diff --git a/src/app/modules/salaries/components/rgb-color.ts b/src/app/modules/salaries/components/rgb-color.ts index c6a624e9..14d11425 100644 --- a/src/app/modules/salaries/components/rgb-color.ts +++ b/src/app/modules/salaries/components/rgb-color.ts @@ -1,10 +1,5 @@ export class RgbColor { - constructor( - readonly _r: number, - readonly _g: number, - readonly _b: number - ) { - } + constructor(readonly _r: number, readonly _g: number, readonly _b: number) {} toString(transparent: number | null): string { if (transparent != null) {