From 33a3376d8d12e231baa02716412ce8539566eb30 Mon Sep 17 00:00:00 2001
From: Mariela Bonilla <mbonilla.guti@gmail.com>
Date: Wed, 11 Aug 2021 20:54:16 -0600
Subject: [PATCH] add nuevos charts de conteos de encuestas

---
 .../dashboard-admin.component.html            | 44 ++++++++++++++++++-
 .../dashboard-admin.component.scss            |  5 +--
 .../dashboard-admin.component.ts              | 27 ++++++++++--
 .../paper-dashboard/cards/_card-chart.scss    | 37 ++++++++++++++++
 4 files changed, 106 insertions(+), 7 deletions(-)

diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html
index 30ab14e..67a98f4 100644
--- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html
+++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.html
@@ -1,5 +1,5 @@
 <div class="content">
-  <div class="container-fluid">
+  <div class="container-fluid" id="reportsGeneral" *ngIf="reportsGeneral">
     <div class="row justify-content-around">
       <div class="col-lg-3 col-sm-6">
         <div class="card">
@@ -135,5 +135,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>
diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss
index 653e090..1c1f9ba 100644
--- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss
+++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.scss
@@ -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 {
diff --git a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts
index fede9c0..6f7258f 100644
--- a/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts
+++ b/src/main/webapp/app/entities/dashboard/dashboard-admin/dashboard-admin.component.ts
@@ -31,6 +31,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 = [];
 
@@ -83,7 +90,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;
+        }
       });
   }
 
@@ -94,11 +114,12 @@ export class DashboardAdminComponent implements OnInit {
       .subscribe(res => {
         const tmpCategorias = res.body;
         this.categorias = tmpCategorias?.filter(c => c.estado === 'ACTIVE');
-        let cantPublicadas = 0;
-        let cantFinalizadas = 0;
+
         const publicadas: number[] | null = [];
         const finalizadas: number[] | null = [];
         this.categorias?.forEach(c => {
+          let cantPublicadas = 0;
+          let cantFinalizadas = 0;
           this.encuestas?.forEach(e => {
             if (e.categoria?.id === c.id && e.estado === 'ACTIVE') {
               cantPublicadas = cantPublicadas + 1;
diff --git a/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss b/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss
index d730aa6..42e86d3 100644
--- a/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss
+++ b/src/main/webapp/content/scss/paper-dashboard/cards/_card-chart.scss
@@ -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%;
+    }
+  }
+}