agrilink/frontend-smartfarming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashboard): fix lazy loading pada grafik sebelum data muncul

Browse Source
This commit is contained in:
Desy Ayurianti 2024-10-08 10:07:28 +07:00
parent e478095235
commit 6aab9e1b71
3 changed files with 90 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.html
View File

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

10
agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.scss
View File

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

35
agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts
View File

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