|
1 | 1 | import { Component, ViewChild } from '@angular/core'; |
2 | | -import { ChartConfiguration, ChartData, ChartEvent,ChartType } from 'chart.js'; |
| 2 | +import { ChartConfiguration, ChartData, ChartType } from 'chart.js'; |
3 | 3 | import { BaseChartDirective } from 'ng2-charts'; |
4 | 4 | import DataLabelsPlugin from 'chartjs-plugin-datalabels'; |
5 | 5 | import { UsersService } from 'src/app/shared/services/users.service'; |
@@ -54,23 +54,37 @@ export class UserReportComponent { |
54 | 54 | } |
55 | 55 |
|
56 | 56 | prepareChartData(users: User[]) { |
57 | | - this.barChartData.labels = users |
58 | | - .map((user) => DateUtil.getYear(user.createdAt)) |
59 | | - .filter((value, index, self) => self.indexOf(value) === index); |
| 57 | + const userCountsByYear: any = users.reduce((result: any, user) => { |
| 58 | + const year = DateUtil.getYear(user.createdAt); |
| 59 | + result[year] = result[year] || { active: 0, inactive: 0 }; |
| 60 | + if (user.status) { |
| 61 | + result[year].active += 1; |
| 62 | + } else { |
| 63 | + result[year].inactive += 1; |
| 64 | + } |
| 65 | + return result; |
| 66 | + }, {}); |
60 | 67 |
|
61 | | - let activeUser = []; |
62 | | - let inactiveUser = []; |
| 68 | + console.log(userCountsByYear); |
| 69 | + const uniqueYears = Object.keys(userCountsByYear) |
| 70 | + .sort() |
| 71 | + .filter((value, index, self) => self.indexOf(value) === index); |
63 | 72 |
|
64 | | - users.map(() => {}); |
| 73 | + const activeUserCounts = uniqueYears.map( |
| 74 | + (year) => userCountsByYear[year].active |
| 75 | + ); |
| 76 | + const inactiveUserCounts = uniqueYears.map( |
| 77 | + (year) => userCountsByYear[year].inactive |
| 78 | + ); |
| 79 | + this.barChartData.labels = uniqueYears; |
65 | 80 |
|
66 | 81 | this.barChartData.datasets.push({ |
67 | | - data: [15], |
68 | | - label: 'Active user', |
| 82 | + data: inactiveUserCounts, |
| 83 | + label: 'Inactive user', |
69 | 84 | }); |
70 | | - |
71 | 85 | this.barChartData.datasets.push({ |
72 | | - data: [6], |
73 | | - label: 'Inactive user', |
| 86 | + data: activeUserCounts, |
| 87 | + label: 'Active user', |
74 | 88 | }); |
75 | 89 |
|
76 | 90 | this.chart?.update(); |
|
0 commit comments