From f1ba85ab2f5f0c37d47c0adad3e435bf465f7098 Mon Sep 17 00:00:00 2001
From: "maxim.gorbatyuk" <maxim.gorbatyuk@outlook.com>
Date: Mon, 15 Jan 2024 17:38:49 +0600
Subject: [PATCH] Added mixed chart

---
 .../salaries-by-grades-chart.component.ts     | 21 ++++++++++++++++---
 src/app/services/user-salaries.service.ts     |  6 ++++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts
index a2eca28a..1607938d 100644
--- a/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts
+++ b/src/app/modules/salaries/components/salaries-by-grades-chart/salaries-by-grades-chart.component.ts
@@ -4,8 +4,9 @@ import { DeveloperGradeSelectItem } from '@shared/select-boxes/developer-grade-s
 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 from 'chart.js/auto';
+import { Chart, ChartType }  from 'chart.js/auto';
 import { RandomRgbColor } from './random-rgb-color';
+import { UserProfession } from '@models/salaries/user-profession';
 
 @Component({
   selector: 'app-salaries-by-grades-chart',
@@ -30,16 +31,30 @@ export class SalariesByGradesChartComponent implements OnInit, OnDestroy {
     const randomColor = new RandomRgbColor();
     const datasets = [
       {
+        type: 'line' as ChartType,
         label: 'Все',
         data: chartData.items.map(x => x.count),
-        borderWidth: 1,
+        borderWidth: 3,
         borderColor: randomColor.toString(1),
         backgroundColor: randomColor.toString(0.5),
       },
     ];
 
+    chartData.itemsByProfession.forEach((x, i) => {
+      const profession = x.profession;
+      const color = new RandomRgbColor();
+      datasets.push({
+        label: UserProfession[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,
+      });
+    });
+
     this.chartData = new Chart('canvas', {
-      type: 'line',
+      type: 'scatter',
       data: {
         labels: chartData.labels
           .map(x => {
diff --git a/src/app/services/user-salaries.service.ts b/src/app/services/user-salaries.service.ts
index 5cfa8f55..e829cc4b 100644
--- a/src/app/services/user-salaries.service.ts
+++ b/src/app/services/user-salaries.service.ts
@@ -33,9 +33,15 @@ export interface SalariesByProfession {
   salaries: UserSalary[];
 }
 
+export interface SalariesByProfessionMoneyBarChartItem {
+  profession: UserProfession;
+  items: Array<SalariesByMoneyBarChartItem>;
+}
+
 export interface SalariesByMoneyBarChart {
   labels: string[];
   items: Array<SalariesByMoneyBarChartItem>;
+  itemsByProfession: Array<SalariesByProfessionMoneyBarChartItem>;
 }
 
 export interface SalariesByMoneyBarChartItem {