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 302b225cebff3e7236fa446d0e722819f8b374e3 Author: Dominik Riemer <[email protected]> AuthorDate: Mon Aug 23 11:31:02 2021 +0200 [STREAMPIPES-413] Add density chart to data explorer widgets --- .../data-explorer-designer-panel.component.html | 6 + ...ta-explorer-widget-data-settings.component.html | 3 + .../data-explorer-dashboard-widget.component.html | 16 ++- .../density-chart-widget-config.component.html} | 15 ++- .../density-chart-widget-config.component.scss} | 13 -- .../density-chart-widget-config.component.ts | 47 +++++++ .../density-chart-widget.component.html} | 24 ++-- .../density-chart-widget.component.scss} | 13 -- .../density/density-chart-widget.component.ts | 144 +++++++++++++++++++++ .../model/density-chart-widget.model.ts} | 11 +- .../histogram-chart-widget-config.component.html | 2 +- .../model/histogram-chart-widget.model.ts | 2 - ui/src/app/data-explorer/data-explorer.module.ts | 18 ++- 13 files changed, 257 insertions(+), 57 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 7100555..490e684 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 @@ -71,6 +71,12 @@ [dataLakeMeasure]="dataLakeMeasure"> </sp-data-explorer-indicator-chart-widget-config> </div> + <div *ngIf="currentlyConfiguredWidget.widgetType === 'density-chart'" class="h-100 p-0"> + <sp-data-explorer-density-chart-widget-config + [currentlyConfiguredWidget]="currentlyConfiguredWidget" + [dataLakeMeasure]="dataLakeMeasure"> + </sp-data-explorer-density-chart-widget-config> + </div> </div> <div *ngIf="selectedIndex == 2"> <sp-data-explorer-widget-appearance-settings 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 a4a5c4d..8c7543b 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,6 +45,9 @@ <mat-form-field color="accent" fxFlex="100"> <mat-label>Select visualization</mat-label> <mat-select [(value)]="currentlyConfiguredWidget.widgetType"> + <mat-option [value]="'density-chart'"> + <span class="pipeline-name">Density</span> + </mat-option> <mat-option [value]="'histogram-chart'"> <span class="pipeline-name">Histogram</span> </mat-option> 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 40fc44b..174f729 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 @@ -17,7 +17,8 @@ --> <div class="h-100 shadow"> - <div class="box" [ngStyle]="{background: configuredWidget.baseAppearanceConfig.backgroundColor, color: configuredWidget.baseAppearanceConfig.textColor}"> + <div class="box" + [ngStyle]="{background: configuredWidget.baseAppearanceConfig.backgroundColor, color: configuredWidget.baseAppearanceConfig.textColor}"> <div class="widget-header h-40"> <div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" class="widget-header-text"> {{ configuredWidget.baseAppearanceConfig.widgetTitle }} @@ -107,6 +108,19 @@ class="h-100"> </sp-data-explorer-histogram-chart-widget> </div> + <div *ngIf="configuredWidget.widgetType === 'density-chart'" class="h-100 p-0"> + <sp-data-explorer-density-chart-widget + (removeWidgetCallback)="removeWidget()" + [timeSettings]="timeSettings" + [gridsterItem]="dashboardItem" + [gridsterItemComponent]="gridsterItemComponent" + [editMode]="editMode" + [dataViewDashboardItem]="dashboardItem" + [dataExplorerWidget]="configuredWidget" + [dataLakeMeasure]="dataLakeMeasure" + class="h-100"> + </sp-data-explorer-density-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/density/config/density-chart-widget-config.component.html similarity index 64% copy from ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html copy to ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.html index 3701a74..98e285b 100644 --- a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html +++ b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.html @@ -17,10 +17,19 @@ --> <div fxFlex="100" fxLayout="column"> - <h5>Indicator Field</h5> + <h5>First 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-label>Select first field</mat-label> + <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.firstField" (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> + <h5>First Field</h5> + <mat-form-field color="accent" fxFlex="100"> + <mat-label>Select second field</mat-label> + <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.secondField" (selectionChange)="setSelectedProperties($event)"> <mat-option [value]="property.runtimeName" *ngFor="let property of currentlyConfiguredWidget.dataConfig.availableProperties"> <span class="pipeline-name">{{ property.runtimeName }}</span> </mat-option> 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/density/config/density-chart-widget-config.component.scss similarity index 66% copy from ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts copy to ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.scss index 86c107c..13cbc4a 100644 --- a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts +++ b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.scss @@ -15,16 +15,3 @@ * 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/components/widgets/density/config/density-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.ts new file mode 100644 index 0000000..338fb39 --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/density/config/density-chart-widget-config.component.ts @@ -0,0 +1,47 @@ +/* + * 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 { DensityChartWidgetModel } from '../model/density-chart-widget.model'; + +@Component({ + selector: 'sp-data-explorer-density-chart-widget-config', + templateUrl: './density-chart-widget-config.component.html', + styleUrls: ['./density-chart-widget-config.component.scss'] +}) +export class DensityWidgetConfigComponent extends BaseWidgetConfig<DensityChartWidgetModel> implements OnInit { + + ngOnInit(): void { + this.updateWidgetConfigOptions(); + } + + setSelectedProperties(selectedColumn: EventPropertyUnion) { + if (this.currentlyConfiguredWidget.dataConfig.firstField && this.currentlyConfiguredWidget.dataConfig.secondField) { + 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/config/histogram-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.html similarity index 53% copy from ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html copy to ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.html index 3701a74..202fb78 100644 --- a/ui/src/app/data-explorer/components/widgets/histogram/config/histogram-chart-widget-config.component.html +++ b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.html @@ -16,15 +16,17 @@ ~ --> -<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> +<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/model/histogram-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.scss similarity index 66% copy from ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts copy to ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.scss index 86c107c..13cbc4a 100644 --- a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts +++ b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.scss @@ -15,16 +15,3 @@ * 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/components/widgets/density/density-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.ts new file mode 100644 index 0000000..35aafeb --- /dev/null +++ b/ui/src/app/data-explorer/components/widgets/density/density-chart-widget.component.ts @@ -0,0 +1,144 @@ +/* + * 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 } from 'rxjs'; +import { DensityChartWidgetModel } from './model/density-chart-widget.model'; + +@Component({ + selector: 'sp-data-explorer-density-chart-widget', + templateUrl: './density-chart-widget.component.html', + styleUrls: ['./density-chart-widget.component.scss'] +}) +export class DensityChartWidgetComponent extends BaseDataExplorerWidget<DensityChartWidgetModel> implements OnInit { + + data = [ + { + x: [], + y: [], + mode: 'markers', + name: 'points', + marker: { + color: 'rgb(102,0,0)', + size: 2, + opacity: 0.4 + }, + type: 'scatter' + }, + { + x: [], + y: [], + name: 'density', + ncontours: 20, + colorscale: 'Hot', + reversescale: true, + showscale: false, + type: 'histogram2dcontour' + } + ]; + + graph = { + layout: { + xaxis: { + title: { + text: '' + } + }, + yaxis: { + title: { + text: '' + } + }, + 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); + this.updateAppearance(); + }); + } + + 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, 1); + this.data[1].x = this.transform(result.rows, 1); + this.data[0].y = this.transform(result.rows, 2); + this.data[1].y = this.transform(result.rows, 2); + } + + transform(rows, index: number): any[] { + return rows.map(row => row[index]); + } + + 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; + this.graph.layout.xaxis.title.text = this.dataExplorerWidget.dataConfig.firstField; + this.graph.layout.yaxis.title.text = this.dataExplorerWidget.dataConfig.secondField; + } + + buildQuery(): DatalakeQueryParameters { + return DatalakeQueryParameterBuilder + .create(this.timeSettings.startTime, this.timeSettings.endTime) + .withAutoAggregation('MEAN') + .withColumnFilter([this.dataExplorerWidget.dataConfig.firstField, this.dataExplorerWidget.dataConfig.secondField]) + .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/density/model/density-chart-widget.model.ts similarity index 79% copy from ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts copy to ui/src/app/data-explorer/components/widgets/density/model/density-chart-widget.model.ts index 86c107c..87a567b 100644 --- a/ui/src/app/data-explorer/components/widgets/histogram/model/histogram-chart-widget.model.ts +++ b/ui/src/app/data-explorer/components/widgets/density/model/density-chart-widget.model.ts @@ -18,13 +18,12 @@ import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model'; -export interface HistogramChartDataConfig { - selectedProperty: string; +export interface DensityChartDataConfig { + firstField: string; + secondField: string; availableProperties: EventPropertyUnion[]; - numberAggregation: string; - deltaAggregation: string; } -export interface HistogramChartWidgetModel extends DataExplorerWidgetModel { - dataConfig: HistogramChartDataConfig; +export interface DensityChartWidgetModel extends DataExplorerWidgetModel { + dataConfig: DensityChartDataConfig; } 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 index 3701a74..6cb6338 100644 --- 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 @@ -17,7 +17,7 @@ --> <div fxFlex="100" fxLayout="column"> - <h5>Indicator Field</h5> + <h5>Histogram Field</h5> <mat-form-field color="accent" fxFlex="100"> <mat-label>Select Field</mat-label> <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.selectedProperty" (selectionChange)="setSelectedProperties($event)"> 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 index 86c107c..78ce0dc 100644 --- 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 @@ -21,8 +21,6 @@ import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core export interface HistogramChartDataConfig { selectedProperty: string; availableProperties: EventPropertyUnion[]; - numberAggregation: string; - deltaAggregation: string; } export interface HistogramChartWidgetModel extends DataExplorerWidgetModel { diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts index 9c7e585..01e9abb 100644 --- a/ui/src/app/data-explorer/data-explorer.module.ts +++ b/ui/src/app/data-explorer/data-explorer.module.ts @@ -75,6 +75,8 @@ import { IndicatorChartWidgetComponent } from './components/widgets/indicator/in 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'; +import { DensityChartWidgetComponent } from './components/widgets/density/density-chart-widget.component'; +import { DensityWidgetConfigComponent } from './components/widgets/density/config/density-chart-widget-config.component'; export const MY_NATIVE_FORMATS = { fullPickerInput: { @@ -120,6 +122,8 @@ export const MY_NATIVE_FORMATS = { MatChipsModule ], declarations: [ + AggregateConfigurationComponent, + DataDownloadDialog, DataExplorerComponent, DataExplorerDashboardGridComponent, DataExplorerDashboardOverviewComponent, @@ -129,7 +133,9 @@ export const MY_NATIVE_FORMATS = { DataExplorerEditDataViewDialogComponent, DataExplorerWidgetAppearanceSettingsComponent, DataExplorerWidgetDataSettingsComponent, - TableWidgetComponent, + DensityChartWidgetComponent, + DensityWidgetConfigComponent, + GroupConfigurationComponent, HistogramChartWidgetComponent, HistogramWidgetConfigComponent, ImageWidgetComponent, @@ -138,14 +144,12 @@ export const MY_NATIVE_FORMATS = { IndicatorWidgetConfigComponent, LineChartWidgetComponent, LineChartWidgetConfigComponent, - TimeRangeSelectorComponent, - NoDataInDateRangeComponent, LoadDataSpinnerComponent, - DataDownloadDialog, + NoDataInDateRangeComponent, SelectPropertiesComponent, - AggregateConfigurationComponent, - GroupConfigurationComponent, - TableWidgetConfigComponent + TableWidgetComponent, + TableWidgetConfigComponent, + TimeRangeSelectorComponent, ], providers: [ DatalakeRestService,
