From 6aab9e1b71066cdd1647967649ab725efd4c2b1c Mon Sep 17 00:00:00 2001 From: Desy Ayurianti Date: Tue, 8 Oct 2024 10:07:28 +0700 Subject: [PATCH] fix(dashboard): fix lazy loading pada grafik sebelum data muncul --- .../dashboard/page/graph/graph.component.html | 9 +- .../dashboard/page/graph/graph.component.scss | 14 +- .../dashboard/page/graph/graph.component.ts | 129 ++++++++++-------- 3 files changed, 90 insertions(+), 62 deletions(-) diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html index 9c0f2ee..607fd27 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html +++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html @@ -8,4 +8,11 @@ - + +
+ Loading... +
+ + + + diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss index 25a147a..7783e2b 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss +++ b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss @@ -11,7 +11,7 @@ margin: 20px; align-items: center; } - + .form-select{ width: max-content; margin-top: 20px; @@ -24,6 +24,7 @@ display: flex; flex-wrap: wrap; justify-content: left; + height: max-content; } @@ -37,8 +38,17 @@ @media (max-width: 576px) { canvas{ - flex: 1 1 100%; + display: flex; + width: max-content; + flex: 1 1 100%; } } + + .loading{ + font-size: 18px; + text-align: center; + color: #888; +} + \ No newline at end of file diff --git a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts b/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts index 9f541ee..6b8f35b 100644 --- a/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts +++ b/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; selectedSensor: string | null = null; - parameters: string[] = []; + 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,53 +176,57 @@ export class GraphComponent implements OnInit { updateChart(): void { - const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value.toLowerCase(); + this.isLoading= true; + setTimeout(() => { + const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value.toLowerCase(); - let newData: number[] | undefined; - let newLabel: string = ''; - let newColor: string = ''; - - const humidity = '#16423C'; - const temperature = '#8F5A62'; - const light = '#DF9B55'; - const moisture = '#54909c'; - const conductivity = '#661311'; - const ph = '#664735'; - const nitrogen = '#3a6635'; - const phosphorus = '#3f3566'; - const potassium = '#5f3566'; - - switch (this.selectedSensor) { - case 'dht': - newData = this.dhtData[parameter as keyof typeof this.dhtData]; - newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1); - newColor = (parameter === 'humidity') ? humidity : - (parameter === 'temperature') ? temperature : light; - break; - case 'npk1': - newData = this.npk1Data[parameter as keyof typeof this.npk1Data]; - newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1); - newColor = (parameter === 'temperature') ? temperature : - (parameter === 'moisture') ? moisture : - (parameter === 'conductivity') ? conductivity : - (parameter === 'ph') ? ph : - (parameter === 'nitrogen') ? nitrogen : - (parameter === 'phosphorus') ? phosphorus : potassium; - break; - case 'npk2': - newData = this.npk2Data[parameter as keyof typeof this.npk2Data]; - newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1); - newColor = (parameter === 'temperature') ? temperature : - (parameter === 'moisture') ? moisture : - (parameter === 'conductivity') ? conductivity : - (parameter === 'ph') ? ph : - (parameter === 'nitrogen') ? nitrogen : - (parameter === 'phosphorus') ? phosphorus : potassium; - break; - default: - console.error('Sensor tidak ditemukan'); - return; - } - this.createChart(newData!, newLabel, newColor, this.labelHourly); + let newData: number[] | undefined; + let newLabel: string = ''; + let newColor: string = ''; + + const humidity = '#16423C'; + const temperature = '#8F5A62'; + const light = '#DF9B55'; + const moisture = '#54909c'; + const conductivity = '#661311'; + const ph = '#664735'; + const nitrogen = '#3a6635'; + const phosphorus = '#3f3566'; + const potassium = '#5f3566'; + + switch (this.selectedSensor) { + case 'dht': + newData = this.dhtData[parameter as keyof typeof this.dhtData]; + newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1); + newColor = (parameter === 'humidity') ? humidity : + (parameter === 'temperature') ? temperature : light; + break; + case 'npk1': + newData = this.npk1Data[parameter as keyof typeof this.npk1Data]; + newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1); + newColor = (parameter === 'temperature') ? temperature : + (parameter === 'moisture') ? moisture : + (parameter === 'conductivity') ? conductivity : + (parameter === 'ph') ? ph : + (parameter === 'nitrogen') ? nitrogen : + (parameter === 'phosphorus') ? phosphorus : potassium; + break; + case 'npk2': + newData = this.npk2Data[parameter as keyof typeof this.npk2Data]; + newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1); + newColor = (parameter === 'temperature') ? temperature : + (parameter === 'moisture') ? moisture : + (parameter === 'conductivity') ? conductivity : + (parameter === 'ph') ? ph : + (parameter === 'nitrogen') ? nitrogen : + (parameter === 'phosphorus') ? phosphorus : potassium; + break; + default: + console.error('Sensor tidak ditemukan'); + return; + } + this.createChart(newData, newLabel, newColor, this.labelHourly); + this.isLoading=false; + }, 2000); } }