fix(actualgraph): changing from graph into table

agrilink_vocpro/src/app/pages/dashboard/layouts/sidebar/sidebar.component.html

@@ -13,7 +13,7 @@
         </li>
         <li>
             <a routerLink='/actualgraph' data-bs-toggle="collapse" class="nav-link px-0 align-middle">
-                <i class="bi bi-bar-chart title"></i> <span class="ms-1 d-none d-sm-inline menu">Actual Graph</span> </a>
+                <i class="bi bi-bar-chart title"></i> <span class="ms-1 d-none d-sm-inline menu">Actual Data</span> </a>
         </li>
     </ul>
     <hr>

agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.html

@@ -12,7 +12,36 @@
     <div class="title-graph" *ngIf="selectedButton === 'npk1'">Actual Graph Sensor NPK 1</div>
     <div class="title-graph" *ngIf="selectedButton === 'npk2'">Actual Graph Sensor NPK 2</div>
     <div class="graph-content">
-      <canvas *ngIf="!isLoading && !isNoData" #chartCanvas></canvas>
+      <table class="table parameter" *ngIf="!isLoading && !isNoData" style="padding-top: 0px;">
+        <thead>
+          <tr>
+            <th scope="col">#</th>
+            <th scope="col">Parameter</th>
+            <th scope="col">Actual Data</th>
+            <th scope="col">Standard Data</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th scope="row">1</th>
+            <td>Nitrogen</td>
+            <td>{{ actualDataValues.nitrogen }} mg/L</td>
+            <td>100-200 mg/L</td>
+          </tr>
+          <tr>
+            <th scope="row">2</th>
+            <td>Phosphorus</td>
+            <td>{{ actualDataValues.phosphorus }} mg/L</td>
+            <td>90-125 mg/L</td>
+          </tr>
+          <tr>
+            <th scope="row">3</th>
+            <td>Kalium</td>
+            <td>{{ actualDataValues.kalium }} mg/L</td>
+            <td>220-240 mg/L</td>
+          </tr>
+        </tbody>
+      </table>
       <i *ngIf="isLoading" class="fa fa-spinner fa-spin spinner"></i>
       <p *ngIf="isNoData" class="no-data">No available data</p>
     </div>

agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.scss

@@ -31,22 +31,27 @@
     margin-top: 20px;
 }
 
+.table th, 
+.table td {
+    color: #49473C; 
+}
+
 .title-graph {
     color: #49473C;
     font-size: 20px;
     font-weight: 400;
     margin-top: 15px;
-    margin-bottom: 20px;  
     position: relative;
 }
 
 .graph-content {
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
     width: 100%;
     height: 100%;
+    padding-top: 30px;
+    color: #49473C;
 }
 
 .spinner {

agrilink_vocpro/src/app/pages/dashboard/page/actualgraph/actualgraph.component.ts

@@ -20,6 +20,12 @@ export class ActualgraphComponent implements OnInit {
   isLoading: boolean = true; 
   isNoData: boolean = false;  
   greeting = '';
+  
+  actualDataValues = {
+    nitrogen: 0,
+    phosphorus: 0,
+    kalium: 0
+  };
 
   constructor(
     private sensorService: SensorService, 
@@ -44,37 +50,14 @@ export class ActualgraphComponent implements OnInit {
           if (selectedData && selectedData.length > 0) {
             const npkData: ParameterSensor = selectedData[0]; 
 
-            if (sensorType === 'npk1' || sensorType === 'npk2') {
+            this.actualDataValues = {
-              const actualData = [
+              nitrogen: npkData.soilnitrogen ?? 0,
-                { x: npkData.soilnitrogen ?? 0, y: 0 },
+              phosphorus: npkData.soilphosphorus ?? 0,
-                { x: npkData.soilphosphorus ?? 0, y: 1 },
+              kalium: npkData.soilpotassium ?? 0
-                { x: npkData.soilpotassium ?? 0, y: 2 } 
+            };
-              ];
 
-              // Data untuk standar (contoh: Start dan End Range)
+            this.isLoading = false;
-              const startDataRange = [
+            this.cdr.detectChanges();
-                { x: 100, y: 0 },
-                { x: 90, y: 1 },
-                { x: 220, y: 2 }
-              ];
-
-              const endDataRange = [
-                { x: 100, y: 0 },
-                { x: 35, y: 1 },
-                { x: 200, y: 2 }
-              ];
-
-              this.chartData.datasets[0].data = actualData;
-              this.chartData.datasets[1].data = startDataRange;
-              this.chartData.datasets[2].data = endDataRange;
-
-              this.isLoading = false;
-              this.cdr.detectChanges();
-
-              setTimeout(() => {
-                this.initializeChart();
-              });
-            }
           } else {
             this.isNoData = true; 
             this.isLoading = false; 
@@ -94,100 +77,8 @@ export class ActualgraphComponent implements OnInit {
     );
   }
 
-  private initializeChart(): void {
-    if (this.chartCanvas?.nativeElement) {
-      const ctx = this.chartCanvas.nativeElement.getContext('2d');
-      if (ctx) {
-        // If chart already exists, destroy it before creating a new one
-        if (this.chart) {
-          this.chart.destroy();
-        }
-        this.chart = new Chart(ctx, {
-          type: 'bubble',
-          data: this.chartData,
-          options: this.chartOptions
-        });
-      }
-    } else {
-      console.warn('Chart canvas is not available');
-    }
-  }
-
   updateGreeting(): void {
     const hour = new Date().getHours();
     this.greeting = hour < 12 ? 'Good Morning' : hour < 18 ? 'Good Afternoon' : 'Good Evening';
   }
-
-  public chartData = {
-    labels: ['Nitrogen', 'Phosphorus', 'Kalium'],
-    datasets: [
-      {
-        label: 'Actual Data',
-        data: [] as { x: number; y: number; }[],
-        backgroundColor: 'rgb(18, 55, 42)',
-        borderColor: 'rgb(18, 55, 42)',
-        borderWidth: 1,
-        type: 'bubble'
-      },
-      {
-        label: 'Start Data Range',
-        data: [],
-        backgroundColor: 'rgba(0,0,0,0)',
-        borderWidth: 0,
-        type: 'bar',
-        stack: 'range',
-      },
-      {
-        label: 'End Data Range',
-        data: [],
-        backgroundColor: 'rgb(212, 231, 197)',
-        borderWidth: 1,
-        type: 'bar',
-        stack: 'range'
-      }
-    ]
-  };
-
-  public chartOptions: Partial<Chart['options']> = {
-    responsive: true,
-    maintainAspectRatio: false,
-    indexAxis: 'y' as const,
-    scales: {
-      x: {
-        title: {
-          display: true,
-          text: 'Value (mg/L)',
-        },
-        min: 0,
-        max: 300,
-        type: 'linear',
-      },
-      y: {
-        title: {
-          display: true,
-          text: 'Sensor Parameter',
-        },
-        stacked: true,
-        ticks: {
-          display: true,
-          callback: function (value: number) {
-            const labels = ['Nitrogen', 'Phosphorus', 'Kalium'];
-            return labels[value as number];
-          }
-        }
-      },
-    },
-    plugins: {
-      tooltip: {
-        callbacks: {
-          label: function (tooltipItem: any) {
-            if (tooltipItem.datasetIndex === 0) { 
-              return `Value: ${tooltipItem.raw.x} mg/L`;
-            }
-            return '';
-          }
-        }
-      }
-    }
-  };
 }