From 01e47b9656a565931d1c0c4673946314a3d4dc01 Mon Sep 17 00:00:00 2001 From: tim-herbst Date: Fri, 1 Jan 2021 14:47:35 +0100 Subject: [PATCH] add description to charts and maybe finish work on code? --- .../project-3/frontend/src/app/app.module.ts | 52 ++++++++++--------- .../app/dashboard/dashboard.component.html | 41 ++++++++++----- .../app/dashboard/dashboard.component.scss | 16 +++--- .../src/app/dashboard/dashboard.component.ts | 20 ++++--- 4 files changed, 77 insertions(+), 52 deletions(-) diff --git a/projects/project-3/frontend/src/app/app.module.ts b/projects/project-3/frontend/src/app/app.module.ts index 3cbe2e4..5e2fd0f 100644 --- a/projects/project-3/frontend/src/app/app.module.ts +++ b/projects/project-3/frontend/src/app/app.module.ts @@ -27,6 +27,7 @@ import {MatTableModule} from '@angular/material/table'; import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatCheckboxModule} from '@angular/material/checkbox'; +import {MatTooltipModule} from '@angular/material/tooltip'; @NgModule({ declarations: [ @@ -36,31 +37,32 @@ import {MatCheckboxModule} from '@angular/material/checkbox'; PopUpComponent, AutoRefreshComponent ], - imports: [ - BrowserModule, - AppRoutingModule, - BrowserAnimationsModule, - MatToolbarModule, - MatIconModule, - MatButtonModule, - FlexLayoutModule, - HttpClientModule, - NgApexchartsModule, - MatGridListModule, - MatCardModule, - MatMenuModule, - LayoutModule, - MatSidenavModule, - MatDatepickerModule, - MatFormFieldModule, - MatNativeDateModule, - FormsModule, - ReactiveFormsModule, - MatInputModule, - MatTableModule, - MatSlideToggleModule, - MatCheckboxModule - ], + imports: [ + BrowserModule, + AppRoutingModule, + BrowserAnimationsModule, + MatToolbarModule, + MatIconModule, + MatButtonModule, + FlexLayoutModule, + HttpClientModule, + NgApexchartsModule, + MatGridListModule, + MatCardModule, + MatMenuModule, + LayoutModule, + MatSidenavModule, + MatDatepickerModule, + MatFormFieldModule, + MatNativeDateModule, + FormsModule, + ReactiveFormsModule, + MatInputModule, + MatTableModule, + MatSlideToggleModule, + MatCheckboxModule, + MatTooltipModule + ], providers: [], bootstrap: [AppComponent] }) diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html index c6e9190..5400d92 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html @@ -22,11 +22,12 @@
- {{bikePoint?.commonName}} + {{bikePoint?.commonName}} - -
-
+ +
+ +

Select a range to analyze data

Enter a range
- - station of lend destination + station of rental destination {{element.stationName}} @@ -99,7 +102,7 @@ - average lend duration + average rental duration {{humanizeAvgDuration(element.avgDuration)}} @@ -117,14 +120,15 @@ - - station of lend origin + station of rental origin {{element.stationName}} @@ -135,7 +139,7 @@ - average lend duration + average rental duration {{humanizeAvgDuration(element.avgDuration)}} @@ -153,8 +157,12 @@
- - Borrow Duration + + Rental Duration + + This chart shows the rent duration based on the currently selected station. + The time it takes for a rent which has the current station as origin is displayed here. +
@@ -177,7 +185,12 @@
- Borrow Time + Rental Time + + This chart shows the workload of the currently selected Station in relation + of the time of the day. It is visualized at which time of the day a journey begins or ends. + In addition, the average rental duration of the trips is displayed at the given time (green). + diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss index 3f2326b..f9eefe9 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss @@ -7,7 +7,7 @@ mat-sidenav-content { } a { - color: #017bfe; + color: black; } img { @@ -20,7 +20,8 @@ img { } .submit-date { - margin-bottom: 15px; + margin-top: 1em; + margin-left: 4em; } #chart { @@ -46,13 +47,14 @@ img { .mat-card-title { margin-top: 1em; + margin-left: 2em; } -.chart-header { - display: inline-flex; - justify-content: center; +.mat-card-subtitle { + margin-left: 39px; } + .container-map { height: 40em; margin: 1em 2em; @@ -72,12 +74,12 @@ img { } .container-borrow-duration { - height: 40em; + height: 41em; margin: 1em 2em; } .container-borrow-time { - height: 40em; + height: 41em; margin: 1em 2em; } diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts index 5bc0b22..00c54b6 100644 --- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts +++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts @@ -30,7 +30,8 @@ import {DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter} from '@angular/materia import {formatDate} from '@angular/common'; export type ChartOptions = { - title: ApexTitleSubtitle + title: ApexTitleSubtitle; + subtitle: ApexTitleSubtitle; series: ApexAxisChartSeries; chart: ApexChart; colors: string[]; @@ -160,6 +161,14 @@ export class DashboardComponent implements OnInit { this.bikePoint = data; const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; this.bikePointChartOptions = { + subtitle: { + text: 'This chart visualizes the availability of the bikes', + offsetX: 20, + offsetY: 15, + style: { + fontSize: '15px' + } + }, series: [ { name: 'Bikes', @@ -322,7 +331,7 @@ export class DashboardComponent implements OnInit { data: numbers }, { - name: 'average Duration', + name: 'average rental duration', type: 'line', data: avgDuration } @@ -361,7 +370,7 @@ export class DashboardComponent implements OnInit { }, { opposite: true, title: { - text: 'average Duration' + text: 'average rental duration' }, labels: { formatter: (val: number): string => { @@ -484,7 +493,7 @@ export class DashboardComponent implements OnInit { data: numbers }, { - name: 'average Duration', + name: 'average rental duration', type: 'line', data: avgDuration } @@ -515,7 +524,7 @@ export class DashboardComponent implements OnInit { }, { opposite: true, title: { - text: 'average Duration' + text: 'average rental duration' }, labels: { formatter: (val: number): string => { @@ -589,7 +598,6 @@ export class DashboardComponent implements OnInit { return source; } - getRandomColor(): string { const color = this.colors[Math.floor(Math.random() * this.colors.length)]; this.colors = this.colors.filter(c => c !== color);