fix
parent
72d7d265f8
commit
a63f5a5d98
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue