Add computed sensor stats and refactor AnalyticsView to use stores

src/stores/sensor.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { ref, reactive } from 'vue'
+import { ref, reactive, computed } from 'vue'
 import {
   sensorsApi,
   SensorType,
@@ -14,9 +14,19 @@ export const useSensorStore = defineStore('sensor', () => {
   const latestReadings = reactive<Map<string, SensorReading>>(new Map())
   const sensorsData = reactive<Map<string, any>>(new Map()) // Legacy support
   const recentlyUpdatedSensors = reactive<Set<string>>(new Set()) // Track recently updated sensors
+  const totalReadings = ref(0) // Total number of readings across all sensors
   const apiLoading = ref(false)
   const apiError = ref<string | null>(null)
 
+  // Computed properties
+  const totalSensors = computed(() => sensorDevices.size)
+
+  const activeSensors = computed(() => {
+    return Array.from(sensorDevices.values()).filter(
+      sensor => sensor.status === 'active' || sensor.status === 'online'
+    ).length
+  })
+
   // Actions
   function updateSensorRoom(sensorId: string, newRoom: string) {
     const sensor = sensorDevices.get(sensorId)
@@ -56,6 +66,9 @@ export const useSensorStore = defineStore('sensor', () => {
   function updateLatestReading(reading: SensorReading) {
     latestReadings.set(reading.sensor_id, reading)
 
+    // Increment total readings count
+    totalReadings.value++
+
     // Mark sensor as recently updated
     recentlyUpdatedSensors.add(reading.sensor_id)
     // Remove from recently updated after 2 seconds
@@ -178,11 +191,18 @@ export const useSensorStore = defineStore('sensor', () => {
       console.log(result)
       // Check if result has a sensors property (common API pattern)
       if (result.sensors && Array.isArray(result.sensors)) {
+        let totalReadingsCount = 0
+
         result.sensors.forEach((sensor) => {
           const sensorKey = sensor._id || sensor.sensor_id
           const sensorType = sensor.sensor_type || sensor.type
           const sensorName = sensor.name || ''
 
+          // Accumulate total readings
+          if (sensor.total_readings) {
+            totalReadingsCount += sensor.total_readings
+          }
+
           const normalizedSensor = {
             ...sensor,
             id: sensorKey,
@@ -207,6 +227,9 @@ export const useSensorStore = defineStore('sensor', () => {
 
           sensorDevices.set(sensorKey, normalizedSensor)
         })
+
+        // Update total readings
+        totalReadings.value = totalReadingsCount
       } else {
         console.warn('Unexpected result format:', typeof result, result)
       }
@@ -247,9 +270,14 @@ export const useSensorStore = defineStore('sensor', () => {
     latestReadings,
     sensorsData,
     recentlyUpdatedSensors,
+    totalReadings,
     apiLoading,
     apiError,
 
+    // Computed
+    totalSensors,
+    activeSensors,
+
     // Actions
     updateEnergySensors,
     updateSensorRoom,

src/views/AnalyticsView.vue

@@ -33,7 +33,7 @@
             </div>
             <div class="ml-4">
               <p class="text-sm font-medium text-gray-600">Total Sensors</p>
-              <p class="text-lg font-semibold text-gray-900">{{ healthStatus?.total_sensors || 0 }}</p>
+              <p class="text-lg font-semibold text-gray-900">{{ sensorStore.totalSensors }}</p>
             </div>
           </div>
         </div>
@@ -47,7 +47,7 @@
             </div>
             <div class="ml-4">
               <p class="text-sm font-medium text-gray-600">Active Sensors</p>
-              <p class="text-lg font-semibold text-gray-900">{{ healthStatus?.active_sensors || 0 }}</p>
+              <p class="text-lg font-semibold text-gray-900">{{ sensorStore.activeSensors }}</p>
             </div>
           </div>
         </div>
@@ -61,14 +61,14 @@
             </div>
             <div class="ml-4">
               <p class="text-sm font-medium text-gray-600">Total Readings</p>
-              <p class="text-lg font-semibold text-gray-900">{{ formatNumber(healthStatus?.total_readings || 0) }}</p>
+              <p class="text-lg font-semibold text-gray-900">{{ formatNumber(sensorStore.totalReadings) }}</p>
             </div>
           </div>
         </div>
       </div>
 
       <!-- Loading States -->
-      <div v-if="energyStore.apiLoading" class="bg-white rounded-lg shadow p-6 mb-8">
+      <div v-if="isLoading" class="bg-white rounded-lg shadow p-6 mb-8">
         <div class="flex items-center justify-center">
           <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
           <p class="ml-3 text-gray-600">Loading API data...</p>
@@ -76,7 +76,7 @@
       </div>
 
       <!-- Error States -->
-      <div v-if="energyStore.apiError" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-8">
+      <div v-if="apiError" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-8">
         <div class="flex">
           <div class="flex-shrink-0">
             <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
@@ -85,38 +85,33 @@
           </div>
           <div class="ml-3">
             <h3 class="text-sm font-medium text-red-800">API Error</h3>
-            <p class="mt-1 text-sm text-red-700">{{ energyStore.apiError }}</p>
+            <p class="mt-1 text-sm text-red-700">{{ apiError }}</p>
           </div>
         </div>
       </div>
 
-      <!-- Analytics Summary -->
+      <!-- Energy Metrics Summary -->
-      <div v-if="analyticsData.summary" class="bg-white rounded-lg shadow p-6 mb-8">
+      <div class="bg-white rounded-lg shadow p-6 mb-8">
-        <h2 class="text-xl font-semibold text-gray-900 mb-4">Analytics Summary (Last 24 Hours)</h2>
+        <h2 class="text-xl font-semibold text-gray-900 mb-4">Energy Metrics</h2>
         <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
           <div>
-            <p class="text-sm font-medium text-gray-600 mb-2">Total Energy Consumption</p>
+            <p class="text-sm font-medium text-gray-600 mb-2">Current Energy Consumption</p>
             <p class="text-2xl font-bold text-blue-600">
-              {{ analyticsData.summary.total_energy_consumption.value.toFixed(2) }} 
+              {{ energyStore.currentEnergyValue.toFixed(2) }} kWh
-              {{ analyticsData.summary.total_energy_consumption.unit }}
             </p>
           </div>
           <div>
-            <p class="text-sm font-medium text-gray-600 mb-2">Average Power</p>
+            <p class="text-sm font-medium text-gray-600 mb-2">Average Energy Usage</p>
             <p class="text-2xl font-bold text-green-600">
-              {{ analyticsData.summary.average_power.value.toFixed(2) }} 
+              {{ energyStore.averageEnergyUsage.toFixed(2) }} kWh
-              {{ analyticsData.summary.average_power.unit }}
             </p>
           </div>
           <div>
-            <p class="text-sm font-medium text-gray-600 mb-2">Peak Power</p>
+            <p class="text-sm font-medium text-gray-600 mb-2">Total Consumption</p>
-            <p class="text-2xl font-bold text-red-600">
+            <p class="text-2xl font-bold text-purple-600">
-              {{ analyticsData.summary.peak_power.value.toFixed(2) }} 
+              {{ energyStore.currentConsumption.toFixed(2) }} kWh
-              {{ analyticsData.summary.peak_power.unit }}
-            </p>
-            <p class="text-xs text-gray-500 mt-1">
-              at {{ new Date(analyticsData.summary.peak_power.timestamp * 1000).toLocaleString() }}
             </p>
+            <p class="text-xs text-gray-500 mt-1">Cumulative</p>
           </div>
         </div>
       </div>
@@ -164,14 +159,14 @@
               No rooms found from API
             </div>
             <div v-else class="space-y-3">
-              <div v-for="room in apiRooms" :key="room.room" 
+              <div v-for="room in apiRooms" :key="room.name || room.room"
                    class="p-3 bg-gray-50 rounded-lg">
                 <div class="flex items-center justify-between mb-2">
-                  <p class="font-medium text-gray-900">{{ room.room }}</p>
+                  <p class="font-medium text-gray-900">{{ room.name || room.room }}</p>
                   <span class="text-sm text-gray-500">{{ room.sensor_count }} sensors</span>
                 </div>
                 <div class="text-xs text-gray-600 space-y-1">
-                  <p>Types: {{ room.sensor_types.join(', ') }}</p>
+                  <p v-if="room.sensor_types">Types: {{ room.sensor_types.join(', ') }}</p>
                   <div v-if="room.latest_metrics">
                     <span v-if="room.latest_metrics.energy" class="mr-4">
                       Energy: {{ room.latest_metrics.energy.current }} {{ room.latest_metrics.energy.unit }}
@@ -180,6 +175,7 @@
                       CO2: {{ room.latest_metrics.co2.current }} {{ room.latest_metrics.co2.unit }}
                     </span>
                   </div>
+                  <p v-else class="text-gray-400 italic">No metrics available</p>
                 </div>
               </div>
             </div>
@@ -191,31 +187,31 @@
       <div class="bg-white rounded-lg shadow p-6">
         <h2 class="text-lg font-semibold text-gray-900 mb-4">API Actions</h2>
         <div class="flex flex-wrap gap-3">
-          <button @click="refreshAllData" 
+          <button @click="refreshAllData"
                   class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                  :disabled="energyStore.apiLoading">
+                  :disabled="isLoading">
-            <svg v-if="!energyStore.apiLoading" class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg v-if="!isLoading" class="-ml-1 mr-2 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
             </svg>
             <div v-else class="animate-spin -ml-1 mr-2 h-4 w-4 border-2 border-white border-t-transparent rounded-full"></div>
             Refresh All Data
           </button>
-          
+
-          <button @click="fetchSensorsOnly" 
+          <button @click="fetchSensorsOnly"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                  :disabled="energyStore.apiLoading">
+                  :disabled="isLoading">
             Fetch Sensors
           </button>
-          
+
-          <button @click="fetchRoomsOnly" 
+          <button @click="fetchRoomsOnly"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                  :disabled="energyStore.apiLoading">
+                  :disabled="isLoading">
             Fetch Rooms
           </button>
-          
+
-          <button @click="fetchAnalyticsOnly" 
+          <button @click="fetchAnalyticsOnly"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
-                  :disabled="energyStore.apiLoading">
+                  :disabled="isLoading">
             Fetch Analytics
           </button>
         </div>
@@ -226,15 +222,29 @@
 
 <script setup lang="ts">
 import { computed, onMounted } from 'vue'
+import { useSensorStore } from '@/stores/sensor'
+import { useRoomStore } from '@/stores/room'
+import { useAnalyticsStore } from '@/stores/analytics'
 import { useEnergyStore } from '@/stores/energy'
 
+const sensorStore = useSensorStore()
+const roomStore = useRoomStore()
+const analyticsStore = useAnalyticsStore()
 const energyStore = useEnergyStore()
 
 // Computed properties
-const apiSensors = computed(() => energyStore.apiSensors)
+const apiSensors = computed(() => Array.from(sensorStore.sensorDevices.values()))
-const apiRooms = computed(() => energyStore.apiRooms)
+const apiRooms = computed(() => roomStore.apiRooms)
-const analyticsData = computed(() => energyStore.analyticsData)
+const analyticsData = computed(() => analyticsStore.analyticsData)
-const healthStatus = computed(() => energyStore.healthStatus)
+const healthStatus = computed(() => analyticsStore.healthStatus)
+
+// Combined loading and error states
+const isLoading = computed(
+  () => sensorStore.apiLoading || roomStore.apiLoading || analyticsStore.apiLoading
+)
+const apiError = computed(
+  () => sensorStore.apiError || roomStore.apiError || analyticsStore.apiError
+)
 
 // Helper functions
 const formatNumber = (num: number): string => {
@@ -245,23 +255,28 @@ const formatNumber = (num: number): string => {
 
 // Action functions
 const refreshAllData = async () => {
-  await energyStore.initializeFromApi()
+  await Promise.allSettled([
+    roomStore.loadRoomsFromAPI(),
+    sensorStore.fetchApiSensors(),
+    roomStore.fetchApiRooms(),
+    analyticsStore.initializeAnalyticsFromApi(),
+  ])
 }
 
 const fetchSensorsOnly = async () => {
-  await energyStore.fetchApiSensors()
+  await sensorStore.fetchApiSensors()
 }
 
 const fetchRoomsOnly = async () => {
-  await energyStore.fetchApiRooms()
+  await roomStore.fetchApiRooms()
 }
 
 const fetchAnalyticsOnly = async () => {
-  await energyStore.fetchAnalyticsSummary()
+  await analyticsStore.fetchAnalyticsSummary()
 }
 
 // Initialize data on mount
 onMounted(async () => {
-  await energyStore.initializeFromApi()
+  await refreshAllData()
 })
 </script>