47 lines
1.9 KiB
HTML
47 lines
1.9 KiB
HTML
<mat-card style="height: 30rem">
|
|
<mat-card-header>
|
|
<mat-card-title class="d-flex align-items-center">
|
|
<div class="header-image d-inline-flex" mat-card-avatar></div>
|
|
{{bikePoint?.commonName}}
|
|
</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content class="p-4 d-flex flex-column justify-content-center">
|
|
<div>
|
|
<p>Select a range to analyze data</p>
|
|
<form [formGroup]="form" class="d-flex flex-row align-items-center justify-content-between">
|
|
<mat-form-field appearance="fill">
|
|
<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>
|
|
<button (click)="onSubmit()" class="mt-n3" color="primary" mat-raised-button>
|
|
<mat-icon>dashboard</mat-icon>
|
|
reload
|
|
</button>
|
|
</form>
|
|
</div>
|
|
<div class="ml-n4" 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>
|
|
</mat-card-content>
|
|
</mat-card>
|