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 2022/03/01 13:24:06 UTC
[incubator-streampipes] branch rel/0.69.0 updated (14046f2 -> 18bc1be)
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a change to branch rel/0.69.0
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
from 14046f2 [hotfix] Add release notes for upcoming version
new eba6ae5 [STREAMPIPES-513] Add widget to visualize distribution as heatmap
new 18bc1be [hotfix] Deactivate visualization tab until data source is selected
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
.../data-explorer-designer-panel.component.html | 2 +-
.../data-explorer-dashboard-panel.component.ts | 1 +
...distribution-chart-widget-config.component.html | 9 ++
.../distribution-chart-widget-config.component.ts | 6 +
.../distribution-chart-widget.component.html | 10 +-
.../distribution-chart-widget.component.ts | 7 +
.../model/distribution-chart-widget.model.ts | 1 +
.../value-heatmap/value-heatmap.component.html} | 12 +-
.../value-heatmap/value-heatmap.component.scss} | 0
.../value-heatmap/value-heatmap.component.ts | 160 +++++++++++++++++++++
ui/src/app/data-explorer/data-explorer.module.ts | 2 +
11 files changed, 202 insertions(+), 8 deletions(-)
copy ui/src/app/{dashboard/components/widgets/image/image-widget.component.html => data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.html} (78%)
copy ui/src/app/{login/components/set-new-password/set-new-password.component.scss => data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.scss} (100%)
create mode 100644 ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.ts
[incubator-streampipes] 01/02: [STREAMPIPES-513] Add widget to visualize distribution as heatmap
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch rel/0.69.0
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit eba6ae5d82c6e08b49d48d2b4bad3723aa29a2ec
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Mar 1 14:20:20 2022 +0100
[STREAMPIPES-513] Add widget to visualize distribution as heatmap
---
...distribution-chart-widget-config.component.html | 9 ++
.../distribution-chart-widget-config.component.ts | 6 +
.../distribution-chart-widget.component.html | 10 +-
.../distribution-chart-widget.component.ts | 7 +
.../model/distribution-chart-widget.model.ts | 1 +
.../value-heatmap/value-heatmap.component.html | 26 ++++
.../value-heatmap.component.scss} | 15 --
.../value-heatmap/value-heatmap.component.ts | 160 +++++++++++++++++++++
ui/src/app/data-explorer/data-explorer.module.ts | 2 +
9 files changed, 220 insertions(+), 16 deletions(-)
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.html
index 545ec7b..b0d367d 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.html
@@ -26,6 +26,7 @@
(selectionChange)="updateDisplayType($event.value)">
<mat-option [value]="'histogram'">Histogram</mat-option>
<mat-option [value]="'pie'">Pie</mat-option>
+ <mat-option [value]="'heatmap'">Value Heatmap</mat-option>
</mat-select>
</mat-form-field>
@@ -53,5 +54,13 @@
</mat-select>
</mat-form-field>
+ <div *ngIf="currentlyConfiguredWidget.visualizationConfig.displayType === 'heatmap'">
+ <mat-form-field fxFlex="100" color="accent">
+ <mat-label>
+ <span>Resolution</span></mat-label>
+ <input [(ngModel)]="currentlyConfiguredWidget.visualizationConfig.resolution" matInput (input)="onResolutionChange($event.target.value)">
+ </mat-form-field>
+ </div>
+
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.ts
index 32960ab..7e645c2 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/config/distribution-chart-widget-config.component.ts
@@ -49,6 +49,11 @@ export class DistributionWidgetConfigComponent
this.triggerDataRefresh();
}
+ onResolutionChange(resolution: number): void {
+ this.currentlyConfiguredWidget.visualizationConfig.resolution = resolution;
+ this.triggerDataRefresh();
+ }
+
protected getWidgetType(): WidgetType {
return WidgetType.DistributionChart;
}
@@ -59,6 +64,7 @@ export class DistributionWidgetConfigComponent
selectedProperty: this.fieldProvider.nonNumericFields[0],
displayType: 'histogram',
roundingValue: 0.1,
+ resolution: 1
};
}
}
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html
index 074d1fa..ce9d36e 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.html
@@ -28,11 +28,19 @@
(loadDataWithTooManyEventsEmitter)="loadDataWithTooManyEvents()"
*ngIf="showTooMuchData"></sp-too-much-data>
- <plotly-plot *ngIf="showData"
+ <plotly-plot *ngIf="showData && !(dataExplorerWidget.visualizationConfig.displayType === 'heatmap')"
[divId]="dataExplorerWidget._id"
class="plotly-container"
[data]="data"
[layout]="graph.layout"
[config]="graph.config">
</plotly-plot>
+
+ <sp-data-explorer-value-heatmap-widget *ngIf="showData && (dataExplorerWidget.visualizationConfig.displayType === 'heatmap')"
+ [currentWidth]="currentWidth"
+ [currentHeight]="currentHeight"
+ [widgetConfig]="dataExplorerWidget"
+ [data]="latestData">
+
+ </sp-data-explorer-value-heatmap-widget>
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts
index 7d98eea..faf77b1 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/distribution-chart-widget.component.ts
@@ -29,11 +29,15 @@ import { DataExplorerField, SpQueryResult } from '@streampipes/platform-services
export class DistributionChartWidgetComponent extends BaseDataExplorerWidgetDirective<DistributionChartWidgetModel> implements OnInit {
data = [];
+ latestData: SpQueryResult[];
rowNo = 2;
colNo = 2;
fixedColNo = 2;
+ currentWidth: number;
+ currentHeight: number;
+
graph = {
layout: {
grid: {
@@ -171,6 +175,8 @@ export class DistributionChartWidgetComponent extends BaseDataExplorerWidgetDire
}
onResize(width: number, height: number) {
+ this.currentWidth = width;
+ this.currentHeight = height;
this.graph.layout.autosize = false;
(this.graph.layout as any).width = width;
(this.graph.layout as any).height = height;
@@ -181,6 +187,7 @@ export class DistributionChartWidgetComponent extends BaseDataExplorerWidgetDire
onDataReceived(spQueryResult: SpQueryResult[]) {
this.prepareData(spQueryResult);
+ this.latestData = spQueryResult;
this.setShownComponents(false, true, false, false);
}
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/model/distribution-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/distribution-chart/model/distribution-chart-widget.model.ts
index 8aeb979..3aa2735 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/model/distribution-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/model/distribution-chart-widget.model.ts
@@ -24,6 +24,7 @@ export interface DistributionChartVisConfig extends DataExplorerVisConfig {
selectedProperty: DataExplorerField;
displayType: string;
roundingValue: number;
+ resolution: number;
}
export interface DistributionChartWidgetModel extends DataExplorerWidgetModel {
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.html b/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.html
new file mode 100644
index 0000000..424dfae
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.html
@@ -0,0 +1,26 @@
+<!--
+ ~ 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">
+ <div echarts [options]="option"
+ [ngStyle]="{'width': currentWidth_, 'height': '100%'}"
+ (chartInit)="onChartInit($event)"
+ [merge]= "dynamic"
+ *ngIf="configReady">
+ </div>
+</div>
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/model/distribution-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.scss
similarity index 59%
copy from ui/src/app/data-explorer/components/widgets/distribution-chart/model/distribution-chart-widget.model.ts
copy to ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.scss
index 8aeb979..13cbc4a 100644
--- a/ui/src/app/data-explorer/components/widgets/distribution-chart/model/distribution-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.scss
@@ -15,18 +15,3 @@
* limitations under the License.
*
*/
-
-import { DataExplorerDataConfig, DataExplorerField, DataExplorerWidgetModel } from '@streampipes/platform-services';
-import { DataExplorerVisConfig } from '../../../../models/dataview-dashboard.model';
-
-
-export interface DistributionChartVisConfig extends DataExplorerVisConfig {
- selectedProperty: DataExplorerField;
- displayType: string;
- roundingValue: number;
-}
-
-export interface DistributionChartWidgetModel extends DataExplorerWidgetModel {
- dataConfig: DataExplorerDataConfig;
- visualizationConfig: DistributionChartVisConfig;
-}
diff --git a/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.ts b/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.ts
new file mode 100644
index 0000000..80ddfd6
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/distribution-chart/value-heatmap/value-heatmap.component.ts
@@ -0,0 +1,160 @@
+/*
+ * 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, Input, OnInit } from '@angular/core';
+import { EChartsOption } from 'echarts';
+import { ECharts } from "echarts/core";
+import { DataExplorerWidgetModel, SpQueryResult } from "../../../../../../../dist/streampipes/platform-services";
+import { DistributionChartWidgetModel } from "../model/distribution-chart-widget.model";
+
+@Component({
+ selector: 'sp-data-explorer-value-heatmap-widget',
+ templateUrl: './value-heatmap.component.html',
+ styleUrls: ['./value-heatmap.component.scss']
+})
+export class SpValueHeatmapComponent implements OnInit {
+
+ currentWidth_: number;
+ currentHeight_: number;
+ data_: SpQueryResult[];
+
+ @Input()
+ widgetConfig: DistributionChartWidgetModel;
+
+ configReady = true;
+ option = {
+ tooltip: {},
+ xAxis: {
+ type: 'category',
+ data: [0, 1, 2, 3, 4, 5]
+ },
+ yAxis: {
+ type: 'category',
+ data: [0]
+ },
+ visualMap: {
+ min: 0,
+ max: 1,
+ calculable: true,
+ realtime: false,
+ inRange: {
+ color: [
+ '#313695',
+ '#4575b4',
+ '#74add1',
+ '#abd9e9',
+ '#e0f3f8',
+ '#ffffbf',
+ '#fee090',
+ '#fdae61',
+ '#f46d43',
+ '#d73027',
+ '#a50026'
+ ]
+ }
+ },
+ series: [
+ {
+ name: 'Gaussian',
+ type: 'heatmap',
+ data: [[1, 0, 0.2], [2, 0, 0.4]],
+ emphasis: {
+ itemStyle: {
+ borderColor: '#333',
+ borderWidth: 1
+ }
+ },
+ animation: false
+ }
+ ]
+ };
+
+ dynamic: EChartsOption;
+
+ eChartsInstance: ECharts;
+
+ ngOnInit(): void {
+ }
+
+ onChartInit(ec: ECharts) {
+ this.eChartsInstance = ec;
+ this.applySize(this.currentWidth_, this.currentHeight_);
+ this.initOptions();
+ }
+
+ initOptions() {
+ const dataResult = [];
+ const resolution: number = +this.widgetConfig.visualizationConfig.resolution;
+ const allRows = this.data_[0].allDataSeries[0].rows;
+ const allValues = allRows.map(row => row[1]);
+ const total = allValues.length;
+ let currentCount = 0;
+ allValues.sort((a, b) => (a - b));
+ let start = allValues[0];
+ for (let i = 0; i < allValues.length; i++) {
+ const value = allValues[i];
+ if (value < (start + resolution)) {
+ currentCount += 1;
+ }
+ if (value >= (start + resolution) || (i + 1) === allValues.length) {
+ const currentRange = start.toFixed(2) + '-' + ((i + 1) < allValues.length ? (allValues[i + 1]).toFixed(2) : '');
+ dataResult.push([currentRange, 0, ((currentCount + 1) / total)]);
+ currentCount = 0;
+ start = allValues[i + 1];
+ }
+ }
+ this.option.xAxis.data = dataResult.map(r => r[0]);
+ this.option.series[0].data = dataResult;
+ }
+
+ applySize(width: number, height: number) {
+ if (this.eChartsInstance) {
+ this.eChartsInstance.resize({ width, height });
+ }
+ }
+
+ @Input()
+ set currentWidth(currentWidth: number) {
+ this.currentWidth_ = currentWidth;
+ this.applySize(this.currentWidth_, this.currentHeight_);
+ }
+
+ get currentWidth() {
+ return this.currentWidth_;
+ }
+
+ @Input()
+ set currentHeight(currentHeight: number) {
+ this.currentHeight_ = currentHeight;
+ this.applySize(this.currentWidth_, this.currentHeight_);
+ }
+
+ get currentHeight() {
+ return this.currentHeight_;
+ }
+
+ @Input()
+ set data(data: SpQueryResult[]) {
+ this.data_ = data;
+ this.initOptions();
+ }
+
+ get data() {
+ return this.data_;
+ }
+}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index df58002..0e6020a 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -100,6 +100,7 @@ import { CorrelationWidgetConfigComponent } from './components/widgets/correlati
import { TimeSelectionService } from './services/time-selection.service';
import { NgxEchartsModule } from 'ngx-echarts';
import { TooMuchDataComponent } from './components/widgets/utils/too-much-data/too-much-data.component';
+import { SpValueHeatmapComponent } from "./components/widgets/distribution-chart/value-heatmap/value-heatmap.component";
export const MY_NATIVE_FORMATS = {
fullPickerInput: {
@@ -185,6 +186,7 @@ export const MY_NATIVE_FORMATS = {
SelectPropertiesComponent,
SelectColorPropertiesComponent,
SelectPropertyComponent,
+ SpValueHeatmapComponent,
TableWidgetComponent,
TableWidgetConfigComponent,
MapWidgetConfigComponent,
[incubator-streampipes] 02/02: [hotfix] Deactivate visualization tab until data source is selected
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch rel/0.69.0
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 18bc1be0dccb2a0295f93cd48bdd6ccdfccf89f7
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Tue Mar 1 14:21:44 2022 +0100
[hotfix] Deactivate visualization tab until data source is selected
---
.../designer-panel/data-explorer-designer-panel.component.html | 2 +-
.../components/panel/data-explorer-dashboard-panel.component.ts | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
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 b071ee1..8866e18 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
@@ -31,7 +31,7 @@
<mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectOptionsPanel($event)" color="accent"
class="small">
<mat-tab data-cy="designer-panel-data-config" label="Data"></mat-tab>
- <mat-tab data-cy="designer-panel-visualization-config" label="Visualization"></mat-tab>
+ <mat-tab data-cy="designer-panel-visualization-config" label="Visualization" [disabled]="!currentlyConfiguredWidget.dataConfig.sourceConfigs || currentlyConfiguredWidget.dataConfig.sourceConfigs.length === 0"></mat-tab>
<mat-tab data-cy="designer-panel-appearance-config" label="Appearance"></mat-tab>
</mat-tab-group>
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
index 16974d4..3e214d9 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
@@ -195,6 +195,7 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
this.currentlyConfiguredWidget.baseAppearanceConfig.widgetTitle = 'New Widget';
this.currentlyConfiguredWidget.dataConfig = {};
this.currentlyConfiguredWidget.baseAppearanceConfig.backgroundColor = '#FFFFFF';
+ this.currentlyConfiguredWidget.baseAppearanceConfig.textColor = '#3e3e3e';
this.newWidgetMode = true;
this.showDesignerPanel = true;
this.newWidgetMode = true;