perbaikan style monitoring building

src/app/content/hemat-app/monitoring/building/building.component.html

@@ -90,15 +90,17 @@
                       class="col-xl-6 col-md-6 col-12"
                       *ngFor="let top of dataTop; let i = index"
                     >
-                      <span class="mb-1 text-muted cardtext d-block"
-                        >{{ top.value[i] }}% - {{ top.label[i] }}</span
-                      >
                       <div>
-                        <ngb-progressbar
-                          height="7px"
-                          type="danger"
-                          [value]="top.value[i]"
-                        ></ngb-progressbar>
+                        <span class="mb-1 text-muted cardtext d-block"
+                          >{{ top.value[i] }}% - {{ top.label[i] }}</span
+                        >
+                        <div>
+                          <ngb-progressbar
+                            height="7px"
+                            type="danger"
+                            [value]="top.value[i]"
+                          ></ngb-progressbar>
+                        </div>
                       </div>
                     </div>
                   </div>

src/app/content/hemat-app/monitoring/building/building.component.ts

@@ -46,13 +46,18 @@ export class BuildingComponent {
 
   fetchData() {
     this.monitoringService.getMonitoringBuildingData().subscribe((res) => {
-      this.data = res
-      this.filteredRows = res
-      this.dataTop = res.map(item => ({
-        label: item.topUse.label,
-        value: item.topUse.value
-      }));
-      
+      this.data = res;
+      this.filteredRows = res;
+
+      this.dataTop = [];
+      for (let i = 0; i < res.length; i++) {
+        if (res[i].topUse.label[i]) {
+          this.dataTop.push({
+            label: res[i].topUse.label,
+            value: res[i].topUse.value,
+          });
+        }
+      }
     });
   }
 
@@ -73,5 +78,4 @@ export class BuildingComponent {
         value !== null && value.toString().toLowerCase().includes(searchTermLC)
     );
   }
-
 }

src/assets/data/hemat/building.json

@@ -50,5 +50,57 @@
         "series": [90, 10],
         "labels": []
       }
+    },
+    {
+      "id": 5,
+      "build_name": "PT Allbest Solusi",
+      "total": "342",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
+      "donut": {
+        "series": [20, 80],
+        "labels": []
+      }
+    },
+    {
+      "id": 6,
+      "build_name": "PT Informa Media",
+      "total": "670",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
+      "donut": {
+        "series": [40, 60],
+        "labels": []
+      }
+    },
+    {
+      "id": 7,
+      "build_name": "PT Ikea Yes",
+      "total": "1480",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
+      "donut": {
+        "series": [70, 30],
+        "labels": []
+      }
+    },
+    {
+      "id": 8,
+      "build_name": "PT Gojek",
+      "total": "2050",
+      "topUse": {
+        "label": ["Lightning", "Air Conditioner", "Security System", "Elevator"],
+        "value": [20, 40, 10, 30]
+      },
+      "donut": {
+        "series": [90, 10],
+        "labels": []
+      }
     }
   ]