. Number of beats adapts to container width, just like auto mode :)

This commit is contained in:
Doruk 2025-06-14 12:32:54 +02:00
parent f47f73d76d
commit e16b6cf0d1
2 changed files with 16 additions and 22 deletions

View file

@ -64,24 +64,24 @@ async function getAggregatedHeartbeatData(monitorId, range) {
return null; // This will trigger fallback in router
}
// Convert to heartbeat-like format
// Convert stat data to simplified format for client-side aggregation
const result = stats.map(stat => ({
time: dayjs(stat.timestamp * 1000).format("YYYY-MM-DD HH:mm:ss"), // Convert seconds to milliseconds
status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1), // Simplified status logic
time: dayjs(stat.timestamp * 1000).format("YYYY-MM-DD HH:mm:ss"),
status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1),
up: stat.up,
down: stat.down,
ping: stat.ping
}));
console.log(`[HEARTBEAT-RANGE] Returning ${result.length} converted records`);
console.log(`[HEARTBEAT-RANGE] Returning ${result.length} stat records for client aggregation`);
return result;
} else {
// Use daily stats for ranges over 24 hours
const days = Math.ceil(hours / 24);
const startTime = now.subtract(days, "days");
const timestampKey = Math.floor(startTime.valueOf() / (24 * 60 * 60 * 1000)) * (24 * 60 * 60 * 1000);
const timestampKey = Math.floor(startTime.valueOf() / (24 * 60 * 60 * 1000)); // Convert to seconds
console.log(`[HEARTBEAT-RANGE] Using daily stats from timestamp ${timestampKey} (${dayjs(timestampKey).format()})`);
console.log(`[HEARTBEAT-RANGE] Using daily stats from timestamp ${timestampKey} (${dayjs(timestampKey * 1000).format()})`);
const stats = await R.getAll(`
SELECT * FROM stat_daily
@ -97,16 +97,16 @@ async function getAggregatedHeartbeatData(monitorId, range) {
return null; // This will trigger fallback in router
}
// Convert to heartbeat-like format
// Convert stat data to simplified format for client-side aggregation
const result = stats.map(stat => ({
time: dayjs(stat.timestamp).format("YYYY-MM-DD HH:mm:ss"),
status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1), // Simplified status logic
time: dayjs(stat.timestamp * 1000).format("YYYY-MM-DD HH:mm:ss"),
status: stat.up > 0 ? 1 : (stat.down > 0 ? 0 : 1),
up: stat.up,
down: stat.down,
ping: stat.ping
}));
console.log(`[HEARTBEAT-RANGE] Returning ${result.length} converted records`);
console.log(`[HEARTBEAT-RANGE] Returning ${result.length} stat records for client aggregation`);
return result;
}
}

View file

@ -133,21 +133,15 @@ export default {
},
aggregatedBeatList() {
console.log(`[HEARTBEAT-BAR] aggregatedBeatList called with range: ${this.heartbeatBarRange}, beatList length: ${this.beatList ? this.beatList.length : 'null'}`);
console.log(`[HEARTBEAT-BAR] aggregatedBeatList called with range: ${this.heartbeatBarRange}, beatList length: ${this.beatList ? this.beatList.length : 'null'}, maxBeat: ${this.maxBeat}`);
if (!this.beatList || this.beatList.length === 0) {
console.log(`[HEARTBEAT-BAR] No beatList data`);
return [];
}
// If data is already aggregated from server (has 'up'/'down' fields), use as-is
if (this.beatList[0] && typeof this.beatList[0].up !== 'undefined') {
console.log(`[HEARTBEAT-BAR] Using pre-aggregated server data`);
return this.beatList;
}
// Otherwise, do client-side aggregation for raw heartbeat data
console.log(`[HEARTBEAT-BAR] Performing client-side aggregation`);
// Always do client-side aggregation using dynamic maxBeat for proper screen sizing
console.log(`[HEARTBEAT-BAR] Performing client-side aggregation with ${this.maxBeat} buckets`);
const now = dayjs();
const buckets = [];
@ -161,8 +155,8 @@ export default {
totalHours = 90 * 24; // Fallback
}
// Calculate bucket size and count
const totalBuckets = this.maxBeat || 50;
// Use dynamic maxBeat calculated from screen size
const totalBuckets = this.maxBeat > 0 ? this.maxBeat : 50;
const bucketSize = totalHours / totalBuckets;
// Create time buckets from oldest to newest
@ -217,7 +211,7 @@ export default {
}
});
console.log(`[HEARTBEAT-BAR] Generated ${buckets.length} aggregated buckets`);
console.log(`[HEARTBEAT-BAR] Generated ${buckets.length} aggregated buckets using dynamic maxBeat`);
return buckets;
},