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

dev smartfarming #1

Merged
agrilink merged 53 commits from development into main 2024-12-30 05:53:19 +00:00
Conversation 0 Commits 53 Files Changed 66 +112 -185
2 changed files with 112 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f6d3ef022c - Show all commits

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

@ -1,18 +1,11 @@
<div class="container-graph">
<select class="form-select" id="parameterSelect" (change)="updateChart()">
<option value="humidity">Kelembaban Udara</option>
<option value="temperature">Suhu</option>
<option value="light">Intensitas Cahaya</option>
<option value="nitrogen">Nitrogen</option>
<option value="phosphorus">Phosphorus</option>
<option value="pottasium">Pottasium</option>
</select>
<select class="form-select" id="timeframeSelect" (change)="updateChart()">
<option value="hourly">Per Jam</option>
</select>
<select class="form-select" id="sensorSelect" (change)="onSensorChange($event)">
<option value="dht">DHT</option>
<option value="npk1">NPK 1</option>
<option value="npk2">NPK 2</option>
</select>
<select class="form-select" id="parameterSelect" (change)="updateChart()">
<option *ngFor="let parameter of parameters" [value]="parameter">{{ parameter }}</option>
</select>
</div>
<canvas id="myChart"></canvas>

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

@ -1,102 +1,62 @@
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: [],
imports: [CommonModule],
templateUrl: './graph.component.html',
styleUrl: './graph.component.scss'
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;
humidityData = [65, 59, 80, 81, 56, 55, 40, 41,
60, 65, 59, 80, 81, 56, 55, 40,
41, 60, 65, 59, 80, 81, 56, 55
];
temperatureData = [22, 23, 25, 24, 26, 27, 28, 29,
25, 23, 22, 24, 26, 27, 28, 29,
29, 28, 28, 25, 25, 25, 26, 27
];
lightData = [200, 220, 230, 210, 250, 240, 260, 265,
270, 200, 220, 230, 210, 250, 240, 260,
265, 270, 200, 220, 230, 210, 250, 240
];
nitrogenData = [
0, 100, 200, 300, 400, 500, 600, 700, 800, 900,
1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700,
1800, 1900, 2000
]
humidityTanahData = [
0, 10, 20, 30, 40, 50, 60, 70, 80, 90,
100, 110, 120, 130, 140, 150, 160, 170,
180, 190, 200
]
pottasiumData = [
90, 100, 110, 120, 130, 140, 150, 160, 170, 180,
190, 200, 210, 220, 230, 240, 250, 260, 270, 280,
290, 300, 310, 320
]
phosphorusData = [
90, 100, 110, 120, 130, 140, 150, 160, 170, 180,
190, 200, 210, 220, 230, 240, 250, 260, 270, 280,
290, 300, 310, 320
]
soilData = [
90, 100, 110, 120, 130, 140, 150, 160, 170, 180,
190, 200, 210, 220, 230, 240, 250, 260, 270, 280,
290, 300, 310, 320
]
//data daily
dailyHumidityData = [65, 70, 75, 80, 85, 90, 95];
dailyTemperatureData = [25, 26, 27, 28, 29, 30, 31];
dailyLightData = [220, 230, 240, 250, 260, 270, 280];
dailyNitrogenData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
dailyHumidityTanahData = [100, 110, 120, 130, 140, 150];
dailyPottasiumData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
dailyPhosphorusData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
dailySoilData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
//data weekly
weeklyHumidityData = [60, 65, 70, 75, 80, 85, 90];
weeklyTemperatureData = [25, 26, 27, 28, 29, 30, 31];
weeklyLightData = [220, 230, 240, 250, 260, 270, 280];
weeklyNitrogenData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
weeklyHumidityTanahData = [100, 110, 120, 130, 140, 150];
weeklyPottasiumData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
weeklyPhosphorusData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
weeklySoilData = [1000, 1100, 1200, 1300, 1400, 1500, 1600];
//data bulanan
monthlyHumidityData = [65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120];
monthlyTemperatureData = [25, 26, 27, 28, 29, 30, 31, 32, 33, 33, 33, 33.5];
monthlyLightData = [220, 230, 240, 250, 260, 270, 280, 290, 300, 310, 320, 330];
monthlyNitrogenData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
monthlyHumidityTanahData = [100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210];
monthlyPottasiumData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
monthlyPhosphorusData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
monthlySoilData = [1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900, 2000, 2100];
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',
'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'
]
labelDaily = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'];
labelWeekly = ['Minggu 1', 'Minggu 2', 'Minggu 3', 'Minggu 4', 'Minggu 5', 'Minggu 6', 'Minggu 7'];
labelMonthly = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
];
ngOnInit(): void {
Chart.register(LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler);
this.createChart(this.humidityData, 'Kelembapan', '#16423C', this.labelHourly);
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 {
@ -104,7 +64,7 @@ export class GraphComponent implements OnInit {
const ctx = canvas.getContext('2d');
if (this.chart) {
this.chart.destroy();
this.chart.destroy();
}
if (ctx) {
@ -118,8 +78,8 @@ export class GraphComponent implements OnInit {
borderColor,
borderWidth: 1.5,
fill: false,
backgroundColor: borderColor + '4D',
tension: 0.5,
backgroundColor: borderColor + '4D',
tension: 0.5,
pointRadius: 5,
pointHoverRadius: 8,
pointBackgroundColor: borderColor,
@ -130,113 +90,87 @@ export class GraphComponent implements OnInit {
maintainAspectRatio: false,
plugins: {
tooltip: {
enabled: true,
mode: 'nearest',
intersect: false,
callbacks: {
label: (tooltipItem: any) => {
const datasetLabel = tooltipItem.dataset.label.toLowerCase();
const formattedValue = tooltipItem.formattedValue;
if (datasetLabel.includes('suhu')) {
return `${tooltipItem.dataset.label}: ${formattedValue}°C`;
} else if (datasetLabel.includes('cahaya')) {
return `${tooltipItem.dataset.label}: ${formattedValue} lux`;
} else if (datasetLabel.includes('nitrogen') || datasetLabel.includes('pottasium') || datasetLabel.includes('phosphorus') || datasetLabel.includes('soil')) {
return `${tooltipItem.dataset.label}: ${formattedValue} NPM`;
} else {
return `${tooltipItem.dataset.label}: ${formattedValue} %`;
}
}
}
enabled: true,
mode: 'nearest',
intersect: false,
},
legend: {
display: true
}
},
scales: {
},
scales: {
x: {
beginAtZero: true
},
},
y: {
beginAtZero: true
}
}
}
});
} else {
console.error('Failed to show chart');
}
}
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;
const timeframe = (document.getElementById('timeframeSelect') as HTMLSelectElement).value;
const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value.toLowerCase();
let newData: number[];
let newLabel: string;
let newColor: string;
let newLabels: string[];
let newData: number[] | undefined;
let newLabel: string = '';
let newColor: string = '';
const kelembapanColor = '#16423C';
const suhuColor = '#8F5A62';
const intensitasCahayaColor = '#DF9B55';
const humidityTanahColor = '#493e30';
const nitrogenColor = '#364732';
const pottasiumColor = '#472e49';
const phosphorusColor = '#663440';
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 (parameter) {
case 'humidity':
newLabel = timeframe === 'hourly' ? 'Kelembapan Udara Per Jam' : (timeframe === 'daily' ? 'Kelembapan Harian' : 'Kelembapan Bulanan');
newData = timeframe === 'hourly' ? this.humidityData : (timeframe === 'daily' ? this.dailyHumidityData : this.monthlyHumidityData);
newColor = kelembapanColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
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 'temperature':
newLabel = timeframe === 'hourly' ? 'Suhu Per Jam' : (timeframe === 'daily' ? 'Suhu Harian' : 'Suhu Bulanan');
newData = timeframe === 'hourly' ? this.temperatureData : (timeframe === 'daily' ? this.dailyTemperatureData : this.monthlyTemperatureData);
newColor = suhuColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
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 'light':
newLabel = timeframe === 'hourly' ? 'Intensitas Cahaya Per Jam' : (timeframe === 'daily' ? 'Intensitas Cahaya Harian' : 'Intensitas Cahaya Bulanan');
newData = timeframe === 'hourly' ? this.lightData : (timeframe === 'daily' ? this.dailyLightData : this.monthlyLightData);
newColor = intensitasCahayaColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
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;
case 'humidityTanah':
newLabel = timeframe === 'hourly' ? 'Kelembaban Tanah Per Jam' : (timeframe === 'daily' ? 'Kelembaban Tanah Harian' : 'Kelembaban Tanah Bulanan');
newData = timeframe === 'hourly' ? this.humidityTanahData : (timeframe === 'daily' ? this.dailyHumidityTanahData : this.monthlyHumidityData);
newColor = humidityTanahColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
case 'nitrogen':
newLabel = timeframe === 'hourly' ? 'Nitrogen Per Jam' : (timeframe === 'daily' ? 'Nitrogen Harian' : 'Nitrogen Bulanan');
newData = timeframe === 'hourly' ? this.nitrogenData : (timeframe === 'daily' ? this.dailyNitrogenData : this.monthlyNitrogenData);
newColor = nitrogenColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
case 'pottasium':
newLabel = timeframe === 'hourly' ? 'Pottasium Per Jam' : (timeframe === 'daily' ? 'Pottasium Harian' : 'Pottasium Bulanan');
newData = timeframe === 'hourly' ? this.pottasiumData : (timeframe === 'daily' ? this.dailyPottasiumData: this.monthlyPottasiumData);
newColor = pottasiumColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
case 'phosphorus':
newLabel = timeframe === 'hourly' ? 'Phosphorus Per Jam' : (timeframe === 'daily' ? 'Phosphorus Harian' : 'Phosphorus Bulanan');
newData = timeframe === 'hourly' ? this.phosphorusData : (timeframe === 'daily' ? this.dailyPhosphorusData : this.monthlyPhosphorusData);
newColor = phosphorusColor;
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
break;
default:
newLabel = 'Kelembapan Per Jam';
newData = this.humidityData;
newColor = kelembapanColor;
newLabels = this.labelHourly;
console.error('Sensor tidak ditemukan');
return;
}
this.createChart(newData, newLabel, newColor, newLabels);
this.createChart(newData!, newLabel, newColor, this.labelHourly);
}
}