Release v1.9.1: Fix battery history time filter issues and update version numbers

Author: blink-zero

CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to the PowerPulse project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.1] - 2025-03-01
+
+### Fixed
+- Fixed battery history time filter issues:
+  - Changed time filter options from 7 days to 3 days for better data representation
+  - Improved client-side filtering to ensure only data within the requested time range is displayed
+  - Added data sampling for multi-day views to get a more representative sample across the full time range
+  - Increased record limit for multi-day views to provide better data coverage
+  - Enhanced logging for better troubleshooting of time filter issues
+
 ## [1.9.0] - 2025-03-01
 
 ### Changed

README.md

@@ -1,7 +1,7 @@
 # PowerPulse
 
 ![PowerPulse Logo](https://img.shields.io/badge/PowerPulse-UPS%20Monitoring-blue)
-![Version](https://img.shields.io/badge/version-1.9.0-green)
+![Version](https://img.shields.io/badge/version-1.9.1-green)
 ![License](https://img.shields.io/badge/license-MIT-lightgrey)
 
 PowerPulse is a modern UPS (Uninterruptible Power Supply) monitoring dashboard integrated with Network UPS Tools (NUT). It provides a clean, responsive interface for monitoring and managing your UPS systems.

client/package.json

@@ -1,7 +1,7 @@
 {
   "name": "powerpulse-client",
   "private": true,
-  "version": "1.9.0",
+  "version": "1.9.1",
   "author": "blink-zero",
   "repository": {
     "type": "git",

client/src/hooks/useBatteryHistory.js

@@ -4,24 +4,35 @@ import { fetchBatteryHistory, recordBatteryCharge } from '../services/batteryHis
 /**
  * Custom hook for fetching and managing battery history data
  * @param {number|null} upsId - The ID of the UPS system to fetch history for
+ * @param {number} timeFilter - Number of days to fetch history for (default: 7)
  * @returns {Object} - Battery history data and loading state
  */
-export const useBatteryHistory = (upsId) => {
+export const useBatteryHistory = (upsId, timeFilter = 7) => {
   const [batteryHistory, setBatteryHistory] = useState({
     labels: [],
     datasets: [],
   });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
+  const [currentTimeFilter, setCurrentTimeFilter] = useState(timeFilter);
+
+  // Update the time filter when it changes
+  useEffect(() => {
+    setCurrentTimeFilter(timeFilter);
+  }, [timeFilter]);
 
   // Function to fetch and process battery history data
-  const fetchAndProcessData = async () => {
+  const fetchAndProcessData = async (days = currentTimeFilter) => {
     try {
       setLoading(true);
       setError(null);
 
+      console.log(`Fetching battery history for UPS ${upsId} with time filter: ${days} days`);
+      
       // Use our service to fetch the data
-      const data = await fetchBatteryHistory(upsId);
+      const data = await fetchBatteryHistory(upsId, days);
+      
+      console.log(`Received ${data?.length || 0} data points for the last ${days} days`);
 
       if (!data || data.length === 0) {
         console.log('No battery history data available');
@@ -36,17 +47,81 @@ export const useBatteryHistory = (upsId) => {
 
       // Process the data for the chart
       // The API returns an array of objects with charge_percent and timestamp
+      console.log('Raw data from API:', data);
+      
+      // Sort the data by timestamp
       const sortedData = [...data].sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
 
+      console.log(`Sorted data: ${sortedData.length} records`);
+      
+      // Even though the server should filter the data, we'll also filter it on the client side
+      // to ensure we only show data for the requested time period
+      const now = new Date();
+      const oldestAllowedDate = new Date(now);
+      oldestAllowedDate.setDate(oldestAllowedDate.getDate() - days);
+      console.log(`Client-side filtering: Only including records after ${oldestAllowedDate.toLocaleString()}`);
+      
+      // Filter the data to only include records within the requested time period
+      const filteredData = sortedData.filter(item => {
+        const timestamp = new Date(item.timestamp);
+        return timestamp >= oldestAllowedDate;
+      });
+      
+      console.log(`After client-side filtering: ${filteredData.length} records (was ${sortedData.length})`);
+      
+      // For multi-day views, ensure we get a good representation of the data across the full time range
+      let finalData = filteredData;
+      
+      if (days > 1) {
+        console.log(`Ensuring good data representation for ${days}-day view`);
+        
+        // Calculate the time range we want to cover (from now to N days ago)
+        const now = new Date();
+        const oldestAllowedDate = new Date(now);
+        oldestAllowedDate.setDate(oldestAllowedDate.getDate() - days);
+        
+        // If we don't have data going back the full requested time range,
+        // we'll work with what we have and distribute it evenly
+        
+        // Calculate how many data points we want per day (aim for about 12)
+        const totalDesiredPoints = days * 12;
+        
+        if (filteredData.length > totalDesiredPoints) {
+          // If we have more points than desired, sample them
+          const samplingInterval = Math.max(1, Math.floor(filteredData.length / totalDesiredPoints));
+          
+          console.log(`Sampling interval: ${samplingInterval} (keeping 1 out of every ${samplingInterval} points)`);
+          
+          // Sample the data at regular intervals
+          finalData = filteredData.filter((_, index) => index % samplingInterval === 0);
+          
+          // Always include the first and last points to ensure we cover the full time range
+          if (finalData[0] !== filteredData[0]) {
+            finalData.unshift(filteredData[0]);
+          }
+          if (finalData[finalData.length - 1] !== filteredData[filteredData.length - 1]) {
+            finalData.push(filteredData[filteredData.length - 1]);
+          }
+          
+          console.log(`After sampling: ${finalData.length} records (was ${filteredData.length})`);
+        } else {
+          // If we have fewer points than desired, use all of them
+          console.log(`Using all ${filteredData.length} records (fewer than desired ${totalDesiredPoints})`);
+          
+          // If we have very few points, we might want to interpolate additional points
+          // to get a smoother chart, but for now we'll just use what we have
+        }
+      }
+      
       // Check if the data has the expected properties
       let timestamps, charges;
 
-      if (sortedData.length > 0 && !sortedData[0].charge_percent) {
+      if (finalData.length > 0 && !finalData[0].charge_percent) {
         console.warn('Data format issue: charge_percent not found in data');
-        console.log('Data sample:', sortedData[0]);
+        console.log('Data sample:', finalData[0]);
 
         // Try to detect the correct property names
-        const sampleItem = sortedData[0];
+        const sampleItem = finalData[0];
         const chargeKey = Object.keys(sampleItem).find(key => 
           key.includes('charge') || key.includes('battery') || 
           (typeof sampleItem[key] === 'number' && sampleItem[key] >= 0 && sampleItem[key] <= 100)
@@ -59,8 +134,8 @@ export const useBatteryHistory = (upsId) => {
 
         if (chargeKey && timeKey) {
           console.log(`Using detected keys: ${chargeKey} for charge and ${timeKey} for timestamp`);
-          timestamps = sortedData.map(item => item[timeKey]);
-          charges = sortedData.map(item => item[chargeKey]);
+          timestamps = finalData.map(item => item[timeKey]);
+          charges = finalData.map(item => item[chargeKey]);
         } else {
           console.error('Could not detect appropriate data keys');
           setBatteryHistory({
@@ -70,15 +145,47 @@ export const useBatteryHistory = (upsId) => {
           return;
         }
       } else {
-        timestamps = sortedData.map(item => item.timestamp);
-        charges = sortedData.map(item => item.charge_percent);
+        timestamps = finalData.map(item => item.timestamp);
+        charges = finalData.map(item => item.charge_percent);
       }
 
-        // Format timestamps for better display in a 7-day view
-        const formattedLabels = timestamps.map(ts => {
-          const date = new Date(ts);
-          return date.toISOString(); // Return ISO string for proper date handling in the chart
+        // Store the original Date objects for logging
+        const dateObjects = timestamps.map(ts => new Date(ts));
+        
+        // Format timestamps for better display
+        const formattedLabels = dateObjects.map(date => {
+          return date.toLocaleString([], {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+          });
         });
+        
+        // Log the date range of the data
+        if (dateObjects.length > 0) {
+          const oldestDate = dateObjects[0];
+          const newestDate = dateObjects[dateObjects.length - 1];
+          console.log(`Data date range: ${oldestDate.toLocaleString()} to ${newestDate.toLocaleString()}`);
+          
+          // Calculate how many hours of data we have
+          const hoursDiff = (newestDate - oldestDate) / (1000 * 60 * 60);
+          console.log(`Data spans approximately ${hoursDiff.toFixed(1)} hours (${(hoursDiff / 24).toFixed(1)} days)`);
+          
+          // Check if the data matches the requested time filter
+          const now = new Date();
+          const requestedOldestDate = new Date(now);
+          requestedOldestDate.setDate(requestedOldestDate.getDate() - days);
+          console.log(`Requested date range: ${requestedOldestDate.toLocaleString()} to ${now.toLocaleString()}`);
+          
+          // Calculate the difference between the oldest date in the data and the requested oldest date
+          const diffHours = (oldestDate - requestedOldestDate) / (1000 * 60 * 60);
+          console.log(`Difference between requested and actual oldest date: ${diffHours.toFixed(1)} hours`);
+          
+          if (diffHours > 24) {
+            console.warn(`Warning: Data does not go back as far as requested. Missing approximately ${diffHours.toFixed(1)} hours of data.`);
+          }
+        }
 
       setBatteryHistory({
         labels: formattedLabels,
@@ -128,14 +235,16 @@ export const useBatteryHistory = (upsId) => {
 
   useEffect(() => {
     if (!upsId) return;
-    fetchAndProcessData();
-  }, [upsId]);
+    fetchAndProcessData(currentTimeFilter);
+  }, [upsId, currentTimeFilter]);
 
   return {
     batteryHistory,
     loading,
     error,
     recordCurrentCharge,
-    refreshData: fetchAndProcessData
+    refreshData: fetchAndProcessData,
+    currentTimeFilter,
+    setTimeFilter: setCurrentTimeFilter
   };
 };

client/src/pages/Dashboard.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
-import { FiBattery, FiAlertCircle, FiClock, FiThermometer, FiPercent, FiZap, FiActivity, FiRefreshCw, FiCalendar } from 'react-icons/fi';
+import { FiBattery, FiAlertCircle, FiClock, FiThermometer, FiPercent, FiZap, FiActivity, FiRefreshCw, FiCalendar, FiFilter } from 'react-icons/fi';
 import { useSettings } from '../context/SettingsContext';
 import { useBatteryHistory } from '../hooks/useBatteryHistory';
 import { Line } from 'react-chartjs-2';
@@ -12,7 +12,8 @@ import {
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
+  Filler
 } from 'chart.js';
 
 // Register Chart.js components
@@ -23,7 +24,8 @@ ChartJS.register(
   LineElement,
   Title,
   Tooltip,
-  Legend
+  Legend,
+  Filler // Register the Filler plugin for the 'fill' option
 );
 
 const Dashboard = () => {
@@ -32,13 +34,15 @@ const Dashboard = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [selectedUps, setSelectedUps] = useState(null);
+  const [timeFilter, setTimeFilter] = useState(3); // Default to 3 days
   const { 
     batteryHistory, 
     loading: historyLoading, 
     error: historyError,
     recordCurrentCharge,
-    refreshData: refreshBatteryHistory
-  } = useBatteryHistory(selectedUps?.id);
+    refreshData: refreshBatteryHistory,
+    currentTimeFilter
+  } = useBatteryHistory(selectedUps?.id, timeFilter);
   const [lastUpdated, setLastUpdated] = useState(new Date());
 
   useEffect(() => {
@@ -381,10 +385,33 @@ const Dashboard = () => {
                     </h3>
                     <span className="ml-2 text-xs text-gray-500 dark:text-gray-400 flex items-center">
                       <FiCalendar className="mr-1" />
-                      Last 7 days
+                      Last {currentTimeFilter} days
                     </span>
                   </div>
                   <div className="flex items-center">
+                    {/* Time filter dropdown */}
+                    <div className="mr-4 relative">
+                      <div className="flex items-center">
+                        <FiFilter className="h-4 w-4 text-gray-500 dark:text-gray-400 mr-1" />
+                        <select
+                          value={timeFilter}
+                          onChange={(e) => {
+                            const newTimeFilter = Number(e.target.value);
+                            console.log(`Changing time filter from ${timeFilter} to ${newTimeFilter} days`);
+                            setTimeFilter(newTimeFilter);
+                            // Explicitly refresh the data when the filter changes
+                            if (selectedUps) {
+                              setTimeout(() => refreshBatteryHistory(newTimeFilter), 100);
+                            }
+                          }}
+                          className="text-sm bg-transparent border-none text-gray-500 dark:text-gray-400 focus:ring-0 focus:outline-none cursor-pointer pr-8"
+                        >
+                          <option value={1}>Last 24 hours</option>
+                          <option value={3}>Last 3 days</option>
+                        </select>
+                      </div>
+                    </div>
+                    
                     {/* Only show error if we're not showing the placeholder chart */}
                     {historyError && batteryHistory.labels.length > 0 && (
                       <span className="text-xs text-red-500 mr-2">{historyError}</span>
@@ -441,11 +468,11 @@ const Dashboard = () => {
                               maxRotation: 45,
                               color: 'rgba(107, 114, 128, 0.8)',
                               autoSkip: true,
-                              maxTicksLimit: 12,
+                              maxTicksLimit: currentTimeFilter === 1 ? 24 : 14, // Show more ticks for better visibility
                             },
                             title: {
                               display: true,
-                              text: 'Time (Last 7 Days)',
+                              text: `Time (Last ${currentTimeFilter} ${currentTimeFilter === 1 ? 'Day' : 'Days'})`,
                               color: 'rgba(107, 114, 128, 0.8)',
                             }
                           },
@@ -538,7 +565,7 @@ const Dashboard = () => {
                               },
                               title: {
                                 display: true,
-                                text: 'Time (Last 7 Days)',
+                                text: `Time (Last ${currentTimeFilter} ${currentTimeFilter === 1 ? 'Day' : 'Days'})`,
                                 color: 'rgba(107, 114, 128, 0.8)',
                               }
                             },

client/src/services/batteryHistoryService.js

@@ -3,9 +3,10 @@ import axios from 'axios';
 /**
  * Fetches battery history data for a specific UPS system
  * @param {number} upsId - The ID of the UPS system
+ * @param {number} days - Number of days of history to fetch (default: 7)
  * @returns {Promise<Array>} - Array of battery history records
  */
-export const fetchBatteryHistory = async (upsId) => {
+export const fetchBatteryHistory = async (upsId, days = 7) => {
   try {
     // Try the standard endpoint first
     try {
@@ -23,9 +24,9 @@ export const fetchBatteryHistory = async (upsId) => {
       } catch (altErr) {
         console.warn('Alternative endpoint failed:', altErr.message);
 
-        // Try a direct database query using our debug endpoint
-        try {
-          const response = await axios.get(`/api/debug/battery-history/${upsId}?days=7`);
+      // Try a direct database query using our debug endpoint
+      try {
+        const response = await axios.get(`/api/debug/battery-history/${upsId}?days=${days}`);
           console.log('Battery history from debug endpoint:', response.data);
 
           // If we got data, return it
@@ -71,7 +72,7 @@ export const fetchBatteryHistory = async (upsId) => {
               console.log('Manual recording response:', recordResponse.data);
 
               // Try to fetch the data again
-              const retryResponse = await axios.get(`/api/debug/battery-history/${upsId}?days=7`);
+              const retryResponse = await axios.get(`/api/debug/battery-history/${upsId}?days=${days}`);
               console.log('Battery history after manual recording:', retryResponse.data);
               return retryResponse.data;
             }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerpulse",
-  "version": "1.9.0",
+  "version": "1.9.1",
   "description": "Modern UPS monitoring dashboard integrated with Network UPS Tools (NUT)",
   "main": "index.js",
   "scripts": {