From 047380966960c653062fd90f41188d63ea0cba26 Mon Sep 17 00:00:00 2001 From: Sever Manolescu Date: Thu, 16 Oct 2025 20:24:15 +0300 Subject: [PATCH 1/2] Improve App Details page --- src/main/ipc/apps.js | 17 +++- src/renderer/app-details.html | 84 ++++++++++--------- src/renderer/js/app-details/app-details.js | 45 ++++++---- .../js/app-details/usage-over-time-chart.js | 72 ++++++++-------- src/renderer/styles/analytics/analytics.css | 1 - .../styles/app-details/app-details.css | 23 ++++- src/renderer/styles/app-details/chart.css | 51 +++++++++-- .../category-insights/category-insights.css | 1 - src/renderer/styles/goals/goals.css | 1 - .../styles/index-page/home-toolbar.css | 1 - .../styles/productivity/productivity.css | 1 - 11 files changed, 190 insertions(+), 107 deletions(-) diff --git a/src/main/ipc/apps.js b/src/main/ipc/apps.js index 12e0f1c..d999aab 100644 --- a/src/main/ipc/apps.js +++ b/src/main/ipc/apps.js @@ -320,7 +320,10 @@ function initializeAppHandlers() { `).all([appId]); // Get today's activity by hour - const todayStart = new Date().setHours(0, 0, 0, 0); + // Create a Date object for today at midnight in local time + const todayDate = new Date(); + todayDate.setHours(0, 0, 0, 0); + const todayStart = todayDate.getTime(); // Convert to milliseconds timestamp const todayActivity = db.prepare(` SELECT CAST(strftime('%H', start_time / 1000, 'unixepoch', 'localtime') AS INTEGER) as hour, @@ -449,8 +452,16 @@ function calculateStreak(db, appId) { if (sessions.length === 0) return 0; let streak = 0; - const today = new Date().toISOString().split('T')[0]; - const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0]; + // Get today's date in local time (YYYY-MM-DD format) to match SQL 'localtime' + const todayDate = new Date(); + const today = todayDate.getFullYear() + '-' + + String(todayDate.getMonth() + 1).padStart(2, '0') + '-' + + String(todayDate.getDate()).padStart(2, '0'); + + const yesterdayDate = new Date(Date.now() - 86400000); + const yesterday = yesterdayDate.getFullYear() + '-' + + String(yesterdayDate.getMonth() + 1).padStart(2, '0') + '-' + + String(yesterdayDate.getDate()).padStart(2, '0'); // Check if there's activity today or yesterday if (sessions[0].date !== today && sessions[0].date !== yesterday) { diff --git a/src/renderer/app-details.html b/src/renderer/app-details.html index c9747c2..57769a9 100644 --- a/src/renderer/app-details.html +++ b/src/renderer/app-details.html @@ -9,7 +9,9 @@ + + @@ -79,50 +81,56 @@ - -
Overview
-
-
-
⏱️
-
-
Total Time
-
0h
+ +
+
+
+ + + + +
-
-
-
📊
-
-
This Week
-
0h
+ +
+ Custom: + + to +
-
-
-
🔥
-
-
Current Streak
-
0 days
+ +
+ 30 days of data available
-
-
📅
-
-
Total Sessions
-
0
-
+
+ + +
Overview
+
+
+
Total Time
+
0h
-
-
📆
-
-
First Used
-
-
-
+
+
This Week
+
0h
-
-
📈
-
-
Peak Day
-
0h
-
+
+
Current Streak
+
0h
+
+
+
Total Sessions
+
0h
+
+
+
First Used
+
0h
+
+
+
Peak Day
+
0h
⚪
diff --git a/src/renderer/js/app-details/app-details.js b/src/renderer/js/app-details/app-details.js index b9dda52..e2e62fd 100644 --- a/src/renderer/js/app-details/app-details.js +++ b/src/renderer/js/app-details/app-details.js @@ -46,19 +46,32 @@ async function loadAppDetails() { style="width: 120px; height: 120px; object-fit: contain;">`; } - // Update quick stats - document.querySelectorAll('.quick-stat-value')[0].textContent = formatTime(details.stats.totalTime); - document.querySelectorAll('.quick-stat-value')[1].textContent = formatTime(details.stats.thisWeek); - document.querySelectorAll('.quick-stat-value')[2].textContent = `${details.stats.streak} days`; - document.querySelectorAll('.quick-stat-value')[3].textContent = details.stats.sessionCount; - document.querySelectorAll('.quick-stat-value')[4].textContent = - details.stats.firstUsed ? new Date(details.stats.firstUsed).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Unknown'; - - // Find peak day from weekly usage - const peakDay = details.weeklyUsage.reduce((max, day) => - day.total_duration > (max?.total_duration || 0) ? day : max, null); - document.querySelectorAll('.quick-stat-value')[5].textContent = - peakDay ? formatTime(peakDay.total_duration) : '0m'; + // Get all stat elements once + const statValues = document.querySelectorAll('.stat-value'); + const { stats, weeklyUsage } = details; + + if (statValues.length === 6){ + // Update quick stats + statValues[0].textContent = formatTime(stats.totalTime); + statValues[1].textContent = formatTime(stats.thisWeek); + statValues[2].textContent = `${stats.streak} days`; + statValues[3].textContent = stats.sessionCount; + statValues[4].textContent = stats.firstUsed + ? new Date(stats.firstUsed).toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + }) + : 'Unknown'; + + // Find and update peak day + const peakDay = weeklyUsage.reduce( + (max, day) => (day.total_duration > (max?.total_duration || 0) ? day : max), + null + ); + statValues[5].textContent = peakDay ? formatTime(peakDay.total_duration) : '0m'; + } + // Update usage chart updateUsageChart(details, currentChartPeriod); @@ -244,7 +257,11 @@ function updateMonthlyCalendar(details) { for (let i = 29; i >= 0; i--) { const date = new Date(); date.setDate(date.getDate() - i); - days.push(date.toISOString().split('T')[0]); + // Format date in local time (YYYY-MM-DD) to match SQL 'localtime' + const dateStr = date.getFullYear() + '-' + + String(date.getMonth() + 1).padStart(2, '0') + '-' + + String(date.getDate()).padStart(2, '0'); + days.push(dateStr); } // Build HTML array diff --git a/src/renderer/js/app-details/usage-over-time-chart.js b/src/renderer/js/app-details/usage-over-time-chart.js index b8c1165..2abccf8 100644 --- a/src/renderer/js/app-details/usage-over-time-chart.js +++ b/src/renderer/js/app-details/usage-over-time-chart.js @@ -1,5 +1,3 @@ -let resizeTimeout; - function setupChartTabs(details) { const tabs = document.querySelectorAll('.chart-tab'); tabs.forEach(tab => { @@ -13,14 +11,6 @@ function setupChartTabs(details) { updateUsageChart(details, currentChartPeriod); }); }); - - // Add resize listener to redraw chart on window resize - window.addEventListener('resize', () => { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => { - updateUsageChart(details, currentChartPeriod); - }, 100); - }); } function updateUsageChart(details, period) { @@ -62,7 +52,10 @@ function getLast7DaysData(weeklyData) { for (let i = 6; i >= 0; i--) { const date = new Date(); date.setDate(date.getDate() - i); - const dateStr = date.toISOString().split('T')[0]; + // Format date in local time (YYYY-MM-DD) to match SQL 'localtime' + const dateStr = date.getFullYear() + '-' + + String(date.getMonth() + 1).padStart(2, '0') + '-' + + String(date.getDate()).padStart(2, '0'); const dayData = weeklyData.find(d => d.date === dateStr); last7Days.push({ date: dateStr, @@ -84,14 +77,21 @@ function getLast12WeeksData(details) { let weekDuration = 0; if (details.monthlyUsage) { for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { - const dateStr = d.toISOString().split('T')[0]; + // Format date in local time (YYYY-MM-DD) to match SQL 'localtime' + const dateStr = d.getFullYear() + '-' + + String(d.getMonth() + 1).padStart(2, '0') + '-' + + String(d.getDate()).padStart(2, '0'); const dayData = details.monthlyUsage.find(m => m.date === dateStr); if (dayData) weekDuration += dayData.total_duration; } } + // Format end date in local time + const endDateStr = endDate.getFullYear() + '-' + + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + + String(endDate.getDate()).padStart(2, '0'); weeks.push({ - date: endDate.toISOString().split('T')[0], + date: endDateStr, duration: weekDuration }); } @@ -112,15 +112,21 @@ function getLast12MonthsData(details) { let monthDuration = 0; if (details.monthlyUsage) { details.monthlyUsage.forEach(dayData => { - const dayDate = new Date(dayData.date); + // Parse the date string (YYYY-MM-DD) correctly in local time + const dateParts = dayData.date.split('-'); + const dayDate = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, parseInt(dateParts[2])); if (dayDate.getFullYear() === year && dayDate.getMonth() === month) { monthDuration += dayData.total_duration; } }); } + // Format date in local time (YYYY-MM-DD) + const dateStr = date.getFullYear() + '-' + + String(date.getMonth() + 1).padStart(2, '0') + '-' + + String(date.getDate()).padStart(2, '0'); months.push({ - date: date.toISOString().split('T')[0], + date: dateStr, duration: monthDuration }); } @@ -140,11 +146,9 @@ function drawChart(chartData, labelFormat) { const ctx = canvas.getContext('2d'); - // Set canvas size to match container - const container = canvas.parentElement; - const containerWidth = container.clientWidth; - canvas.width = containerWidth; - canvas.height = containerWidth * 0.4; // Maintain 2.5:1 aspect ratio + // Use fixed dimensions like analytics chart for consistent appearance + canvas.width = 800; + canvas.height = 350; // Prepare data points const dataPoints = chartData.map(item => ({ @@ -158,15 +162,15 @@ function drawChart(chartData, labelFormat) { // Canvas dimensions const width = canvas.width; const height = canvas.height; - const padding = { top: 30, right: 20, bottom: 40, left: 50 }; + const padding = { top: 30, right: 20, bottom: 40, left: 70 }; const chartWidth = width - padding.left - padding.right; const chartHeight = height - padding.top - padding.bottom; // Clear canvas ctx.clearRect(0, 0, width, height); - // Draw background - ctx.fillStyle = '#0a1e2f'; + // Draw background (match analytics chart color) + ctx.fillStyle = '#16202d'; ctx.fillRect(0, 0, width, height); // Draw grid lines @@ -222,23 +226,23 @@ function drawChart(chartData, labelFormat) { points.forEach(point => ctx.lineTo(point.x, point.y)); ctx.stroke(); - // Draw points and hover areas + // Draw points (match analytics chart sizes) points.forEach((point, index) => { // Draw point ctx.fillStyle = '#66c0f4'; ctx.beginPath(); - ctx.arc(point.x, point.y, 5, 0, Math.PI * 2); + ctx.arc(point.x, point.y, 7, 0, Math.PI * 2); ctx.fill(); // Draw inner dot - ctx.fillStyle = '#0a1e2f'; + ctx.fillStyle = '#16202d'; ctx.beginPath(); - ctx.arc(point.x, point.y, 2, 0, Math.PI * 2); + ctx.arc(point.x, point.y, 3, 0, Math.PI * 2); ctx.fill(); // Draw X-axis label ctx.fillStyle = '#8f98a0'; - ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; + ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(point.label, point.x, height - padding.bottom + 10); @@ -275,7 +279,7 @@ function drawChart(chartData, labelFormat) { ctx.clearRect(0, 0, width, height); // Draw background - ctx.fillStyle = '#0a1e2f'; + ctx.fillStyle = '#16202d'; ctx.fillRect(0, 0, width, height); // Draw grid lines @@ -331,10 +335,10 @@ function drawChart(chartData, labelFormat) { points.forEach(point => ctx.lineTo(point.x, point.y)); ctx.stroke(); - // Draw points + // Draw points (match analytics chart) points.forEach((point) => { const isHovered = point === closestPoint; - const radius = isHovered ? 7 : 5; + const radius = isHovered ? 9 : 7; // Outer circle ctx.fillStyle = isHovered ? '#ffffff' : '#66c0f4'; @@ -343,14 +347,14 @@ function drawChart(chartData, labelFormat) { ctx.fill(); // Inner dot - ctx.fillStyle = isHovered ? '#66c0f4' : '#0a1e2f'; + ctx.fillStyle = isHovered ? '#66c0f4' : '#16202d'; ctx.beginPath(); - ctx.arc(point.x, point.y, isHovered ? 3 : 2, 0, Math.PI * 2); + ctx.arc(point.x, point.y, isHovered ? 4 : 3, 0, Math.PI * 2); ctx.fill(); // Draw X-axis label (highlight if hovered) ctx.fillStyle = isHovered ? '#ffffff' : '#8f98a0'; - ctx.font = isHovered ? 'bold 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto' : '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; + ctx.font = isHovered ? 'bold 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto' : '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(point.label, point.x, height - padding.bottom + 10); diff --git a/src/renderer/styles/analytics/analytics.css b/src/renderer/styles/analytics/analytics.css index 82f83f2..360a003 100644 --- a/src/renderer/styles/analytics/analytics.css +++ b/src/renderer/styles/analytics/analytics.css @@ -8,7 +8,6 @@ } .analytics-header { - background: rgba(27, 40, 56, 0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(102, 192, 244, 0.3); margin-bottom: 20px; diff --git a/src/renderer/styles/app-details/app-details.css b/src/renderer/styles/app-details/app-details.css index a9a3ab0..fee72a0 100644 --- a/src/renderer/styles/app-details/app-details.css +++ b/src/renderer/styles/app-details/app-details.css @@ -3,15 +3,16 @@ /* Override body for app-details (different background) */ body { - background: #171d25; + background: linear-gradient(to bottom, #1b2838 0%, #171d25 100%); + background-attachment: fixed; padding: 0px; } .details-container { - max-width: 100%; - margin: 0; + max-width: 1400px; + margin: 0 auto; padding: 10px 20px 20px 20px; - background: linear-gradient(to bottom, #1b2838 0%, #171d25 100%); + background: transparent; } /* Hero Section */ @@ -23,6 +24,10 @@ body { overflow: hidden; margin-bottom: 16px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); + /* Break out of container to span full width */ + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + width: 100vw; } .app-hero-bg { @@ -239,3 +244,13 @@ body { .export-btn span { font-size: 14px; } + +.app-details-header { + backdrop-filter: blur(8px); + box-shadow: 0 1px 0 rgba(102, 192, 244, 0.3); + margin-bottom: 20px; + position: sticky; + top: 0; + z-index: 100; +} + diff --git a/src/renderer/styles/app-details/chart.css b/src/renderer/styles/app-details/chart.css index 575282b..6c2f9ac 100644 --- a/src/renderer/styles/app-details/chart.css +++ b/src/renderer/styles/app-details/chart.css @@ -28,17 +28,9 @@ border-color: rgba(102, 192, 244, 0.3); } -/* Usage Chart */ -.usage-chart-container { - padding: 10px 0; - display: flex; - justify-content: center; - align-items: center; -} - #usage-line-chart { display: block; - width: 100%; + max-width: 100%; height: auto; } @@ -79,3 +71,44 @@ font-weight: 500; white-space: nowrap; } + .chart-card { + background: transparent; + border: none; + padding: 0; + } + + .chart-card .section-header { + margin-bottom: 16px; + } + + .daily-usage-chart { + height: 350px; + position: relative; + padding: 20px 10px 30px 10px; + } + + .charts-grid { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 10px; + margin-bottom: 20px; + } + + /* Responsive layout for charts */ + @media (max-width: 1400px) { + .charts-grid { + grid-template-columns: 1.5fr 1fr; + } + } + + @media (max-width: 1100px) { + .charts-grid { + grid-template-columns: 1fr; + } + } + + @media (max-width: 800px) { + .charts-grid { + grid-template-columns: 1fr; + } + } \ No newline at end of file diff --git a/src/renderer/styles/category-insights/category-insights.css b/src/renderer/styles/category-insights/category-insights.css index 9cfb418..5844634 100644 --- a/src/renderer/styles/category-insights/category-insights.css +++ b/src/renderer/styles/category-insights/category-insights.css @@ -16,7 +16,6 @@ body { /* Category Header with Date Controls */ .category-header { - background: rgba(27, 40, 56, 0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(102, 192, 244, 0.3); margin-bottom: 20px; diff --git a/src/renderer/styles/goals/goals.css b/src/renderer/styles/goals/goals.css index cc0acb1..b79ae79 100644 --- a/src/renderer/styles/goals/goals.css +++ b/src/renderer/styles/goals/goals.css @@ -13,7 +13,6 @@ /* Header */ .goals-header { - background: rgba(27, 40, 56, 0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(102, 192, 244, 0.3); margin-bottom: 20px; diff --git a/src/renderer/styles/index-page/home-toolbar.css b/src/renderer/styles/index-page/home-toolbar.css index d3ec20f..5fe6d1e 100644 --- a/src/renderer/styles/index-page/home-toolbar.css +++ b/src/renderer/styles/index-page/home-toolbar.css @@ -5,7 +5,6 @@ justify-content: space-between; gap: 20px; padding: 16px 20px; - background: linear-gradient(135deg, #1e2328 0%, #1b2838 100%); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px; diff --git a/src/renderer/styles/productivity/productivity.css b/src/renderer/styles/productivity/productivity.css index 78bd3d0..eda5afa 100644 --- a/src/renderer/styles/productivity/productivity.css +++ b/src/renderer/styles/productivity/productivity.css @@ -8,7 +8,6 @@ /* Header */ .productivity-header { - background: rgba(27, 40, 56, 0.95); backdrop-filter: blur(8px); box-shadow: 0 1px 0 rgba(102, 192, 244, 0.3); margin-bottom: 20px; From fcd6cc64bcecc87b043ea72603eb777bdb4ba823 Mon Sep 17 00:00:00 2001 From: Sever Manolescu Date: Thu, 16 Oct 2025 21:13:31 +0300 Subject: [PATCH 2/2] Improve the chart, remove the daily, weekly buttons, add functionality to the data range buttons, improve the overall functionality and style --- src/main/ipc/apps.js | 188 +++++++++++++ src/preload/preload.js | 1 + src/renderer/app-details.html | 93 ++++--- src/renderer/js/app-details/app-details.js | 249 +++++++++++++----- src/renderer/js/app-details/listeners.js | 7 + src/renderer/js/app-details/usage-insights.js | 40 +++ .../js/app-details/usage-over-time-chart.js | 249 ++++++++---------- src/renderer/js/index-page/details.js | 27 ++ src/renderer/js/index-page/ui-components.js | 8 +- .../styles/app-details/app-details.css | 66 ++++- src/renderer/styles/app-details/chart.css | 10 +- .../styles/app-details/usage-trend.css | 63 +++-- 12 files changed, 714 insertions(+), 287 deletions(-) diff --git a/src/main/ipc/apps.js b/src/main/ipc/apps.js index d999aab..dfd6e23 100644 --- a/src/main/ipc/apps.js +++ b/src/main/ipc/apps.js @@ -262,6 +262,194 @@ function initializeAppHandlers() { } }); + ipcMain.handle('get-app-details-by-date-range', async (event, appId, startDate, endDate) => { + const db = getDb(); + + try { + // Get app info + const app = db.prepare(` + SELECT * FROM apps WHERE id = ? + `).get([appId]); + + if (!app) { + throw new Error('App not found'); + } + + // Convert date strings to timestamps + const startTimestamp = new Date(startDate).setHours(0, 0, 0, 0); + const endTimestamp = new Date(endDate).setHours(23, 59, 59, 999); + + // Get total sessions count for the date range + const sessionCount = db.prepare(` + SELECT COUNT(*) as count FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + `).get([appId, startTimestamp, endTimestamp]); + + // Get usage data for the date range (this replaces weeklyUsage) + const weeklyUsage = db.prepare(` + SELECT + DATE(start_time / 1000, 'unixepoch', 'localtime') as date, + SUM(duration) as total_duration + FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + GROUP BY date + ORDER BY date ASC + `).all([appId, startTimestamp, endTimestamp]); + + // Get this week's total time (last 7 days from end date) + const sevenDaysBeforeEnd = new Date(endDate); + sevenDaysBeforeEnd.setDate(sevenDaysBeforeEnd.getDate() - 6); + const sevenDaysBeforeEndTimestamp = sevenDaysBeforeEnd.setHours(0, 0, 0, 0); + + const thisWeek = db.prepare(` + SELECT SUM(duration) as total FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + `).get([appId, sevenDaysBeforeEndTimestamp, endTimestamp]); + + // Get longest session in date range + const longestSession = db.prepare(` + SELECT MAX(duration) as longest FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + `).get([appId, startTimestamp, endTimestamp]); + + // Get average session in date range + const avgSession = db.prepare(` + SELECT AVG(duration) as average FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + `).get([appId, startTimestamp, endTimestamp]); + + // Get current streak (consecutive days) + const streak = calculateStreak(db, appId); + + // Get recent sessions (last 10 in date range) + const recentSessions = db.prepare(` + SELECT * FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + ORDER BY start_time DESC + LIMIT 10 + `).all([appId, startTimestamp, endTimestamp]); + + // Get today's activity by hour (or end date's activity) + const todayDate = new Date(endDate); + todayDate.setHours(0, 0, 0, 0); + const todayStart = todayDate.getTime(); + const todayEnd = new Date(endDate).setHours(23, 59, 59, 999); + + const todayActivity = db.prepare(` + SELECT + CAST(strftime('%H', start_time / 1000, 'unixepoch', 'localtime') AS INTEGER) as hour, + SUM(duration) as total_duration + FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + GROUP BY hour + ORDER BY hour + `).all([appId, todayStart, todayEnd]); + + // Get monthly usage (30 days worth within the date range) + const monthlyUsage = db.prepare(` + SELECT + DATE(start_time / 1000, 'unixepoch', 'localtime') as date, + SUM(duration) as total_duration, + COUNT(*) as session_count + FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + GROUP BY date + ORDER BY date ASC + `).all([appId, startTimestamp, endTimestamp]); + + // Get usage by day of week (filtered by date range) + const dayOfWeekUsage = db.prepare(` + SELECT + CAST(strftime('%w', start_time / 1000, 'unixepoch', 'localtime') AS INTEGER) as day_of_week, + SUM(duration) as total_duration, + COUNT(*) as session_count + FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + GROUP BY day_of_week + ORDER BY day_of_week + `).all([appId, startTimestamp, endTimestamp]); + + // Get session duration distribution (filtered by date range) + const sessionDurations = db.prepare(` + SELECT duration FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + `).all([appId, startTimestamp, endTimestamp]); + + // Get all sessions for heatmap (within date range, max 90 days) + const heatmapData = db.prepare(` + SELECT + CAST(strftime('%w', start_time / 1000, 'unixepoch', 'localtime') AS INTEGER) as day_of_week, + CAST(strftime('%H', start_time / 1000, 'unixepoch', 'localtime') AS INTEGER) as hour, + SUM(duration) as total_duration + FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time <= ? + GROUP BY day_of_week, hour + `).all([appId, startTimestamp, endTimestamp]); + + // Get category ranking + const categoryRanking = db.prepare(` + SELECT id, name, total_time + FROM apps + WHERE category = ? AND hidden = 0 + ORDER BY total_time DESC + `).all([app.category]); + + const appRankInCategory = categoryRanking.findIndex(a => a.id === appId) + 1; + + // Get total time for all apps + const totalAllApps = db.prepare(` + SELECT SUM(total_time) as total FROM apps WHERE hidden = 0 + `).get(); + + const usagePercentage = totalAllApps?.total > 0 + ? (app.total_time / totalAllApps.total) * 100 + : 0; + + // Get last week's time for comparison (7 days before the selected range) + const fourteenDaysBeforeEnd = new Date(endDate); + fourteenDaysBeforeEnd.setDate(fourteenDaysBeforeEnd.getDate() - 13); + const fourteenDaysBeforeEndTimestamp = fourteenDaysBeforeEnd.setHours(0, 0, 0, 0); + + const lastWeek = db.prepare(` + SELECT SUM(duration) as total FROM sessions + WHERE app_id = ? AND start_time >= ? AND start_time < ? + `).get([appId, fourteenDaysBeforeEndTimestamp, sevenDaysBeforeEndTimestamp]); + + // Get streak history (all streaks) + const streakHistory = calculateStreakHistory(db, appId); + + const result = { + app, + stats: { + totalTime: app.total_time || 0, + thisWeek: thisWeek?.total || 0, + lastWeek: lastWeek?.total || 0, + sessionCount: sessionCount?.count || 0, + streak: streak, + longestSession: longestSession?.longest || 0, + avgSession: avgSession?.average || 0, + firstUsed: app.first_used, + categoryRank: appRankInCategory, + totalInCategory: categoryRanking.length, + usagePercentage: usagePercentage + }, + weeklyUsage, + monthlyUsage, + dayOfWeekUsage, + sessionDurations: sessionDurations ? sessionDurations.map(s => s.duration) : [], + heatmapData, + streakHistory, + recentSessions, + todayActivity + }; + + return result; + } catch (error) { + console.error('Error fetching app details by date range:', error); + throw error; + } + }); + ipcMain.handle('get-app-details', async (event, appId) => { const db = getDb(); diff --git a/src/preload/preload.js b/src/preload/preload.js index 72ffb32..7e2ae01 100644 --- a/src/preload/preload.js +++ b/src/preload/preload.js @@ -48,6 +48,7 @@ contextBridge.exposeInMainWorld('electronAPI', { getTodayStats: () => ipcRenderer.invoke('get-today-stats'), getAppDetails: (appId) => ipcRenderer.invoke('get-app-details', appId), + getAppDetailsByDateRange: (appId, startDate, endDate) => ipcRenderer.invoke('get-app-details-by-date-range', appId, startDate, endDate), getAppById: (appId) => ipcRenderer.invoke('get-app-by-id', appId), getAnalyticsData: (startDate, endDate) => ipcRenderer.invoke('get-analytics-data', startDate, endDate), diff --git a/src/renderer/app-details.html b/src/renderer/app-details.html index 57769a9..c38b7b1 100644 --- a/src/renderer/app-details.html +++ b/src/renderer/app-details.html @@ -106,7 +106,7 @@
-
Overview
+

Overview

Total Time
@@ -143,45 +143,57 @@
-
-
-
-
Usage Over Time
-
- - - -
-
+
+
+

Usage Over Time

- +
-
-
Usage Trends
-
-
-
-
-
This Week
-
0h
-
+0%
+
+

Session Patterns

+
+
+
⏱️
+
+
Avg Session Length
+
0m
+
+
+
+
📊
+
+
Session Frequency
+
0/day
+
+
+
+
🔝
+
+
Longest Session
+
0m
-
-
Last Week
-
0h
-
previous
+
+
+
⏬
+
+
Shortest Session
+
0m
-
-
Category Rank
-
#1
-
of 1
+
+
+
🕐
+
+
Most Common Time
+
--:--
-
-
Total Usage %
-
0%
-
of all apps
+
+
+
📅
+
+
Active Days
+
0
@@ -190,7 +202,7 @@
-
Today's Activity Timeline
+

Today's Activity Timeline

0
@@ -224,12 +236,12 @@
-
Recent Sessions
+

Recent Sessions

-
Session Duration Distribution
+

Session Duration Distribution

@@ -237,7 +249,7 @@
-
Usage Insights
+

Usage Insights

@@ -299,7 +311,7 @@
-
Milestones
+

Milestones

@@ -307,12 +319,12 @@
-
Usage by Day of Week
+

Usage by Day of Week

-
Time of Day Heatmap
+

Time of Day Heatmap

@@ -323,6 +335,7 @@
+ diff --git a/src/renderer/js/app-details/app-details.js b/src/renderer/js/app-details/app-details.js index e2e62fd..3c04a8e 100644 --- a/src/renderer/js/app-details/app-details.js +++ b/src/renderer/js/app-details/app-details.js @@ -1,5 +1,118 @@ let appDetails = null; let currentChartPeriod = 'daily'; +let currentPeriod = 'today'; +let currentAppId = null; +let currentStartDate = null; +let currentEndDate = null; + +// Initialize date range controls +function initializeDateRangeControls() { + setupDateRangeControls({ + onPeriodChange: (period, startDate, endDate) => { + currentPeriod = period; + if (currentAppId) { + loadAppData(currentAppId, period, startDate, endDate); + } + }, + onCustomDateChange: (startDate, endDate) => { + currentPeriod = 'custom'; + if (currentAppId) { + loadAppData(currentAppId, 'custom', startDate, endDate); + } + } + }); +} + +// Helper function to get period display text +function getPeriodDisplayText(period, startDate, endDate) { + const start = new Date(startDate); + const end = new Date(endDate); + + switch(period) { + case 'today': + return 'Today'; + case 'week': + return 'This Week'; + case 'month': + return 'This Month'; + case 'year': + return 'This Year'; + case 'all': + return 'All Time'; + case 'custom': + const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1; + if (days === 1) { + return start.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); + } + return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}`; + default: + return ''; + } +} + +// Load app data for the selected period +async function loadAppData(appId, period, customStartDate, customEndDate) { + currentAppId = appId; + + let startDate, endDate; + + if (period === 'custom' && customStartDate && customEndDate) { + startDate = customStartDate; + endDate = customEndDate; + } else { + const range = calculateDateRange(period); + startDate = range.startDate; + endDate = range.endDate; + } + + // Store current date range + currentStartDate = startDate; + currentEndDate = endDate; + + // Calculate days for date info + const start = new Date(startDate); + const end = new Date(endDate); + const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1; + + // Update date info + const dateInfo = document.querySelector('.date-info'); + if (dateInfo) { + dateInfo.textContent = `${days} day${days !== 1 ? 's' : ''} of data available`; + } + + // Request data from parent window with date range + window.parent.postMessage({ + type: 'REQUEST_APP_DETAILS', + appId: appId, + startDate: startDate, + endDate: endDate + }, '*'); +} + +// Update section headers based on selected period +function updateSectionHeaders() { + const periodText = getPeriodDisplayText(currentPeriod, currentStartDate, currentEndDate); + + // Update main sections + const headers = { + 'Activity Timeline': currentPeriod === 'today' ? "Today's Activity Timeline" : `Activity Timeline - ${periodText}`, + 'Recent Sessions': currentPeriod === 'all' ? 'All Sessions' : `Sessions in ${periodText}`, + }; + + // Find and update section headers + document.querySelectorAll('.section-header').forEach(header => { + const text = header.textContent.trim(); + + // Activity Timeline + if (text.includes('Activity Timeline')) { + header.textContent = headers['Activity Timeline']; + } + // Recent Sessions + else if (text.includes('Sessions') && text.includes('Recent')) { + header.textContent = headers['Recent Sessions']; + } + }); +} // Load app details async function loadAppDetails() { @@ -11,6 +124,9 @@ async function loadAppDetails() { try { const details = appDetails; + // Update section headers based on period + updateSectionHeaders(); + // Update title and category document.querySelector('.app-title').textContent = details.app.name; document.querySelector('.app-category').textContent = @@ -73,11 +189,8 @@ async function loadAppDetails() { } - // Update usage chart - updateUsageChart(details, currentChartPeriod); - - // Setup chart tab listeners - setupChartTabs(details); + // Update usage chart (now always uses daily view based on date range) + updateUsageChart(details, 'daily'); // Update time distribution updateTimeDistribution(details.stats); @@ -93,9 +206,9 @@ async function loadAppDetails() { // Update all sections with error handling try { - updateUsageTrends(details); + updateSessionPatterns(details); } catch (error) { - console.error('Error updating usage trends:', error); + console.error('Error updating session patterns:', error); } try { @@ -200,39 +313,63 @@ function updateRecentSessions(sessions) { `).join(''); } -// Usage Trends -function updateUsageTrends(details) { - const trendStats = document.querySelectorAll('.trend-stat'); - if (trendStats.length < 4) return; - +// Session Patterns +function updateSessionPatterns(details) { const stats = details.stats || {}; - const thisWeek = stats.thisWeek || 0; - const lastWeek = stats.lastWeek || 0; - - const weeklyChange = lastWeek > 0 - ? ((thisWeek - lastWeek) / lastWeek) * 100 - : (thisWeek > 0 ? 100 : 0); - - // This Week - trendStats[0].querySelector('.trend-value').textContent = formatTime(thisWeek); - const changeEl = trendStats[0].querySelector('.trend-change'); - changeEl.textContent = `${weeklyChange >= 0 ? '+' : ''}${Math.round(weeklyChange)}%`; - changeEl.className = `trend-change ${weeklyChange >= 0 ? 'positive' : 'negative'}`; - - // Last Week - trendStats[1].querySelector('.trend-value').textContent = formatTime(lastWeek); - trendStats[1].querySelector('.trend-change').textContent = 'previous'; - - // Category Rank - const categoryRank = stats.categoryRank || 1; - const totalInCategory = stats.totalInCategory || 1; - trendStats[2].querySelector('.trend-value').textContent = `#${categoryRank}`; - trendStats[2].querySelector('.trend-change').textContent = `of ${totalInCategory}`; - - // Total Usage % - const usagePercent = stats.usagePercentage || 0; - trendStats[3].querySelector('.trend-value').textContent = `${usagePercent.toFixed(1)}%`; - trendStats[3].querySelector('.trend-change').textContent = 'of all apps'; + const sessions = details.recentSessions || []; + const heatmapData = details.heatmapData || []; + const weeklyUsage = details.weeklyUsage || []; + + // Calculate session frequency (sessions per day) + const start = new Date(currentStartDate); + const end = new Date(currentEndDate); + const totalDays = Math.ceil((end - start) / (1000 * 60 * 60 * 24)) + 1; + const activeDays = weeklyUsage.filter(d => d.total_duration > 0).length; + const frequency = activeDays > 0 ? (stats.sessionCount / activeDays).toFixed(1) : 0; + + // Average session length + document.getElementById('pattern-avg-length').textContent = formatTime(stats.avgSession || 0); + + // Session frequency + document.getElementById('pattern-frequency').textContent = `${frequency}/day`; + + // Find longest and shortest sessions + if (sessions.length > 0) { + const durations = sessions.map(s => s.duration); + const longest = Math.max(...durations); + const shortest = Math.min(...durations); + + document.getElementById('pattern-longest').textContent = formatTime(longest); + document.getElementById('pattern-shortest').textContent = formatTime(shortest); + } else { + document.getElementById('pattern-longest').textContent = '0m'; + document.getElementById('pattern-shortest').textContent = '0m'; + } + + // Most common time (hour with most sessions) + if (heatmapData.length > 0) { + const hourCounts = {}; + heatmapData.forEach(item => { + const hour = item.hour; + if (!hourCounts[hour]) { + hourCounts[hour] = 0; + } + hourCounts[hour] += item.total_duration || 0; + }); + + const mostCommonHour = Object.entries(hourCounts) + .sort((a, b) => b[1] - a[1])[0][0]; + + const nextHour = (parseInt(mostCommonHour) + 1) % 24; + document.getElementById('pattern-common-time').textContent = + `${mostCommonHour.toString().padStart(2, '0')}:00-${nextHour.toString().padStart(2, '0')}:00`; + } else { + document.getElementById('pattern-common-time').textContent = '--:--'; + } + + // Active days + document.getElementById('pattern-active-days').textContent = + `${activeDays} of ${totalDays}`; } // Monthly Calendar @@ -484,37 +621,7 @@ function hideInheritedInfo() { inheritedInfo.style.display = 'none'; } -// Setup keyboard shortcuts for chart period switching +// Initialize date range controls on page load document.addEventListener('DOMContentLoaded', () => { - document.addEventListener('keydown', (e) => { - // Skip if typing in input field - if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') { - return; - } - - const key = e.key.toLowerCase(); - let period = null; - - switch(key) { - case 'd': - period = 'daily'; - break; - case 'w': - period = 'weekly'; - break; - case 'm': - period = 'monthly'; - break; - } - - if (period) { - e.preventDefault(); - // Find and click the corresponding chart tab - const tabs = document.querySelectorAll('.chart-tab'); - const tab = Array.from(tabs).find(t => t.dataset.period === period); - if (tab) { - tab.click(); - } - } - }); + initializeDateRangeControls(); }); diff --git a/src/renderer/js/app-details/listeners.js b/src/renderer/js/app-details/listeners.js index d9ba61c..ff0ff95 100644 --- a/src/renderer/js/app-details/listeners.js +++ b/src/renderer/js/app-details/listeners.js @@ -6,6 +6,13 @@ window.addEventListener('message', (event) => { } if (event.data.type === 'APP_DETAILS') { + // Initial load - store the app ID and load data for default period + currentAppId = event.data.appId; + if (currentAppId) { + loadAppData(currentAppId, currentPeriod); + } + } else if (event.data.type === 'APP_DETAILS_RESPONSE') { + // Response from REQUEST_APP_DETAILS with filtered data appDetails = event.data.data; loadAppDetails().then(() => { // Initialize productivity selector after app details are loaded diff --git a/src/renderer/js/app-details/usage-insights.js b/src/renderer/js/app-details/usage-insights.js index fc5f53c..a6e700d 100644 --- a/src/renderer/js/app-details/usage-insights.js +++ b/src/renderer/js/app-details/usage-insights.js @@ -1,5 +1,8 @@ // Usage Insights function updateUsageInsights(details) { + // Update insight box titles to be period-aware + updateInsightTitles(); + updateBestWorstDays(details); updateStreakHistory(details); updateAverageSession(details); @@ -7,6 +10,32 @@ function updateUsageInsights(details) { updateTimeOfDay(details); } +// Update insight box titles based on current period +function updateInsightTitles() { + const insightBoxes = document.querySelectorAll('.insight-box'); + + insightBoxes.forEach(box => { + const titleEl = box.querySelector('.insight-title'); + if (!titleEl) return; + + const originalTitle = titleEl.getAttribute('data-original-title') || titleEl.textContent; + if (!titleEl.getAttribute('data-original-title')) { + titleEl.setAttribute('data-original-title', originalTitle); + } + + // Update titles based on period + if (originalTitle === 'Best Days' || originalTitle.includes('Best Days')) { + titleEl.textContent = currentPeriod === 'all' ? 'Best Days' : 'Best Days in Period'; + } else if (originalTitle === 'Least Active Days' || originalTitle.includes('Least Active')) { + titleEl.textContent = currentPeriod === 'all' ? 'Least Active Days' : 'Least Active in Period'; + } else if (originalTitle === 'Average Session' || originalTitle.includes('Average Session')) { + titleEl.textContent = currentPeriod === 'all' ? 'Average Session' : 'Avg Session in Period'; + } else if (originalTitle === 'Peak Usage Times' || originalTitle.includes('Peak Usage')) { + titleEl.textContent = currentPeriod === 'all' ? 'Peak Usage Times' : 'Peak Times in Period'; + } + }); +} + // Best & Worst Days function updateBestWorstDays(details) { const monthlyData = details.monthlyUsage || []; @@ -82,10 +111,21 @@ function updateStreakHistory(details) { // Average Session function updateAverageSession(details) { const valueEl = document.querySelector('.avg-session-value'); + const subtitleEl = document.querySelector('.avg-session-subtitle'); if (!valueEl) return; const avgSession = details.stats?.avgSession || 0; + const sessionCount = details.stats?.sessionCount || 0; + valueEl.textContent = formatTime(avgSession); + + if (subtitleEl) { + if (currentPeriod === 'all') { + subtitleEl.textContent = 'across all sessions'; + } else { + subtitleEl.textContent = `across ${sessionCount} session${sessionCount !== 1 ? 's' : ''}`; + } + } } // Peak Usage Times diff --git a/src/renderer/js/app-details/usage-over-time-chart.js b/src/renderer/js/app-details/usage-over-time-chart.js index 2abccf8..0784b85 100644 --- a/src/renderer/js/app-details/usage-over-time-chart.js +++ b/src/renderer/js/app-details/usage-over-time-chart.js @@ -1,142 +1,125 @@ -function setupChartTabs(details) { - const tabs = document.querySelectorAll('.chart-tab'); - tabs.forEach(tab => { - tab.addEventListener('click', () => { - // Remove active class from all tabs - tabs.forEach(t => t.classList.remove('active')); - // Add active class to clicked tab - tab.classList.add('active'); - // Update chart - currentChartPeriod = tab.dataset.period; - updateUsageChart(details, currentChartPeriod); - }); - }); -} +// Render a single-day chart using Canvas +function renderSingleDayCanvasChart(ctx, canvas, dayData) { + const width = canvas.width; + const height = canvas.height; -function updateUsageChart(details, period) { - let data, labelFormat; - - switch(period) { - case 'daily': - // Last 7 days - data = getLast7DaysData(details.weeklyUsage); - labelFormat = (date) => { - const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; - const d = new Date(date); - return `${days[d.getDay()]} ${d.getDate()}`; - }; - break; - case 'weekly': - // Last 12 weeks - data = getLast12WeeksData(details); - labelFormat = (date) => { - const d = new Date(date); - return `Week ${getWeekNumber(d)}`; - }; - break; - case 'monthly': - // Last 12 months - data = getLast12MonthsData(details); - labelFormat = (date) => { - const d = new Date(date); - return d.toLocaleDateString('en-US', { month: 'short' }); - }; - break; - } + // Clear canvas + ctx.clearRect(0, 0, width, height); - drawChart(data, labelFormat); -} + // Draw background + ctx.fillStyle = '#16202d'; + ctx.fillRect(0, 0, width, height); -function getLast7DaysData(weeklyData) { - const last7Days = []; - for (let i = 6; i >= 0; i--) { - const date = new Date(); - date.setDate(date.getDate() - i); - // Format date in local time (YYYY-MM-DD) to match SQL 'localtime' - const dateStr = date.getFullYear() + '-' + - String(date.getMonth() + 1).padStart(2, '0') + '-' + - String(date.getDate()).padStart(2, '0'); - const dayData = weeklyData.find(d => d.date === dateStr); - last7Days.push({ - date: dateStr, - duration: dayData?.total_duration || 0 - }); - } - return last7Days; -} + const padding = { top: 40, right: 50, bottom: 60, left: 50 }; + const barWidth = 100; + const centerX = width / 2; + const duration = dayData.duration || 0; -function getLast12WeeksData(details) { - const weeks = []; - for (let i = 11; i >= 0; i--) { - const endDate = new Date(); - endDate.setDate(endDate.getDate() - (i * 7)); - const startDate = new Date(endDate); - startDate.setDate(startDate.getDate() - 6); - - // Sum up the week's data from monthlyUsage - let weekDuration = 0; - if (details.monthlyUsage) { - for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { - // Format date in local time (YYYY-MM-DD) to match SQL 'localtime' - const dateStr = d.getFullYear() + '-' + - String(d.getMonth() + 1).padStart(2, '0') + '-' + - String(d.getDate()).padStart(2, '0'); - const dayData = details.monthlyUsage.find(m => m.date === dateStr); - if (dayData) weekDuration += dayData.total_duration; - } - } + // Calculate bar height (max 70% of available height) + const maxBarHeight = height - padding.top - padding.bottom; + const barHeight = maxBarHeight * 0.7; + const barY = padding.top + (maxBarHeight - barHeight); - // Format end date in local time - const endDateStr = endDate.getFullYear() + '-' + - String(endDate.getMonth() + 1).padStart(2, '0') + '-' + - String(endDate.getDate()).padStart(2, '0'); - weeks.push({ - date: endDateStr, - duration: weekDuration - }); - } - return weeks; + // Create gradient for bar + const gradient = ctx.createLinearGradient(centerX, barY, centerX, barY + barHeight); + gradient.addColorStop(0, '#66c0f4'); + gradient.addColorStop(1, '#417a9b'); + + // Draw the bar + ctx.fillStyle = gradient; + ctx.beginPath(); + ctx.roundRect(centerX - barWidth / 2, barY, barWidth, barHeight, 4); + ctx.fill(); + + // Draw top cap + ctx.fillStyle = '#66c0f4'; + ctx.beginPath(); + ctx.roundRect(centerX - barWidth / 2, barY - 3, barWidth, 6, 3); + ctx.fill(); + + // Value label on top + ctx.fillStyle = '#66c0f4'; + ctx.font = 'bold 24px "Motiva Sans", Arial'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'bottom'; + ctx.fillText(formatTime(duration), centerX, barY - 20); + + // Date label at bottom + const date = new Date(dayData.date); + ctx.fillStyle = '#8f98a0'; + ctx.font = '14px "Motiva Sans", Arial'; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + ctx.fillText(date.toLocaleDateString('en-US', { + weekday: 'long', + month: 'long', + day: 'numeric', + year: 'numeric' + }), centerX, height - padding.bottom + 10); + + // Session count label + ctx.fillStyle = '#66c0f4'; + ctx.font = '12px "Motiva Sans", Arial'; + ctx.textAlign = 'center'; + ctx.fillText(`${dayData.session_count || 0} sessions`, centerX, height - padding.bottom + 30); + + // Remove any existing event listeners + canvas.onmousemove = null; + canvas.onmouseleave = null; } -function getLast12MonthsData(details) { - const months = []; - for (let i = 11; i >= 0; i--) { - const date = new Date(); - date.setMonth(date.getMonth() - i); - date.setDate(1); - - const year = date.getFullYear(); - const month = date.getMonth(); - - // Sum up the month's data from monthlyUsage - let monthDuration = 0; - if (details.monthlyUsage) { - details.monthlyUsage.forEach(dayData => { - // Parse the date string (YYYY-MM-DD) correctly in local time - const dateParts = dayData.date.split('-'); - const dayDate = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, parseInt(dateParts[2])); - if (dayDate.getFullYear() === year && dayDate.getMonth() === month) { - monthDuration += dayData.total_duration; - } - }); +function updateUsageChart(details, period) { + // Use the weeklyUsage data which now contains data based on the selected date range + const data = details.weeklyUsage || []; + + // Auto-detect label format based on date range size + const labelFormat = (date) => { + if (data.length <= 7) { + // Short range: show day of week + date + const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + const d = new Date(date); + return `${days[d.getDay()]} ${d.getDate()}`; + } else if (data.length <= 31) { + // Medium range: show month + date + const d = new Date(date); + return `${d.getMonth() + 1}/${d.getDate()}`; + } else { + // Long range: show month/day + const d = new Date(date); + return `${d.getMonth() + 1}/${d.getDate()}`; } + }; - // Format date in local time (YYYY-MM-DD) - const dateStr = date.getFullYear() + '-' + - String(date.getMonth() + 1).padStart(2, '0') + '-' + - String(date.getDate()).padStart(2, '0'); - months.push({ - date: dateStr, - duration: monthDuration - }); + const chartData = data.map(item => ({ + date: item.date, + duration: item.total_duration || 0 + })); + + // Special handling for single day + const canvas = document.getElementById('usage-line-chart'); + if (!canvas) return; + + const ctx = canvas.getContext('2d'); + + // Check if we have no data + if (!chartData || chartData.length === 0) { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = '#16202d'; + ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.fillStyle = '#8f98a0'; + ctx.font = '14px "Motiva Sans", Arial'; + ctx.textAlign = 'center'; + ctx.fillText('No data available for this period', canvas.width / 2, canvas.height / 2); + return; + } + + // Render single day as bar chart + if (chartData.length === 1) { + renderSingleDayCanvasChart(ctx, canvas, chartData[0]); + return; } - return months; -} -function getWeekNumber(date) { - const firstDayOfYear = new Date(date.getFullYear(), 0, 1); - const pastDaysOfYear = (date - firstDayOfYear) / 86400000; - return Math.ceil((pastDaysOfYear + firstDayOfYear.getDay() + 1) / 7); + drawChart(chartData, labelFormat); } @@ -186,7 +169,7 @@ function drawChart(chartData, labelFormat) { // Draw Y-axis labels ctx.fillStyle = '#8f98a0'; - ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; + ctx.font = '12px "Motiva Sans", Arial'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle'; for (let i = 0; i <= 5; i++) { @@ -242,7 +225,7 @@ function drawChart(chartData, labelFormat) { // Draw X-axis label ctx.fillStyle = '#8f98a0'; - ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; + ctx.font = '11px "Motiva Sans", Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(point.label, point.x, height - padding.bottom + 10); @@ -295,7 +278,7 @@ function drawChart(chartData, labelFormat) { // Draw Y-axis labels ctx.fillStyle = '#8f98a0'; - ctx.font = '12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; + ctx.font = '12px "Motiva Sans", Arial'; ctx.textAlign = 'right'; ctx.textBaseline = 'middle'; for (let i = 0; i <= 5; i++) { @@ -354,7 +337,7 @@ function drawChart(chartData, labelFormat) { // Draw X-axis label (highlight if hovered) ctx.fillStyle = isHovered ? '#ffffff' : '#8f98a0'; - ctx.font = isHovered ? 'bold 12px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto' : '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; + ctx.font = isHovered ? 'bold 12px "Motiva Sans", Arial' : '11px "Motiva Sans", Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'top'; ctx.fillText(point.label, point.x, height - padding.bottom + 10); @@ -363,7 +346,7 @@ function drawChart(chartData, labelFormat) { // Draw tooltip if hovering over a point if (closestPoint) { const tooltipText = formatTime(closestPoint.duration); - ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto'; + ctx.font = 'bold 14px "Motiva Sans", Arial'; const tooltipWidth = ctx.measureText(tooltipText).width + 24; const tooltipHeight = 36; const tooltipPadding = 12; diff --git a/src/renderer/js/index-page/details.js b/src/renderer/js/index-page/details.js index e4dbfa1..9325fb4 100644 --- a/src/renderer/js/index-page/details.js +++ b/src/renderer/js/index-page/details.js @@ -291,5 +291,32 @@ window.addEventListener('message', async (event) => { } catch (error) { console.error('Error sending favorites:', error); } + } else if (event.data.type === 'REQUEST_APP_DETAILS') { + // Request app details with date range + try { + const appDetails = await window.electronAPI.getAppDetailsByDateRange( + event.data.appId, + event.data.startDate, + event.data.endDate + ); + const categories = await window.electronAPI.getCategories(); + const app = allAppsCache.find(a => a.id === event.data.appId); + const categoryData = categories.find(cat => cat.name === app?.category); + + // Add category color to the app details + if (categoryData && categoryData.color) { + appDetails.categoryColor = categoryData.color; + } + + const iframe = document.querySelector('#app-details-iframe'); + if (iframe) { + iframe.contentWindow.postMessage({ + type: 'APP_DETAILS_RESPONSE', + data: appDetails + }, '*'); + } + } catch (error) { + console.error('Error getting app details by date range:', error); + } } }); diff --git a/src/renderer/js/index-page/ui-components.js b/src/renderer/js/index-page/ui-components.js index 6fac02c..2191805 100644 --- a/src/renderer/js/index-page/ui-components.js +++ b/src/renderer/js/index-page/ui-components.js @@ -813,11 +813,11 @@ async function showAppDetails(appName) { iframe.style.display = 'block'; iframe.src = 'app-details.html'; - // Send data to iframe when it loads + // Send appId to iframe when it loads (it will request data with date range) iframe.onload = () => { iframe.contentWindow.postMessage({ type: 'APP_DETAILS', - data: details + appId: appData.id }, '*'); }; @@ -829,10 +829,10 @@ async function showAppDetails(appName) { } else { const iframe = detailsContainer.querySelector('iframe'); if (iframe) { - // If iframe already exists, just send new data + // If iframe already exists, just send new appId (it will request data with date range) iframe.contentWindow.postMessage({ type: 'APP_DETAILS', - data: details + appId: appData.id }, '*'); } detailsContainer.style.display = 'block'; diff --git a/src/renderer/styles/app-details/app-details.css b/src/renderer/styles/app-details/app-details.css index fee72a0..e64ea26 100644 --- a/src/renderer/styles/app-details/app-details.css +++ b/src/renderer/styles/app-details/app-details.css @@ -151,15 +151,18 @@ body { /* Main Content Grid */ .content-grid { display: grid; - grid-template-columns: 2fr 1fr; - gap: 12px; - margin-bottom: 12px; + grid-template-columns: 1.2fr 0.8fr; + gap: 20px; + margin: 0 0 20px; + align-items: start; } .content-section { background: transparent; border: none; + border-radius: 8px; padding: 0; + min-height: 0; } .content-section-stacked { @@ -168,12 +171,37 @@ body { gap: 12px; } +/* Charts Grid */ +.charts-grid { + display: grid; + grid-template-columns: 1.2fr 0.8fr; + gap: 20px; + margin: 0 0 20px; + align-items: start; +} + +.chart-card { + background: transparent; + border: none; + border-radius: 8px; + padding: 0; +} + +/* Full Width Section */ +.full-width-section { + margin: 0 0 30px; + background: transparent; + border: none; + border-radius: 8px; + padding: 0; +} + .section-header-with-tabs { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 14px; + margin-bottom: 20px; position: relative; } @@ -187,6 +215,10 @@ body { background: linear-gradient(to right, #66c0f4, transparent); } +.section-header-with-tabs .section-header { + margin-bottom: 0; +} + /* Activity Timeline */ .activity-timeline { @@ -254,3 +286,29 @@ body { z-index: 100; } +/* Responsive Design */ +@media (max-width: 1200px) { + .content-grid, + .charts-grid { + grid-template-columns: 1fr; + } +} + +@media (max-width: 768px) { + .app-hero { + height: 220px; + } + + .app-title { + font-size: 32px; + } + + .app-hero-icon { + font-size: 60px; + } + + .action-buttons { + flex-wrap: wrap; + } +} + diff --git a/src/renderer/styles/app-details/chart.css b/src/renderer/styles/app-details/chart.css index 6c2f9ac..1112ed8 100644 --- a/src/renderer/styles/app-details/chart.css +++ b/src/renderer/styles/app-details/chart.css @@ -28,10 +28,16 @@ border-color: rgba(102, 192, 244, 0.3); } +.usage-chart-container { + height: 350px; + position: relative; + margin-top: 20px; +} + #usage-line-chart { display: block; - max-width: 100%; - height: auto; + width: 100%; + height: 100%; } .chart-bar { diff --git a/src/renderer/styles/app-details/usage-trend.css b/src/renderer/styles/app-details/usage-trend.css index 63c0468..33222cc 100644 --- a/src/renderer/styles/app-details/usage-trend.css +++ b/src/renderer/styles/app-details/usage-trend.css @@ -1,60 +1,57 @@ -/* Usage Trends */ -.trends-container { - display: flex; - flex-direction: column; - gap: 16px; -} - -.trend-stats { +/* Session Patterns */ +.session-patterns-container { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 8px; + gap: 12px; + padding: 12px 0; } -.trend-stat { +.pattern-stat { + display: flex; + align-items: center; + gap: 12px; background: linear-gradient(135deg, rgba(42, 71, 94, 0.4) 0%, rgba(27, 40, 56, 0.6) 100%); border: 1px solid rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(103, 193, 245, 0.2); - border-radius: 3px; - padding: 10px 12px; - text-align: center; + border-radius: 6px; + padding: 14px 16px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); transition: all 0.2s ease; } -.trend-stat:hover { +.pattern-stat:hover { background: linear-gradient(135deg, rgba(52, 81, 104, 0.5) 0%, rgba(37, 50, 66, 0.7) 100%); border-top-color: rgba(103, 193, 245, 0.4); transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.6); } -.trend-label { - color: #8f98a0; - font-size: 9px; - text-transform: uppercase; - margin-bottom: 6px; - letter-spacing: 0.5px; +.pattern-icon { + font-size: 28px; + line-height: 1; + opacity: 0.9; } -.trend-value { - color: #66c0f4; - font-size: 18px; - font-weight: 500; - margin-bottom: 3px; +.pattern-content { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; } -.trend-change { - font-size: 10px; +.pattern-label { color: #8f98a0; + font-size: 10px; + text-transform: uppercase; + letter-spacing: 0.5px; + font-weight: 500; } -.trend-change.positive { - color: #a4d007; -} - -.trend-change.negative { - color: #d95d5d; +.pattern-value { + color: #66c0f4; + font-size: 18px; + font-weight: 600; + line-height: 1; } /* Day of Week Chart */