<template>
    <Line :data="chartData" :options="chartOptions" ref="chartRef" />
</template>
  
  <script setup>
  import { Line } from 'vue-chartjs'
  import {
    Chart as ChartJS,
    Title,
    Tooltip,
    Legend,
    LineElement,
    PointElement,
    LinearScale,
    CategoryScale
  } from 'chart.js'
  import { ref, reactive } from 'vue'

  // Chart.js Module registrieren
  ChartJS.register(Title, Tooltip, Legend, LineElement, PointElement, LinearScale, CategoryScale)
  
  // Refs und Props
  const chartRef = ref()
  const props = defineProps({
    msg: String,
  })
  
  // Chart-Daten
  const chartData = reactive({
    labels: [],
    datasets: [
      {
        label: 'co2',
        data: [],
        borderColor: 'rgb(255, 99, 132)',
        tension: 0.1
      },
      {
        label: 'humidity',
        data: [],
        borderColor: 'rgb(54, 162, 235)',
        tension: 0.1
      },
      {
        label: 'temperature',
        data: [],
        borderColor: 'rgb(255, 206, 86)',
        tension: 0.1
      }
    ]
  })
  
  // Chart-Optionen
  const chartOptions = {
    responsive: true,
    animation: false,
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }

  function getCookie(name) {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts.length === 2) return parts.pop().split(';').shift();
  }
  
  // Methoden nach außen freigeben
  defineExpose({
    chartData,
    updateChart: () => chartRef.value?.chart?.update()
  })
  
  </script>
  
  <style scoped>
  </style>