Added chart

src/app/modules/home/components/about-us/about-us.component.html

@@ -4,7 +4,7 @@
   <div class="card">
     <div class="card-body p-5">
       <div class="fs-4 fw-light text-reset">
-        Author: <a href="https://maximgorbatyuk.github.io" target="_blank">Maxim Gorbatyuk</a>
+        Author: <a href="https://mgorbatyuk.dev" target="_blank">Maxim Gorbatyuk</a>
       </div>
 
       <hr class="mt-3" />

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

@@ -1,3 +1,28 @@
-<div>
-  <canvas id="canvas">{{chartData}}</canvas>
+<div class="">
+  <div class="h5 mb-3">{{ title }}</div>
+
+  <div class="row">
+    <div class="col-md-3">
+      <div class="mb-3">Кол-во анкет</div>
+
+      <ul *ngIf="salaries" class="list-group list-group-flush">
+        <button
+          *ngFor="let item of salaries"
+          (click)="toggleBarDatasetByProfession(item.profession)"
+          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>
+        </button>
+      </ul>
+    </div>
+
+    <div class="col-md-9" *ngIf="canvasId">
+      <div id="canvas-container">
+        <canvas [attr.id]="canvasId">{{chartDataLocal}}</canvas>
+      </div>
+    </div>
+
+  </div>
+
 </div>

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

@@ -1,3 +1,14 @@
 #canvas {
     min-height: 400px;
 }
+
+#canvas-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    min-height: 400px;
+}
+
+.list-group-item {
+    font-size: smaller;
+}

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

@@ -7,6 +7,9 @@ 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';
+import { SalariesPerProfession } from '../salaries-per-profession';
 
 @Component({
   selector: 'app-salaries-by-grades-chart',
@@ -16,76 +19,47 @@ import { UserProfession } from '@models/salaries/user-profession';
 export class SalariesByGradesChartComponent implements OnInit, OnDestroy {
 
   @Input()
-  chart: SalariesChart | null = null;
+  chart: SalariesByMoneyBarChart | null = null;
 
-  chartData: Chart | null = null;
+  @Input()
+  title: string | null = null;
 
-  constructor() {}
+  @Input()
+  salaries: Array<SalariesPerProfession> | null = null;
 
-  ngOnInit(): void {
-    if (this.chart == null ||
-      this.chart.salariesByMoneyBarChart == null) {
-      return;
-    }
+  chartDataLocal: SalariesChartJsObject | null = null;
 
-    const chartData = this.chart.salariesByMoneyBarChart;
-    const randomColor = new RandomRgbColor();
-    const datasets = [
-      {
-        type: 'line' as ChartType,
-        label: 'Все',
-        data: chartData.items.map(x => x.count),
-        borderWidth: 3,
-        borderColor: randomColor.toString(1),
-        backgroundColor: randomColor.toString(0.5),
-      },
-    ];
+  readonly canvasId = 'canvas_' + Math.random().toString(36).substring(7);
 
-    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,
-      });
-    });
+  constructor() {}
 
-    this.chartData = new Chart('canvas', {
-      type: 'scatter',
-      data: {
-        labels: chartData.labels
-          .map(x => {
-            let num = Number(x);
-            if (isNaN(num)) {
-              throw Error('Invalid label ' + x);
-            }
+  ngOnInit(): void {
+    // ignored
+  }
 
-            num = num / 1000;
-            return num + 'k';
-          }),
-        datasets: datasets,
-      },
-      options: {
-        maintainAspectRatio: false,
-        scales: {
-          y: {
-            beginAtZero: true,
-          },
-        },
-        elements: {
-          line: {
-              tension: 0.4
-          },
-        }
-      },
-    });
+  ngAfterViewInit() {
+    this.initChart();
   }
 
   ngOnDestroy(): void {
     // ignored
   }
+
+  toggleBarDatasetByProfession(profession: UserProfession): void {
+    this.chartDataLocal?.toggleDatasetByProfession(profession);
+  }
+
+  private initChart(): void {
+    if (this.chart == null || this.salaries == null) {
+      return;
+  }
+
+  this.chartDataLocal = new SalariesChartJsObject(this.canvasId, this.chart);
+  this.chartDataLocal.hideBarDatasets();
+
+  var chartEl = document.getElementById(this.canvasId);
+  if (chartEl != null && chartEl.parentElement != null) {
+    chartEl.style.height = chartEl?.parentElement.style.height ?? '100%';
+  }
+  }
 }

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

@@ -0,0 +1,114 @@
+import { UserProfession } from '@models/salaries/user-profession';
+import { SalariesByMoneyBarChart } from '@services/user-salaries.service';
+import { Chart, ChartType }  from 'chart.js/auto';
+import { RandomRgbColor } from './random-rgb-color';
+
+interface ChartDatasetType {
+    profession: UserProfession | null;
+    label: string;
+    data: Array<number>;
+    borderWidth: number;
+    borderColor: string;
+    backgroundColor: string;
+    type: ChartType;
+}
+
+export class SalariesChartJsObject extends Chart {
+
+    private readonly datasets: Array<ChartDatasetType> = [];
+
+    constructor(canvasId: string, chartData: SalariesByMoneyBarChart) {
+
+        const ctx = document.getElementById(canvasId) as HTMLCanvasElement;
+        const randomColor = new RandomRgbColor();
+        const datasets: Array<ChartDatasetType> = [
+        {
+            profession: null,
+            type: 'line' as ChartType,
+            label: 'Все',
+            data: chartData.items.map(x => x.count),
+            borderWidth: 3,
+            borderColor: randomColor.toString(1),
+            backgroundColor: randomColor.toString(0.5),
+        },
+        ];
+
+        chartData.itemsByProfession.forEach((x, i) => {
+        const color = new RandomRgbColor();
+        datasets.push({
+            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,
+        });
+        });
+
+        super(
+            canvasId,
+            {
+                type: 'scatter',
+                data: {
+                    labels: chartData.labels
+                    .map(x => {
+                        let num = Number(x);
+                        if (isNaN(num)) {
+                        throw Error('Invalid label ' + x);
+                        }
+
+                        num = num / 1000;
+                        return num + 'k';
+                    }),
+                    datasets: datasets,
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        y: {
+                            beginAtZero: true,
+                        },
+                    },
+                    elements: {
+                        line: {
+                            tension: 0.4
+                        },
+                    },
+                    plugins: {
+                        legend: {
+                            position: 'bottom',
+                            title: {
+                                position: 'start',
+                            },
+                          }
+                    }
+                },
+            });
+
+        this.datasets = datasets;
+    }
+
+    hideBarDatasets(): void {
+        for (let index = 0; index < this.datasets.length; index++) {
+            const dataset = this.datasets[index];
+            if (dataset.type == 'bar') {
+                this.setDatasetVisibility(index, false);
+            }
+        }
+
+        this.update();
+    }
+
+    toggleDatasetByProfession(profession: UserProfession): void {
+        const index = this.datasets.findIndex(x => x.profession == profession);
+        if (index == -1) {
+            return;
+        }
+
+        const visibility = !this.isDatasetVisible(index);
+        this.setDatasetVisibility(index, visibility);
+        this.update();
+    }
+}