From 0c00fa0396b7a0363c1c2f2c3ae6be01b11fe46d Mon Sep 17 00:00:00 2001 From: Mariela Bonilla Date: Wed, 11 Aug 2021 05:15:08 -0600 Subject: [PATCH] add visualizar reportes administrador --- angular.json | 6 +- package-lock.json | 50 +++++ package.json | 3 + src/main/webapp/app/app.module.ts | 2 + .../dashboard-admin.component.html | 140 +++++++++++++- .../dashboard-admin.component.scss | 34 ++++ .../dashboard-admin.component.ts | 180 +++++++++++++++++- 7 files changed, 411 insertions(+), 4 deletions(-) diff --git a/angular.json b/angular.json index 6cb3b53..73d4c4e 100644 --- a/angular.json +++ b/angular.json @@ -43,7 +43,11 @@ { "glob": "axios.min.js", "input": "./node_modules/axios/dist", "output": "swagger-ui" }, { "glob": "**/*", "input": "src/main/webapp/swagger-ui/", "output": "swagger-ui" } ], - "styles": ["src/main/webapp/content/scss/paper-dashboard.scss", "./node_modules/swiper/swiper-bundle.min.css"], + "styles": [ + "src/main/webapp/content/scss/paper-dashboard.scss", + "./node_modules/swiper/swiper-bundle.min.css", + "node_modules/chartist/dist/chartist.css" + ], "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "src/main/webapp/content/js/jquery.bootstrap.wizard.min.js", diff --git a/package-lock.json b/package-lock.json index 82ef242..34f07f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,8 +26,10 @@ "@types/gapi.auth2": "0.0.54", "angularx-social-login": "^4.0.1", "bootstrap": "4.6.0", + "chartist": "^0.11.4", "dayjs": "1.10.5", "jquery": "^3.6.0", + "ng-chartist": "^5.0.0", "ngx-infinite-scroll": "10.0.1", "ngx-webstorage": "8.0.0", "rxjs": "6.6.7", @@ -46,6 +48,7 @@ "@angular/compiler-cli": "12.0.5", "@angular/service-worker": "12.0.5", "@types/bootstrap": "^5.0.17", + "@types/chartist": "^0.11.1", "@types/jest": "26.0.23", "@types/jquery": "^3.5.6", "@types/node": "15.12.2", @@ -4202,6 +4205,12 @@ "@types/jquery": "*" } }, + "node_modules/@types/chartist": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@types/chartist/-/chartist-0.11.1.tgz", + "integrity": "sha512-85eNd7rF+e5sLnpprgcDdeqARgNvczEXaBfnrkw0292TBCE4KF/2HmOPA6dIblyHUWV4OZ2kuQBH2R12F+VwYg==", + "dev": true + }, "node_modules/@types/concat-stream": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/@types/concat-stream/-/concat-stream-1.6.0.tgz", @@ -6693,6 +6702,14 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "node_modules/chartist": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/chartist/-/chartist-0.11.4.tgz", + "integrity": "sha512-H4AimxaUD738/u9Mq8t27J4lh6STsLi4BQHt65nOtpLk3xyrBPaLiLMrHw7/WV9CmsjGA02WihjuL5qpSagLYw==", + "engines": { + "node": ">=4.6.0" + } + }, "node_modules/chevrotain": { "version": "9.0.2", "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-9.0.2.tgz", @@ -17179,6 +17196,20 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "node_modules/ng-chartist": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ng-chartist/-/ng-chartist-5.0.0.tgz", + "integrity": "sha512-lTHuND77RuYNxpt0qPlGW5LuohCMUTX0LCMYEhTqCPstBImPP+ZHM7+Dnpzx8FpNstBPandzvlEWVbKPMfn2FA==", + "dependencies": { + "tslib": "^2.1.0" + }, + "peerDependencies": { + "@angular/common": ">=12.0.2", + "@angular/core": ">=12.0.2", + "@types/chartist": "^0.11.0", + "chartist": ">=0.11.4" + } + }, "node_modules/ngx-infinite-scroll": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz", @@ -30356,6 +30387,12 @@ "@types/jquery": "*" } }, + "@types/chartist": { + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/@types/chartist/-/chartist-0.11.1.tgz", + "integrity": "sha512-85eNd7rF+e5sLnpprgcDdeqARgNvczEXaBfnrkw0292TBCE4KF/2HmOPA6dIblyHUWV4OZ2kuQBH2R12F+VwYg==", + "dev": true + }, "@types/concat-stream": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/@types/concat-stream/-/concat-stream-1.6.0.tgz", @@ -32321,6 +32358,11 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "chartist": { + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/chartist/-/chartist-0.11.4.tgz", + "integrity": "sha512-H4AimxaUD738/u9Mq8t27J4lh6STsLi4BQHt65nOtpLk3xyrBPaLiLMrHw7/WV9CmsjGA02WihjuL5qpSagLYw==" + }, "chevrotain": { "version": "9.0.2", "resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-9.0.2.tgz", @@ -40416,6 +40458,14 @@ "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", "dev": true }, + "ng-chartist": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/ng-chartist/-/ng-chartist-5.0.0.tgz", + "integrity": "sha512-lTHuND77RuYNxpt0qPlGW5LuohCMUTX0LCMYEhTqCPstBImPP+ZHM7+Dnpzx8FpNstBPandzvlEWVbKPMfn2FA==", + "requires": { + "tslib": "^2.1.0" + } + }, "ngx-infinite-scroll": { "version": "10.0.1", "resolved": "https://registry.npmjs.org/ngx-infinite-scroll/-/ngx-infinite-scroll-10.0.1.tgz", diff --git a/package.json b/package.json index 2cceb89..43cf1f5 100644 --- a/package.json +++ b/package.json @@ -83,8 +83,10 @@ "@types/gapi.auth2": "0.0.54", "angularx-social-login": "^4.0.1", "bootstrap": "4.6.0", + "chartist": "^0.11.4", "dayjs": "1.10.5", "jquery": "^3.6.0", + "ng-chartist": "^5.0.0", "ngx-infinite-scroll": "10.0.1", "ngx-webstorage": "8.0.0", "rxjs": "6.6.7", @@ -103,6 +105,7 @@ "@angular/compiler-cli": "12.0.5", "@angular/service-worker": "12.0.5", "@types/bootstrap": "^5.0.17", + "@types/chartist": "^0.11.1", "@types/jest": "26.0.23", "@types/jquery": "^3.5.6", "@types/node": "15.12.2", diff --git a/src/main/webapp/app/app.module.ts b/src/main/webapp/app/app.module.ts index 7c6db5a..40d40dc 100644 --- a/src/main/webapp/app/app.module.ts +++ b/src/main/webapp/app/app.module.ts @@ -33,6 +33,7 @@ import { PageRibbonComponent } from './layouts/profiles/page-ribbon.component'; import { ErrorComponent } from './layouts/error/error.component'; import { SidebarComponent } from './layouts/sidebar/sidebar.component'; import { PaginaPrincipalComponent } from './pagina-principal/pagina-principal.component'; +import { ChartistModule } from 'ng-chartist'; @NgModule({ imports: [ @@ -60,6 +61,7 @@ import { PaginaPrincipalComponent } from './pagina-principal/pagina-principal.co useFactory: missingTranslationHandler, }, }), + ChartistModule, // add ChartistModule to your imports ], providers: [ Title, diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html index c452af6..30ab14e 100644 --- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html +++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html @@ -1 +1,139 @@ -

dashboard-admin works!

+
+
+
+
+
+
+
+
+
+ +
+
+
+
+

Ganancias por plantillas

+ {{ gananciasTotales | currency: 'CR' }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+

Cantidad usuarios activos

+ {{ cantUsuarioActivos }} +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+

Cantidad usuarios bloqueados

+ {{ cantUsuarioBloqueados }} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Cantidad de encuestas publicadas por mes

+ +
+
+
+
+
+
+
+

Cantidad de Encuestas Publicadas por Categoria

+
+
+
+
+
+ + + + + + + + +
{{ categoria.nombre }} + {{ encuestasPublicadasCategoria[i] }} +
+
+
+
+
+
+
+
+
+
+

Cantidad de Encuestas Finalizadas por Categoria

+
+
+
+
+
+ + + + + + + + +
{{ categoria.nombre }} + {{ encuestasFinalzadasCategoria[i] }} +
+
+
+
+
+
+
+
+
+
diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss index e69de29..653e090 100644 --- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss +++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss @@ -0,0 +1,34 @@ +.ct-chart { + width: 600px; + height: 400px; + overflow-x: scroll; +} +.grafico-encuestas-fecha .card { + width: 600px; +} + +.card .icon-big { + font-size: 3em; +} + +.icon-success { + color: #00b88d; +} + +.icon-users-active { + color: #018adf; +} + +.icon-users-block { + color: #da1b2b; +} + +.encuestas-por-categoria .table-responsive { + height: 300px; + max-height: 300px; + overflow-x: none; +} + +.por-categoria { + padding: 5% 0; +} diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts index 74c742e..fede9c0 100644 --- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts +++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts @@ -1,12 +1,188 @@ import { Component, OnInit } from '@angular/core'; +import { FacturaService } from '../../factura/service/factura.service'; +import { UsuarioExtraService } from '../../usuario-extra/service/usuario-extra.service'; +import { CategoriaService } from '../../categoria/service/categoria.service'; +import { EncuestaService } from '../../encuesta/service/encuesta.service'; + +import { ICategoria } from '../../categoria/categoria.model'; +import { IEncuesta } from '../../encuesta/encuesta.model'; +import { finalize } from 'rxjs/operators'; + +import * as Chartist from 'chartist'; + +import { faWallet, faUsers, faUsersSlash } from '@fortawesome/free-solid-svg-icons'; + @Component({ selector: 'jhi-dashboard-admin', templateUrl: './dashboard-admin.component.html', styleUrls: ['./dashboard-admin.component.scss'], }) export class DashboardAdminComponent implements OnInit { - constructor() {} + cantUsuarioActivos: number | undefined = 0; + cantUsuarioBloqueados: number | undefined = 0; + encuestasPublicadasCategoria: number[] = []; + encuestasFinalzadasCategoria: number[] = []; + encuestasPublicadasMesAnno: number[] = []; + listaMesesAnnos: string[] = []; + gananciasTotales: number = 0; + categorias: ICategoria[] | undefined = []; + encuestas: IEncuesta[] | undefined = []; + faWallet = faWallet; + faUsers = faUsers; + faUsersSlash = faUsersSlash; - ngOnInit(): void {} + chartFechas = []; + + constructor( + protected facturaService: FacturaService, + protected usuarioExtraService: UsuarioExtraService, + protected encuestaService: EncuestaService, + protected categoriaService: CategoriaService + ) {} + + ngOnInit(): void { + this.loadAll(); + } + + trackId(_index: number, item: ICategoria): number { + return item.id!; + } + + loadAll() { + this.cargarGananciasTotales(); + this.cargarCantidadUsuarios(); + this.cargarEncuestas(); + } + + cargarGananciasTotales() { + this.facturaService.query().subscribe( + res => { + const tempFacturas = res.body; + tempFacturas?.forEach(f => { + if (f.costo != undefined) { + this.gananciasTotales += f.costo; + } + }); + }, + () => {} + ); + } + + cargarCantidadUsuarios() { + this.usuarioExtraService.query().subscribe(res => { + const tmpUsuarios = res.body; + this.cantUsuarioActivos = tmpUsuarios?.filter(u => u.estado === 'ACTIVE').length; + this.cantUsuarioBloqueados = tmpUsuarios?.filter(u => u.estado === 'SUSPENDED').length; + }); + } + + cargarEncuestas() { + this.encuestaService + .query() + .pipe(finalize(() => this.cargarCategorias())) + .subscribe(res => { + const tmpEncuestas = res.body; + this.encuestas = tmpEncuestas?.filter(e => e.estado === 'ACTIVE' || e.estado === 'FINISHED'); + }); + } + + cargarCategorias() { + this.categoriaService + .query() + .pipe(finalize(() => this.acomodarMesesYAnnos())) + .subscribe(res => { + const tmpCategorias = res.body; + this.categorias = tmpCategorias?.filter(c => c.estado === 'ACTIVE'); + let cantPublicadas = 0; + let cantFinalizadas = 0; + const publicadas: number[] | null = []; + const finalizadas: number[] | null = []; + this.categorias?.forEach(c => { + this.encuestas?.forEach(e => { + if (e.categoria?.id === c.id && e.estado === 'ACTIVE') { + cantPublicadas = cantPublicadas + 1; + } + if (e.categoria?.id === c.id && e.estado === 'FINISHED') { + cantFinalizadas = cantFinalizadas + 1; + } + }); + publicadas.push(cantPublicadas); + finalizadas.push(cantFinalizadas); + }); + this.encuestasPublicadasCategoria = publicadas; + this.encuestasFinalzadasCategoria = finalizadas; + }); + } + + acomodarMesesYAnnos() { + const fechas: string[] | null = []; + const cantEncuestasFechas: number[] | null = []; + var encuestasPublicadas = this.encuestas?.filter(e => e.estado === 'ACTIVE'); + if (encuestasPublicadas) { + encuestasPublicadas = this.ordenarFechas(encuestasPublicadas); + encuestasPublicadas.forEach(e => { + if (e.fechaPublicacion) { + let fecha = this.formatoFecha(e.fechaPublicacion); + if (!fechas.includes(fecha)) { + fechas.push(fecha); + } + } + }); + this.listaMesesAnnos = fechas; + + this.listaMesesAnnos.forEach(f => { + let contEncuestaDeFecha = 0; + if (encuestasPublicadas) { + encuestasPublicadas.forEach(e => { + if (e.fechaPublicacion) { + let fecha = this.formatoFecha(e.fechaPublicacion); + if (f === fecha) { + contEncuestaDeFecha++; + } + } + }); + } + cantEncuestasFechas.push(contEncuestaDeFecha); + }); + this.encuestasPublicadasMesAnno = cantEncuestasFechas; + } + this.llenarGraficoEncuestasXFechas(); + } + + llenarGraficoEncuestasXFechas() { + if (this.listaMesesAnnos && this.encuestasPublicadasMesAnno) { + var data = { + // A labels array that can contain any sort of values + labels: this.listaMesesAnnos, + // Our series array that contains series objects or in this case series data arrays + series: [this.encuestasPublicadasMesAnno], + }; + var options = { + low: 0, + showArea: true, + showLabel: true, + axisY: { + onlyInteger: true, + }, + }; + new Chartist.Line('.ct-chart', data, options); + } + } + + formatoFecha(fecha: any): string { + return fecha.month() + 1 + '/' + fecha.year(); + } + + ordenarFechas(encuestasPublicadas: IEncuesta[]): IEncuesta[] { + if (encuestasPublicadas) { + encuestasPublicadas.sort((e1, e2) => { + if (e1.fechaPublicacion && e2.fechaPublicacion) { + return e1.fechaPublicacion < e2.fechaPublicacion ? -1 : e1.fechaPublicacion > e2.fechaPublicacion ? 1 : 0; + } + return 0; + }); + } + return encuestasPublicadas; + } }