+ Empty warning

lapig-ufg · Apr 3, 2024 · 55d3071 · 55d3071
1 parent e58a44e
commit 55d3071
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 17 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
@@ -91,22 +91,27 @@ <h5 class="chart-region inline"> {{selectRegion.text}}</h5>
               <div class="loader"></div>
             </div>
 
-            <!-- table view municipio -->
+            <!-- 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 *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 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>
-            <!--table view municipio-->
+            <!-- Graph cards -->
 
           </div>
         </div>
@@ -255,7 +260,7 @@ <h4 class="graphicTitle"> {{chart.text}} </h4>
 </p-sidebar>
 
 <p-dialog [maximizable]="true" [baseZIndex]="10000" [draggable]="false" [resizable]="false" [modal]="true"
-  [header]="objectFullScreenChart.title" [visible]="objectFullScreenChart.fullScreen" [style]="{width: '50vw'}">
+  [header]="objectFullScreenChart.title" [(visible)]="objectFullScreenChart.fullScreen" [style]="{width: '50vw'}">
   <p *ngIf="objectFullScreenChart.text">
     {{ objectFullScreenChart.text }}
   </p>

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
@@ -527,3 +527,17 @@
     }
   }
 }
+
+.time-series-card-margin {
+  margin-bottom: 1%;
+}
+
+.ghost-text {
+  color: #999; /* Cor do texto fantasma */
+  font-family: Arial, sans-serif; /* Fonte do texto */
+  font-size: 16px; /* Tamanho do texto */
+  text-align: center; /* Centralizar o texto horizontalmente */
+  opacity: 0.6; /* Opacidade do texto fantasma */
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
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
@@ -353,7 +353,6 @@ export class RightSideBarComponent implements OnInit {
     let textParam = params.join('&');
 
     this.chartService.getPastureGraph(textParam).subscribe(tempPastureGraphCharts => {
-      console.log(tempPastureGraphCharts)
       this.pastureGraphCharts = tempPastureGraphCharts;
     }, error => {
       console.error(error)
@@ -440,7 +439,7 @@ export class RightSideBarComponent implements OnInit {
 
       if (layer) {
         this.layersForStatistics[key].switch = true
-        
+
         if (this.layersForStatistics[key].year !== layer.filterSelected) {
           this.layersForStatistics[key].year = layer.filterSelected
           this.updateStatistics(this.selectRegion);
@@ -453,7 +452,7 @@ export class RightSideBarComponent implements OnInit {
     console.log(this.layersForStatistics);
   }
 
-  updateStatus(name) {}
+  updateStatus(name) { }
 
   exportCSV(table) {
     const options = {
@@ -499,4 +498,10 @@ export class RightSideBarComponent implements OnInit {
 
     doc.save(table.title + '.pdf');
   }
+
+  shouldShowGraph(): boolean {
+    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
@@ -403,6 +403,7 @@
       }
     },
     "pastureGraph_card": {
+      "empty": "No layers selected...",
       "pastureAndLotacaoBovina": {
         "title": "Pasture",
         "text": "According to LAPIG, the Pasture area (in hectares) and the Bovine Stocking (in UA) in the #typeRegionTranslate# #textRegionTranslate# was:",

diff --git a/src/client/src/assets/locales/pt.json b/src/client/src/assets/locales/pt.json
@@ -404,6 +404,7 @@
       }
     },
     "pastureGraph_card": {
+      "empty": "Nenhuma camada selecionada...",
       "pastureAndLotacaoBovina": {
         "title": "Pastagem",
         "text": "De acordo com o LAPIG, a área de Pastagem (em hectares) e o Rebanho Bovino (em UA) no #typeRegionTranslate# #textRegionTranslate# foi de:",