Merge pull request #121 from Quantum-P3/feature/US-49

add reportes del administrador
This commit is contained in:
Eduardo Quiros 2021-08-11 19:23:05 +00:00 committed by GitHub
commit d3c80b3de5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 27872 additions and 42 deletions

View File

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

27547
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -86,9 +86,11 @@
"@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",
"jw-angular-social-buttons": "^1.0.0",
"ng-chartist": "^5.0.0",
"ngx-infinite-scroll": "10.0.1",
"ngx-paypal": "^8.0.0",
"ngx-sharebuttons": "^8.0.5",
@ -109,6 +111,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",

View File

@ -32,10 +32,11 @@ import { FooterComponent } from './layouts/footer/footer.component';
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';
import { ListarPlantillaTiendaModule } from './entities/tienda/listar-tienda-plantilla/listar-plantilla-tienda.module';
import { PaypalDialogComponent } from './entities/tienda/paypal-dialog/paypal-dialog.component';
import { NgxPayPalModule } from 'ngx-paypal';
import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';
@ -66,6 +67,7 @@ import { ShareIconsModule } from 'ngx-sharebuttons/icons';
useFactory: missingTranslationHandler,
},
}),
ChartistModule, // add ChartistModule to your imports
ShareButtonsModule,
ShareIconsModule,
NgxPayPalModule,

View File

@ -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>

View File

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

View File

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