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
commit 49bb7252eda58ef58eb62ceae0708f7446e8a8bf Author: Dominik Riemer <[email protected]> AuthorDate: Mon Aug 23 09:18:30 2021 +0200 [STREAMPIPES-412] Add histogram widget to data explorer --- .../data-explorer-designer-panel.component.html | 6 ++ ...ta-explorer-widget-data-settings.component.html | 10 +- .../data-explorer-dashboard-widget.component.html | 13 +++ .../histogram-chart-widget-config.component.html | 30 ++++++ .../histogram-chart-widget-config.component.scss | 17 ++++ .../histogram-chart-widget-config.component.ts | 45 +++++++++ .../histogram-chart-widget.component.html | 32 ++++++ .../histogram-chart-widget.component.scss | 17 ++++ .../histogram/histogram-chart-widget.component.ts | 110 +++++++++++++++++++++ .../model/histogram-chart-widget.model.ts | 30 ++++++ ui/src/app/data-explorer/data-explorer.module.ts | 4 + 11 files changed, 311 insertions(+), 3 deletions(-) diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html index 2fd671f..7100555 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html +++ b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html @@ -59,6 +59,12 @@ </sp-data-explorer-line-chart-widget-config> </div> + <div *ngIf="currentlyConfiguredWidget.widgetType === 'histogram-chart'" class="h-100 p-0"> + <sp-data-explorer-histogram-chart-widget-config + [currentlyConfiguredWidget]="currentlyConfiguredWidget" + [dataLakeMeasure]="dataLakeMeasure"> + </sp-data-explorer-histogram-chart-widget-config> + </div> <div *ngIf="currentlyConfiguredWidget.widgetType === 'indicator-chart'" class="h-100 p-0"> <sp-data-explorer-indicator-chart-widget-config [currentlyConfiguredWidget]="currentlyConfiguredWidget" diff --git a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html index e738a40..a4a5c4d 100644 --- a/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html +++ b/ui/src/app/data-explorer/components/designer-panel/data-settings/data-explorer-widget-data-settings.component.html @@ -45,15 +45,19 @@ <mat-form-field color="accent" fxFlex="100"> <mat-label>Select visualization</mat-label> <mat-select [(value)]="currentlyConfiguredWidget.widgetType"> + <mat-option [value]="'histogram-chart'"> + <span class="pipeline-name">Histogram</span> + </mat-option> + <mat-option [value]="'indicator-chart'"> + <span class="pipeline-name">Indicator</span> + </mat-option> <mat-option [value]="'line-chart'"> <span class="pipeline-name">Line Chart</span> </mat-option> <mat-option [value]="'table'"> <span class="pipeline-name">Table</span> </mat-option> - <mat-option [value]="'indicator-chart'"> - <span class="pipeline-name">Indicator</span> - </mat-option> + </mat-select> </mat-form-field> diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html index 5d87a1f..40fc44b 100644 --- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html +++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html @@ -94,6 +94,19 @@ class="h-100"> </sp-data-explorer-indicator-chart-widget> </div> + <div *ngIf="configuredWidget.widgetType === 'histogram-chart'" class="h-100 p-0"> + <sp-data-explorer-histogram-chart-widget + (removeWidgetCallback)="removeWidget()" + [timeSettings]="timeSettings" + [gridsterItem]="dashboardItem" + [gridsterItemComponent]="gridsterItemComponent" + [editMode]="editMode" + [dataViewDashboardItem]="dashboardItem" + [dataExplorerWidget]="configuredWidget" + [dataLakeMeasure]="dataLakeMeasure" + class="h-100"> + </sp-data-explorer-histogram-chart-widget> + </div> </div> </div> </div> diff --git a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html new file mode 100644 index 0000000..3701a74 --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html @@ -0,0 +1,30 @@ +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + --> + +<div fxFlex="100" fxLayout="column"> + <h5>Indicator Field</h5> + <mat-form-field color="accent" fxFlex="100"> + <mat-label>Select Field</mat-label> + <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.selectedProperty" (selectionChange)="setSelectedProperties($event)"> + <mat-option [value]="property.runtimeName" *ngFor="let property of currentlyConfiguredWidget.dataConfig.availableProperties"> + <span class="pipeline-name">{{ property.runtimeName }}</span> + </mat-option> + </mat-select> + </mat-form-field> +</div> + diff --git a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.scss b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.scss new file mode 100644 index 0000000..13cbc4a --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.scss @@ -0,0 +1,17 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ diff --git a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.ts new file mode 100644 index 0000000..03c569e --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.ts @@ -0,0 +1,45 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +import { Component, OnInit } from '@angular/core'; +import { BaseWidgetConfig } from '../../base/base-widget-config'; +import { EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model'; +import { HistogramChartWidgetModel } from '../model/histogram-chart-widget.model'; + +@Component({ + selector: 'sp-data-explorer-histogram-chart-widget-config', + templateUrl: './histogram-chart-widget-config.component.html', + styleUrls: ['./histogram-chart-widget-config.component.scss'] +}) +export class HistogramWidgetConfigComponent extends BaseWidgetConfig<HistogramChartWidgetModel> implements OnInit { + + ngOnInit(): void { + this.updateWidgetConfigOptions(); + } + + setSelectedProperties(selectedColumn: EventPropertyUnion) { + this.triggerDataRefresh(); + } + + protected updateWidgetConfigOptions() { + if (this.dataLakeMeasure.measureName && !this.currentlyConfiguredWidget.dataConfig.availableProperties) { + this.currentlyConfiguredWidget.dataConfig.availableProperties = this.getNumericProperty(this.dataLakeMeasure.eventSchema); + } + } + +} diff --git a/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.html new file mode 100644 index 0000000..202fb78 --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.html @@ -0,0 +1,32 @@ +<!-- + ~ Licensed to the Apache Software Foundation (ASF) under one or more + ~ contributor license agreements. See the NOTICE file distributed with + ~ this work for additional information regarding copyright ownership. + ~ The ASF licenses this file to You under the Apache License, Version 2.0 + ~ (the "License"); you may not use this file except in compliance with + ~ the License. You may obtain a copy of the License at + ~ + ~ http://www.apache.org/licenses/LICENSE-2.0 + ~ + ~ Unless required by applicable law or agreed to in writing, software + ~ distributed under the License is distributed on an "AS IS" BASIS, + ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + ~ See the License for the specific language governing permissions and + ~ limitations under the License. + ~ + --> + +<div fxLayout="column" fxFlex="100" + [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}"> + + <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner> + <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range> + + <plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData" + [divId]="dataExplorerWidget._id" + class="plotly-container" + [data]="data" + [layout]="graph.layout" + [config]="graph.config"> + </plotly-plot> +</div> diff --git a/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.scss b/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.scss new file mode 100644 index 0000000..13cbc4a --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.scss @@ -0,0 +1,17 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ diff --git a/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.ts new file mode 100644 index 0000000..fb3039c --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/histogram/histogram-chart-widget.component.ts @@ -0,0 +1,110 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +import { Component, OnInit } from '@angular/core'; +import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget'; +import { DatalakeRestService } from '../../../../platform-services/apis/datalake-rest.service'; +import { WidgetConfigurationService } from '../../../services/widget-configuration.service'; +import { ResizeService } from '../../../services/resize.service'; +import { DataResult } from '../../../../core-model/datalake/DataResult'; +import { DatalakeQueryParameters } from '../../../../core-services/datalake/DatalakeQueryParameters'; +import { DatalakeQueryParameterBuilder } from '../../../../core-services/datalake/DatalakeQueryParameterBuilder'; +import { Observable, zip } from 'rxjs'; +import { HistogramChartWidgetModel } from './model/histogram-chart-widget.model'; + +@Component({ + selector: 'sp-data-explorer-histogram-chart-widget', + templateUrl: './histogram-chart-widget.component.html', + styleUrls: ['./histogram-chart-widget.component.scss'] +}) +export class HistogramChartWidgetComponent extends BaseDataExplorerWidget<HistogramChartWidgetModel> implements OnInit { + + data = [ + { + x: [], + type: 'histogram', + } + ]; + + graph = { + layout: { + font: { + color: '#FFF' + }, + autosize: true, + plot_bgcolor: '#fff', + paper_bgcolor: '#fff', + }, + config: { + modeBarButtonsToRemove: ['lasso2d', 'select2d', 'toggleSpikelines', 'toImage'], + displaylogo: false, + displayModeBar: false, + responsive: true + } + }; + + constructor(dataLakeRestService: DatalakeRestService, + widgetConfigurationService: WidgetConfigurationService, + resizeService: ResizeService) { + super(dataLakeRestService, widgetConfigurationService, resizeService); + } + + refreshData() { + this.getQuery().subscribe(result => { + this.prepareData(result); + }); + } + + getQuery(): Observable<DataResult> { + return this.dataLakeRestService.getData(this.dataLakeMeasure.measureName, this.buildQuery()); + } + + refreshView() { + this.updateAppearance(); + } + + prepareData(result: DataResult) { + this.data[0].x = this.transform(result.rows); + } + + transform(rows): any[] { + return rows.map(row => row[1]); + } + + updateAppearance() { + this.graph.layout.paper_bgcolor = this.dataExplorerWidget.baseAppearanceConfig.backgroundColor; + this.graph.layout.plot_bgcolor = this.dataExplorerWidget.baseAppearanceConfig.backgroundColor; + this.graph.layout.font.color = this.dataExplorerWidget.baseAppearanceConfig.textColor; + } + + buildQuery(): DatalakeQueryParameters { + return DatalakeQueryParameterBuilder + .create(this.timeSettings.startTime, this.timeSettings.endTime) + .withAutoAggregation('MEAN') + .withColumnFilter([this.dataExplorerWidget.dataConfig.selectedProperty]) + .build(); + } + + onResize(width: number, height: number) { + this.graph.layout.autosize = false; + (this.graph.layout as any).width = width; + (this.graph.layout as any).height = height; + } + + +} diff --git a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts new file mode 100644 index 0000000..86c107c --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts @@ -0,0 +1,30 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one or more + * contributor license agreements. See the NOTICE file distributed with + * this work for additional information regarding copyright ownership. + * The ASF licenses this file to You under the Apache License, Version 2.0 + * (the "License"); you may not use this file except in compliance with + * the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * + */ + +import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model'; + +export interface HistogramChartDataConfig { + selectedProperty: string; + availableProperties: EventPropertyUnion[]; + numberAggregation: string; + deltaAggregation: string; +} + +export interface HistogramChartWidgetModel extends DataExplorerWidgetModel { + dataConfig: HistogramChartDataConfig; +} diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts index 850d270..9c7e585 100644 --- a/ui/src/app/data-explorer/data-explorer.module.ts +++ b/ui/src/app/data-explorer/data-explorer.module.ts @@ -73,6 +73,8 @@ import { ImageWidgetConfigComponent } from './components/widgets/image/config/im import { DatalakeRestService } from '../platform-services/apis/datalake-rest.service'; import { IndicatorChartWidgetComponent } from './components/widgets/indicator/indicator-chart-widget.component'; import { IndicatorWidgetConfigComponent } from './components/widgets/indicator/config/indicator-chart-widget-config.component'; +import { HistogramChartWidgetComponent } from './components/widgets/histogram/histogram-chart-widget.component'; +import { HistogramWidgetConfigComponent } from './components/widgets/histogram/config/histogram-chart-widget-config.component'; export const MY_NATIVE_FORMATS = { fullPickerInput: { @@ -128,6 +130,8 @@ export const MY_NATIVE_FORMATS = { DataExplorerWidgetAppearanceSettingsComponent, DataExplorerWidgetDataSettingsComponent, TableWidgetComponent, + HistogramChartWidgetComponent, + HistogramWidgetConfigComponent, ImageWidgetComponent, ImageWidgetConfigComponent, IndicatorChartWidgetComponent,
