From 39978ff34c91590e5f1e581231eea2291e625a7d Mon Sep 17 00:00:00 2001 From: trivernis Date: Sat, 19 Feb 2022 18:15:26 +0100 Subject: [PATCH] Add chart to repository details Signed-off-by: trivernis --- mediarepo-ui/angular.json | 8 +- mediarepo-ui/package.json | 3 +- .../src/app/components/core/core.module.ts | 2 +- .../repositories-tab.component.html | 10 +- .../repository-details-view.component.html | 91 +++++++++++-------- .../repository-details-view.component.scss | 33 ++++++- .../repository-details-view.component.ts | 13 ++- .../repository-overview.component.scss | 12 ++- .../shared/app-common/app-common.module.ts | 7 +- .../app-common/chart/chart.component.html | 2 + .../app-common/chart/chart.component.scss | 15 +++ .../app-common/chart/chart.component.spec.ts | 25 +++++ .../app-common/chart/chart.component.ts | 86 ++++++++++++++++++ mediarepo-ui/yarn.lock | 5 + 14 files changed, 256 insertions(+), 56 deletions(-) create mode 100644 mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.html create mode 100644 mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.scss create mode 100644 mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.spec.ts create mode 100644 mediarepo-ui/src/app/components/shared/app-common/chart/chart.component.ts 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 @@
-
-

Stats

- {{repository.path}} - {{repository.address}} - - - {{metadata ? metadata!.file_count.toString() : ''}} - - - - {{metadata ? metadata!.tag_count.toString() : ''}} - - - - {{metadata ? metadata!.namespace_count.toString() : ''}} - - - - {{metadata ? metadata!.mapping_count.toString() : ''}} - - - - {{this.totalSize | async}} - - - - {{this.fileFolderSize | async}} - - - - {{this.thumbFolderSize | async}} - - - - {{this.databaseFileSize | async}} - +
+
+

Stats

+ {{repository.path}} + {{repository.address}} + + + {{metadata ? metadata!.file_count.toString() : ''}} + + + + {{metadata ? metadata!.tag_count.toString() : ''}} + + + + {{metadata ? metadata!.namespace_count.toString() : ''}} + + + + {{metadata ? metadata!.mapping_count.toString() : ''}} + + + + {{this.totalSize | async}} + + + + {{this.fileFolderSize | async}} + + + + {{this.thumbFolderSize | async}} + + + + {{this.databaseFileSize | async}} + +
+
+
+
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"