perbaikan search room dan building

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

@@ -6,3 +6,32 @@
   background: rgba(255, 249, 249, 0.5) !important;
 }
 
+:host ::ng-deep .donut-chart1 .ct-series-a .ct-slice-donut {
+  stroke: #49ff52;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart1 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-a .ct-slice-donut {
+  stroke: #fff049;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart2 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart3 .ct-series-a .ct-slice-donut {
+  stroke: #ff4c49;
+  stroke-width: 20px !important;
+}
+
+:host ::ng-deep .donut-chart3 .ct-series-b .ct-slice-donut {
+  stroke: #757575;
+  stroke-width: 20px !important;
+}

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

@@ -7,7 +7,13 @@
       <section id="social-cards">
         <div class="row mb-2">
           <div class="col-md-6">
-            <input type="text" class="form-control" placeholder="Search..." />
+            <input
+              type="text"
+              class="form-control"
+              placeholder="Search..."
+              [(ngModel)]="searchTerm"
+              (input)="filterRows()"
+            />
           </div>
           <div class="col-md-6 text-right">
             <button
@@ -19,7 +25,10 @@
           </div>
         </div>
         <div class="row mt-2">
-          <div class="col-xl-4 col-md-6 col-12" *ngFor="let data of dataArray">
+          <div
+            class="col-xl-4 col-md-6 col-12"
+            *ngFor="let data of filteredRows"
+          >
             <div class="card">
               <div class="card-header mb-2">
                 <div class="row">
@@ -41,14 +50,16 @@
                 <hr style="border-top: 3px solid #100a0a" />
               </div>
               <div class="card-content">
-                <x-chartist
-                  *ngIf="data"
-                  [data]="data.donut"
-                  [type]="donutChart1.type"
-                  [options]="donutChart1.options"
-                  [events]="donutChart1.events"
-                >
-                </x-chartist>
+                <div class="donut-chart2">
+                  <x-chartist
+                    *ngIf="data"
+                    [data]="data.donut"
+                    [type]="donutChart1.type"
+                    [options]="donutChart1.options"
+                    [events]="donutChart1.events"
+                  >
+                  </x-chartist>
+                </div>
 
                 <div
                   class="text-center"

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

@@ -1,4 +1,5 @@
 import { Component } from "@angular/core";
+import { TableMonitoringService } from "../monitoring.service";
 
 @Component({
   selector: "app-building",
@@ -10,47 +11,12 @@ export class BuildingComponent {
   public breadcrumb: any;
   feedbacksdonutChart: any;
   donutChart1: any;
+  filteredRows: any[];
+  data: any[];
+  searchTerm: string = "";
+  colorChart: string = "";
 
-  dataArray = [
-    {
-      id: 1,
-      build_name: "PT Allbest Solusi Sistem",
-      total: "2345",
-      donut: {
-        series: [20, 80],
-        labels: [],
-      },
-    },
-    {
-      id: 2,
-      build_name: "PT Informa Media Pratama",
-      total: "342",
-      donut: {
-        series: [40, 60],
-        labels: [],
-      },
-    },
-    {
-      id: 3,
-      build_name: "PT Ikea",
-      total: "342",
-      donut: {
-        series: [50, 50],
-        labels: [],
-      },
-    },
-    {
-      id: 4,
-      build_name: "PT Tokopedia",
-      total: "342",
-      donut: {
-        series: [90, 10],
-        labels: [],
-      },
-    },
-  ];
-
-  constructor() {}
+  constructor(private monitoringService: TableMonitoringService) {}
 
   ngOnInit() {
     this.breadcrumb = {
@@ -66,16 +32,53 @@ export class BuildingComponent {
     this.donutChart1 = {
       type: "Pie",
       options: {
+        donut: {
+          colors: ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff']
+        },
         fullwidth: true,
         height: "250px",
-        donut: true,
+        
         donutWidth: 60,
         startAngle: 270,
         total: 200,
         showLabel: false,
       },
     };
+    this.fetchData();
+  }
 
+  fetchData() {
+    this.monitoringService.getMonitoringBuildingData().subscribe((Response) => {
+      this.data = Response
+      this.filteredRows = Response
+      for (let i = 0; i < this.filteredRows.length; i++) {
+        if (this.filteredRows[i].donut.series[0] <= 50) {
+          this.colorChart = "donut-chart1"
+        } else if (this.filteredRows[i].donut.series[0] > 50 && this.filteredRows[i].donut.series[0] < 75) {
+          this.colorChart = "donut-chart2"
+        } else {
+          this.colorChart = "donut-chart3"
+        }
+      }
+    });
+  }
+
+  filterRows() {
+    if (!this.searchTerm) {
+      this.filteredRows = [...this.data];
+    } else {
+      this.filteredRows = this.data.filter((row) =>
+        this.rowContainsSearchTerm(row)
+      );
+    }
+  }
+
+  rowContainsSearchTerm(row: any): boolean {
+    const searchTermLC = this.searchTerm.toLowerCase();
+    return Object.values(row).some(
+      (value) =>
+        value !== null && value.toString().toLowerCase().includes(searchTermLC)
+    );
   }
 
 }