diff --git a/mediarepo-ui/angular.json b/mediarepo-ui/angular.json
index ce505ab..81c10ba 100644
--- a/mediarepo-ui/angular.json
+++ b/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": {
diff --git a/mediarepo-ui/package.json b/mediarepo-ui/package.json
index 4bec025..003251f 100644
--- a/mediarepo-ui/package.json
+++ b/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"
}
-}
\ No newline at end of file
+}
diff --git a/mediarepo-ui/src/app/components/core/core.module.ts b/mediarepo-ui/src/app/components/core/core.module.ts
index bec4607..3cd15ba 100644
--- a/mediarepo-ui/src/app/components/core/core.module.ts
+++ b/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 {
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html
index 4093b2a..e53e733 100644
--- a/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html
+++ b/mediarepo-ui/src/app/components/core/repositories-tab/repositories-tab.component.html
@@ -1,6 +1,4 @@
-
-
+
+
+
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html b/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html
index 2371237..66b350e 100644
--- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html
+++ b/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.html
@@ -4,45 +4,56 @@
-
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.scss b/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.scss
index ef89741..573a3be 100644
--- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.scss
+++ b/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;
}
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts b/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts
index ad45bf0..1c8b220 100644
--- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-details-view/repository-details-view.component.ts
+++ b/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
(undefined);
public thumbFolderSize = new BehaviorSubject(undefined);
public databaseFileSize = new BehaviorSubject(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 {
diff --git a/mediarepo-ui/src/app/components/core/repositories-tab/repository-overview/repository-overview.component.scss b/mediarepo-ui/src/app/components/core/repositories-tab/repository-overview/repository-overview.component.scss
index e16282d..ff3913e 100644
--- a/mediarepo-ui/src/app/components/core/repositories-tab/repository-overview/repository-overview.component.scss
+++ b/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;
}
diff --git a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts b/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts
index 0a25e48..cc18e49 100644
--- a/mediarepo-ui/src/app/components/shared/app-common/app-common.module.ts
+++ b/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 {
diff --git a/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.html b/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.html
new file mode 100644
index 0000000..93ca8b0
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.html
@@ -0,0 +1,2 @@
+{{this.title}}
+
diff --git a/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.scss b/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.scss
new file mode 100644
index 0000000..cb7a0c3
--- /dev/null
+++ b/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%;
+}
diff --git a/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.spec.ts b/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.spec.ts
new file mode 100644
index 0000000..540e5f6
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ChartComponent]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ChartComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it("should create", () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.ts b/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.ts
new file mode 100644
index 0000000..13ac06d
--- /dev/null
+++ b/mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.ts
@@ -0,0 +1,86 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges} from "@angular/core";
+import {ChartOptions} from "chart.js";
+
+export type ChartType = "doughnut";
+export type Dataset = {
+ label?: string,
+ data: number[],
+};
+
+@Component({
+ selector: "app-chart",
+ templateUrl: "./chart.component.html",
+ styleUrls: ["./chart.component.scss"],
+ changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ChartComponent implements OnChanges {
+
+ @Input() chartType?: ChartType;
+ @Input() title?: string;
+ @Input() labels: string[] = [];
+ @Input() datasets: Dataset[] = [];
+
+ public data: any = {};
+ public options: ChartOptions = {
+ responsive: true,
+ elements: {
+ arc: {
+ borderWidth: 0
+ }
+ },
+ plugins: {
+ legend: {
+ labels: {
+ color: "#FFF",
+ boxHeight: 20,
+ font: {
+ size: 16,
+ }
+ },
+ },
+ tooltip: {
+ titleFont: {
+ size: 16
+ },
+ bodyFont: {
+ size: 14
+ }
+ }
+ }
+ };
+ private readonly colors = [
+ "#771e86",
+ "#4650b5",
+ "#0073d0",
+ "#0091d6",
+ "#00aacb",
+ "#00c0b7"
+ ];
+
+ constructor(private changeDetector: ChangeDetectorRef) {
+ }
+
+ public ngOnChanges(changes: SimpleChanges): void {
+ if (changes["labels"] || changes["dataset"]) {
+ this.generateData();
+ this.changeDetector.markForCheck();
+ }
+ if (changes["chartType"]) {
+ this.changeDetector.markForCheck();
+ }
+ }
+
+ private generateData() {
+ this.data = {
+ labels: this.labels,
+ datasets: this.datasets.map(set => {
+ return {
+ label: set.label,
+ data: set.data,
+ backgroundColor: this.colors,
+ hoverBackgroundColor: this.colors,
+ };
+ })
+ };
+ }
+}
diff --git a/mediarepo-ui/yarn.lock b/mediarepo-ui/yarn.lock
index 6b7e364..f33ea43 100644
--- a/mediarepo-ui/yarn.lock
+++ b/mediarepo-ui/yarn.lock
@@ -2776,6 +2776,11 @@ chardet@^0.7.0:
resolved "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
+chart.js@^3.7.1:
+ version "3.7.1"
+ resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
+ integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
+
"chokidar@>=3.0.0 <4.0.0", chokidar@^3.0.0, chokidar@^3.5.1, chokidar@^3.5.2:
version "3.5.3"
resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz"