Added Time Spent Reading By Year and Hover Effect on User Stats

API/Controllers/StatsController.cs

@@ -208,6 +208,20 @@ public async Task<ActionResult<IEnumerable<StatCount<int>>>> GetPagesReadPerYear
         return Ok(_statService.GetPagesReadCountByYear(userId));
     }
 
+    /// <summary>
+    /// Returns a count of time spent reading per year for a given userId.
+    /// </summary>
+    /// <param name="userId">If userId is 0 and user is not an admin, API will default to userId</param>
+    /// <returns></returns>
+    [HttpGet("time-spent-reading-per-year")]
+    [ResponseCache(CacheProfileName = "Statistics")]
+    public async Task<ActionResult<IEnumerable<StatCount<int>>>> TimeSpentReadingPerYear(int userId = 0)
+    {
+        var isAdmin = User.IsInRole(PolicyConstants.AdminRole);
+        if (!isAdmin) userId = User.GetUserId();
+        return Ok(_statService.GetTimeSpentReadingByYear(userId));
+    }
+
     /// <summary>
     /// Returns a count of words read per year for a given userId.
     /// </summary>

API/Services/StatisticService.cs

@@ -34,6 +34,7 @@ public interface IStatisticService
     IEnumerable<StatCount<DayOfWeek>> GetDayBreakdown(int userId = 0);
     IEnumerable<StatCount<int>> GetPagesReadCountByYear(int userId = 0);
     IEnumerable<StatCount<int>> GetWordsReadCountByYear(int userId = 0);
+    IEnumerable<StatCount<int>> GetTimeSpentReadingByYear(int userId = 0);
     Task UpdateServerStatistics();
     Task<long> TimeSpentReadingForUsersAsync(IList<int> userIds, IList<int> libraryIds);
     Task<KavitaPlusMetadataBreakdownDto> GetKavitaPlusMetadataBreakdown();
@@ -539,6 +540,27 @@ public async Task<long> TimeSpentReadingForUsersAsync(IList<int> userIds, IList<
                 p.chapter.AvgHoursToRead * (p.progress.PagesRead / (1.0f * p.chapter.Pages))));
     }
 
+public IEnumerable<StatCount<int>> GetTimeSpentReadingByYear(int userId = 0)
+{
+    var query = _context.AppUserProgresses
+        .Join(_context.Chapter, 
+            progress => progress.ChapterId, 
+            chapter => chapter.Id, 
+            (progress, chapter) => new { Progress = progress, Chapter = chapter })
+        .AsSplitQuery()
+        .AsNoTracking();
+
+    if (userId > 0)
+    {
+        query = query.Where(p => p.Progress.AppUserId == userId);
+    }
+
+    return query.GroupBy(p => p.Progress.LastModified.Year)
+        .OrderBy(g => g.Key)
+        .Select(g => new StatCount<int> { Value = g.Key, Count = g.Sum(x => x.Chapter.AvgHoursToRead) })
+        .AsEnumerable();
+}
+
     public async Task<KavitaPlusMetadataBreakdownDto> GetKavitaPlusMetadataBreakdown()
     {
         // We need to count number of Series that have an external series record

UI/Web/src/app/_services/statistics.service.ts

@@ -83,6 +83,13 @@ export class StatisticsService {
       })));
   }
 
+  getTimeSpentReadingPerYear(userId = 0) {
+    return this.httpClient.get<StatCount<number>[]>(this.baseUrl + 'stats/time-spent-reading-per-year?userId=' + userId).pipe(
+      map(spreads => spreads.map(spread => {
+        return {name: spread.value + '', value: spread.count};
+      })));
+  }
+
   getTopUsers(days: number = 0) {
     return this.httpClient.get<TopUserRead[]>(this.baseUrl + 'stats/server/top/users?days=' + days);
   }

UI/Web/src/app/statistics/_components/user-stats-info-cards/user-stats-info-cards.component.html

@@ -11,7 +11,7 @@
     </ng-container>
 
     <ng-container>
-      <div class="col-auto mb-2">
+      <div class="col-auto mb-2 icon">
         <app-icon-and-title [label]="t('total-words-read-label')" [clickable]="true" fontClasses="fa-regular fa-file-lines"
                             [title]="t('total-words-read-tooltip', {value: totalWordsRead | number})" (click)="openWordByYearList();$event.stopPropagation();">
           {{totalWordsRead | compactNumber}}
@@ -20,10 +20,10 @@
       <div class="vr d-none d-lg-block m-2"></div>
     </ng-container>
 
-    <ng-container >
+    <ng-container>
       <div class="col-auto mb-2">
-        <app-icon-and-title [label]="t('time-spent-reading-label')" [clickable]="false" fontClasses="fas fa-eye"
-                            [title]="t('time-spent-reading-tooltip', {value: timeSpentReading | number})">
+        <app-icon-and-title [label]="t('time-spent-reading-label')" [clickable]="false" fontClasses="fas fa-eye icon"
+                            [title]="t('time-spent-reading-tooltip', {value: timeSpentReading | number})" (click)="openTimeSpentReadingByYearList();$event.stopPropagation();">
           {{timeSpentReading | timeDuration}}
         </app-icon-and-title>
       </div>

UI/Web/src/app/statistics/_components/user-stats-info-cards/user-stats-info-cards.component.ts

@@ -46,4 +46,12 @@ export class UserStatsInfoCardsComponent {
       ref.componentInstance.title = 'Words Read By Year';
     });
   }
+  openTimeSpentReadingByYearList() {
+    const numberPipe = new CompactNumberPipe();
+    this.statsService.getTimeSpentReadingPerYear().subscribe(yearCounts => {
+      const ref = this.modalService.open(GenericListModalComponent, { scrollable: true });
+      ref.componentInstance.items = yearCounts.map(t => `${t.name}: ${numberPipe.transform(t.value)} hours`);
+      ref.componentInstance.title = 'Time Spent Reading By Year';
+    });
+  }
 }