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
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ categoria.nombre }} |
+
+
+ {{ encuestasPublicadasCategoria[i] }}
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ 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;
+ }
}