add visualizar reportes administrador

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",

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",

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",

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,

src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html

@@ -1 +1,139 @@
-<p>dashboard-admin works!</p>
+<div class="content">
+  <div class="container-fluid">
+    <div class="row justify-content-around">
+      <div class="col-lg-3 col-sm-6">
+        <div class="card">
+          <div class="card-content">
+            <div class="row">
+              <div class="col-xs-5 w-25 px-1">
+                <div class="icon-big icon-success text-center">
+                  <fa-icon [icon]="faWallet"></fa-icon>
+                </div>
+              </div>
+              <div class="col-xs-7 w-50">
+                <div class="numbers">
+                  <p class="ds-title">Ganancias por plantillas</p>
+                  {{ gananciasTotales | currency: 'CR' }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <hr />
+            <br />
+          </div>
+        </div>
+      </div>
+      <div class="col-lg-3 col-sm-6">
+        <div class="card">
+          <div class="card-content">
+            <div class="row justify-content-center">
+              <div class="col-xs-5 w-25 px-1">
+                <div class="icon-big icon-users-active text-center">
+                  <fa-icon [icon]="faUsers"></fa-icon>
+                </div>
+              </div>
+              <div class="col-xs-7 w-75">
+                <div class="numbers">
+                  <p class="ds-title">Cantidad usuarios activos</p>
+                  {{ cantUsuarioActivos }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <hr />
+            <br />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-lg-3 col-sm-6">
+        <div class="card">
+          <div class="card-content">
+            <div class="row justify-content-center">
+              <div class="col-xs-4 w-25 px-1">
+                <div class="icon-big icon-users-block text-center">
+                  <fa-icon [icon]="faUsersSlash"></fa-icon>
+                </div>
+              </div>
+              <div class="col-xs-5 w-75">
+                <div class="numbers">
+                  <p class="ds-title">Cantidad usuarios bloqueados</p>
+                  {{ cantUsuarioBloqueados }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <hr />
+            <br />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="row justify-content-around por-categoria">
+      <div class="col-md-5">
+        <div class="grafico-encuestas-fecha">
+          <div class="card">
+            <h1 class="ds-title">Cantidad de encuestas publicadas por mes</h1>
+
+            <div class="ct-chart ct-chart-line"></div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="card encuestas-por-categoria">
+          <div class="card-header w-100">
+            <h4 class="ds-title">Cantidad de Encuestas Publicadas por Categoria</h4>
+          </div>
+          <div class="card-content">
+            <div class="row">
+              <div class="col-md-12">
+                <div class="table-responsive">
+                  <table class="table">
+                    <tbody>
+                      <tr *ngFor="let categoria of categorias; let i = index; trackBy: trackId">
+                        <td>{{ categoria.nombre }}</td>
+
+                        <td class="text-right">
+                          {{ encuestasPublicadasCategoria[i] }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-md-3">
+        <div class="card encuestas-por-categoria">
+          <div class="card-header w-100">
+            <h4 class="ds-title">Cantidad de Encuestas Finalizadas por Categoria</h4>
+          </div>
+          <div class="card-content">
+            <div class="row">
+              <div class="col-md-12">
+                <div class="table-responsive">
+                  <table class="table">
+                    <tbody>
+                      <tr *ngFor="let categoria of categorias; let i = index; trackBy: trackId">
+                        <td>{{ categoria.nombre }}</td>
+
+                        <td class="text-right">
+                          {{ encuestasFinalzadasCategoria[i] }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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;
+}

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;
+  }
 }