hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add description to charts and maybe finish work on code?

Browse Source
This commit is contained in:
tim-herbst 2021-01-01 14:47:35 +01:00
parent 5e4952b08e
commit 01e47b9656
4 changed files with 77 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
projects/project-3/frontend/src/app/app.module.ts
View File

@ -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]
})

41
projects/project-3/frontend/src/app/dashboard/dashboard.component.html
View File

@ -22,11 +22,12 @@
<mat-card fxFlex fxLayout="column">
<mat-card-header fxFlex="15%">
<div class="example-header-image" mat-card-avatar></div>
<mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
<mat-card-title style="margin-top: 1em; margin-left: 0">{{bikePoint?.commonName}}</mat-card-title>
</mat-card-header>
<mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-evenly">
<div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
<form [formGroup]="form">
<mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-between">
<div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="start center">
<form [formGroup]="form" style="margin-left: 2em">
<p>Select a range to analyze data</p>
<mat-form-field appearance="fill" class="datepicker">
<mat-label>Enter a range</mat-label>
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
@ -48,6 +49,8 @@
<div class="chart-bikepoint-availability" fxFlex fxLayout="column">
<div id="chart">
<apx-chart
[title]="bikePointChartOptions.title"
[subtitle]="bikePointChartOptions.subtitle"
[chart]="bikePointChartOptions.chart"
[colors]="bikePointChartOptions.colors"
[dataLabels]="bikePointChartOptions.dataLabels"
@ -56,7 +59,6 @@
[plotOptions]="bikePointChartOptions.plotOptions"
[series]="bikePointChartOptions.series"
[stroke]="bikePointChartOptions.stroke"
[title]="bikePointChartOptions.title"
[tooltip]="bikePointChartOptions.tooltip"
[xaxis]="bikePointChartOptions.xaxis"
[yaxis]="bikePointChartOptions.yaxis"
@ -81,14 +83,15 @@
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
<mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
(click)="$event.stopPropagation()"
(change)="$event ? selectRow($event, row) : null"
[checked]="selectionModel.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="endStationName">
<th *matHeaderCellDef mat-header-cell> station of lend destination</th>
<th *matHeaderCellDef mat-header-cell> station of rental destination</th>
<td *matCellDef="let element" mat-cell><a
[routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
</ng-container>
@ -99,7 +102,7 @@
</ng-container>
<ng-container matColumnDef="avgDuration">
<th *matHeaderCellDef mat-header-cell> average lend duration</th>
<th *matHeaderCellDef mat-header-cell> average rental duration</th>
<td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
</ng-container>
@ -117,14 +120,15 @@
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
<mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
(click)="$event.stopPropagation()"
(change)="$event ? selectRow($event, row) : null"
[checked]="selectionModel.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="startStationName">
<th *matHeaderCellDef mat-header-cell> station of lend origin</th>
<th *matHeaderCellDef mat-header-cell> station of rental origin</th>
<td *matCellDef="let element" mat-cell><a
[routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
</ng-container>
@ -135,7 +139,7 @@
</ng-container>
<ng-container matColumnDef="avgDuration">
<th *matHeaderCellDef mat-header-cell> average lend duration</th>
<th *matHeaderCellDef mat-header-cell> average rental duration</th>
<td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
</ng-container>
@ -153,8 +157,12 @@
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex fxLayout="column">
<mat-card-header class="chart-header">
<mat-card-title>Borrow Duration</mat-card-title>
<mat-card-header>
<mat-card-title>Rental Duration</mat-card-title>
<mat-card-subtitle>
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.
</mat-card-subtitle>
</mat-card-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<div class="station-dashboard-borrow-duration" fxFlex="97%">
@ -177,7 +185,12 @@
<div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex fxLayout="column">
<mat-card-header class="chart-header">
<mat-card-title>Borrow Time</mat-card-title>
<mat-card-title>Rental Time</mat-card-title>
<mat-card-subtitle>
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).
</mat-card-subtitle>
</mat-card-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">

16
projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
View File

@ -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;
}

20
projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
View File

@ -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);