// Evento que aguarda até que todo o conteúdo da página seja carregado antes de executar o código
document.addEventListener('DOMContentLoaded', (event) => {

  // Define a quantidade de dados que serão exibidos no gráfico
  const DATA_COUNT = 12;
  
  // Cria um array vazio para armazenar os rótulos (labels do eixo x)
  const labels = [];
  
  // Preenche o array de rótulos com números de 0 a 11
  for (let i = 0; i < DATA_COUNT; ++i) {
    labels.push(i.toString());
  }

  // Define os pontos de dados que serão plotados no gráfico
  const datapoints = [0, 20, 20, 60, 60, 120, NaN, 180, 120, 125, 105, 110, 170];
  
  // Cria um objeto que contém os dados e as configurações dos conjuntos de dados (datasets)
  const data = {
    labels: labels, // Rótulos do eixo x
    datasets: [
    {
        label: 'Interpolação Cúbica (monotone)', // Nome do conjunto de dados
        data: datapoints, // Dados a serem plotados
        borderColor: "#DC143C", //Cor da linha do gráfico (vermelho)
        fill: false, // Parâmetro que define se será ou não preenchida a área abaixo da linha
        cubicInterpolationMode: 'monotone',
        tension: 0.4 // Tensão da linha (curvatura)
      }, {
        label: 'Inteporlação Cúbica', // Nome do segundo conjunto de dados
        data: datapoints,
        borderColor: "#7B68EE", // Cor da segunda linha do gráfico (azul)
        fill: false,
        tension: 0.4
      }, {
        label: 'Interpolação Linear (default)', // Nome do terceiro conjunto de dados
        data: datapoints,
        borderColor: "#32CD32", // Cor da terceira linha do gráfico (verde)
        fill: false
      }
    ]
  }; 
  
  // Objeto de configuração para o gráfico
  const chart = {
    type: 'line', // Tipo de gráfico (linha)
    data: data, // Dados do gráfico
    options: {
      responsive: true, // Habilita ou não a responsividade do gráfico
      plugins: {
        title: {
          display: true, // Exibe ou não o título do gráfico
          text: 'Chart.js Gráfico de Linha - Modo de interpolação Cúbica' // Título a ser exibido
        },
      },
      interaction: {
        intersect: false, // Define se as interações devem ocorrer apenas quando os pontos se cruzam
      },
      scales: {
        x: {
          display: true, // Exibe o eixo x
          title: {
            display: true // Exibe o título do eixo x
          }
        },
        y: {
          display: true, // Exibe o eixo y
          title: {
            display: true, // Exibe o título do eixo y
            text: 'Valor' // Texto do título do eixo y
          },
          suggestedMin: -10, // Valor mínimo sugerido para o eixo y
          suggestedMax: 200 // Valor máximo sugerido para o eixo y
        }
      }
    },
  };

  // Cria e renderiza o gráfico no elemento <canvas> com id 'myChart'
  const myChart = new Chart(
    document.getElementById('myChart'),
    chart
  );
});