Reading History (#1699)

* Added new stat graph for pages read over time for all users.

* Switched to reading events rather than pages read to get a better scale

* Changed query to use Created date as LastModified wont work since I just did a migration on all rows.

* Small cleanup on graph

* Read by day completed and ready for user stats page.

* Changed the initial stat report to be in 1 day, to avoid people trying and ditching the software from muddying up the stats.

* Cleaned up stats page such that stats around series show their image and tweaked some layout and wordings

* Fixed recently read order

* Put read history on user profile

* Final cleanup, Robbie needs to do a CSS pass before release.

UI/Web/src/app/statistics/_components/read-by-day-and/read-by-day-and.component.html

@@ -0,0 +1,44 @@
+<ng-container>
+    <div class="row g-0 mb-2 align-items-center">
+        <div class="col-4">
+            <h4>Top Readers</h4>
+        </div>
+        <div class="col-8">
+            <form [formGroup]="formGroup" class="d-inline-flex float-end" *ngIf="isAdmin">
+                <div class="d-flex">
+                    <label for="time-select-read-by-day" class="form-check-label"></label>
+                    <select id="time-select-read-by-day" class="form-select" formControlName="users"
+                        [class.is-invalid]="formGroup.get('users')?.invalid && formGroup.get('users')?.touched"> 
+                        <option [value]="0">All Users</option>
+                        <option *ngFor="let item of users$ | async" [value]="item.id">{{item.username}}</option>
+                    </select>
+                </div>
+            </form>
+        </div>
+    </div>
+    <div class="row g-0">
+        <ng-container *ngIf="data$ | async as data">
+            <ngx-charts-line-chart
+                *ngIf="data.length > 0; else noData"
+                class="dark"
+                [legend]="true"
+                legendTitle="Formats"
+                [showXAxisLabel]="true"
+                [showYAxisLabel]="true"
+                [xAxis]="true"
+                [yAxis]="true"
+                [showGridLines]="false"
+                [showRefLines]="true"
+                [roundDomains]="true"
+                xAxisLabel="Time"
+                yAxisLabel="Reading Events"
+                [timeline]="false"
+                [results]="data"
+                >
+                </ngx-charts-line-chart>
+        </ng-container>
+    </div>
+    <ng-template #noData>
+        No Reading progress
+    </ng-template>
+</ng-container>