Add chart to repository details

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/angular.json

@@ -40,7 +40,9 @@
  "src/styles.scss",
  "src/material-theme-correction.scss"
  ],
- "scripts": []
+ "scripts": [
+ "./node_modules/chart.js/dist/chart.js"
+ ]
  },
  "configurations": {
  "production": {
@@ -114,7 +116,9 @@
  "src/styles.scss",
  "src/material-theme-correction.scss"
  ],
- "scripts": []
+ "scripts": [
+ "./node_modules/chart.js/dist/chart.js"
+ ]
  }
  },
  "lint": {

mediarepo-ui/package.json

@@ -28,6 +28,7 @@
  "@ng-icons/feather-icons": "^13.2.1",
  "@ng-icons/material-icons": "^13.2.1",
  "@tauri-apps/api": "^1.0.0-beta.8",
+ "chart.js": "^3.7.1",
  "primeicons": "^5.0.0",
  "primeng": "^13.0.4",
  "rxjs": "~7.5.2",
@@ -59,4 +60,4 @@
  "karma-jasmine-html-reporter": "~1.7.0",
  "typescript": "~4.5.4"
  }
-}
+}

mediarepo-ui/src/app/components/core/core.module.ts

@@ -89,7 +89,7 @@ import {AboutDialogComponent} from "./repositories-tab/repository-overview/about
  MatInputModule,
  TagModule,
  RepositoryModule,
- MatToolbarModule,
+ MatToolbarModule
  ]
 })
 export class CoreModule {

mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html

@@ -1,6 +1,4 @@
-<div *ngIf="!this.selectedRepository">
- <app-repository-overview></app-repository-overview>
-</div>
-<div *ngIf="this.selectedRepository" class="repo-details">
- <app-repository-details-view [repository]="this.selectedRepository"></app-repository-details-view>
-</div>
+<app-repository-overview *ngIf="!this.selectedRepository"></app-repository-overview>
+<app-repository-details-view *ngIf="this.selectedRepository"
+ [repository]="this.selectedRepository"></app-repository-details-view>
+

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html

@@ -4,45 +4,56 @@
  </button>
 </mat-toolbar>
 <div class="details-content" fxLayout="row">
- <div class="repository-metadata" fxFlex="100%">
- <h1>Stats</h1>
- <app-metadata-entry *ngIf="repository.path" attributeName="Path">{{repository.path}}</app-metadata-entry>
- <app-metadata-entry *ngIf="repository.address"
- attributeName="Address">{{repository.address}}</app-metadata-entry>
- <app-metadata-entry attributeName="File Count">
- <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
- {{metadata ? metadata!.file_count.toString() : ''}}
- </app-metadata-entry>
- <app-metadata-entry attributeName="Tag Count">
- <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
- {{metadata ? metadata!.tag_count.toString() : ''}}
- </app-metadata-entry>
- <app-metadata-entry attributeName="Namespace Count">
- <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
- {{metadata ? metadata!.namespace_count.toString() : ''}}
- </app-metadata-entry>
- <app-metadata-entry attributeName="Mapping Count">
- <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
- {{metadata ? metadata!.mapping_count.toString() : ''}}
- </app-metadata-entry>
- <app-metadata-entry attributeName="Total Size">
- <mat-progress-bar *ngIf="(this.totalSize | async) === undefined" mode="indeterminate"></mat-progress-bar>
- {{this.totalSize | async}}
- </app-metadata-entry>
- <app-metadata-entry attributeName="File Folder Size">
- <mat-progress-bar *ngIf="(this.fileFolderSize | async) === undefined"
- mode="indeterminate"></mat-progress-bar>
- {{this.fileFolderSize | async}}
- </app-metadata-entry>
- <app-metadata-entry attributeName="Thumbnail Folder Size">
- <mat-progress-bar *ngIf="(this.thumbFolderSize | async) === undefined"
- mode="indeterminate"></mat-progress-bar>
- {{this.thumbFolderSize | async}}
- </app-metadata-entry>
- <app-metadata-entry attributeName="Database File Size">
- <mat-progress-bar *ngIf="(this.databaseFileSize | async) === undefined"
- mode="indeterminate"></mat-progress-bar>
- {{this.databaseFileSize | async}}
- </app-metadata-entry>
+ <div class="repository-metadata" fxFlex="50%">
+ <div class="stats-container">
+ <h1>Stats</h1>
+ <app-metadata-entry *ngIf="repository.path" attributeName="Path">{{repository.path}}</app-metadata-entry>
+ <app-metadata-entry *ngIf="repository.address"
+ attributeName="Address">{{repository.address}}</app-metadata-entry>
+ <app-metadata-entry attributeName="File Count">
+ <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+ {{metadata ? metadata!.file_count.toString() : ''}}
+ </app-metadata-entry>
+ <app-metadata-entry attributeName="Tag Count">
+ <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+ {{metadata ? metadata!.tag_count.toString() : ''}}
+ </app-metadata-entry>
+ <app-metadata-entry attributeName="Namespace Count">
+ <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+ {{metadata ? metadata!.namespace_count.toString() : ''}}
+ </app-metadata-entry>
+ <app-metadata-entry attributeName="Mapping Count">
+ <mat-progress-bar *ngIf="!metadata"></mat-progress-bar>
+ {{metadata ? metadata!.mapping_count.toString() : ''}}
+ </app-metadata-entry>
+ <app-metadata-entry attributeName="Total Size">
+ <mat-progress-bar *ngIf="(this.totalSize | async) === undefined"
+ mode="indeterminate"></mat-progress-bar>
+ {{this.totalSize | async}}
+ </app-metadata-entry>
+ <app-metadata-entry attributeName="File Folder Size">
+ <mat-progress-bar *ngIf="(this.fileFolderSize | async) === undefined"
+ mode="indeterminate"></mat-progress-bar>
+ {{this.fileFolderSize | async}}
+ </app-metadata-entry>
+ <app-metadata-entry attributeName="Thumbnail Folder Size">
+ <mat-progress-bar *ngIf="(this.thumbFolderSize | async) === undefined"
+ mode="indeterminate"></mat-progress-bar>
+ {{this.thumbFolderSize | async}}
+ </app-metadata-entry>
+ <app-metadata-entry attributeName="Database File Size">
+ <mat-progress-bar *ngIf="(this.databaseFileSize | async) === undefined"
+ mode="indeterminate"></mat-progress-bar>
+ {{this.databaseFileSize | async}}
+ </app-metadata-entry>
+ </div>
+ </div>
+ <div class="repository-charts" fxFlex="50%">
+ <app-chart *ngIf="this.chartData"
+ [datasets]="this.chartData"
+ [labels]="this.chartLabels"
+ chartType="doughnut"
+ class="size-chart"
+ title="Sizes"></app-chart>
  </div>
 </div>

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.scss

@@ -1,3 +1,10 @@
+@import "src/colors";
+
+:host {
+ height: 100%;
+ width: 100%;
+}
+
 .repository-name {
  text-align: center;
  align-self: center;
@@ -12,16 +19,38 @@
  padding: 1em 1em 1em 3em;
  overflow-y: auto;
  user-select: none;
- margin-left: 20%;
- margin-right: 20%;
+ margin-top: 4em;
+ margin-left: 2em;
+ display: flex;
 
  app-metadata-entry {
  margin-bottom: 0.5em;
  display: block;
  }
+
+ .stats-container {
+ margin-left: auto;
+ margin-right: auto;
+ }
+}
+
+.repository-charts {
+ margin-top: 4em;
+ margin-right: 2em;
+ height: 100%;
+ display: block;
 }
 
 .details-content {
  height: calc(100% - 64px);
  overflow: hidden;
+ width: 75%;
+ margin: auto;
+ background: $background-lighter-05;
+}
+
+.size-chart {
+ min-height: 50%;
+ max-width: 500px;
+ margin: auto;
 }

mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts

@@ -5,6 +5,7 @@ import {RepositoryMetadata} from "../../../../models/RepositoryMetadata";
 import {BehaviorSubject} from "rxjs";
 import {MatDialog} from "@angular/material/dialog";
 import {BusyDialogComponent} from "../../../shared/app-common/busy-dialog/busy-dialog.component";
+import {Dataset} from "../../../shared/app-common/chart/chart.component";
 
 @Component({
  selector: "app-repository-details-view",
@@ -19,9 +20,14 @@ export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDest
  public fileFolderSize = new BehaviorSubject<string | undefined>(undefined);
  public thumbFolderSize = new BehaviorSubject<string | undefined>(undefined);
  public databaseFileSize = new BehaviorSubject<string | undefined>(undefined);
+ public chartData?: Dataset[];
+ public chartLabels = ["Files", "Thumbnails", "Database"];
  private refreshMetadataInterval?: number;
 
- constructor(private repoService: RepositoryService, public dialog: MatDialog) {
+ constructor(
+ private repoService: RepositoryService,
+ public dialog: MatDialog
+ ) {
  }
 
  public async ngOnInit() {
@@ -63,6 +69,11 @@ export class RepositoryDetailsViewComponent implements OnInit, OnChanges, OnDest
  this.thumbFolderSize.next(this.formatByteSize(thumbSize.size));
  const databaseSize = await this.repoService.getSize("DatabaseFile");
  this.databaseFileSize.next(this.formatByteSize(databaseSize.size));
+ this.chartData = [
+ {
+ data: [fileSize.size, thumbSize.size, databaseSize.size],
+ },
+ ];
  }
 
  public formatByteSize(size: number): string {

mediarepo-ui/src/app/components/core/repositories-tab/repository-overview/repository-overview.component.scss

@@ -1,10 +1,17 @@
+:host {
+ height: 100%;
+ width: 100%;
+ display: block;
+ overflow: hidden;
+}
+
 .repository-container {
  padding: 1em;
  margin: auto;
  display: block;
  width: calc(600px - 2em);
  float: left;
- 
+
  app-repository-card {
  display: block;
  position: relative;
@@ -31,7 +38,8 @@
  flex-wrap: wrap;
  overflow-y: auto;
  overflow-x: hidden;
- height: calc(100% - 5em);
+ max-height: calc(100% - 2em);
+ padding-bottom: 2em;
 }
 
 

mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts

@@ -26,6 +26,8 @@ import {FlapButtonComponent} from "./flap-button/flap-button.component";
 import {MiddleCenteredComponent} from "./middle-centered/middle-centered.component";
 import {FormatBytesPipe} from "./pipes/format-bytes.pipe";
 import {ExternalUrlComponent} from "./external-url/external-url.component";
+import {ChartComponent} from "./chart/chart.component";
+import {ChartModule} from "primeng/chart";
 
 
 @NgModule({
@@ -46,6 +48,7 @@ import {ExternalUrlComponent} from "./external-url/external-url.component";
  MiddleCenteredComponent,
  FormatBytesPipe,
  ExternalUrlComponent,
+ ChartComponent,
  ],
  exports: [
  ConfirmDialogComponent,
@@ -63,6 +66,7 @@ import {ExternalUrlComponent} from "./external-url/external-url.component";
  MiddleCenteredComponent,
  FormatBytesPipe,
  ExternalUrlComponent,
+ ChartComponent,
  ],
  imports: [
  CommonModule,
@@ -74,7 +78,8 @@ import {ExternalUrlComponent} from "./external-url/external-url.component";
  MatProgressBarModule,
  MatSidenavModule,
  FlexLayoutModule,
- MatRippleModule
+ MatRippleModule,
+ ChartModule
  ]
 })
 export class AppCommonModule {

mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.html

@@ -0,0 +1,2 @@
+<h2 *ngIf="this.title" class="title">{{this.title}}</h2>
+<p-chart [data]="data" [options]="this.options" [type]="this.chartType ?? ''"></p-chart>

mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.scss

@@ -0,0 +1,15 @@
+:host {
+ height: 100%;
+ width: 100%;
+ display: block;
+}
+
+.title {
+ width: 100%;
+ text-align: center;
+}
+
+p-chart {
+ height: 100%;
+ width: 100%;
+}

mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.spec.ts

@@ -0,0 +1,25 @@
+import {ComponentFixture, TestBed} from "@angular/core/testing";
+
+import {ChartComponent} from "./chart.component";
+
+describe("ChartComponent", () => {
+ let component: ChartComponent;
+ let fixture: ComponentFixture<ChartComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ChartComponent]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChartComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it("should create", () => {
+ expect(component).toBeTruthy();
+ });
+});