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

update reportes generales del administrador
This commit is contained in:
Eduardo Quiros 2021-08-12 06:18:50 +00:00 committed by GitHub
commit 8135ee564e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 102 additions and 4 deletions

View File

@ -138,5 +138,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>

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 {

View File

@ -36,6 +36,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 = [];
@ -88,7 +95,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;
}
});
}

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