Feature: Integrate Tautulli stats with enhanced Activity page

Create useTautulliStats composable (247 lines):
- fetchUserHistory() - Get watch history from Tautulli API
- calculateWatchStats() - Total hours, plays by media type
- groupByDay() - Daily activity (plays & duration)
- groupByDayOfWeek() - Weekly patterns by media type
- getTopContent() - Most watched content ranking
- getHourlyDistribution() - Watch patterns by hour of day

Update ActivityPage.vue with new visualizations:
- Stats overview cards (4 metrics: plays, hours, movies, episodes)
- Activity per day line chart (plays or duration)
- Activity by media type stacked bar chart (movies/shows/music)
- NEW: Hourly distribution chart
- NEW: Top 10 most watched content list

Features:
- Direct Tautulli API integration (no backend needed)
- Real-time data from Plex watch history
- Configurable time range (days filter)
- Toggle between plays count and watch duration
- Responsive grid layout for stats cards
- Styled top content ranking with hover effects

Benefits:
- Rich visualization of actual watch patterns
- See viewing habits by time of day
- Identify most rewatched content
- Compare movie vs TV viewing
- All data from authoritative source (Tautulli)

ActivityPage now provides comprehensive watch analytics! 📊
This commit is contained in:
2026-02-27 18:10:38 +01:00
parent 6c24bc928c
commit d1578723c4
4 changed files with 470 additions and 40 deletions

View File

@@ -128,11 +128,9 @@ export function usePlexLibraries() {
}
// Process recently added items
const recentItems = data.recentMetadata
.slice(0, 5)
.map((item: any) =>
processLibraryItem(item, libraryType, authToken, serverUrl)
);
const recentItems = data.recentMetadata.map((item: any) =>
processLibraryItem(item, libraryType, authToken, serverUrl)
);
// Calculate stats
const genres = calculateGenreStats(data.metadata);