master
drfelfel 2020-10-16 23:40:44 +03:30
parent 72d7d265f8
commit a63f5a5d98
2 changed files with 211 additions and 25 deletions

View File

@ -17,27 +17,130 @@
</div> </div>
<section> <section *ngIf="data.length > 0">
<ng-container *ngFor="let item of data">
<div class="stats"> <div class="stats">
<mat-card> <mat-card>
<mat-card-header> <mat-card-header>
<mat-card-title> <mat-card-title>
<ng-container *ngFor="let dataset of item.datasets"> <ng-container *ngFor="let dataset of data[0].datasets">
# {{ dataset.label }} # {{ dataset.label }}
</ng-container> </ng-container>
</mat-card-title> </mat-card-title>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<ngx-chartjs <ngx-chartjs
[data]="item" [data]="data[0]"
[type]="item.type" [type]="data[0].type"
[options]="options" [options]="options"
width="800" width="500"
height="400" height="250"
></ngx-chartjs>
</mat-card-content>
</mat-card>
</div>
<div class="stats">
<mat-card>
<mat-card-header>
<mat-card-title>
<ng-container *ngFor="let dataset of data[1].datasets">
# {{ dataset.label }}
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ngx-chartjs
[data]="data[1]"
[type]="data[1].type"
[options]="options"
width="500"
height="250"
></ngx-chartjs>
</mat-card-content>
</mat-card>
</div>
<div class="stats">
<mat-card>
<mat-card-header>
<mat-card-title>
<ng-container *ngFor="let dataset of data[2].datasets">
# {{ dataset.label }}
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ngx-chartjs
[data]="data[2]"
[type]="data[2].type"
[options]="options"
width="500"
height="250"
></ngx-chartjs>
</mat-card-content>
</mat-card>
</div>
<div class="stats">
<mat-card>
<mat-card-header>
<mat-card-title>
<ng-container *ngFor="let dataset of data[3].datasets">
# {{ dataset.label }}
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ngx-chartjs
[data]="data[3]"
[type]="data[3].type"
[options]="options"
width="500"
height="250"
></ngx-chartjs>
</mat-card-content>
</mat-card>
</div>
<div class="stats">
<mat-card>
<mat-card-header>
<mat-card-title>
<ng-container *ngFor="let dataset of data[4].datasets">
# {{ dataset.label }}
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ngx-chartjs
[data]="data[4]"
[type]="data[4].type"
[options]="options"
width="500"
height="250"
></ngx-chartjs>
</mat-card-content>
</mat-card>
</div>
<div class="stats">
<mat-card>
<mat-card-header>
<mat-card-title>
<ng-container *ngFor="let dataset of data[5].datasets">
# {{ dataset.label }}
</ng-container>
</mat-card-title>
</mat-card-header>
<mat-card-content>
<ngx-chartjs
[data]="data[5]"
[type]="data[5].type"
[options]="options"
width="500"
height="250"
></ngx-chartjs> ></ngx-chartjs>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
</ng-container>
</section> </section>

View File

@ -46,6 +46,7 @@ export class AppComponent implements OnInit {
responsive: true, responsive: true,
} }
precolor = {}
data: any = [] data: any = []
@ -60,22 +61,33 @@ export class AppComponent implements OnInit {
this.subscribe() this.subscribe()
let cachedColor = null let cachedMajorColor = []
let cachedLabel = null let cachedMajorLabel = []
this.rayconnect.Query({ this.rayconnect.Query({
scope: "kateb", scope: "kateb",
address: "volunteers/stats/live", address: "volunteers/stats/live",
method: "LIVE", method: "LIVE",
}, (res => { }, (res => {
res['data']['majors'] = res['data']['majors'].sort(function (a, b) { return b.count - a.count });
res['data']['waiting'] = res['data']['waiting'].sort(function (a, b) { return b.count - a.count });
res['data']['entry'] = res['data']['entry'].sort(function (a, b) { return b.count - a.count });
res['data']['steps'] = res['data']['steps'].sort(function (a, b) { return b.count - a.count });
res['data']['shift'] = res['data']['shift'].sort(function (a, b) { return b.count - a.count });
console.log(res['data']) console.log(res['data'])
if (!cachedColor) cachedColor = this.RandomColor(res['data']['majors'].length) let cachedMajorColor = this.RandomColor(res['data']['majors'].length, 'majors');
if (!cachedLabel) cachedLabel = res['data']['majors'].map((major) => { let cachedMajorLabel = res['data']['majors'].map((major) => {
return major._id return major._id
}), })
this.buildMajorsStats(res['data']['majors'], cachedColor, cachedLabel)
this.buildMajorsStats(res['data']['majors'], res['data']['waiting'],res['data']['entry'], res['data']['steps'],res['data']['grade'],res['data']['shift'], cachedMajorColor, cachedMajorLabel)
@ -101,20 +113,23 @@ export class AppComponent implements OnInit {
if (res['data']['status'] == true) { } if (res['data']['status'] == true) { }
}) })
} }
RandomColor(len) { RandomColor(len, id) {
if (this.precolor[id]) return this.precolor[id]
let colors = [] let colors = []
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
colors.push('#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6) colors.push('#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6)
) )
} }
this.precolor[id] = colors
return colors return colors
} }
buildMajorsStats(majors, colors, labels) { buildMajorsStats(majors, waiting, entry,steps,grades,shift, colors, labels) {
this.data[0] = { this.data[0] = {
@ -130,21 +145,89 @@ export class AppComponent implements OnInit {
}] }]
} }
/* this.data[2] = { this.data[1] = {
labels: majors.map((major) => { labels: waiting.map((w) => {
return major.name switch (w._id) {
case "wait":
return "در انتظار تایید"
case "no":
return "فاقد وضعیت"
case "resolve":
return "تایید شده"
case "reject":
return "رد شده"
}
}), }),
type: "doughnut", type: "bar",
datasets: [{ datasets: [{
label: 'تعداد ثبت نام در انتظار تایید در مرحله پنجم (آموزش)', label: 'وضعیت تایید افراد',
data: majors.map(() => { data: waiting.map((w) => {
return Math.floor(Math.random() * 6) + 1 return w.count
}), }),
backgroundColor: this.RandomColor(majors.length), backgroundColor: this.RandomColor(waiting.length, "waiting"),
borderWidth: 1 borderWidth: 1
}] }]
} */ }
this.data[2] = {
labels: entry.map((w) => {
return w._id
}),
type: "pie",
datasets: [{
label: 'امار ورودی ها',
data: entry.map((w) => {
return w.count
}),
backgroundColor: this.RandomColor(entry.length, "entry"),
borderWidth: 1
}]
}
this.data[3] = {
labels: steps.map((w) => {
return w._id
}),
type: "pie",
datasets: [{
label: 'وضعیت افراد در مراحل',
data: steps.map((w) => {
return w.count
}),
backgroundColor: this.RandomColor(steps.length, "steps"),
borderWidth: 1
}]
}
this.data[4] = {
labels: grades.map((w) => {
return w._id
}),
type: "pie",
datasets: [{
label: 'آمار مقطع کاربران',
data: grades.map((w) => {
return w.count
}),
backgroundColor: this.RandomColor(grades.length, "grades"),
borderWidth: 1
}]
}
this.data[5] = {
labels: shift.map((w) => {
return w._id
}),
type: "pie",
datasets: [{
label: 'آمار کاربران (شیفت)',
data: shift.map((w) => {
return w.count
}),
backgroundColor: this.RandomColor(shift.length, "shift"),
borderWidth: 1
}]
}
/* this.data[3] = { /* this.data[3] = {
labels: majors.map((major) => { labels: majors.map((major) => {
return major.name return major.name