dev smartfarming #1
|
|
@ -1,18 +1,11 @@
|
||||||
<div class="container-graph">
|
<div class="container-graph">
|
||||||
<select class="form-select" id="parameterSelect" (change)="updateChart()">
|
<select class="form-select" id="sensorSelect" (change)="onSensorChange($event)">
|
||||||
<option value="humidity">Kelembaban Udara</option>
|
<option value="dht">DHT</option>
|
||||||
<option value="temperature">Suhu</option>
|
<option value="npk1">NPK 1</option>
|
||||||
<option value="light">Intensitas Cahaya</option>
|
<option value="npk2">NPK 2</option>
|
||||||
<option value="nitrogen">Nitrogen</option>
|
</select>
|
||||||
<option value="phosphorus">Phosphorus</option>
|
<select class="form-select" id="parameterSelect" (change)="updateChart()">
|
||||||
<option value="pottasium">Pottasium</option>
|
<option *ngFor="let parameter of parameters" [value]="parameter">{{ parameter }}</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<select class="form-select" id="timeframeSelect" (change)="updateChart()">
|
|
||||||
<option value="hourly">Per Jam</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<canvas id="myChart"></canvas>
|
<canvas id="myChart"></canvas>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,102 +1,62 @@
|
||||||
|
import { CommonModule } from '@angular/common';
|
||||||
import { Component, OnInit } from '@angular/core';
|
import { Component, OnInit } 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,
|
||||||
imports: [],
|
imports: [CommonModule],
|
||||||
templateUrl: './graph.component.html',
|
templateUrl: './graph.component.html',
|
||||||
styleUrl: './graph.component.scss'
|
styleUrls: ['./graph.component.scss']
|
||||||
})
|
})
|
||||||
export class GraphComponent implements OnInit {
|
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;
|
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 = [
|
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',
|
||||||
'17.00', '18.00', '19.00', '20.00', '21.00', '22.00', '23.00', '24.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 {
|
ngOnInit(): void {
|
||||||
Chart.register(LineController, LineElement, PointElement, LinearScale, Title, CategoryScale, Tooltip, Filler);
|
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 {
|
createChart(data: number[], label: string, borderColor: string, labels: string[]): void {
|
||||||
|
|
@ -104,7 +64,7 @@ export class GraphComponent implements OnInit {
|
||||||
const ctx = canvas.getContext('2d');
|
const ctx = canvas.getContext('2d');
|
||||||
|
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
this.chart.destroy();
|
this.chart.destroy();
|
||||||
}
|
}
|
||||||
|
|
||||||
if (ctx) {
|
if (ctx) {
|
||||||
|
|
@ -118,8 +78,8 @@ export class GraphComponent implements OnInit {
|
||||||
borderColor,
|
borderColor,
|
||||||
borderWidth: 1.5,
|
borderWidth: 1.5,
|
||||||
fill: false,
|
fill: false,
|
||||||
backgroundColor: borderColor + '4D',
|
backgroundColor: borderColor + '4D',
|
||||||
tension: 0.5,
|
tension: 0.5,
|
||||||
pointRadius: 5,
|
pointRadius: 5,
|
||||||
pointHoverRadius: 8,
|
pointHoverRadius: 8,
|
||||||
pointBackgroundColor: borderColor,
|
pointBackgroundColor: borderColor,
|
||||||
|
|
@ -130,113 +90,87 @@ export class GraphComponent implements OnInit {
|
||||||
maintainAspectRatio: false,
|
maintainAspectRatio: false,
|
||||||
plugins: {
|
plugins: {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
enabled: true,
|
enabled: true,
|
||||||
mode: 'nearest',
|
mode: 'nearest',
|
||||||
intersect: false,
|
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: {
|
legend: {
|
||||||
display: true
|
display: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
scales: {
|
scales: {
|
||||||
x: {
|
x: {
|
||||||
beginAtZero: true
|
beginAtZero: true
|
||||||
},
|
},
|
||||||
y: {
|
y: {
|
||||||
beginAtZero: true
|
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 {
|
updateChart(): void {
|
||||||
const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value;
|
const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value.toLowerCase();
|
||||||
const timeframe = (document.getElementById('timeframeSelect') as HTMLSelectElement).value;
|
|
||||||
|
|
||||||
let newData: number[];
|
let newData: number[] | undefined;
|
||||||
let newLabel: string;
|
let newLabel: string = '';
|
||||||
let newColor: string;
|
let newColor: string = '';
|
||||||
let newLabels: string[];
|
|
||||||
|
|
||||||
const kelembapanColor = '#16423C';
|
const humidity = '#16423C';
|
||||||
const suhuColor = '#8F5A62';
|
const temperature = '#8F5A62';
|
||||||
const intensitasCahayaColor = '#DF9B55';
|
const light = '#DF9B55';
|
||||||
const humidityTanahColor = '#493e30';
|
const moisture = '#54909c';
|
||||||
const nitrogenColor = '#364732';
|
const conductivity = '#661311';
|
||||||
const pottasiumColor = '#472e49';
|
const ph = '#664735';
|
||||||
const phosphorusColor = '#663440';
|
const nitrogen = '#3a6635';
|
||||||
|
const phosphorus = '#3f3566';
|
||||||
|
const potassium = '#5f3566';
|
||||||
|
|
||||||
switch (parameter) {
|
switch (this.selectedSensor) {
|
||||||
case 'humidity':
|
case 'dht':
|
||||||
newLabel = timeframe === 'hourly' ? 'Kelembapan Udara Per Jam' : (timeframe === 'daily' ? 'Kelembapan Harian' : 'Kelembapan Bulanan');
|
newData = this.dhtData[parameter as keyof typeof this.dhtData];
|
||||||
newData = timeframe === 'hourly' ? this.humidityData : (timeframe === 'daily' ? this.dailyHumidityData : this.monthlyHumidityData);
|
newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
|
||||||
newColor = kelembapanColor;
|
newColor = (parameter === 'humidity') ? humidity :
|
||||||
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
|
(parameter === 'temperature') ? temperature : light;
|
||||||
break;
|
break;
|
||||||
case 'temperature':
|
case 'npk1':
|
||||||
newLabel = timeframe === 'hourly' ? 'Suhu Per Jam' : (timeframe === 'daily' ? 'Suhu Harian' : 'Suhu Bulanan');
|
newData = this.npk1Data[parameter as keyof typeof this.npk1Data];
|
||||||
newData = timeframe === 'hourly' ? this.temperatureData : (timeframe === 'daily' ? this.dailyTemperatureData : this.monthlyTemperatureData);
|
newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
|
||||||
newColor = suhuColor;
|
newColor = (parameter === 'temperature') ? temperature :
|
||||||
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
|
(parameter === 'moisture') ? moisture :
|
||||||
|
(parameter === 'conductivity') ? conductivity :
|
||||||
|
(parameter === 'ph') ? ph :
|
||||||
|
(parameter === 'nitrogen') ? nitrogen :
|
||||||
|
(parameter === 'phosphorus') ? phosphorus : potassium;
|
||||||
break;
|
break;
|
||||||
case 'light':
|
case 'npk2':
|
||||||
newLabel = timeframe === 'hourly' ? 'Intensitas Cahaya Per Jam' : (timeframe === 'daily' ? 'Intensitas Cahaya Harian' : 'Intensitas Cahaya Bulanan');
|
newData = this.npk2Data[parameter as keyof typeof this.npk2Data];
|
||||||
newData = timeframe === 'hourly' ? this.lightData : (timeframe === 'daily' ? this.dailyLightData : this.monthlyLightData);
|
newLabel = parameter.charAt(0).toUpperCase() + parameter.slice(1);
|
||||||
newColor = intensitasCahayaColor;
|
newColor = (parameter === 'temperature') ? temperature :
|
||||||
newLabels = timeframe === 'hourly' ? this.labelHourly : (timeframe === 'daily' ? this.labelDaily : this.labelMonthly);
|
(parameter === 'moisture') ? moisture :
|
||||||
|
(parameter === 'conductivity') ? conductivity :
|
||||||
|
(parameter === 'ph') ? ph :
|
||||||
|
(parameter === 'nitrogen') ? nitrogen :
|
||||||
|
(parameter === 'phosphorus') ? phosphorus : potassium;
|
||||||
break;
|
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:
|
default:
|
||||||
newLabel = 'Kelembapan Per Jam';
|
console.error('Sensor tidak ditemukan');
|
||||||
newData = this.humidityData;
|
return;
|
||||||
newColor = kelembapanColor;
|
|
||||||
newLabels = this.labelHourly;
|
|
||||||
}
|
}
|
||||||
|
this.createChart(newData!, newLabel, newColor, this.labelHourly);
|
||||||
this.createChart(newData, newLabel, newColor, newLabels);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user