Data finaly is finally shown in the Frontend

.gitignore

@@ -234,3 +234,4 @@ dist-ssr
 ./services/mqtt/data/mosquitto.db
 services/mqtt/data/mosquitto.db
 services/influxdb/influxdb2-admin-token
+services/influxdb/influxdb2-admin-token

frontend/src/components/ChartCard.vue

@@ -88,8 +88,8 @@
   
   <style scoped>
   .chart-card {
-    width: 300px;
-    height: 250px;
+    width: 800px;
+    height: 750px;
     background: white;
     padding: 1rem;
     border-radius: 8px;

frontend/src/views/AboutView.vue

 <template>
-    <div class="about">
-        <h1>This is an about page</h1>
-        <ChartCard
-        title="Testdaten CO₂"
-        :labels="labels"
-        :data="co2Data"
-        borderColor="#ff6384"
-      />
-    </div>
+  <div class="about">
+    <h1>This is an about page</h1>
+
+    <ChartCard
+      title="Testdaten CO₂"
+      :labels="labels"
+      :data="co2Data"
+      borderColor="#ff6384"
+    />
+
+    <!-- Debug-Ausgabe zur Kontrolle -->
+    <pre>Labels: {{ labels }}</pre>
+    <pre>Daten: {{ co2Data }}</pre>
+  </div>
 </template>
 
 <script lang="ts">
@@ -23,21 +28,32 @@ export default defineComponent({
 
     onMounted(async () => {
       try {
-        const url = 'http://localhost:8000/api/room_data_csv_download?room=1/121&start=-1h&stop=now()';
+        const url = 'http://localhost:8000/api/room_data_range?room=1/210&start=-7d&stop=now()';
         const response = await fetch(url);
-        const json = await response.json();
-        console.log('✅ Daten erhalten:', json);
 
-        const entries = Object.entries(json.data).sort(([a], [b]) =>
-          new Date(a).getTime() - new Date(b).getTime()
+        if (!response.ok) {
+          throw new Error(`HTTP-Fehler: ${response.status}`);
+        }
+
+        const json = await response.json();
+        console.log('📦 JSON:', json);
+        console.log('🔍 JSON.data:', json.data);
+        const entries = Object.entries(json.data).sort(
+          ([a], [b]) => new Date(a).getTime() - new Date(b).getTime()
         );
 
-        labels.value = entries.map(([timestamp]) =>
+        const labelsArray = entries.map(([timestamp]) =>
           new Date(timestamp).toLocaleTimeString()
         );
-        co2Data.value = entries.map(([, values]) => Number(values.co2));
+        const co2DataArray = entries.map(([, values]) => values.co2);
+
+        labels.value = labelsArray;
+        co2Data.value = co2DataArray;
+
+        console.log('✅ Labels:', labelsArray);
+        console.log('✅ CO₂-Werte:', co2DataArray);
       } catch (err) {
-        console.error('Fehler beim Laden der CO₂-Daten:', err);
+        console.error('❌ Fehler beim Laden der Daten:', err);
       }
     });
 
@@ -45,13 +61,3 @@ export default defineComponent({
   }
 });
 </script>
-
-<style>
-@media (min-width: 1024px) {
-    .about {
-        min-height: 100vh;
-        display: flex;
-        align-items: center;
-    }
-}
-</style>