andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

add date range field

Browse Source 
It is (again) surprisingly hard to find a decent date+time-range
picker that works with Angular. Daterangepicker, which I used with
my VueJS application does not work with Angular. I can't get the
angularized version
https://github.com/fragaria/angular-daterangepicker) to work either.
And and a native Angular date picker
(https://github.com/GNURub/ngx-daterangepicker) doesn't work either.
This commit is contained in:
Andreas Huber
2019-10-11 17:29:14 +02:00
parent 020c3b6c39
commit e61f415880
2 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
pdb-js/src/app/visualization-page/visualization-page.component.html
View File

@@ -7,18 +7,13 @@
<input matInput placeholder="Query" value="{{query}}" /> <input matInput placeholder="Query" value="{{query}}" />
</div> </div>
<div id="filters"> <div id="filters">
<button mat-button (click)="plot()">
<img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
Plot
</button>
<!--
<button mat-button (click)="gallery()">
<img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
Gallery
</button>
-->
<mat-form-field>
<mat-label>Date Range:</mat-label>
<input matInput [formControl]="dateRange" />
</mat-form-field>
<mat-form-field> <mat-form-field>
<mat-label>Type:</mat-label> <mat-label>Type:</mat-label>
<mat-select [formControl]="selectedPlotType"> <mat-select [formControl]="selectedPlotType">
@@ -67,6 +62,21 @@
[(maxYValue)]="maxYValue" [(maxYValue)]="maxYValue"
></pdb-y-axis-range> ></pdb-y-axis-range>
<div>
<button mat-button (click)="plot()">
<img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
Plot
</button>
<!--
<button mat-button (click)="gallery()">
<img src="assets/img/four-squares-line.svg" class="icon-inline" aria-hidden="true" title="Create Gallery (only active if 'Split' is set)" />
Gallery
</button>
-->
</div>
</div> </div>
<div id="results"></div> <div id="results"></div>
</div> </div>

2
pdb-js/src/app/visualization-page/visualization-page.component.ts
View File

@@ -11,6 +11,8 @@ import { FormControl } from '@angular/forms';
}) })
export class VisualizationPageComponent implements OnInit { export class VisualizationPageComponent implements OnInit {
dateRange = new FormControl('2019-10-05 00:00:00 - 2019-10-11 23:59:59');
availablePlotTypes = {}; availablePlotTypes = {};
selectedPlotType = new FormControl(''); selectedPlotType = new FormControl('');