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

@@ -8,4 +8,11 @@
     <option *ngFor="let parameter of parameters" [value]="parameter">{{ parameter }}</option>
   </select>  
 </div>
-<canvas id="myChart"></canvas>
+
+<div *ngIf="isLoading" class="loading">
+  Loading...
+</div>
+
+<canvas #myChart id="myChart"></canvas>
+
+

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

@@ -24,6 +24,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: left;
+    height: max-content;
   }
   
   
@@ -37,8 +38,17 @@
   
   @media (max-width: 576px) {
     canvas{
+      display: flex;
+      width: max-content;
       flex: 1 1 100%;
     }
   }
 
+  .loading{
+    font-size: 18px;
+    text-align: center;
+    color: #888;
+}
+
+  
   

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

@@ -1,7 +1,6 @@
 import { CommonModule } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
 import { Chart, LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler } from 'chart.js';
-
 @Component({
   selector: 'app-graph',
   standalone: true,
@@ -10,8 +9,10 @@ import { Chart, LineController, LineElement, PointElement, LinearScale, Title, C
   styleUrls: ['./graph.component.scss']
 })
 export class GraphComponent implements OnInit {
+  @ViewChild('myChart', { static: false }) chartElement!: ElementRef<HTMLCanvasElement>;
   selectedSensor: string | null = null;
   parameters: string[] = [];
+  isLoading: boolean = true; 
 
   sensorParameters: { [key: string]: string[] } = {
     dht: ['Temperature', 'Humidity', 'Light'],
@@ -46,6 +47,7 @@ export class GraphComponent implements OnInit {
   };
 
   chart: any;
+  isChartLoaded = false;
   labelHourly = [
     '01.00', '02.00', '03.00', '04.00', '05.00', '06.00', '07.00', '08.00',
     '09.00', '10.00', '11.00', '12.00', '13.00', '14.00', '15.00', '16.00',
@@ -56,19 +58,24 @@ export class GraphComponent implements OnInit {
     Chart.register(LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler);
     this.selectedSensor = 'dht';
     this.parameters = this.sensorParameters[this.selectedSensor];
-    this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
-
-    window.addEventListener('resize', () => {
-      if (this.chart) {
-        this.chart.destroy();
-        this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
-      }
-    });
     
   }
+  ngAfterViewInit(): void {
+    this.isLoading = true;
+    setTimeout(() => {
+      this.createChart(this.dhtData.temperature, 'Temperature', '#8F5A62', this.labelHourly);
+      this.isLoading = false;
+    }, 2000);
+
+
+    console.log(this.chartElement.nativeElement);
+    console.log(this.chart);
+    console.log(this.isLoading);
+  }
+  
 
   createChart(data: number[], label: string, borderColor: string, labels: string[]): void {
-    const canvas = document.getElementById('myChart') as HTMLCanvasElement;
+    const canvas = this.chartElement.nativeElement;
     const ctx = canvas.getContext('2d');
   
     if (this.chart) {
@@ -169,6 +176,8 @@ export class GraphComponent implements OnInit {
   
 
   updateChart(): void {
+    this.isLoading= true; 
+    setTimeout(() => {
       const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value.toLowerCase();
   
       let newData: number[] | undefined;
@@ -216,6 +225,8 @@ export class GraphComponent implements OnInit {
           console.error('Sensor tidak ditemukan');
           return;
       }
-    this.createChart(newData!, newLabel, newColor, this.labelHourly);
+      this.createChart(newData, newLabel, newColor, this.labelHourly);
+      this.isLoading=false;
+    }, 2000);
   }
 }