Browse Source

fix

master
drfelfel 1 year ago
parent
commit
a63f5a5d98
2 changed files with 211 additions and 25 deletions
  1. +111
    -8
      src/routes/panel/dashboard/app/app.component.html
  2. +100
    -17
      src/routes/panel/dashboard/app/app.component.ts

+ 111
- 8
src/routes/panel/dashboard/app/app.component.html View File

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

+ 100
- 17
src/routes/panel/dashboard/app/app.component.ts View File

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

Loading…
Cancel
Save