From f6d3ef022c7b45ac33c39567f27f18fbd69fa0b6 Mon Sep 17 00:00:00 2001 From: Desy Ayurianti Date: Fri, 27 Sep 2024 10:34:34 +0700 Subject: [PATCH] fix(dashboard): fix default data graph and parameter if change into other sensor --- .../dashboard/page/graph/graph.component.html | 23 +- .../dashboard/page/graph/graph.component.ts | 274 +++++++----------- 2 files changed, 112 insertions(+), 185 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 41611a9..9c0f2ee 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 @@ -1,18 +1,11 @@
- - - + +
- - - \ 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 dbced28..b4c4cdd 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,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); } }