diff --git a/scipaperloader/static/js/chart.js b/scipaperloader/static/js/chart.js index 1314168..72dba27 100644 --- a/scipaperloader/static/js/chart.js +++ b/scipaperloader/static/js/chart.js @@ -243,8 +243,31 @@ class ActivityChart { console.log("Final timeline data:", timelineData); } else { - // No timeline data, show as inactive - timelineData = [{ x: 0, y: 0 }]; + // No timeline data, show as inactive for the full time range + timelineData = [ + { x: -totalHours, y: 0 }, // Start of time range + { x: 0, y: 0 }, // Current time + ]; + } + + // Ensure we always have data points at the boundaries for proper scaling + const hasStartPoint = timelineData.some( + (point) => point.x <= -totalHours + 1 + ); + const hasEndPoint = timelineData.some((point) => point.x >= -1); + + if (!hasStartPoint) { + // Add a point at the start of the time range with current state + const currentState = + timelineData.length > 0 ? timelineData[timelineData.length - 1].y : 0; + timelineData.unshift({ x: -totalHours, y: currentState }); + } + + if (!hasEndPoint) { + // Add a point near the current time with current state + const currentState = + timelineData.length > 0 ? timelineData[timelineData.length - 1].y : 0; + timelineData.push({ x: 0, y: currentState }); } this.scraperChart = new Chart(this.scraperCtx, { @@ -307,6 +330,8 @@ class ActivityChart { scales: { x: { type: "linear", + min: -totalHours, + max: 0, title: { display: true, text: "Timeline (Hours Ago → Now)", @@ -314,8 +339,9 @@ class ActivityChart { ticks: { callback: function (value) { if (value === 0) return "Now"; - return `${Math.abs(value)}h ago`; + return `-${Math.abs(value)}h`; }, + stepSize: Math.max(1, Math.floor(totalHours / 8)), // Show reasonable number of ticks }, grid: { display: true,