Merge pull request #125 from Quantum-P3/feature/US-49
update reportes generales del administrador
This commit is contained in:
commit
8135ee564e
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue