Adjusted charts

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

@@ -3,16 +3,21 @@
 
   <div class="row">
     <div class="col-md-3">
-      <div class="mb-3">Кол-во анкет</div>
+      <div class="text-muted mb-1 d-flex justify-content-between align-items-center">
+        <span>Кликабельно <i class="bi bi-caret-down-fill"></i></span>
+        <span>Кол-во анкет</span>
+      </div>
 
       <ul *ngIf="salaries" class="list-group list-group-flush">
         <button
           *ngFor="let item of salaries"
-          (click)="toggleBarDatasetByProfession(item.profession)"
+          (click)="toggleBarDatasetByProfession(item)"
           type="button"
-          class="list-group-item list-group-item-action d-flex justify-content-between align-items-cente">
-          <span>{{ item.professionName }}</span>
-          <span class="badge bg-secondary rounded-pill">{{ item.items.length }}</span>
+          class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
+          <span class="{{ item.turnedOn ? 'fw-bolder' : '' }}">
+            {{ item.professionName }}
+          </span>
+          <span class="badge bg-{{ item.turnedOn ? 'primary' : 'secondary' }} rounded-pill">{{ item.items.length }}</span>
         </button>
       </ul>
     </div>

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

@@ -1,11 +1,4 @@
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { CompanyTypeSelectItem } from '@shared/select-boxes/company-type-select-item';
-import { DeveloperGradeSelectItem } from '@shared/select-boxes/developer-grade-select-item';
-import { ProfessionSelectItem } from '@shared/select-boxes/profession-select-item';
-import { UserSalary } from '@models/salaries/salary.model';
-import { SalariesChart } from '../salaries-chart/salaries-chart';
-import { Chart, ChartType }  from 'chart.js/auto';
-import { RandomRgbColor } from './random-rgb-color';
 import { UserProfession } from '@models/salaries/user-profession';
 import { SalariesChartJsObject } from './salaries-chart-js-object';
 import { SalariesByMoneyBarChart } from '@services/user-salaries.service';
@@ -45,8 +38,9 @@ export class SalariesByGradesChartComponent implements OnInit, OnDestroy {
     // ignored
   }
 
-  toggleBarDatasetByProfession(profession: UserProfession): void {
-    this.chartDataLocal?.toggleDatasetByProfession(profession);
+  toggleBarDatasetByProfession(item: SalariesPerProfession): void {
+    item.toggle();
+    this.chartDataLocal?.toggleDatasetByProfession(item.profession);
   }
 
   private initChart(): void {
@@ -55,7 +49,7 @@ export class SalariesByGradesChartComponent implements OnInit, OnDestroy {
   }
 
   this.chartDataLocal = new SalariesChartJsObject(this.canvasId, this.chart);
-  this.chartDataLocal.hideBarDatasets();
+  this.chartDataLocal.hideProfessionDatasets();
 
   var chartEl = document.getElementById(this.canvasId);
   if (chartEl != null && chartEl.parentElement != null) {

src/app/modules/salaries/components/salaries-by-grades-chart/salaries-chart-js-object.ts

@@ -24,10 +24,10 @@ export class SalariesChartJsObject extends Chart {
         const datasets: Array<ChartDatasetType> = [
         {
             profession: null,
-            type: 'line' as ChartType,
+            type: 'bar' as ChartType,
             label: 'Все',
             data: chartData.items.map(x => x.count),
-            borderWidth: 3,
+            borderWidth: 1,
             borderColor: randomColor.toString(1),
             backgroundColor: randomColor.toString(0.5),
         },
@@ -39,10 +39,10 @@ export class SalariesChartJsObject extends Chart {
             profession: x.profession,
             label: UserProfession[x.profession].toString(),
             data: x.items.map(x => x.count),
-            borderWidth: 1,
-            borderColor: color.toString(0.6),
-            backgroundColor: color.toString(0.3),
-            type: 'bar' as ChartType,
+            borderWidth: 2,
+            borderColor: color.toString(1),
+            backgroundColor: color.toString(0.7),
+            type: 'line' as ChartType,
         });
         });
 
@@ -90,10 +90,10 @@ export class SalariesChartJsObject extends Chart {
         this.datasets = datasets;
     }
 
-    hideBarDatasets(): void {
+    hideProfessionDatasets(): void {
         for (let index = 0; index < this.datasets.length; index++) {
             const dataset = this.datasets[index];
-            if (dataset.type == 'bar') {
+            if (dataset.profession != null) {
                 this.setDatasetVisibility(index, false);
             }
         }

src/app/modules/salaries/components/salaries-per-profession.ts

@@ -6,12 +6,18 @@ import { SplittedByWhitespacesString } from "@shared/value-objects/splitted-by-w
 export class SalariesPerProfession {
 
     readonly professionName: string;
+    turnedOn: boolean = false;
+
     constructor(
         readonly profession: UserProfession,
         readonly items: Array<UserSalary>) {
         this.professionName = new SplittedByWhitespacesString(UserProfession[profession]).toString();
     }
 
+    toggle(): void {
+        this.turnedOn = !this.turnedOn;
+    }
+
     static from(salaries: Array<UserSalary>): {
         local: Array<SalariesPerProfession>,
         remote: Array<SalariesPerProfession>

src/app/services/user-salaries.service.ts

@@ -58,6 +58,11 @@ export interface CreateSalaryRecordResponse {
   createdSalary: UserSalary | null;
 }
 
+export interface UpdateSalaryRequest {
+  company: CompanyType;
+  grade: DeveloperGrade | null;
+}
+
 @Injectable({
   providedIn: 'root'
 })
@@ -77,6 +82,10 @@ export class UserSalariesService {
     return this.api.post<CreateSalaryRecordResponse>(this.root, data);
   }
 
+  update(id: string, data: UpdateSalaryRequest): Observable<void> {
+    return this.api.post<void>(this.root + id, data);
+  }
+
   delete(dataId: string): Observable<void> {
     return this.api.delete<void>(this.root + dataId);
   }