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/23 09:31:15 UTC
[incubator-streampipes] 01/02: [STREAMPIPES-412] Add histogram
widget to data explorer
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 <ri...@fzi.de>
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,