fix minor issues, falsy check & unnecessary defaults & simplify to a single empty state

server/routers/status-page-router.js

@@ -87,7 +87,7 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
 
         // Get the status page to determine the heartbeat range
         let statusPage = await R.findOne("status_page", " id = ? ", [ statusPageID ]);
-        let heartbeatBarDays = statusPage ? (statusPage.heartbeat_bar_days || 0) : 0;
+        let heartbeatBarDays = statusPage.heartbeat_bar_days;
 
         // Get max beats parameter from query string (for client-side screen width constraints)
         const maxBeats = Math.min(parseInt(request.query.maxBeats) || 100, 100);
@@ -115,15 +115,22 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
             } else {
                 // For configured day ranges, use aggregated data from UptimeCalculator
                 const buckets = uptimeCalculator.getAggregatedBuckets(heartbeatBarDays, maxBeats);
-                heartbeats = buckets.map(bucket => ({
-                    status: bucket.down > 0 ? DOWN :
-                        bucket.maintenance > 0 ? MAINTENANCE :
-                            bucket.pending > 0 ? PENDING :
-                                bucket.up > 0 ? UP : null,
-                    time: dayjs.unix(bucket.end).toISOString(),
-                    msg: "",
-                    ping: null
-                }));
+                heartbeats = buckets.map(bucket => {
+                    // If bucket has no data, return 0 (empty beat) to match original behavior
+                    if (bucket.up === 0 && bucket.down === 0 && bucket.maintenance === 0 && bucket.pending === 0) {
+                        return 0;
+                    }
+                    
+                    return {
+                        status: bucket.down > 0 ? DOWN :
+                            bucket.maintenance > 0 ? MAINTENANCE :
+                                bucket.pending > 0 ? PENDING :
+                                    bucket.up > 0 ? UP : 0,
+                        time: dayjs.unix(bucket.end).toISOString(),
+                        msg: "",
+                        ping: null
+                    };
+                });
             }
 
             // Calculate uptime based on the range

server/uptime-calculator.js

@@ -901,12 +901,12 @@ class UptimeCalculator {
         // Aggregate available data into buckets
         // Since data is sorted, we can optimize by tracking current bucket index
         let currentBucketIndex = 0;
-        
+
         for (const [ timestamp, dataPoint ] of Object.entries(availableData)) {
             const timestampNum = parseInt(timestamp);
 
             // Move to the correct bucket (since data is sorted, we only need to move forward)
-            while (currentBucketIndex < buckets.length && 
+            while (currentBucketIndex < buckets.length &&
                    timestampNum >= buckets[currentBucketIndex].end) {
                 currentBucketIndex++;
             }
@@ -914,11 +914,11 @@ class UptimeCalculator {
             // Check if we're within a valid bucket
             if (currentBucketIndex < buckets.length) {
                 const bucket = buckets[currentBucketIndex];
-                
+
                 if (timestampNum >= bucket.start && timestampNum < bucket.end) {
                     bucket.up += dataPoint.up || 0;
                     bucket.down += dataPoint.down || 0;
-                    
+
                     if (days > 30) {
                         // Daily data includes maintenance and pending
                         bucket.maintenance += dataPoint.maintenance || 0;

src/components/HeartbeatBar.vue

@@ -11,7 +11,7 @@
             >
                 <div
                     class="beat"
-                    :class="{ 'empty': (beat === 0 || beat === null || beat.status === null), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
+                    :class="{ 'empty': (beat === 0), 'down': (beat.status === 0), 'pending': (beat.status === 2), 'maintenance': (beat.status === 3) }"
                     :style="beatStyle"
                 />
             </div>
@@ -318,7 +318,7 @@ export default {
          * @returns {string} Beat title
          */
         getBeatTitle(beat) {
-            if (beat === 0 || !beat) {
+            if (beat === 0) {
                 return "";
             }