Added Time Spent Reading By Year and Hover Effect on User Stats #3106
Conversation
|
Below is a sample user experience. The user sees a slight overlay on each Stat Card and upon click, the modal opens. |
|
Preliminary comment, but please remove the hover effect on the Time Spent Reading. I'd like to keep everything consistent. |
|
I put it on (3) cards, 'Total Pages Read', 'Total Words Read', and 'Time Spent Reading'. I would have put them on the last (3) cards as well, but there's no modal built to open yet. |
|
I'm going to circle back on this and tweak some of your code. But I'm still interested in merging. Just didn't fit with the UX overhaul stuff. |
|
|
||
| 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) }) |
There was a problem hiding this comment.
This will need to be a float. In #3209 I made the AvgHoursToRead a float to fix an issue where anything that was less than 1 hour wasn't counted in stats.
| @@ -11,7 +11,7 @@ | |||
| </ng-container> | |||
|
|
|||
| <ng-container> | |||
| <div class="col-auto mb-2"> | |||
| <div class="col-auto mb-2 icon"> | |||
| <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" |
| 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`); |
There was a problem hiding this comment.
We have to use localization everywhere, so find or create the appropriate key.
Same for the title. Usually each component has it's own.
|
Are you still interested in updating based on comments? I'm still open to merging this in. |
Added