72 lines
2.2 KiB
HTML
72 lines
2.2 KiB
HTML
<style>
|
|
|
|
</style>
|
|
|
|
<div id="visualization">
|
|
<div id="query-box">
|
|
<input matInput placeholder="Query" value="{{query}}" />
|
|
</div>
|
|
<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>Type:</mat-label>
|
|
<mat-select [formControl]="selectedPlotType">
|
|
<mat-option *ngFor="let plotType of plotTypes" [value]="plotType.name">
|
|
<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:</mat-label>
|
|
<mat-select [(value)]="selectedCombinePlotType">
|
|
<mat-option>-</mat-option>
|
|
<mat-option *ngFor="let plotType of combinePlotTypes" [value]="plotType.name">
|
|
<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>
|
|
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<mat-label>Split By:</mat-label>
|
|
<mat-select>
|
|
<mat-option>-</mat-option>
|
|
<mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field>
|
|
<mat-label>Y-Axis:</mat-label>
|
|
<mat-select [(value)]="yAxis">
|
|
<mat-option value="log">Logarithm</mat-option>
|
|
<mat-option value="linear">Linear</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
|
|
<pdb-y-axis-range
|
|
[(yAxisUnit)]="yAxisUnit"
|
|
[(minYValue)]="minYValue"
|
|
[(maxYValue)]="maxYValue"
|
|
></pdb-y-axis-range>
|
|
|
|
</div>
|
|
<div id="results"></div>
|
|
</div> |