Merge remote-tracking branch 'origin/main' into historical-data

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

@@ -1,9 +1,9 @@
 <app-page-header>Исторические данные</app-page-header>
 
-<div class="container mt-5 mb-5" *ngIf="data; else dataLoading">
-  <div class="card" *ngIf="!data.shouldAddOwnSalary; else noCurrentSalary">
-    <div class="card-body">
-      <div class="mb-5 h2">Тенденция изменения зарплат</div>
+<div class="container mt-5" *ngIf="data; else dataLoading">
+  <div *ngIf="!data.shouldAddOwnSalary; else noCurrentSalary">
+    <div class="card card-body">
+      <div class="mb-3 h1">Тенденция изменения медианы и средней зарплаты</div>
 
       <div class="mb-5">
         <p>
@@ -32,7 +32,13 @@
         />
       </div>
 
-      <div *ngIf="data.salariesCountWeekByWeekChart && data.salariesCountWeekByWeekChart.hasGradeItems" class="mb-5">
+      <div
+        *ngIf="
+          data.salariesCountWeekByWeekChart &&
+          data.salariesCountWeekByWeekChart.hasGradeItems
+        "
+        class="mb-5"
+      >
         <app-historical-salaries-by-grade-chart
           [data]="data.salariesCountWeekByWeekChart"
         />
@@ -41,6 +47,15 @@
   </div>
 </div>
 
+<div class="container mt-5" *ngIf="surveyData; else dataLoading">
+  <div class="card card-body">
+    <div class="mb-5 h1">Обратная связь по статистике</div>
+    <div class="">
+      <app-historical-survey-chart [data]="surveyData" />
+    </div>
+  </div>
+</div>
+
 <ng-template #dataLoading>
   <div class="container mt-5">
     <app-data-loader></app-data-loader>

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;
@@ -60,6 +63,14 @@ export class HistoricalChartsPageComponent implements OnInit, OnDestroy {
           this.filterData = x;
           this.load(this.filterData);
         });
+
+      this.service
+        .surveyChart()
+        .pipe(untilDestroyed(this))
+        .subscribe((x) => {
+          this.surveyData = x;
+        });
+
       return;
     }
 

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<ChartDatasetType> = [];
 
   constructor(canvasId: string, chartData: SalariesCountWeekByWeekChart) {
-    const datasets: Array<ChartDatasetType> = [
-      new DatasetItem(
-        "Количество анкет",
-        chartData.totalCountItems.map((x) => x.totalCount),
-        4,
-        new RandomRgbColor(),
-        false as PointStyle,
-        null,
-        "y1",
-        false
-      ),
-    ];
+    const datasets: Array<ChartDatasetType> = [];
 
     const juniorSalaries = [];
     const middleSalaries = [];
@@ -68,22 +57,32 @@ 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
       )
     );
 

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

@@ -1,5 +1,5 @@
 <div class="mb-3">
-  <span class="h4">Зарплаты по грейдам</span>
+  <span class="h4">Тенденция изменений, разделение по грейдам</span>
 </div>
 
 <div class="mb-3">

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<ChartDatasetType> = [
-      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, {

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

@@ -1,5 +1,5 @@
 <div class="mb-3">
-  <span class="h4">Изменение медианной и средней зарплат по времени</span>
+  <span class="h4">Общие данные</span>
 </div>
 
 <div id="canvas-historical-chart-container">

src/app/modules/salaries/components/historical-charts-page/historical-survey-chart/expectation-chart-object.ts

@@ -0,0 +1,176 @@
+import { Chart, ChartType, PointStyle } from "chart.js/auto";
+import { RandomRgbColor } from "../../random-rgb-color";
+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<DatasetItem> = [];
+
+  constructor(canvasId: string, chartData: HistoricalSurveyChartResponse) {
+    const data = chartData.surveyResultsByWeeksChart;
+    const datasets: Array<DatasetItem> = [
+      new DatasetItem(
+        "Количество ответов",
+        data.items.map((x) => x.totalCount),
+        4,
+        new RandomRgbColor(),
+        "circle",
+        "y1",
+        "line",
+        "0"
+      ),
+      ...ExpectationChartObject.prepareExpectationDatasets(
+        data.items,
+        "Казахстанские компании",
+        "1",
+        0,
+        (x) => x.localExpectationPercentage
+      ),
+      ...ExpectationChartObject.prepareExpectationDatasets(
+        data.items,
+        "Удаленка",
+        "2",
+        50,
+        (x) => x.remoteExpectationPercentage
+      ),
+    ];
+
+    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) => ExpectationPercentage[]
+  ): Array<DatasetItem> {
+    return [
+      new DatasetItem(
+        "Ниже ожиданий, " + postfix,
+        items.map((x) =>
+          ExpectationChartObject.getExpectationReplyType(
+            ExpectationReplyType.LessThanExpected,
+            dispatcher(x)
+          )
+        ),
+        1,
+        RgbColor.red(darken),
+        false as PointStyle,
+        "y",
+        "bar",
+        stack,
+        1,
+        0.8
+      ),
+      new DatasetItem(
+        "Ожидаемо, " + postfix,
+        items.map((x) =>
+          ExpectationChartObject.getExpectationReplyType(
+            ExpectationReplyType.Expected,
+            dispatcher(x)
+          )
+        ),
+        1,
+        RgbColor.blue(darken),
+        false as PointStyle,
+        "y",
+        "bar",
+        stack,
+        1,
+        0.8
+      ),
+      new DatasetItem(
+        "Выше ожиданий, " + postfix,
+        items.map((x) =>
+          ExpectationChartObject.getExpectationReplyType(
+            ExpectationReplyType.MoreThanExpected,
+            dispatcher(x)
+          )
+        ),
+        1,
+        RgbColor.lightGreen(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 {
+  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;
+}