49 lines
2.1 KiB
HTML
49 lines
2.1 KiB
HTML
|
<mat-card fxFlex fxLayout="column">
|
||
|
|
<mat-card-header fxFlex="15%">
|
||
|
|
<div class="header-image" mat-card-avatar></div>
|
||
|
|
<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-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"
|
||
|
|
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">
|
||
|
|
<button (click)="onSubmit()" color="primary" mat-raised-button>
|
||
|
|
<mat-icon>dashboard</mat-icon>
|
||
|
|
<span id="submit-date-span"> reload</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chart-bikepoint-availability" fxFlex fxLayout="column">
|
||
|
|
<div id="chart">
|
||
|
|
<apx-chart
|
||
|
|
[chart]="chartOptions.chart"
|
||
|
|
[colors]="chartOptions.colors"
|
||
|
|
[dataLabels]="chartOptions.dataLabels"
|
||
|
|
[fill]="chartOptions.fill"
|
||
|
|
[legend]="chartOptions.legend"
|
||
|
|
[plotOptions]="chartOptions.plotOptions"
|
||
|
|
[series]="chartOptions.series"
|
||
|
|
[stroke]="chartOptions.stroke"
|
||
|
|
[subtitle]="chartOptions.subtitle"
|
||
|
|
[title]="chartOptions.title"
|
||
|
|
[tooltip]="chartOptions.tooltip"
|
||
|
|
[xaxis]="chartOptions.xaxis"
|
||
|
|
[yaxis]="chartOptions.yaxis"
|
||
|
|
></apx-chart>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</mat-card-content>
|
||
|
|
</mat-card>
|