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

Merge branch 'feature/US-49' into feature/US-50

This commit is contained in:
Mariela Bonilla 2021-08-11 23:45:56 -06:00
parent d27b8a5c4b 6f786e832a
commit 6575afe8d5
4 changed files with 102 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html
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>

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 {

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

@ -38,6 +38,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 = [];
@ -91,7 +98,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;
}
});
}

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