rearrange dashboard-components
This commit is contained in:
Tim Herbst
parent
02ff4267bf
commit
f64fe65ed6
@ -1,60 +1,71 @@
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||||
<mat-toolbar class="mat-toolbar" color="primary">
|
||||
<button (click)="sidenav.toggle()" aria-label="Example icon-button with menu icon" class="example-icon"
|
||||
mat-icon-button>
|
||||
<mat-icon>menu</mat-icon>
|
||||
</button>
|
||||
<span>Bike Stations in London</span>
|
||||
<span class="toolbar-spacer"></span>
|
||||
<a class="button-wiki" color="primary"
|
||||
href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203" mat-flat-button
|
||||
target="_blank">
|
||||
<mat-icon>library_books</mat-icon>
|
||||
Wiki</a>
|
||||
Wiki
|
||||
</a>
|
||||
<a class="button-back" color="primary"
|
||||
mat-flat-button routerLink="/">
|
||||
<mat-icon>map</mat-icon>
|
||||
back to map</a>
|
||||
back to map
|
||||
</a>
|
||||
</mat-toolbar>
|
||||
<mat-sidenav-container class="sidenav-container">
|
||||
<mat-sidenav #sidenav class="sidenav" mode="side" opened role="region">
|
||||
<form [formGroup]="form">
|
||||
<mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
|
||||
<mat-label>Enter a range</mat-label>
|
||||
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker" formGroupName="daterange">
|
||||
<input formControlName="start" matStartDate placeholder="Start date">
|
||||
<input formControlName="end" matEndDate placeholder="End date">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<div class="submit-date" fxLayout="row" fxLayoutAlign="center">
|
||||
<button (click)="onSubmit()" color="primary" mat-raised-button>
|
||||
<mat-icon>dashboard</mat-icon>
|
||||
<span id="submit-date-span"> reload dashboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</mat-sidenav>
|
||||
<mat-sidenav-content fxFlex fxLayout="column" fxLayoutAlign="center">
|
||||
<mat-sidenav-container>
|
||||
<mat-sidenav-content class="mat-sidenav-content" fxFlex fxLayout="column" fxLayoutAlign="center">
|
||||
<div class="container-map" fxFlex="100%" fxLayout="row" fxLayoutAlign="center">
|
||||
|
||||
<div class="container-map" fxFlex="100%" fxLayout="column">
|
||||
<mat-card class="mat-card-map" fxFlex fxLayout="column">
|
||||
<div class="mini-map" fxFlex fxLayout="column">
|
||||
<div class="user-input" fxFlex="20%" fxLayout="column">
|
||||
<mat-card class="mat-card-info" fxFlex>
|
||||
<mat-card-content>
|
||||
<form [formGroup]="form">
|
||||
<mat-form-field appearance="fill" class="datepicker" fxLayout="column" fxLayoutAlign="center center">
|
||||
<mat-label>Enter a range</mat-label>
|
||||
<mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
|
||||
formGroupName="daterange">
|
||||
<input formControlName="start" matStartDate placeholder="Start date">
|
||||
<input formControlName="end" matEndDate placeholder="End date">
|
||||
</mat-date-range-input>
|
||||
<mat-datepicker-toggle [for]="picker" matSuffix></mat-datepicker-toggle>
|
||||
<mat-date-range-picker #picker></mat-date-range-picker>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
<div class="submit-date" fxLayout="row" fxLayoutAlign="center">
|
||||
<button (click)="onSubmit()" color="primary" mat-raised-button>
|
||||
<mat-icon>dashboard</mat-icon>
|
||||
<span id="submit-date-span"> reload dashboard</span>
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<div class="container-info">
|
||||
<mat-card fxFlex>
|
||||
<mat-card-header>
|
||||
<div class="example-header-image" mat-card-avatar></div>
|
||||
<mat-card-title>{{station?.commonName}}</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content></mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<mat-card class="mat-card-map" fxFlex fxLayout="row">
|
||||
<div class="mini-map" fxFlex>
|
||||
<div class="map-frame" fxFill>
|
||||
<div fxFill id="minimap"></div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container container-table"
|
||||
fxFlex fxLayout="row" fxLayoutAlign="center"
|
||||
>
|
||||
<div class="dashboard-table-to"
|
||||
fxFlex="40%"
|
||||
>
|
||||
<div class="container-table" fxFlex fxLayout="row" fxLayoutAlign="center">
|
||||
<div class="dashboard-table-to" fxFlex>
|
||||
<table [dataSource]="stationToSource" class="mat-elevation-z8" fxFill mat-table>
|
||||
<ng-container matColumnDef="endStationName">
|
||||
<th *matHeaderCellDef mat-header-cell> station of lend destination</th>
|
||||
@ -75,9 +86,7 @@
|
||||
<tr *matRowDef="let row; columns: displayedColumnsTo;" mat-row></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="dashboard-table-from"
|
||||
fxFlex="40%"
|
||||
>
|
||||
<div class="dashboard-table-from" fxFlex>
|
||||
<table [dataSource]="stationFromSource" class="mat-elevation-z9" fxFill mat-table>
|
||||
<ng-container matColumnDef="startStationName">
|
||||
<th *matHeaderCellDef mat-header-cell> station of lend origin</th>
|
||||
@ -102,13 +111,12 @@
|
||||
</div>
|
||||
|
||||
<div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
|
||||
<mat-card fxFlex="85%" fxLayout="column"
|
||||
>
|
||||
<mat-card-header>
|
||||
<mat-card fxFlex fxLayout="column">
|
||||
<mat-card-header class="chart-header">
|
||||
<mat-card-title>Borrow Duration</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
|
||||
<div fxFlex="90%" id="Station-Dashboard-Borrow-Duration">
|
||||
<div class="station-dashboard-borrow-duration" fxFlex="97%">
|
||||
<apx-chart
|
||||
[chart]="durationChartOptions.chart"
|
||||
[dataLabels]="durationChartOptions.dataLabels"
|
||||
@ -118,12 +126,31 @@
|
||||
[series]="durationChartOptions.series"
|
||||
[stroke]="durationChartOptions.stroke"
|
||||
[xaxis]="durationChartOptions.xaxis"
|
||||
[yaxis]="durationChartOptions.yaxis"
|
||||
></apx-chart>
|
||||
[yaxis]="durationChartOptions.yaxis"></apx-chart>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
|
||||
<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-header>
|
||||
|
||||
<mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
|
||||
<div class="station-dashboard-borrow-time" fxFlex>
|
||||
<apx-chart
|
||||
[chart]="timeChartOptions.chart"
|
||||
[dataLabels]="timeChartOptions.dataLabels"
|
||||
[fill]="timeChartOptions.fill"
|
||||
[series]="timeChartOptions.series"
|
||||
[stroke]="timeChartOptions.stroke"
|
||||
[xaxis]="timeChartOptions.xaxis"
|
||||
[yaxis]="timeChartOptions.yaxis"></apx-chart>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</mat-sidenav-content>
|
||||
</mat-sidenav-container>
|
||||
|
||||
@ -6,17 +6,7 @@ mat-sidenav-content {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.sidenav {
|
||||
height: 100vh;
|
||||
width: 15vw;
|
||||
min-width: 20em;
|
||||
}
|
||||
|
||||
mat-sidenav-container, mat-sidenav-content, mat-sidenav {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.button-back:hover {
|
||||
.button-back:hover, .button-wiki:hover {
|
||||
background: #5a34a0;
|
||||
}
|
||||
|
||||
@ -24,18 +14,31 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.button-wiki:hover {
|
||||
background: #5a34a0;
|
||||
.user-input {
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
.datepicker {
|
||||
margin-top: 100px;
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.submit-date {
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
.mat-card {
|
||||
padding: 1px 1px 1px;
|
||||
margin: 2em;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.example-header-image {
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
background-image: url('../../assets/bike-point.png');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.mat-card-map {
|
||||
padding: 1px;
|
||||
}
|
||||
@ -44,36 +47,43 @@ mat-sidenav-container, mat-sidenav-content, mat-sidenav {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.mat-card-header {
|
||||
display: flex;
|
||||
.chart-header {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container-map {
|
||||
height: 40vh;
|
||||
height: 40em;
|
||||
margin: 1em 2em;
|
||||
}
|
||||
|
||||
.container-table {
|
||||
height: 20vh;
|
||||
}
|
||||
|
||||
.container-borrow-duration {
|
||||
height: 40vh
|
||||
}
|
||||
|
||||
.container-bottom {
|
||||
height: 30vh
|
||||
height: 20em;
|
||||
margin: 1em 3em;
|
||||
}
|
||||
|
||||
.dashboard-table-to {
|
||||
margin: 5px;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.dashboard-table-from {
|
||||
margin: 5px;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.dashboard-chart-borrow-time {
|
||||
margin: 5px;
|
||||
background: chartreuse;
|
||||
.container-borrow-duration {
|
||||
height: 40em;
|
||||
margin: 1em 2em;
|
||||
}
|
||||
|
||||
.container-borrow-time {
|
||||
height: 40em;
|
||||
margin: 1em 2em;
|
||||
}
|
||||
|
||||
.station-dashboard-borrow-time {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.station-dashboard-borrow-duration {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
@ -40,6 +40,4 @@ export class PopUpComponent implements OnInit {
|
||||
public route(): void {
|
||||
this.router.navigate(['/dashboard', this.station.id]);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@ -15,14 +15,20 @@ export class DashboardService {
|
||||
}
|
||||
|
||||
public async fetch_dashboard_station_to(id: string, startDate: string, endDate: string): Promise<any> {
|
||||
return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`).toPromise();
|
||||
return await this.client.get(
|
||||
environment.apiUrl + `latest/dashboard/${id}/to?start_date=${startDate}&end_date=${endDate}`
|
||||
).toPromise();
|
||||
}
|
||||
|
||||
public async fetch_dashboard_station_from(id: string, startDate: string, endDate: string): Promise<any> {
|
||||
return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`).toPromise();
|
||||
return await this.client.get(
|
||||
environment.apiUrl + `latest/dashboard/${id}/from?start_date=${startDate}&end_date=${endDate}`
|
||||
).toPromise();
|
||||
}
|
||||
|
||||
public async fetch_dashboard_station_duration(id: string, startDate: string, endDate: string): Promise<any> {
|
||||
return await this.client.get(environment.apiUrl + `latest/dashboard/${id}/duration?start_date=${startDate}&end_date=${endDate}`).toPromise();
|
||||
public async fetch_dashboard_station_charts(id: string, startDate: string, endDate: string, type: string): Promise<any> {
|
||||
return await this.client.get(
|
||||
environment.apiUrl + `latest/dashboard/${id}/${type}?start_date=${startDate}&end_date=${endDate}`
|
||||
).toPromise();
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user