1c1e48d28c
* 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.
44 lines
No EOL
1.7 KiB
HTML
44 lines
No EOL
1.7 KiB
HTML
<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> |