Enhance ChartCard and ChartView components with improved axis styling and...

Enhance ChartCard and ChartView components with improved axis styling and default time window functionality

frontend/src/components/ChartCard.vue

@@ -66,7 +66,54 @@ export default defineComponent({
           title: { display: false }
         },
         scales: {
-          y: { beginAtZero: true }
+          x: {
+            ticks: {
+              color: '#333333', // Darker color for x-axis labels
+              maxRotation: 0,
+              minRotation: 0,
+              padding: 10,
+              font: {
+                size: 12,
+                weight: 'bold'
+              },
+              maxTicksLimit: 8, // Allow up to 8 ticks
+              autoSkip: false, // Don't auto-skip labels
+              callback: function(value, index) {
+                // Only show non-empty labels
+                const label = this.getLabelForValue(value as number);
+                return label || '';
+              }
+            },
+            grid: {
+              display: true,
+              color: 'rgba(0, 0, 0, 0.3)', // Darker vertical grid lines
+              lineWidth: 1,
+              drawOnChartArea: true, // Draw grid lines over chart area
+              drawTicks: true
+            }
+          },
+          y: { 
+            beginAtZero: true,
+            ticks: {
+              color: '#333333', // Darker color for y-axis labels
+              padding: 10,
+              font: {
+                size: 12
+              }
+            },
+            grid: {
+              display: true,
+              color: 'rgba(0, 0, 0, 0.1)'
+            }
+          }
+        },
+        layout: {
+          padding: {
+            left: 15,
+            right: 35,
+            top: 15,
+            bottom: 25
+          }
         }
       }
     }
@@ -76,7 +123,7 @@ export default defineComponent({
 
 <style scoped>
 .chart-card {
-  width: 1000px;
+  width: 1200px;
   height: 500px;
   background: white;
   padding: 1.5rem;

frontend/src/views/ChartView.vue

@@ -12,24 +12,25 @@
         <input class="datetime" type="datetime-local" v-model="stop" />
       </label>
       <button @click="loadData">Zeitraum aktualisieren</button>
+      <button @click="loadDataWithDefaultWindow" class="default-btn">Zeige die letzte Woche</button>
     </div>
 
     <div class="chart-grid">
       <ChartCard
         title="CO₂ Verlauf"
-        :labels="labels"
+        :labels="displayLabels"
         :data="co2Data"
         borderColor="#ff6384"
       />
       <ChartCard
         title="Temperatur Verlauf"
-        :labels="labels"
+        :labels="displayLabels"
         :data="temperatureData"
         borderColor="#36a2eb"
       />
       <ChartCard
         title="Luftfeuchtigkeit Verlauf"
-        :labels="labels"
+        :labels="displayLabels"
         :data="humidityData"
         borderColor="#4bc0c0"
       />
@@ -38,7 +39,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted } from 'vue'
+import { defineComponent, ref, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import ChartCard from '../components/ChartCard.vue'
 
@@ -57,6 +58,21 @@ export default defineComponent({
     const start = ref('')
     const stop = ref('')
 
+    // Computed property for displaying max 6 labels
+    const displayLabels = computed(() => {
+      const total = labels.value.length
+      if (total <= 6) return labels.value
+      const result: string[] = []
+      for (let i = 0; i < total; i++) {
+        result.push('')
+      }
+      for (let i = 0; i < 6; i++) {
+        const idx = Math.round(i * (total - 1) / 5)
+        result[idx] = labels.value[idx]
+      }
+      return result
+    })
+
     function toISOStringSafe(value: string): string {
       try {
         return new Date(value).toISOString()
@@ -65,6 +81,24 @@ export default defineComponent({
       }
     }
 
+    function setDefaultTimeWindow() {
+      const now = new Date()
+      const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
+      
+      // Format dates properly for datetime-local inputs
+      const formatForInput = (date: Date) => {
+        const year = date.getFullYear()
+        const month = ('0' + (date.getMonth() + 1)).slice(-2)
+        const day = ('0' + date.getDate()).slice(-2)
+        const hours = ('0' + date.getHours()).slice(-2)
+        const minutes = ('0' + date.getMinutes()).slice(-2)
+        return `${year}-${month}-${day}T${hours}:${minutes}`
+      }
+      
+      start.value = formatForInput(weekAgo)
+      stop.value = formatForInput(now)
+    }
+
     async function loadData() {
       if (!start.value || !stop.value) return
 
@@ -109,12 +143,14 @@ export default defineComponent({
       }
     }
 
-    onMounted(async () => {
-      const now = new Date()
-      const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
-      start.value = weekAgo.toISOString().slice(0, 16)
-      stop.value = now.toISOString().slice(0, 16)
+    // Function to load data with default last week window
+    async function loadDataWithDefaultWindow() {
+      setDefaultTimeWindow()
       await loadData()
+    }
+
+    onMounted(async () => {
+      await loadDataWithDefaultWindow()
     })
 
     return {
@@ -122,10 +158,12 @@ export default defineComponent({
       start,
       stop,
       labels,
+      displayLabels,
       co2Data,
       temperatureData,
       humidityData,
       loadData,
+      loadDataWithDefaultWindow,
     }
   },
 })
@@ -134,9 +172,10 @@ export default defineComponent({
 <style scoped>
 .chart-view {
   padding: 2rem;
+  color: #1a1a1a; 
 }
 
-.time-form {
+.time-form {  
   display: flex;
   gap: 1rem;
   margin-bottom: 2rem;
@@ -165,6 +204,14 @@ export default defineComponent({
   background-color: #0056b3;
 }
 
+.time-form .default-btn {
+  background: #28a745;
+}
+
+.time-form .default-btn:hover {
+  background-color: #218838;
+}
+
 .chart-grid {
     display: flex;
     flex-wrap: nowrap;