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

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: [],
  templateUrl: './graph.component.html',
  styleUrl: './graph.component.scss'
})
export class GraphComponent implements OnInit {
  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);
  }

  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;
                  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
            }
          }, 
          scales: { 
            x: {
              beginAtZero: true
            }, 
            y: {
              beginAtZero: true
            }
          }
        }
      });
    } else {
      console.error('Failed to show chart');
    }
  }
  

  updateChart(): void {
    const parameter = (document.getElementById('parameterSelect') as HTMLSelectElement).value;
    const timeframe = (document.getElementById('timeframeSelect') as HTMLSelectElement).value;
  
    let newData: number[];
    let newLabel: string;
    let newColor: string;
    let newLabels: string[];
  
    const kelembapanColor = '#16423C';
    const suhuColor = '#8F5A62';
    const intensitasCahayaColor = '#DF9B55';
    const humidityTanahColor = '#493e30';
  
    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);
        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);
        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);
        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; 
      default:
        newLabel = 'Kelembapan Per Jam';
        newData = this.humidityData;
        newColor = kelembapanColor;
        newLabels = this.labelHourly;
    }
  
    this.createChart(newData, newLabel, newColor, newLabels);
  }
}