+ Graph card update

lapig-ufg · Apr 4, 2024 · 1f0c6e1 · 1f0c6e1
1 parent 55d3071
commit 1f0c6e1
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 48 deletions.
diff --git a/src/client/src/app/components/right-side-bar/right-side-bar.component.html b/src/client/src/app/components/right-side-bar/right-side-bar.component.html
@@ -76,43 +76,38 @@ <h5 class="chart-region inline"> {{selectRegion.text}}</h5>
     </div>
 
     <!--- Séries Temporais --->
-    <div *ngIf="cardsToDisplay.pastureGraph">
-      <div [class]="expandGroups.pastureGraph ? 'group-card group-card-active' :'group-card'">
-        <div (click)="expandGroups.pastureGraph = !expandGroups.pastureGraph" class="abstract">
-          <span>
-            <i class='bx bx-trending-up'></i>
-            <div class="group-label">{{'right_sidebar.cards_titles.pastureGraphTitle' | translate}}</div>
-          </span>
-          <i [class]="expandGroups.pastureGraph ? 'bx bxs-up-arrow-circle' :'bx bxs-down-arrow-circle'"></i>
-        </div>
-        <div class="details">
-          <div class="details-inner">
-            <div *ngIf="pastureGraphCharts.length! <= 0" class="loader-container">
-              <div class="loader"></div>
-            </div>
-
-            <!-- Empty warning -->
-            <div class="ghost-text" *ngIf="shouldShowGraph()">
-              {{ 'right_sidebar.pastureGraph_card.empty' | translate }}
-            </div>
-
-            <!-- Graph cards -->
-            <div class='column' *ngIf="pastureGraphCharts.length! > 0">
-              <div class="time-series-card-margin" *ngFor="let chart of pastureGraphCharts">
-                <p-card *ngIf="layersForStatistics[chart.id].switch" header="{{chart.title}}">
-                  <div class="margin">
-                    <button class="matButton" color="primary" (click)="openCharts(chart)" mat-icon-button>
-                      <mat-icon>aspect_ratio</mat-icon>
-                    </button>
-                    <h4 class="graphicTitle"> {{chart.text}} </h4>
-                  </div>
-                  <p-chart #chartU [type]="chart.type" [responsive]="true" [data]="chart.data" height="150px">
-                  </p-chart>
-                </p-card>
+    <div *ngIf="shouldShowGraph()">
+      <div *ngIf="cardsToDisplay.pastureGraph">
+        <div [class]="expandGroups.pastureGraph ? 'group-card group-card-active' :'group-card'">
+          <div (click)="expandGroups.pastureGraph = !expandGroups.pastureGraph" class="abstract">
+            <span>
+              <i class='bx bx-trending-up'></i>
+              <div class="group-label">{{'right_sidebar.cards_titles.pastureGraphTitle' | translate}}</div>
+            </span>
+            <i [class]="expandGroups.pastureGraph ? 'bx bxs-up-arrow-circle' :'bx bxs-down-arrow-circle'"></i>
+          </div>
+          <div class="details">
+            <div class="details-inner">
+              <div *ngIf="pastureGraphCharts.length! <= 0" class="loader-container">
+                <div class="loader"></div>
               </div>
+              <!-- Graph cards -->
+              <div class='column' *ngIf="pastureGraphCharts.length! > 0">
+                <div class="time-series-card-margin" *ngFor="let chart of pastureGraphCharts">
+                  <p-card *ngIf="layersForStatistics[chart.id].switch" header="{{chart.title}}">
+                    <div class="margin">
+                      <button class="matButton" color="primary" (click)="openCharts(chart)" mat-icon-button>
+                        <mat-icon>aspect_ratio</mat-icon>
+                      </button>
+                      <h4 class="graphicTitle"> {{chart.text}} </h4>
+                    </div>
+                    <p-chart #chartU [type]="chart.type" [responsive]="true" [data]="chart.data" height="150px">
+                    </p-chart>
+                  </p-card>
+                </div>
+              </div>
+              <!-- Graph cards -->
             </div>
-            <!-- Graph cards -->
-
           </div>
         </div>
       </div>
@@ -195,6 +190,7 @@ <h4 class="graphicTitle"> {{chart.text}} </h4>
     </div>
 
     <!--- Ranking de Aréa das Pastagens --->
+    <div *ngIf="layersForStatistics.pasture.switch">
     <div *ngIf="cardsToDisplay.rankingTable">
       <div [class]="expandGroups.rankingTable ? 'group-card group-card-active' :'group-card'">
         <div (click)="expandGroups.rankingTable = !expandGroups.rankingTable" class="abstract">
@@ -257,6 +253,7 @@ <h4 class="graphicTitle"> {{chart.text}} </h4>
       </div>
     </div>
   </div>
+  </div>
 </p-sidebar>
 
 <p-dialog [maximizable]="true" [baseZIndex]="10000" [draggable]="false" [resizable]="false" [modal]="true"

diff --git a/src/client/src/app/components/right-side-bar/right-side-bar.component.scss b/src/client/src/app/components/right-side-bar/right-side-bar.component.scss
@@ -45,7 +45,7 @@
   position: absolute;
   margin-top: 7px;
   display: inline;
-  width: 243px;
+  width: 230px;
 }
 
 .divReportButton {
@@ -529,7 +529,7 @@
 }
 
 .time-series-card-margin {
-  margin-bottom: 1%;
+  margin-bottom: 2%;
 }
 
 .ghost-text {

diff --git a/src/client/src/app/components/right-side-bar/right-side-bar.component.ts b/src/client/src/app/components/right-side-bar/right-side-bar.component.ts
@@ -448,8 +448,6 @@ export class RightSideBarComponent implements OnInit {
         this.layersForStatistics[key].switch = false
       }
     });
-
-    console.log(this.layersForStatistics);
   }
 
   updateStatus(name) { }
@@ -500,8 +498,8 @@ export class RightSideBarComponent implements OnInit {
   }
 
   shouldShowGraph(): boolean {
-    return !this.layersForStatistics['carbono'].switch
-      && !this.layersForStatistics['pasture'].switch
-      && !this.layersForStatistics['pasture_quality'].switch;
+    return this.layersForStatistics['carbono'].switch
+      || this.layersForStatistics['pasture'].switch
+      || this.layersForStatistics['pasture_quality'].switch;
   }
 }
diff --git a/src/client/src/assets/locales/en.json b/src/client/src/assets/locales/en.json
@@ -425,7 +425,7 @@
       },
       "carbon": {
         "title": "Carbon",
-        "text": "According to LAPIG, the carbon emession...",
+        "text": "According to LAPIG, the estimate of carbon (in MgC) in soil organic matter in #typeRegionTranslate# #textRegionTranslate# is",
         "labelOfQuery": {
           "carbon": "Carbon"
         }

diff --git a/src/client/src/assets/locales/pt.json b/src/client/src/assets/locales/pt.json
@@ -426,7 +426,7 @@
       },
       "carbon": {
         "title": "Carbon",
-        "text": "According to LAPIG, the carbon emession...",
+        "text": "De acordo com o LAPIG, a estimativa de carbono (em MgC) na matéria orgânica do solo no #typeRegionTranslate# #textRegionTranslate# é de:",
         "labelOfQuery": {
           "carbon": "Carbon"
         }
@@ -659,9 +659,8 @@
     "fotos_drone": "Fotos de Drone",
     "videos_drone": "Vídeos de Drone"
   },
-  "atlasinformation":{
+  "atlasinformation": {
     "title": "Nota de Esclarecimento",
-    "text":"<p>Gostaríamos de informar que identificamos recentemente um erro em nossas estimativas de área de pastagem. Nossa equipe já solucionou essa questão, assegurando informações precisas.</p><p>Sua confiança é muito importante para nós. Caso tenha alguma dúvida, não hesite em nos contatar pelo e-mail <strong>[email protected]</strong>.</p></p>Obrigado pela sua compreensão.</p><p>Atenciosamente,</p><p>Equipe Atlas das Pastagens</p>"
-
+    "text": "<p>Gostaríamos de informar que identificamos recentemente um erro em nossas estimativas de área de pastagem. Nossa equipe já solucionou essa questão, assegurando informações precisas.</p><p>Sua confiança é muito importante para nós. Caso tenha alguma dúvida, não hesite em nos contatar pelo e-mail <strong>[email protected]</strong>.</p></p>Obrigado pela sua compreensão.</p><p>Atenciosamente,</p><p>Equipe Atlas das Pastagens</p>"
   }
 }
diff --git a/src/server/database/queries/charts.js b/src/server/database/queries/charts.js
@@ -158,7 +158,7 @@ module.exports = function (app) {
             {
                 source: 'lapig',
                 id: 'pasture_carbon',
-                sql: " SELECT a.year::int as label, b.color, b.name as classe, sum(a.value_sum) as value" +
+                sql: " SELECT a.year::int as label, b.color, b.name as classe, sum(value_sum) as value" +
                 " FROM pasture_carbon_somsc_statistic_2022 a " + "INNER JOIN graphic_colors as b on b.table_rel = 'pasture_carbon'" +
                 "WHERE " + regionFilter + " GROUP BY 1,2,3 ORDER BY 1 ASC;",
             }