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>
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
.ct-chart {
|
.ct-chart {
|
||||||
width: 600px;
|
width: 100%;
|
||||||
height: 400px;
|
height: 400px;
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
}
|
}
|
||||||
.grafico-encuestas-fecha .card {
|
.grafico-encuestas-fecha .card {
|
||||||
width: 600px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .icon-big {
|
.card .icon-big {
|
||||||
|
@ -26,7 +26,6 @@
|
||||||
.encuestas-por-categoria .table-responsive {
|
.encuestas-por-categoria .table-responsive {
|
||||||
height: 300px;
|
height: 300px;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow-x: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.por-categoria {
|
.por-categoria {
|
||||||
|
|
|
@ -36,6 +36,13 @@ export class DashboardAdminComponent implements OnInit {
|
||||||
faWallet = faWallet;
|
faWallet = faWallet;
|
||||||
faUsers = faUsers;
|
faUsers = faUsers;
|
||||||
faUsersSlash = faUsersSlash;
|
faUsersSlash = faUsersSlash;
|
||||||
|
encuestasPublicadas: number = 0;
|
||||||
|
encuestasFinalizadas: number = 0;
|
||||||
|
encuestasBorrador: number = 0;
|
||||||
|
encuestasCompletadas: number = 0;
|
||||||
|
|
||||||
|
reportsGeneral = true;
|
||||||
|
reportForUsers = false;
|
||||||
|
|
||||||
chartFechas = [];
|
chartFechas = [];
|
||||||
|
|
||||||
|
@ -88,7 +95,20 @@ export class DashboardAdminComponent implements OnInit {
|
||||||
.pipe(finalize(() => this.cargarCategorias()))
|
.pipe(finalize(() => this.cargarCategorias()))
|
||||||
.subscribe(res => {
|
.subscribe(res => {
|
||||||
const tmpEncuestas = res.body;
|
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