109 lines
3.9 KiB
HTML
109 lines
3.9 KiB
HTML
<div id="visualization">
|
|
<div id="query-box">
|
|
<pdb-query-autocomplete #query></pdb-query-autocomplete>
|
|
</div>
|
|
|
|
<div id="date-box">
|
|
<mat-form-field>
|
|
<mat-label>Date Range:</mat-label>
|
|
<input matInput id="search-date-range" value="dateRange" name="dates" />
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div id="filters">
|
|
<div id="filterpanel">
|
|
|
|
|
|
<mat-form-field>
|
|
<mat-label>Type:</mat-label>
|
|
<mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
|
|
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
|
|
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<mat-label>Group By:</mat-label>
|
|
<mat-select multiple [(value)]="groupBy">
|
|
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<pdb-limit-by #limitbycomponent></pdb-limit-by>
|
|
<div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
|
|
<mat-form-field >
|
|
<mat-label>Intervals (only bar chart):</mat-label>
|
|
<mat-select [(value)]="intervalUnit">
|
|
<mat-option value="NO_INTERVAL">-</mat-option>
|
|
<mat-option value="SECOND">second</mat-option>
|
|
<mat-option value="MINUTE">minute</mat-option>
|
|
<mat-option value="HOUR">hour</mat-option>
|
|
<mat-option value="DAY">day</mat-option>
|
|
<mat-option value="WEEK">week</mat-option>
|
|
<mat-option value="MONTH">month</mat-option>
|
|
<mat-option value="YEAR">year</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
<div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
|
|
<mat-checkbox [(ngModel)]="renderBarChartTickLabels">Show Tic Labels (bar chart)</mat-checkbox>
|
|
</div>
|
|
<pdb-y-axis-definition #y1AxisDefinitionComponent yIndex="1"></pdb-y-axis-definition>
|
|
<pdb-y-axis-definition #y2AxisDefinitionComponent yIndex="2" [hidden]="!y2AxisAvailable"></pdb-y-axis-definition>
|
|
|
|
<mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
|
|
|
|
<mat-form-field *ngIf="enableGallery">
|
|
<mat-label>Split By:</mat-label>
|
|
<mat-select [(value)]="splitBy">
|
|
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="splitBy == null || true">
|
|
Please select a value!
|
|
</mat-error>
|
|
</mat-form-field>
|
|
|
|
|
|
<div id="plot-button-bar">
|
|
<button
|
|
*ngIf="!enableGallery && !plotJobActive"
|
|
[disabled]="plotJobActive"
|
|
mat-button
|
|
matTooltip="Create Plot"
|
|
(click)="plot()">
|
|
<img src="assets/img/scatter-chart2.svg" class="icon-inline" aria-hidden="true" title="create plot" />
|
|
Plot
|
|
</button>
|
|
<button
|
|
*ngIf="enableGallery && !plotJobActive"
|
|
mat-button
|
|
matTooltip="Create Gallery"
|
|
(click)="gallery()"
|
|
[disabled]="this.splitBy == null">
|
|
<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>
|
|
<button
|
|
*ngIf="plotJobActive"
|
|
mat-button
|
|
(click)="abort()"
|
|
matTooltip="abort"><img src="assets/img/close.svg" class="icon-inline" /> Abort</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="results">
|
|
<pdb-plot-view
|
|
#plotView
|
|
(loadingEvent)="loading($event)"
|
|
(dateRangeUpdateEvent)="updateDateRange($event)"></pdb-plot-view>
|
|
<pdb-gallery-view
|
|
#galleryView>
|
|
</pdb-gallery-view>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|