This is an automated email from the ASF dual-hosted git repository. riemer pushed a commit to branch fix-data-explorer-filter-layout in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit e6558e91c6e9310bcbe0a5fbe52bf35a05214d3c Author: Dominik Riemer <[email protected]> AuthorDate: Tue Feb 20 10:06:29 2024 +0100 fix: Modify flex direction in filter component --- .../filter-selection-panel.component.html | 243 +++++++++++---------- .../widgets/base/echarts-widget.component.html | 7 +- 2 files changed, 129 insertions(+), 121 deletions(-) diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html index 3fe512e589..2d5242eaf3 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html +++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/filter-selection-panel/filter-selection-panel.component.html @@ -30,131 +30,134 @@ Add Filter </button> </div> - <div - *ngFor=" - let filter of sourceConfig.queryConfig.selectedFilters; - let i = index - " - fxFlex="100" - fxLayout="column" - > - <div fxFlex="100" fxLayout="column" class="form-field-small"> - <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center"> - <mat-form-field - color="accent" - class="w-140-px mr-5" - appearance="outline" - > - <mat-label>Field</mat-label> - <mat-select - [(value)]="filter.field" - (selectionChange)="updateWidget()" - [compareWith]="compare" - panelClass="form-field-small min-w-200" - data-cy="design-panel-data-settings-filter-field" + <div fxLayout="column"> + <div + *ngFor=" + let filter of sourceConfig.queryConfig.selectedFilters; + let i = index + " + fxFlex="100" + fxLayout="column" + > + <div fxFlex="100" fxLayout="column" class="form-field-small"> + <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center"> + <mat-form-field + color="accent" + class="w-140-px mr-5" + appearance="outline" + > + <mat-label>Field</mat-label> + <mat-select + [(value)]="filter.field" + (selectionChange)="updateWidget()" + [compareWith]="compare" + panelClass="form-field-small min-w-200" + data-cy="design-panel-data-settings-filter-field" + > + <mat-option + *ngFor=" + let field of sourceConfig.queryConfig.fields + " + [value]="field" + >{{ field.runtimeName }} + </mat-option> + </mat-select> + </mat-form-field> + <mat-form-field + color="accent" + class="w-80-px mr-5" + appearance="outline" > - <mat-option - *ngFor=" - let field of sourceConfig.queryConfig.fields - " - [value]="field" - >{{ field.runtimeName }}</mat-option + <mat-select + [(value)]="filter.operator" + panelClass="form-field-small min-w-100" + (selectionChange)="updateWidget()" + data-cy="design-panel-data-settings-filter-operator" > - </mat-select> - </mat-form-field> - <mat-form-field - color="accent" - class="w-80-px mr-5" - appearance="outline" - > - <mat-select - [(value)]="filter.operator" - panelClass="form-field-small min-w-100" - (selectionChange)="updateWidget()" - data-cy="design-panel-data-settings-filter-operator" + <mat-option [value]="'='"> + <span class="pipeline-name">=</span> + </mat-option> + <mat-option [value]="'<'"> + <span class="pipeline-name"><</span> + </mat-option> + <mat-option [value]="'<='"> + <span class="pipeline-name"><=</span> + </mat-option> + <mat-option [value]="'>='"> + <span class="pipeline-name">>=</span> + </mat-option> + <mat-option [value]="'>'"> + <span class="pipeline-name">></span> + </mat-option> + <mat-option [value]="'!='"> + <span class="pipeline-name">!=</span> + </mat-option> + </mat-select> + </mat-form-field> + <mat-form-field + color="accent" + appearance="outline" + class="w-140-px mr-5" + *ngIf=" + !filter.field || + !tagValues.has(filter.field.runtimeName) + " > - <mat-option [value]="'='"> - <span class="pipeline-name">=</span> - </mat-option> - <mat-option [value]="'<'"> - <span class="pipeline-name"><</span> - </mat-option> - <mat-option [value]="'<='"> - <span class="pipeline-name"><=</span> - </mat-option> - <mat-option [value]="'>='"> - <span class="pipeline-name">>=</span> - </mat-option> - <mat-option [value]="'>'"> - <span class="pipeline-name">></span> - </mat-option> - <mat-option [value]="'!='"> - <span class="pipeline-name">!=</span> - </mat-option> - </mat-select> - </mat-form-field> - <mat-form-field - color="accent" - appearance="outline" - class="w-140-px mr-5" - *ngIf=" - !filter.field || - !tagValues.has(filter.field.runtimeName) - " - > - <mat-label>Value</mat-label> - <input - type="text" - placeholder="Value" - aria-label="Number" - matInput - [(ngModel)]="filter.value" - (change)="updateWidget()" - data-cy="design-panel-data-settings-filter-value" - /> - </mat-form-field> - <mat-form-field - color="accent" - appearance="outline" - class="w-140-px mr-5" - *ngIf=" - filter.field && tagValues.has(filter.field.runtimeName) - " - > - <input - type="text" - placeholder="Value" - aria-label="Number" - matInput - [(ngModel)]="filter.value" - (change)="updateWidget()" - data-cy="design-panel-data-settings-filter-value" - [matAutocomplete]="auto" - /> - <mat-autocomplete - #auto="matAutocomplete" - (optionSelected)="updateWidget()" + <mat-label>Value</mat-label> + <input + type="text" + placeholder="Value" + aria-label="Number" + matInput + [(ngModel)]="filter.value" + (change)="updateWidget()" + data-cy="design-panel-data-settings-filter-value" + /> + </mat-form-field> + <mat-form-field + color="accent" + appearance="outline" + class="w-140-px mr-5" + *ngIf=" + filter.field && + tagValues.has(filter.field.runtimeName) + " > - <mat-option - *ngFor=" - let value of tagValues.get( - filter.field.runtimeName - ) - " - [value]="value" + <input + type="text" + placeholder="Value" + aria-label="Number" + matInput + [(ngModel)]="filter.value" + (change)="updateWidget()" + data-cy="design-panel-data-settings-filter-value" + [matAutocomplete]="auto" + /> + <mat-autocomplete + #auto="matAutocomplete" + (optionSelected)="updateWidget()" > - {{ value }} - </mat-option> - </mat-autocomplete> - </mat-form-field> - <button - mat-icon-button - color="accent" - (click)="remove(sourceConfig, i)" - data-cy="design-panel-data-settings-remove-filter" - > - <i class="material-icons">remove</i> - </button> + <mat-option + *ngFor=" + let value of tagValues.get( + filter.field.runtimeName + ) + " + [value]="value" + > + {{ value }} + </mat-option> + </mat-autocomplete> + </mat-form-field> + <button + mat-icon-button + color="accent" + (click)="remove(sourceConfig, i)" + data-cy="design-panel-data-settings-remove-filter" + > + <i class="material-icons">remove</i> + </button> + </div> </div> </div> </div> diff --git a/ui/src/app/data-explorer/components/widgets/base/echarts-widget.component.html b/ui/src/app/data-explorer/components/widgets/base/echarts-widget.component.html index 408e05d117..7f6b426d6a 100644 --- a/ui/src/app/data-explorer/components/widgets/base/echarts-widget.component.html +++ b/ui/src/app/data-explorer/components/widgets/base/echarts-widget.component.html @@ -49,6 +49,11 @@ [options]="option" [ngStyle]="{ width: currentWidth, height: '100%' }" (chartInit)="onChartInit($event)" - *ngIf="option && !showInvalidConfiguration" + *ngIf=" + option && + !showInvalidConfiguration && + !showNoDataInDateRange && + !showTooMuchData + " ></div> </div>
