101 lines
3.3 KiB
HTML
101 lines
3.3 KiB
HTML
<div id="visualization">
|
|
<div id="query-box">
|
|
<pdb-query-autocomplete #query></pdb-query-autocomplete>
|
|
</div>
|
|
|
|
<div id="date-box">
|
|
<mat-form-field class="mat-field-full-width">
|
|
<mat-label>Date Range:</mat-label>
|
|
<input matInput id="search-date-range" value="dateRange" name="dates" (input)="changeDate($event)" />
|
|
<input type="hidden" id="hidden-search-date-range" [(ngModel)]="hiddenSearchDateRange" />
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div id="filters">
|
|
<div id="filterpanel">
|
|
|
|
|
|
<mat-form-field class="mat-field-full-width">
|
|
<mat-label>Type:</mat-label>
|
|
<mat-select [formControl]="selectedPlotType">
|
|
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType">
|
|
<img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<mat-label>Combine With Type:</mat-label>
|
|
<mat-select [formControl]="selectedCombinePlotType">
|
|
<mat-option>-</mat-option>
|
|
<mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType">
|
|
<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>
|
|
|
|
<mat-form-field>
|
|
<mat-label>Y-Axis:</mat-label>
|
|
<mat-select [(value)]="yAxisScale">
|
|
<mat-option value="LOG10">Logarithm</mat-option>
|
|
<mat-option value="LINEAR">Linear</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<pdb-y-axis-range #yAxisRangeComponent></pdb-y-axis-range>
|
|
|
|
|
|
<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"
|
|
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"
|
|
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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="results">
|
|
<pdb-plot-view
|
|
#plotView
|
|
(zoomRange)="zoomRange($event)"
|
|
(zoomWithDateAnchor)="zoomWithDateAnchor($event)"></pdb-plot-view>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|