AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Polish Round 1 (#2396)

Browse source
This commit is contained in:
Joe Milazzo 2023-11-04 12:29:10 -05:00 • committed by GitHub
parent cf2c43d390
commit 02b002d81a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
197 changed files with 1233 additions and 1751 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/statistics/_components/_modals/generic-list-modal/generic-list-modal.component.ts
View file

@ -1,7 +1,7 @@
import { Component, Input } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import { FilterPipe } from '../../../../pipe/filter.pipe';
import { FilterPipe } from '../../../../_pipes/filter.pipe';
import { NgIf, NgFor } from '@angular/common';
import {TranslocoDirective} from "@ngneat/transloco";

28
UI/Web/src/app/statistics/_components/day-breakdown/day-breakdown.component.html
View file

@ -1,19 +1,19 @@
<ng-container *transloco="let t; read: 'day-breakdown'">
<div class="dashboard-card-content">
<div class="row g-0 mb-2">
<h4>{{t('title')}}</h4>
</div>
<h4>{{t('title')}}</h4>
<ngx-charts-bar-vertical
class="dark"
[results]="dayBreakdown$ | async"
[xAxis]="true"
[yAxis]="true"
[legend]="showLegend"
[showXAxisLabel]="true"
[showYAxisLabel]="true"
[xAxisLabel]="t('x-axis-label')"
[yAxisLabel]="t('y-axis-label')">
</ngx-charts-bar-vertical>
<ng-container *ngIf="(dayBreakdown$ | async) as days">
<div *ngIf="days.length === 0">{{t('no-data')}}</div>
<div class="day-breakdown-chart">
<table class="charts-css column show-labels show-primary-axis show-4-secondary-axes data-spacing-5">
<tbody>
<tr *ngFor="let day of days">
<th scope="row"> {{day.name}} </th>
<td style="{{'--size: ' + (day.value / max)}}"> <span class="data"> {{day.value}}</span> </td>
</tr>
</tbody>
</table>
</div>
</ng-container>
</div>
</ng-container>

18
UI/Web/src/app/statistics/_components/day-breakdown/day-breakdown.component.scss
View file

@ -1,11 +1,11 @@
::ng-deep .dark .ngx-charts text {
fill: #a0aabe;
.dashboard-card-content {
max-width: 700px;
height: auto;
box-sizing:border-box;
}
.dashboard-card-content {
width: 100%;
height: 242px;
display: flex;
flex-flow: column;
box-sizing: border-box;
}
.day-breakdown-chart {
width: 100%;
margin: 0 auto;
max-width: 700px;
}

15
UI/Web/src/app/statistics/_components/day-breakdown/day-breakdown.component.ts
View file

@ -1,14 +1,15 @@
import {ChangeDetectionStrategy, Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import { BarChartModule } from '@swimlane/ngx-charts';
import {map, Observable} from 'rxjs';
import {DayOfWeek, StatisticsService} from 'src/app/_services/statistics.service';
import {PieDataItem} from '../../_models/pie-data-item';
import {StatCount} from '../../_models/stat-count';
import {DayOfWeekPipe} from '../../_pipes/day-of-week.pipe';
import {DayOfWeekPipe} from '../../../_pipes/day-of-week.pipe';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import { AsyncPipe } from '@angular/common';
import {AsyncPipe, NgForOf, NgIf} from '@angular/common';
import {TranslocoDirective} from "@ngneat/transloco";
import {tap} from "rxjs/operators";
@Component({
selector: 'app-day-breakdown',
@ -16,17 +17,19 @@ import {TranslocoDirective} from "@ngneat/transloco";
styleUrls: ['./day-breakdown.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [BarChartModule, AsyncPipe, TranslocoDirective]
imports: [BarChartModule, AsyncPipe, TranslocoDirective, NgForOf, NgIf]
})
export class DayBreakdownComponent implements OnInit {
@Input() userId = 0;
view: [number, number] = [0,0];
showLegend: boolean = true;
max: number = 1;
formControl: FormControl = new FormControl(true, []);
dayBreakdown$!: Observable<Array<PieDataItem>>;
private readonly destroyRef = inject(DestroyRef);
private readonly cdRef = inject(ChangeDetectorRef);
constructor(private statService: StatisticsService) {}
@ -38,6 +41,10 @@ export class DayBreakdownComponent implements OnInit {
return {name: dayOfWeekPipe.transform(d.value), value: d.count};
})
}),
tap(data => {
this.max = data.reduce((acc, day) => Math.max(acc, day.value), 0);
this.cdRef.markForCheck();
}),
takeUntilDestroyed(this.destroyRef)
);
}

4
UI/Web/src/app/statistics/_components/file-breakdown-stats/file-breakdown-stats.component.ts
View file

@ -14,8 +14,8 @@ import { SortableHeader, SortEvent, compare } from 'src/app/_single-module/table
import { FileExtension, FileExtensionBreakdown } from '../../_models/file-breakdown';
import { PieDataItem } from '../../_models/pie-data-item';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import { MangaFormatPipe } from '../../../pipe/manga-format.pipe';
import { BytesPipe } from '../../../pipe/bytes.pipe';
import { MangaFormatPipe } from '../../../_pipes/manga-format.pipe';
import { BytesPipe } from '../../../_pipes/bytes.pipe';
import { SortableHeader as SortableHeader_1 } from '../../../_single-module/table/_directives/sortable-header.directive';
import { NgIf, NgFor, AsyncPipe, DecimalPipe } from '@angular/common';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';

3
UI/Web/src/app/statistics/_components/reading-activity/reading-activity.component.html
View file

@ -1,6 +1,6 @@
<ng-container *transloco="let t; read: 'reading-activity'">
<ng-container>
<div class="dashboard-card-content">
<div class="dashboard-card-content stat-container">
<div class="row g-0 mb-2 align-items-center">
<div class="col-4">
<h4>{{t('title')}}</h4>
@ -27,6 +27,7 @@
</form>
</div>
</div>
<div class="row g-0">
<ng-container *ngIf="data$ | async as data">
<ngx-charts-line-chart

14
UI/Web/src/app/statistics/_components/reading-activity/reading-activity.component.scss
View file

@ -1,3 +1,15 @@
::ng-deep .dark .ngx-charts text {
fill: #a0aabe;
}
}
.stat-container {
max-width: 700px;
height: auto;
box-sizing:border-box;
}
.stat-chart {
width: 100%;
margin: 0 auto;
max-width: 700px;
}

25
UI/Web/src/app/statistics/_components/reading-activity/reading-activity.component.ts
View file

@ -1,7 +1,7 @@
import {ChangeDetectionStrategy, Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
import {ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, inject, Input, OnInit} from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { filter, map, Observable, of, shareReplay, switchMap } from 'rxjs';
import { MangaFormatPipe } from 'src/app/pipe/manga-format.pipe';
import { MangaFormatPipe } from 'src/app/_pipes/manga-format.pipe';
import { Member } from 'src/app/_models/auth/member';
import { MemberService } from 'src/app/_services/member.service';
import { StatisticsService } from 'src/app/_services/statistics.service';
@ -11,16 +11,18 @@ import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import { LineChartModule } from '@swimlane/ngx-charts';
import { NgIf, NgFor, AsyncPipe } from '@angular/common';
import {TranslocoDirective, TranslocoService} from "@ngneat/transloco";
import {UtcToLocalTimePipe} from "../../../_pipes/utc-to-local-time.pipe";
const options: Intl.DateTimeFormatOptions = { month: "short", day: "numeric" };
@Component({
selector: 'app-reading-activity',
templateUrl: './reading-activity.component.html',
styleUrls: ['./reading-activity.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [ReactiveFormsModule, NgIf, NgFor, LineChartModule, AsyncPipe, TranslocoDirective]
selector: 'app-reading-activity',
templateUrl: './reading-activity.component.html',
styleUrls: ['./reading-activity.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [ReactiveFormsModule, NgIf, NgFor, LineChartModule, AsyncPipe, TranslocoDirective, MangaFormatPipe]
})
export class ReadingActivityComponent implements OnInit {
/**
@ -30,6 +32,11 @@ export class ReadingActivityComponent implements OnInit {
@Input() isAdmin: boolean = true;
@Input() individualUserMode: boolean = false;
private readonly utcDatePipe = new UtcToLocalTimePipe();
private readonly destroyRef = inject(DestroyRef);
private readonly translocoService = inject(TranslocoService);
private readonly cdRef = inject(ChangeDetectorRef);
view: [number, number] = [0, 400];
formGroup: FormGroup = new FormGroup({
'users': new FormControl(-1, []),
@ -38,8 +45,6 @@ export class ReadingActivityComponent implements OnInit {
users$: Observable<Member[]> | undefined;
data$: Observable<Array<PieDataItem>>;
timePeriods = TimePeriods;
private readonly destroyRef = inject(DestroyRef);
private readonly translocoService = inject(TranslocoService);
mangaFormatPipe = new MangaFormatPipe(this.translocoService);
constructor(private statService: StatisticsService, private memberService: MemberService) {

6
UI/Web/src/app/statistics/_components/server-stats/server-stats.component.ts
View file

@ -12,9 +12,9 @@ import {PieDataItem} from '../../_models/pie-data-item';
import {ServerStatistics} from '../../_models/server-statistics';
import {GenericListModalComponent} from '../_modals/generic-list-modal/generic-list-modal.component';
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {BytesPipe} from '../../../pipe/bytes.pipe';
import {TimeDurationPipe} from '../../../pipe/time-duration.pipe';
import {CompactNumberPipe} from '../../../pipe/compact-number.pipe';
import {BytesPipe} from '../../../_pipes/bytes.pipe';
import {TimeDurationPipe} from '../../../_pipes/time-duration.pipe';
import {CompactNumberPipe} from '../../../_pipes/compact-number.pipe';
import {DayBreakdownComponent} from '../day-breakdown/day-breakdown.component';
import {ReadingActivityComponent} from '../reading-activity/reading-activity.component';
import {PublicationStatusStatsComponent} from '../publication-status-stats/publication-status-stats.component';

2
UI/Web/src/app/statistics/_components/stat-list/stat-list.component.ts
View file

@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { PieDataItem } from '../../_models/pie-data-item';
import { CompactNumberPipe } from '../../../pipe/compact-number.pipe';
import { CompactNumberPipe } from '../../../_pipes/compact-number.pipe';
import { ImageComponent } from '../../../shared/image/image.component';
import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
import { NgIf, NgFor, NgClass, AsyncPipe } from '@angular/common';

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

@ -2,12 +2,12 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { StatisticsService } from 'src/app/_services/statistics.service';
import { GenericListModalComponent } from '../_modals/generic-list-modal/generic-list-modal.component';
import { TimeAgoPipe } from '../../../pipe/time-ago.pipe';
import { TimeDurationPipe } from '../../../pipe/time-duration.pipe';
import { TimeAgoPipe } from '../../../_pipes/time-ago.pipe';
import { TimeDurationPipe } from '../../../_pipes/time-duration.pipe';
import { DecimalPipe } from '@angular/common';
import { IconAndTitleComponent } from '../../../shared/icon-and-title/icon-and-title.component';
import {AccountService} from "../../../_services/account.service";
import {CompactNumberPipe} from "../../../pipe/compact-number.pipe";
import {CompactNumberPipe} from "../../../_pipes/compact-number.pipe";
import {TranslocoDirective} from "@ngneat/transloco";
@Component({

15
UI/Web/src/app/statistics/_components/user-stats/user-stats.component.html
View file

@ -1,5 +1,5 @@
<ng-container *transloco="let t; read:'user-stats'">
<div class="container-fluid" *ngIf="userId">
<div class="vstack gap-3" *ngIf="userId">
<div class="row g-0 d-flex justify-content-around">
<ng-container *ngIf="userStats$ | async as userStats">
@ -8,21 +8,22 @@
</ng-container>
</div>
<div class="row g-0 pt-4 pb-2 " style="height: 242px">
<div class="row g-0 fixed-row">
<div class="col-md-12 col-sm-12 mt-4 pt-2">
<app-reading-activity [userId]="userId" [isAdmin]="(isAdmin$ | async) || false" [individualUserMode]="true"></app-reading-activity>
</div>
</div>
<div class="row g-0 pt-4 pb-2" style="height: 242px">
<div class="col-md-12 col-sm-12 mt-4 pt-2">
<div class="row g-0 fixed-row">
<div class="col-md-6 col-sm-12 mb-sm-4">
<app-day-breakdown [userId]="userId"></app-day-breakdown>
</div>
<div class="col-md-6 col-sm-12">
<app-stat-list [data$]="percentageRead$" [label]="t('read-percentage')" [title]="t('library-read-progress-title')"></app-stat-list>
</div>
</div>
<div class="row g-0 pt-4 pb-2 " style="height: 242px">
<app-stat-list [data$]="percentageRead$" [label]="t('read-percentage')" [title]="t('library-read-progress-title')"></app-stat-list>
</div>
</div>
</ng-container>

3
UI/Web/src/app/statistics/_components/user-stats/user-stats.component.scss
View file

@ -0,0 +1,3 @@
.fixed-row {
height: auto; // 242px;
}

1
UI/Web/src/app/statistics/_components/user-stats/user-stats.component.ts
View file

@ -69,5 +69,4 @@ export class UserStatsComponent implements OnInit {
});
}
}

31
UI/Web/src/app/statistics/_pipes/day-of-week.pipe.ts
View file

@ -1,31 +0,0 @@
import {inject, Pipe, PipeTransform} from '@angular/core';
import { DayOfWeek } from 'src/app/_services/statistics.service';
import {translate, TranslocoService} from "@ngneat/transloco";
@Pipe({
name: 'dayOfWeek',
standalone: true
})
export class DayOfWeekPipe implements PipeTransform {
transform(value: DayOfWeek): string {
switch(value) {
case DayOfWeek.Monday:
return translate('day-of-week-pipe.monday');
case DayOfWeek.Tuesday:
return translate('day-of-week-pipe.tuesday');
case DayOfWeek.Wednesday:
return translate('day-of-week-pipe.wednesday');
case DayOfWeek.Thursday:
return translate('day-of-week-pipe.thursday');
case DayOfWeek.Friday:
return translate('day-of-week-pipe.friday');
case DayOfWeek.Saturday:
return translate('day-of-week-pipe.saturday');
case DayOfWeek.Sunday:
return translate('day-of-week-pipe.sunday');
}
}
}