208 lines
8.4 KiB
TypeScript
208 lines
8.4 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { Chart, LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler } from 'chart.js';
|
|
|
|
@Component({
|
|
selector: 'app-graph',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
templateUrl: './graph.component.html',
|
|
styleUrls: ['./graph.component.scss']
|
|
})
|
|
export class GraphComponent implements OnInit {
|
|
selectedSensor: string | null = null;
|
|
parameters: string[] = [];
|
|
|
|
sensorParameters: { [key: string]: string[] } = {
|
|
dht: ['Temperature', 'Humidity', 'Light'],
|
|
npk1: ['Temperature', 'Moisture', 'Conductivity', 'ph', 'Nitrogen', 'Phosphorus', 'Potassium'],
|
|
npk2: ['Temperature', 'Moisture', 'Conductivity', 'ph', 'Nitrogen', 'Phosphorus', 'Potassium']
|
|
};
|
|
|
|
dhtData = {
|
|
humidity: [65, 59, 80, 81, 56, 55, 40, 41, 60, 65, 59, 80, 81, 56, 55, 40, 41, 60, 65, 59, 80, 81, 56, 55],
|
|
temperature: [22, 23, 25, 24, 26, 27, 28, 29, 25, 23, 22, 24, 26, 27, 28, 29, 29, 28, 28, 25, 25, 25, 26, 27],
|
|
light: [200, 220, 230, 210, 250, 240, 260, 265, 270, 200, 220, 230, 210, 250, 240, 260, 265, 270, 275, 280, 285, 290, 295, 300]
|
|
};
|
|
|
|
npk1Data = {
|
|
temperature: [23, 24, 26, 27, 28, 29, 28, 27, 26, 25, 24, 23, 22, 21, 20, 19, 23, 24, 26, 27, 28, 29, 28, 27],
|
|
moisture: [30, 35, 32, 36, 34, 37, 33, 31, 32, 30, 35, 32, 36, 34, 37, 33, 31, 32, 30, 35, 32, 36, 34, 37],
|
|
conductivity: [500, 550, 600, 520, 510, 530, 540, 580, 590, 500, 550, 600, 520, 510, 530, 540, 580, 590, 500, 550, 600, 520, 510, 530],
|
|
ph: [6.5, 6.7, 6.8, 7.0, 7.1, 6.9, 6.6, 6.8, 6.9, 6.5, 6.7, 6.8, 7.0, 7.1, 6.9, 6.6, 6.8, 6.9, 6.5, 6.7, 6.8, 7.0, 7.1, 6.9],
|
|
nitrogen: [300, 310, 320, 330, 340, 350, 355, 360, 365, 300, 310, 320, 330, 340, 350, 355, 360, 365, 300, 310, 320, 330, 340, 350],
|
|
phosphorus: [200, 210, 215, 220, 225, 220, 215, 210, 200, 210, 215, 220, 225, 220, 215, 210, 200, 210, 215, 220, 225, 220, 215, 210],
|
|
potassium: [180, 190, 200, 205, 210, 215, 220, 225, 230, 180, 190, 200, 205, 210, 215, 220, 225, 230, 180, 190, 200, 205, 210, 215],
|
|
};
|
|
|
|
npk2Data = {
|
|
temperature: [24, 25, 27, 28, 29, 28, 26, 25, 24, 23, 22, 21, 20, 19, 23, 24, 26, 27, 28, 29, 28, 26, 25, 24],
|
|
moisture: [31, 36, 33, 38, 35, 37, 34, 32, 33, 31, 36, 33, 38, 35, 37, 34, 32, 33, 31, 36, 33, 38, 35, 37],
|
|
conductivity: [520, 530, 540, 510, 550, 570, 580, 590, 600, 520, 530, 540, 510, 550, 570, 580, 590, 600, 520, 530, 540, 510, 550, 570],
|
|
ph: [6.6, 6.9, 7.1, 6.7, 6.8, 6.9, 6.6, 6.8, 6.9, 6.6, 6.9, 7.1, 6.7, 6.8, 6.9, 6.6, 6.8, 6.9, 6.6, 6.9, 7.1, 6.7, 6.8, 6.9],
|
|
nitrogen: [320, 330, 340, 350, 360, 400, 410, 420, 430, 320, 330, 340, 350, 360, 400, 410, 420, 430, 320, 330, 340, 350, 360, 400],
|
|
phosphorus: [210, 220, 225, 230, 235, 240, 245, 250, 255, 210, 220, 225, 230, 235, 240, 245, 250, 255, 210, 220, 225, 230, 235, 240],
|
|
potassium: [190, 195, 205, 210, 215, 220, 225, 230, 235, 190, 195, 205, 210, 215, 220, 225, 230, 235, 190, 195, 205, 210, 215, 220]
|
|
};
|
|
|
|
chart: any;
|
|
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',
|
|
'17.00', '18.00', '19.00', '20.00', '21.00', '22.00', '23.00', '24.00'
|
|
];
|
|
|
|
ngOnInit(): void {
|
|
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);
|
|
}
|
|
|
|
createChart(data: number[], label: string, borderColor: string, labels: string[]): void {
|
|
const canvas = document.getElementById('myChart') as HTMLCanvasElement;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
if (this.chart) {
|
|
this.chart.destroy();
|
|
}
|
|
|
|
if (ctx) {
|
|
this.chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [{
|
|
label,
|
|
data,
|
|
borderColor,
|
|
borderWidth: 1.5,
|
|
fill: false,
|
|
backgroundColor: borderColor + '4D',
|
|
tension: 0.5,
|
|
pointRadius: 5,
|
|
pointHoverRadius: 8,
|
|
pointBackgroundColor: borderColor,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
tooltip: {
|
|
enabled: true,
|
|
mode: 'nearest',
|
|
intersect: false,
|
|
callbacks: {
|
|
label: (tooltipItem: any) => {
|
|
const datasetLabel = tooltipItem.dataset.label.toLowerCase();
|
|
const formattedValue = tooltipItem.formattedValue;
|
|
|
|
let unit = '';
|
|
switch (datasetLabel) {
|
|
case 'temperature':
|
|
unit = '°C';
|
|
break;
|
|
case 'light':
|
|
unit = 'lux';
|
|
break;
|
|
case 'moisture':
|
|
case 'humidity':
|
|
unit = '%';
|
|
break;
|
|
case 'conductivity':
|
|
unit = 'mS/cm';
|
|
break;
|
|
case 'nitrogen':
|
|
case 'phosphorus':
|
|
case 'potassium':
|
|
unit = 'NPM';
|
|
break;
|
|
default:
|
|
unit = '';
|
|
}
|
|
return `${tooltipItem.dataset.label}: ${formattedValue} ${unit}`;
|
|
},
|
|
}
|
|
},
|
|
legend: {
|
|
display: true
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
beginAtZero: true
|
|
},
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
onSensorChange(event: Event): void {
|
|
const selectElement = event.target as HTMLSelectElement;
|
|
this.selectedSensor = selectElement.value;
|
|
this.parameters = this.sensorParameters[this.selectedSensor];
|
|
|
|
const defaultParameter = this.parameters[0];
|
|
(document.getElementById('parameterSelect') as HTMLSelectElement).value = defaultParameter;
|
|
|
|
this.updateChart();
|
|
}
|
|
|
|
|
|
updateChart(): void {
|
|
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);
|
|
}
|
|
}
|