You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2020/06/20 17:45:25 UTC
[incubator-streampipes] 02/02: Working in grouping for line chart
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-79
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit fb2673aa98d2fd006803a4f56927285897e47a95
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Sat Jun 20 19:44:46 2020 +0200
Working in grouping for line chart
---
.../widgets/base/base-data-explorer-widget.ts | 12 ++++
.../line-chart/line-chart-widget.component.html | 5 ++
.../line-chart/line-chart-widget.component.ts | 68 ++++++++++++++++++++++
.../aggregate-configuration.component.html | 2 +-
.../group-configuration.component.css | 18 ++++++
.../group-configuration.component.html | 44 ++++++++++++++
.../group-configuration.component.ts | 54 +++++++++++++++++
ui/src/app/data-explorer/data-explorer.module.ts | 4 +-
8 files changed, 205 insertions(+), 2 deletions(-)
diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts
index bc87317..56923a3 100644
--- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts
+++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts
@@ -98,6 +98,18 @@ export abstract class BaseDataExplorerWidget implements OnChanges {
return propertyKeys;
}
+ getDimenstionProperties(eventSchema: EventSchema) {
+ const result: EventProperty[] = [];
+ eventSchema.eventProperties.forEach(property => {
+ if (property.propertyScope === 'DIMENSION_PROPERTY') {
+ result.push(property);
+ }
+ });
+
+ return result;
+ }
+
+
getTimestampProperty(eventSchema: EventSchema) {
const propertyKeys: string[] = [];
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
index 3d2ce8c..1825d4b 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
@@ -31,6 +31,11 @@
(update)="changeResolution($event)">
</sp-aggregate-configuration>
+ <sp-group-configuration [dimensionProperties]="dimensionProperties"
+ (update)="changeGroupingResolution($event)">
+ </sp-group-configuration>
+
+
<button mat-icon-button matTooltip="Download data" class="icon" (click)="downloadDataAsFile()" color="white">
<i class="material-icons">get_app</i>
</button>
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 f62e8a7..1c473d6 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
@@ -26,6 +26,7 @@ import { ChangeChartmodeDialog } from '../../../../core-ui/linechart/labeling-to
import { LabelingDialog } from '../../../../core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog';
import { ColorService } from '../../../../core-ui/linechart/labeling-tool/services/color.service';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
+import { GroupedDataResult } from '../../../../core-model/datalake/GroupedDataResult';
@Component({
selector: 'sp-data-explorer-line-chart-widget',
@@ -37,6 +38,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
data: any[] = undefined;
availableColumns: EventProperty[] = [];
selectedColumns: EventProperty[] = [];
+ dimensionProperties: EventProperty[] = [];
yKeys: string[] = [];
xKey: string;
@@ -125,6 +127,8 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
ngOnInit(): void {
this.availableColumns = this.getNumericProperty(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
+ this.dimensionProperties = this.getDimenstionProperties(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
+
// Reduce selected columns when more then 6
this.selectedColumns = this.availableColumns.length > 6 ? this.availableColumns.slice(0, 5) : this.availableColumns;
@@ -133,6 +137,36 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.updateData();
}
+ changeGroupingResolution(event) {
+ // TODO next get grouped data from backend
+ const groupValue = event['groupValue'];
+
+ console.log(event);
+ this.dataLakeRestService.getGroupedDataAutoAggergation(
+ this.dataExplorerWidget.dataLakeMeasure.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime()
+ , groupValue)
+ .subscribe((res: GroupedDataResult) => {
+
+ if (res.total === 0) {
+ this.setShownComponents(true, false, false);
+ } else {
+ // res.measureName = this.dataExplorerWidget.dataLakeMeasure.measureName;
+ const tmp = this.transformGroupedData(res, this.xKey);
+ this.data = this.displayGroupedData(tmp, this.yKeys);
+ // this.data['measureName'] = tmp.measureName;
+ // this.data['labels'] = tmp.labels;
+
+ if (this.data['labels'] !== undefined && this.data['labels'].length > 0) {
+ this.addInitialColouredShapesToGraph();
+ }
+
+ this.setShownComponents(false, true, false);
+ }
+
+ }
+ );
+ }
+
changeResolution(event) {
const aggregationTimeUnit = event['aggregationTimeUnit'];
const aggregationValue = event['aggregationValue'];
@@ -218,6 +252,31 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
}
+ displayGroupedData(transformedData: GroupedDataResult, yKeys: string[]) {
+ if (this.yKeys.length > 0) {
+
+ const tmp = [];
+
+ const groupNames = Object.keys(transformedData.dataResults);
+ for (const groupName of groupNames) {
+ const value = transformedData.dataResults[groupName];
+ this.yKeys.forEach(key => {
+ value.rows.forEach(serie => {
+ if (serie.name === key) {
+ serie.name = groupName + ' ' + serie.name;
+ tmp.push(serie);
+ }
+ });
+ });
+ }
+ return tmp;
+
+ } else {
+ return undefined;
+ }
+ }
+
+
transformData(data: DataResult, xKey: string): DataResult {
const tmp: any[] = [];
@@ -263,6 +322,15 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
return data;
}
+ transformGroupedData(data: GroupedDataResult, xKey: string): GroupedDataResult {
+ for (const key in data.dataResults) {
+ const dataResult = data.dataResults[key];
+ dataResult.rows = this.transformData(dataResult, xKey).rows;
+ }
+
+ return data;
+ }
+
setSelectedColumn(selectedColumns: EventProperty[]) {
this.selectedColumns = selectedColumns;
this.yKeys = this.getRuntimeNames(selectedColumns);
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 6511b49..cebc440 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
@@ -19,7 +19,7 @@
<div fxLayout="column" fxLayoutAlign="stretch">
<div fxFlex="100" layout="row" fxLayoutAlign="end center" style="margin-left: 0px;margin-right: 0px;">
- <mat-slide-toggle [(ngModel)]="autoAggregationActive">Group</mat-slide-toggle>
+ <mat-slide-toggle [(ngModel)]="autoAggregationActive">Interval</mat-slide-toggle>
<div *ngIf="autoAggregationActive" class="option" style="margin-left: 5px">
<mat-form-field style="width: 80px; margin-right: 5px">
<input matInput type="number" [(ngModel)]="aggregationValue">
diff --git a/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.css b/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.css
new file mode 100644
index 0000000..58ba04b
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.css
@@ -0,0 +1,18 @@
+/*
+ * 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/utils/group-configuration/group-configuration.component.html b/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.html
new file mode 100644
index 0000000..3c90fe4
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.html
@@ -0,0 +1,44 @@
+<!--
+ ~ 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" fxLayoutAlign="stretch" *ngIf="groupingAvailable">
+ <div fxFlex="100" layout="row" fxLayoutAlign="end center" style="margin-left: 10px;margin-right: 0px;">
+ <mat-slide-toggle [(ngModel)]="groupingActive">Group</mat-slide-toggle>
+ <div *ngIf="groupingActive" class="option" style="margin-left: 5px">
+ <mat-form-field style="width: 100px">
+ <mat-select [(value)]="groupValue">
+ <mat-option
+ style="background-color: #FFFFFF" value="None">
+ None
+ </mat-option>
+ <mat-option
+ *ngFor="let property of this.dimensionProperties"
+ style="background-color: #FFFFFF" value="{{property.runtimeName}}">
+ {{property.runtimeName}}
+ </mat-option>
+ </mat-select>
+ <mat-label>Dimension</mat-label>
+ </mat-form-field>
+<!-- <button mat-button mat-icon-button color="white" (click)="removeWidget()">-->
+ <button (click)="updateData()" mat-button mat-icon-button color="white">
+ <i class="material-icons">autorenew</i>
+ </button>
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.ts b/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.ts
new file mode 100644
index 0000000..b4abe2c
--- /dev/null
+++ b/ui/src/app/data-explorer/components/widgets/utils/group-configuration/group-configuration.component.ts
@@ -0,0 +1,54 @@
+/*
+ * 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, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventProperty } from '../../../../../connect/schema-editor/model/EventProperty';
+
+@Component({
+ selector: 'sp-group-configuration',
+ templateUrl: './group-configuration.component.html',
+ styleUrls: ['./group-configuration.component.css']
+})
+export class GroupConfigurationComponent implements OnInit {
+
+ groupingAvailable = true;
+ groupingActive = false;
+
+ groupValue = 'None';
+
+ @Output()
+ update: EventEmitter<any> = new EventEmitter();
+
+ @Input()
+ dimensionProperties: EventProperty[];
+
+ constructor() {
+ }
+
+ ngOnInit(): void {
+ if (this.dimensionProperties.length === 0) {
+ this.groupingAvailable = false;
+ }
+ }
+
+ updateData() {
+ this.update.emit({'groupValue': this.groupValue});
+ }
+
+
+}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 11ac4ab..2f4424c 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -63,6 +63,7 @@ import { DataLakeService } from './services/data-lake.service';
import { DataViewDataExplorerService } from './services/data-view-data-explorer.service';
import { RefreshDashboardService } from './services/refresh-dashboard.service';
import { ResizeService } from './services/resize.service';
+import { GroupConfigurationComponent } from './components/widgets/utils/group-configuration/group-configuration.component';
const dashboardWidgets = [
@@ -125,7 +126,8 @@ export const MY_NATIVE_FORMATS = {
LoadDataSpinnerComponent,
DataDownloadDialog,
SelectPropertiesComponent,
- AggregateConfigurationComponent
+ AggregateConfigurationComponent,
+ GroupConfigurationComponent
],
providers: [
DatalakeRestService,