You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/08/26 13:50:43 UTC
[incubator-streampipes] branch dev updated: [STREAMPIPES-402] Add
manual aggregation to line chart config
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 160950e [STREAMPIPES-402] Add manual aggregation to line chart config
160950e is described below
commit 160950e69c508b3d7678dffac527e9a90287b7d7
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Aug 26 15:50:35 2021 +0200
[STREAMPIPES-402] Add manual aggregation to line chart config
---
...xplorer-widget-appearance-settings.component.ts | 2 +-
.../config/line-chart-widget-config.component.html | 46 +++++++---------
.../config/line-chart-widget-config.component.ts | 11 ++--
.../line-chart/line-chart-widget.component.ts | 46 +++++++---------
.../line-chart/model/line-chart-widget.model.ts | 3 +-
.../aggregate-configuration.component.html | 62 ++++++++++++++--------
.../aggregate-configuration.component.ts | 6 ++-
7 files changed, 94 insertions(+), 82 deletions(-)
diff --git a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts b/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
index fdce738..0246600 100644
--- a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
+++ b/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
@@ -38,7 +38,7 @@ export class DataExplorerWidgetAppearanceSettingsComponent implements OnInit {
}
ngOnInit(): void {
- if (this.baseAppearanceConfig.backgroundColor) {
+ if (!this.baseAppearanceConfig.backgroundColor) {
this.baseAppearanceConfig.backgroundColor = '#FFFFFF';
}
}
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html
index 265fded..30c16f1 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html
@@ -36,37 +36,31 @@
[selectedProperties]="currentlyConfiguredWidget.dataConfig.selectedLineChartProperties">
</sp-select-properties>
- <sp-select-properties
- label="Select Background Color"
- multiple=false
- class="mr-10"
- *ngIf="currentlyConfiguredWidget.dataConfig.showBackgroundColorProperty"
- (changeSelectedProperties)="setSelectedBackgroundColorProperty($event)"
- [availableProperties]="currentlyConfiguredWidget.dataConfig.availableNonNumericColumns"
- [selectedProperties]="currentlyConfiguredWidget.dataConfig.selectedBackgroundColorProperty">
- </sp-select-properties>
- <sp-aggregate-configuration
- *ngIf="currentlyConfiguredWidget.dataConfig.advancedSettingsActive"
+ <div>
+ <mat-checkbox color="accent" [(ngModel)]="currentlyConfiguredWidget.dataConfig.autoAggregate">Auto-Aggregate
+ </mat-checkbox>
+ </div>
+
+ <sp-aggregate-configuration class="mt-10"
+ *ngIf="!currentlyConfiguredWidget.dataConfig.autoAggregate"
[(aggregationValue)]="currentlyConfiguredWidget.dataConfig.aggregationValue"
- [(aggregationTimeUnit)]="currentlyConfiguredWidget.dataConfig.aggregationTimeUnit">
+ [(aggregationTimeUnit)]="currentlyConfiguredWidget.dataConfig.aggregationTimeUnit"
+ [(aggregationFunction)]="currentlyConfiguredWidget.dataConfig.aggregationFunction">
</sp-aggregate-configuration>
- <sp-group-configuration
- [dimensionProperties]="currentlyConfiguredWidget.dataConfig.dimensionProperties"
- *ngIf="currentlyConfiguredWidget.dataConfig.advancedSettingsActive"
- [(groupValue)]="currentlyConfiguredWidget.dataConfig.groupValue"
- [(showCountValue)]="currentlyConfiguredWidget.dataConfig.showCountValue">
- </sp-group-configuration>
- <button
- *ngIf="currentlyConfiguredWidget.dataConfig.advancedSettingsActive"
- (click)="triggerDataRefresh()" mat-button mat-icon-button color="primary">
+<!-- <sp-group-configuration-->
+<!-- [dimensionProperties]="currentlyConfiguredWidget.dataConfig.dimensionProperties"-->
+<!-- *ngIf="!currentlyConfiguredWidget.dataConfig.autoAggregate"-->
+<!-- [(groupValue)]="currentlyConfiguredWidget.dataConfig.groupValue"-->
+<!-- [(showCountValue)]="currentlyConfiguredWidget.dataConfig.showCountValue">-->
+<!-- </sp-group-configuration>-->
+ <button *ngIf="!currentlyConfiguredWidget.dataConfig.autoAggregate"
+ (click)="triggerDataRefresh()" mat-button mat-raised-button color="accent">
<mat-icon>autorenew</mat-icon>
+ <span>Reload</span>
</button>
- <div>
- <mat-slide-toggle color="primary" [(ngModel)]="currentlyConfiguredWidget.dataConfig.advancedSettingsActive"
- (change)="handlingAdvancedToggleChange()">Aggregate
- </mat-slide-toggle>
- </div>
+ <mat-hint *ngIf="!currentlyConfiguredWidget.dataConfig.autoAggregate">Max. 3000 results will be shown.</mat-hint>
+
<!-- <mat-slide-toggle color="primary" [(ngModel)]="currentlyConfiguredWidget.dataConfig.labelingModeOn" (change)="toggleLabelingMode()">Label-->
<!-- </mat-slide-toggle>-->
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts
index 4a0800f..90507db 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts
@@ -54,11 +54,11 @@ export class LineChartWidgetConfigComponent extends BaseWidgetConfig<LineChartWi
this.triggerDataRefresh();
}
- handlingAdvancedToggleChange() {
- this.currentlyConfiguredWidget.dataConfig.showBackgroundColorProperty =
- !this.currentlyConfiguredWidget.dataConfig.showBackgroundColorProperty;
- this.triggerDataRefresh();
- }
+ // handlingAdvancedToggleChange() {
+ // this.currentlyConfiguredWidget.dataConfig.showBackgroundColorProperty =
+ // !this.currentlyConfiguredWidget.dataConfig.showBackgroundColorProperty;
+ // this.triggerDataRefresh();
+ // }
toggleLabelingMode() {
// this.triggerViewRefresh();
@@ -71,6 +71,7 @@ export class LineChartWidgetConfigComponent extends BaseWidgetConfig<LineChartWi
this.currentlyConfiguredWidget.dataConfig.availableNonNumericColumns = this.getNonNumericProperties(this.dataLakeMeasure.eventSchema);
this.currentlyConfiguredWidget.dataConfig.yKeys = [];
this.currentlyConfiguredWidget.dataConfig.chartMode = 'lines';
+ this.currentlyConfiguredWidget.dataConfig.autoAggregate = true;
// Reduce selected columns when more then 6
this.currentlyConfiguredWidget.dataConfig.selectedLineChartProperties =
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
index 227db6b..81ffeda 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
@@ -640,30 +640,25 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
refreshData() {
this.graph.layout.shapes = [];
- if (!this.advancedSettingsActive) {
this.setShownComponents(false, false, true);
this.dataLakeRestService.getData(
- this.dataLakeMeasure.measureName, this.buildQuery())
+ this.dataLakeMeasure.measureName, this.buildQuery(this.dataExplorerWidget.dataConfig.autoAggregate))
.subscribe((res: DataResult) => {
this.processNonGroupedData(res);
});
- } else {
- if (this.dataExplorerWidget.dataConfig.groupValue === 'None') {
- this.setShownComponents(false, false, true);
- this.dataLakeRestService.getData(
- this.dataLakeMeasure.measureName, this.buildAggregationQuery())
- .subscribe((res: DataResult) => {
- this.processNonGroupedData(res);
- });
- } else {
+ // if (this.dataExplorerWidget.dataConfig.groupValue === 'None') {
+ // this.setShownComponents(false, false, true);
+ // this.dataLakeRestService.getData(
+ // this.dataLakeMeasure.measureName, this.buildAggregationQuery())
+ // .subscribe((res: DataResult) => {
+ // this.processNonGroupedData(res);
+ // });
// this.dataLakeRestService.getGroupedData(
// this.dataExplorerWidget.dataLakeMeasure.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime(),
// this.aggregationTimeUnit, this.aggregationValue, this.groupValue)
// .subscribe((res: GroupedDataResult) => {
// this.processGroupedData(res);
// });
- }
- }
}
updateAppearance() {
@@ -683,22 +678,21 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
//this.toggleLabelingMode();
}
- buildQuery(): DatalakeQueryParameters {
- return DatalakeQueryParameterBuilder
+ buildQuery(autoAggregate: boolean): DatalakeQueryParameters {
+ const queryBuilder = DatalakeQueryParameterBuilder
.create(this.timeSettings.startTime, this.timeSettings.endTime)
- .withAutoAggregation('MEAN')
.withColumnFilter(this.dataExplorerWidget.dataConfig.selectedLineChartProperties.map(ep => ep.runtimeName))
- .build();
- }
- buildAggregationQuery(): DatalakeQueryParameters {
- return DatalakeQueryParameterBuilder
- .create(this.timeSettings.startTime, this.timeSettings.endTime)
- .withPaging(1, 2000)
- .withColumnFilter(this.dataExplorerWidget.dataConfig.selectedLineChartProperties.map(ep => ep.runtimeName))
- .withGrouping(undefined, undefined,
- this.dataExplorerWidget.dataConfig.aggregationTimeUnit, this.dataExplorerWidget.dataConfig.aggregationValue)
- .build();
+ if (autoAggregate) {
+ queryBuilder.withAutoAggregation('MEAN');
+ } else {
+ queryBuilder.withAggregation(this.dataExplorerWidget.dataConfig.aggregationFunction,
+ this.dataExplorerWidget.dataConfig.aggregationTimeUnit,
+ this.dataExplorerWidget.dataConfig.aggregationValue)
+ .withLimit(3000);
+ }
+
+ return queryBuilder.build();
}
onResize(width: number, height: number) {
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts
index 96cf425..b59cf3d 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts
@@ -24,9 +24,10 @@ export interface LineChartDataConfig {
dimensionProperties: EventPropertyUnion[];
selectedBackgroundColorProperty: EventPropertyUnion;
availableNonNumericColumns: EventPropertyUnion[];
- advancedSettingsActive: boolean;
+ autoAggregate: boolean;
aggregationValue: number;
aggregationTimeUnit: string;
+ aggregationFunction: string;
groupValue: string;
showCountValue: boolean;
showBackgroundColorProperty: boolean;
diff --git a/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html b/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html
index 2844996..da50b1d 100644
--- a/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html
+++ b/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html
@@ -17,27 +17,45 @@
-->
-<div fxLayout="column" fxLayoutAlign="stretch">
- <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="ml-0 mr-0">
- <div class="option" style="margin-left: 5px">
-
- <mat-form-field class="form-field-margin form-field-size-smaller">
- <mat-select [(ngModel)]="aggregationTimeUnit" (ngModelChange)="onModelChange($event,'aggregationTimeUnit')">
- <mat-option style="background-color: #FFFFFF" value="ms">Milliseconds</mat-option>
- <mat-option style="background-color: #FFFFFF" value="s">Second</mat-option>
- <mat-option style="background-color: #FFFFFF" value="m">Minute</mat-option>
- <mat-option style="background-color: #FFFFFF" value="h">Hour</mat-option>
- <mat-option style="background-color: #FFFFFF" value="d">Day</mat-option>
- <mat-option style="background-color: #FFFFFF" value="w">Week</mat-option>
- <mat-option style="background-color: #FFFFFF" value="month">Month</mat-option>
- <mat-option style="background-color: #FFFFFF" value="year">Year</mat-option>
- </mat-select>
- <mat-label>Unit</mat-label>
- </mat-form-field>
- <mat-form-field class="form-field-margin form-field-size-smaller">
- <input matInput type="number" [(ngModel)]="aggregationValue" (ngModelChange)="onModelChange($event,'aggregationValue')">
- <mat-label>Value</mat-label>
- </mat-form-field>
- </div>
+<div fxLayout="column" fxLayoutAlign="stretch" fxFlex="100">
+ <div fxFlex="100" fxLayout="column" fxLayoutAlign="start center" class="ml-0 mr-0">
+ <mat-form-field fxFlex="100" class="w-100" color="accent">
+ <mat-select [(ngModel)]="aggregationTimeUnit" (ngModelChange)="onModelChange($event,'aggregationTimeUnit')" class="w-100">
+ <mat-option style="background-color: #FFFFFF" value="ms">Milliseconds</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="s">Second</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="m">Minute</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="h">Hour</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="d">Day</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="w">Week</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="month">Month</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="year">Year</mat-option>
+ </mat-select>
+ <mat-label>Unit</mat-label>
+ </mat-form-field>
+ <mat-form-field fxFlex="100" class="w-100" color="accent">
+ <input matInput type="number" [(ngModel)]="aggregationValue"
+ (ngModelChange)="onModelChange($event,'aggregationValue')">
+ <mat-label>Value</mat-label>
+ </mat-form-field>
+ <mat-form-field color="accent" fxFlex="100" class="w-100">
+ <mat-label>Aggregation Function</mat-label>
+ <mat-select [(ngModel)]="aggregationFunction" (ngModelChange)="onModelChange($event,'aggregationFunction')" >
+ <mat-option [value]="'MEAN'">
+ <span class="pipeline-name">Mean</span>
+ </mat-option>
+ <mat-option [value]="'FIRST'">
+ <span class="pipeline-name">First</span>
+ </mat-option>
+ <mat-option [value]="'LAST'">
+ <span class="pipeline-name">Last</span>
+ </mat-option>
+ <mat-option [value]="'MIN'">
+ <span class="pipeline-name">Min</span>
+ </mat-option>
+ <mat-option [value]="'MAX'">
+ <span class="pipeline-name">Max</span>
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
</div>
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.ts b/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.ts
index f4ca2e3..4531a8d 100644
--- a/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.ts
@@ -30,12 +30,16 @@ export class AggregateConfigurationComponent implements OnInit {
@Output()
aggregationValueChange = new EventEmitter();
-
@Input()
aggregationTimeUnit;
@Output()
aggregationTimeUnitChange = new EventEmitter();
+ @Input()
+ aggregationFunction;
+ @Output()
+ aggregationFunctionChange = new EventEmitter();
+
constructor() {
}