fix(dashboard): fix default data graph and parameter if change into other sensor
This commit is contained in:
Desy Ayurianti
parent
1b99366200
commit
f6d3ef022c
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
@ -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',
|
||||
'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 {
|
||||
|
|
@ -133,22 +93,6 @@ export class GraphComponent implements OnInit {
|
|||
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} %`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
legend: {
|
||||
display: true
|
||||
|
|
@ -164,79 +108,69 @@ export class GraphComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
});
|
||||
} 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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user