This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new c5f504dd22 fix: Modify flex direction in filter component (#2477)
c5f504dd22 is described below
commit c5f504dd2209dc130acd97c2937b6fa646cab1f8
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Feb 20 10:50:05 2024 +0100
fix: Modify flex direction in filter component (#2477)
---
.../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>
