ChartView.vue

<template>
  <div class="chart-view">
    <h2>Daten für Raum: {{ room }}</h2>

    <ChartCard
      title="CO₂ Verlauf"
      :labels="labels"
      :data="co2Data"
      borderColor="#ff6384"
    />

    <!-- Debug-Ausgabe -->
    <pre>Labels: {{ labels }}</pre>
    <pre>CO₂: {{ co2Data }}</pre>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import ChartCard from '../components/ChartCard.vue'

export default defineComponent({
  name: 'ChartView',
  components: { ChartCard },
  setup() {
    const route = useRoute()
    const room = decodeURIComponent(route.params.room as string)

    const labels = ref<string[]>([])
    const co2Data = ref<number[]>([])

    onMounted(async () => {
      try {
        const url = `http://localhost:8000/api/room_data_range?room=${encodeURIComponent(room)}&start=-7d&stop=now()`
        const response = await fetch(url)

        if (!response.ok) {
          throw new Error(`HTTP-Fehler: ${response.status}`)
        }

        const json = await response.json()
        const entries = Object.entries(json.data).sort(
          ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
        )

        const labelsArray = entries.map(([timestamp]) =>
          new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
        )

        const co2DataArray = entries.map(([, values]) => values.co2)

        labels.value = labelsArray
        co2Data.value = co2DataArray
      } catch (err) {
        console.error('❌ Fehler beim Laden der Daten:', err)
      }
    })

    return { room, labels, co2Data }
  }
})
</script>

<style scoped>
.chart-view {
  padding: 2rem;
}
</style>