add visualizar reportes administrador
This commit is contained in:
Mariela Bonilla
parent
3c58e9f4c9
commit
0c00fa0396
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue