frontend-smartfarming/agrilink_vocpro/src/app/pages/dashboard/page/graph/graph.component.ts

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);
  }
}