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