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

4
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 {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatTooltipModule} from '@angular/material/tooltip';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -59,7 +60,8 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
MatInputModule, MatInputModule,
MatTableModule, MatTableModule,
MatSlideToggleModule, MatSlideToggleModule,
MatCheckboxModule MatCheckboxModule,
MatTooltipModule
], ],
providers: [], providers: [],
bootstrap: [AppComponent] 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 fxFlex fxLayout="column">
<mat-card-header fxFlex="15%"> <mat-card-header fxFlex="15%">
<div class="example-header-image" mat-card-avatar></div> <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-header>
<mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-evenly"> <mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-between">
<div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center"> <div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="start center">
<form [formGroup]="form"> <form [formGroup]="form" style="margin-left: 2em">
<p>Select a range to analyze data</p>
<mat-form-field appearance="fill" class="datepicker"> <mat-form-field appearance="fill" class="datepicker">
<mat-label>Enter a range</mat-label> <mat-label>Enter a range</mat-label>
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker" <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
@ -48,6 +49,8 @@
<div class="chart-bikepoint-availability" fxFlex fxLayout="column"> <div class="chart-bikepoint-availability" fxFlex fxLayout="column">
<div id="chart"> <div id="chart">
<apx-chart <apx-chart
[title]="bikePointChartOptions.title"
[subtitle]="bikePointChartOptions.subtitle"
[chart]="bikePointChartOptions.chart" [chart]="bikePointChartOptions.chart"
[colors]="bikePointChartOptions.colors" [colors]="bikePointChartOptions.colors"
[dataLabels]="bikePointChartOptions.dataLabels" [dataLabels]="bikePointChartOptions.dataLabels"
@ -56,7 +59,6 @@
[plotOptions]="bikePointChartOptions.plotOptions" [plotOptions]="bikePointChartOptions.plotOptions"
[series]="bikePointChartOptions.series" [series]="bikePointChartOptions.series"
[stroke]="bikePointChartOptions.stroke" [stroke]="bikePointChartOptions.stroke"
[title]="bikePointChartOptions.title"
[tooltip]="bikePointChartOptions.tooltip" [tooltip]="bikePointChartOptions.tooltip"
[xaxis]="bikePointChartOptions.xaxis" [xaxis]="bikePointChartOptions.xaxis"
[yaxis]="bikePointChartOptions.yaxis" [yaxis]="bikePointChartOptions.yaxis"
@ -81,14 +83,15 @@
<ng-container matColumnDef="select"> <ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row"> <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" (change)="$event ? selectRow($event, row) : null"
[checked]="selectionModel.isSelected(row)"> [checked]="selectionModel.isSelected(row)">
</mat-checkbox> </mat-checkbox>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="endStationName"> <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 <td *matCellDef="let element" mat-cell><a
[routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td> [routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
</ng-container> </ng-container>
@ -99,7 +102,7 @@
</ng-container> </ng-container>
<ng-container matColumnDef="avgDuration"> <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> <td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
</ng-container> </ng-container>
@ -117,14 +120,15 @@
<ng-container matColumnDef="select"> <ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let row"> <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" (change)="$event ? selectRow($event, row) : null"
[checked]="selectionModel.isSelected(row)"> [checked]="selectionModel.isSelected(row)">
</mat-checkbox> </mat-checkbox>
</td> </td>
</ng-container> </ng-container>
<ng-container matColumnDef="startStationName"> <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 <td *matCellDef="let element" mat-cell><a
[routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td> [routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
</ng-container> </ng-container>
@ -135,7 +139,7 @@
</ng-container> </ng-container>
<ng-container matColumnDef="avgDuration"> <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> <td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
</ng-container> </ng-container>
@ -153,8 +157,12 @@
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center"> <div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex fxLayout="column"> <mat-card fxFlex fxLayout="column">
<mat-card-header class="chart-header"> <mat-card-header>
<mat-card-title>Borrow Duration</mat-card-title> <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-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center"> <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
<div class="station-dashboard-borrow-duration" fxFlex="97%"> <div class="station-dashboard-borrow-duration" fxFlex="97%">
@ -177,7 +185,12 @@
<div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center"> <div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
<mat-card fxFlex fxLayout="column"> <mat-card fxFlex fxLayout="column">
<mat-card-header class="chart-header"> <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-header>
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center"> <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 { a {
color: #017bfe; color: black;
} }
img { img {
@ -20,7 +20,8 @@ img {
} }
.submit-date { .submit-date {
margin-bottom: 15px; margin-top: 1em;
margin-left: 4em;
} }
#chart { #chart {
@ -46,13 +47,14 @@ img {
.mat-card-title { .mat-card-title {
margin-top: 1em; margin-top: 1em;
margin-left: 2em;
} }
.chart-header { .mat-card-subtitle {
display: inline-flex; margin-left: 39px;
justify-content: center;
} }
.container-map { .container-map {
height: 40em; height: 40em;
margin: 1em 2em; margin: 1em 2em;
@ -72,12 +74,12 @@ img {
} }
.container-borrow-duration { .container-borrow-duration {
height: 40em; height: 41em;
margin: 1em 2em; margin: 1em 2em;
} }
.container-borrow-time { .container-borrow-time {
height: 40em; height: 41em;
margin: 1em 2em; 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'; import {formatDate} from '@angular/common';
export type ChartOptions = { export type ChartOptions = {
title: ApexTitleSubtitle title: ApexTitleSubtitle;
subtitle: ApexTitleSubtitle;
series: ApexAxisChartSeries; series: ApexAxisChartSeries;
chart: ApexChart; chart: ApexChart;
colors: string[]; colors: string[];
@ -160,6 +161,14 @@ export class DashboardComponent implements OnInit {
this.bikePoint = data; this.bikePoint = data;
const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks; const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
this.bikePointChartOptions = { this.bikePointChartOptions = {
subtitle: {
text: 'This chart visualizes the availability of the bikes',
offsetX: 20,
offsetY: 15,
style: {
fontSize: '15px'
}
},
series: [ series: [
{ {
name: 'Bikes', name: 'Bikes',
@ -322,7 +331,7 @@ export class DashboardComponent implements OnInit {
data: numbers data: numbers
}, },
{ {
name: 'average Duration', name: 'average rental duration',
type: 'line', type: 'line',
data: avgDuration data: avgDuration
} }
@ -361,7 +370,7 @@ export class DashboardComponent implements OnInit {
}, { }, {
opposite: true, opposite: true,
title: { title: {
text: 'average Duration' text: 'average rental duration'
}, },
labels: { labels: {
formatter: (val: number): string => { formatter: (val: number): string => {
@ -484,7 +493,7 @@ export class DashboardComponent implements OnInit {
data: numbers data: numbers
}, },
{ {
name: 'average Duration', name: 'average rental duration',
type: 'line', type: 'line',
data: avgDuration data: avgDuration
} }
@ -515,7 +524,7 @@ export class DashboardComponent implements OnInit {
}, { }, {
opposite: true, opposite: true,
title: { title: {
text: 'average Duration' text: 'average rental duration'
}, },
labels: { labels: {
formatter: (val: number): string => { formatter: (val: number): string => {
@ -589,7 +598,6 @@ export class DashboardComponent implements OnInit {
return source; return source;
} }
getRandomColor(): string { getRandomColor(): string {
const color = this.colors[Math.floor(Math.random() * this.colors.length)]; const color = this.colors[Math.floor(Math.random() * this.colors.length)];
this.colors = this.colors.filter(c => c !== color); this.colors = this.colors.filter(c => c !== color);