eduardo
/
datasurvey
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add nuevos charts de conteos de encuestas

This commit is contained in:
Mariela Bonilla 2021-08-11 20:54:16 -06:00
parent fec15cee41
commit 33a3376d8d
4 changed files with 106 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
<div class="content">
<div class="container-fluid">
<div class="container-fluid" id="reportsGeneral" *ngIf="reportsGeneral">
<div class="row justify-content-around">
<div class="col-lg-3 col-sm-6">
<div class="card">
@ -135,5 +135,47 @@
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="card card-circle-chart" data-background-color="blue" style="background-color: #88c5d6eb">
<div class="card-header text-center">
<h5 class="card-title ds-subtitle" style="color: #082463">Encuestas En Borrador</h5>
</div>
<div class="card-content">
<div id="surveyDraft" class="chart-circle">{{ encuestasBorrador }}<canvas height="160" width="160"></canvas></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card card-circle-chart" data-background-color="green" style="background-color: #67ceb6">
<div class="card-header text-center">
<h5 class="card-title ds-subtitle" style="color: #0a2922">Encuestas Publicadas</h5>
</div>
<div class="card-content">
<div id="surveyActive" class="chart-circle">{{ encuestasPublicadas }}<canvas height="160" width="160"></canvas></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card card-circle-chart" style="background-color: #de8e78">
<div class="card-header text-center">
<h5 class="card-title ds-subtitle" style="color: #671a04">Encuestas Finalizadas</h5>
</div>
<div class="card-content">
<div id="surveyFinished" class="chart-circle">{{ encuestasFinalizadas }}<canvas height="160" width="160"></canvas></div>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card card-circle-chart" data-background-color="brown" style="background-color: #d6c1ab">
<div class="card-header text-center">
<h5 class="card-title ds-subtitle" style="color: #252422">Encuestas Completadas por Usuarios</h5>
</div>
<div class="card-content">
<div id="surveyCountCompletede" class="chart-circle">{{ encuestasCompletadas }}<canvas height="160" width="160"></canvas></div>
</div>
</div>
</div>
</div>
</div>
</div>

5
src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss
View File

@ -1,10 +1,10 @@
.ct-chart {
width: 600px;
width: 100%;
height: 400px;
overflow-x: scroll;
}
.grafico-encuestas-fecha .card {
width: 600px;
width: 100%;
}
.card .icon-big {
@ -26,7 +26,6 @@
.encuestas-por-categoria .table-responsive {
height: 300px;
max-height: 300px;
overflow-x: none;
}
.por-categoria {

27
src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts
View File

@ -31,6 +31,13 @@ export class DashboardAdminComponent implements OnInit {
faWallet = faWallet;
faUsers = faUsers;
faUsersSlash = faUsersSlash;
encuestasPublicadas: number = 0;
encuestasFinalizadas: number = 0;
encuestasBorrador: number = 0;
encuestasCompletadas: number = 0;
reportsGeneral = true;
reportForUsers = false;
chartFechas = [];
@ -83,7 +90,20 @@ export class DashboardAdminComponent implements OnInit {
.pipe(finalize(() => this.cargarCategorias()))
.subscribe(res => {
const tmpEncuestas = res.body;
this.encuestas = tmpEncuestas?.filter(e => e.estado === 'ACTIVE' || e.estado === 'FINISHED');
this.encuestas = tmpEncuestas?.filter(e => e.estado === 'ACTIVE' || e.estado === 'FINISHED' || e.estado === 'DRAFT');
if (tmpEncuestas) {
this.encuestasPublicadas = tmpEncuestas.filter(e => e.estado === 'ACTIVE').length;
this.encuestasFinalizadas = tmpEncuestas.filter(e => e.estado === 'FINISHED').length;
this.encuestasBorrador = tmpEncuestas.filter(e => e.estado === 'DRAFT').length;
let cantidadCompletadas: number = 0;
tmpEncuestas
.filter(e => e.estado === 'ACTIVE')
.forEach(e => {
const _contadorCompletadas = e.calificacion;
cantidadCompletadas = cantidadCompletadas + (Number(_contadorCompletadas?.toString().split('.')[1]) - 1);
});
this.encuestasCompletadas = cantidadCompletadas;
}
});
}
@ -94,11 +114,12 @@ export class DashboardAdminComponent implements OnInit {
.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 => {
let cantPublicadas = 0;
let cantFinalizadas = 0;
this.encuestas?.forEach(e => {
if (e.categoria?.id === c.id && e.estado === 'ACTIVE') {
cantPublicadas = cantPublicadas + 1;

37
src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss
View File

@ -46,3 +46,40 @@
}
}
}
.card-circle-chart {
.card-header {
&:first-child {
border-radius: 12px;
}
}
.card-title {
font-size: 1.2em;
font-weight: 700;
margin-top: 10px;
}
.card-content {
color: #fff;
padding: 10px 15px 10px;
text-align: center;
}
.chart-circle {
display: inline-block;
font-size: 2em;
height: 160px;
line-height: 160px;
margin-top: 30px;
margin-bottom: 30px;
position: relative;
text-align: center;
width: 160px;
canvas {
position: absolute;
top: 0;
left: -4px;
border: 4px solid #ffffffc4;
border-radius: 100%;
}
}
}