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/08 09:28:31 UTC
[incubator-streampipes] branch dev updated: Add aggregation
configuration to line-chart
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 8f59513 Add aggregation configuration to line-chart
8f59513 is described below
commit 8f5951378aab3486997eb1dd42929f12793a02f6
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Jun 8 11:28:06 2020 +0200
Add aggregation configuration to line-chart
---
.../rest/impl/datalake/DataLakeResourceV3.java | 6 ---
.../line-chart/line-chart-widget.component.html | 19 +++++++--
.../line-chart/line-chart-widget.component.ts | 10 ++---
.../aggregate-configuration.component.css} | 1 +
.../aggregate-configuration.component.html | 47 ++++++++++++++++++++++
.../aggregate-configuration.component.ts} | 31 ++++++++++++++
.../select-properties.component.css | 4 ++
.../select-properties.component.html | 2 +-
.../data-explorer-v2/data-explorer-v2.module.ts | 6 ++-
9 files changed, 108 insertions(+), 18 deletions(-)
diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java
index 846c577..285a65d 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java
@@ -18,7 +18,6 @@
package org.apache.streampipes.rest.impl.datalake;
-import com.google.gson.Gson;
import org.apache.streampipes.model.client.messages.Notification;
import org.apache.streampipes.model.datalake.DataLakeMeasure;
import org.apache.streampipes.rest.impl.AbstractRestInterface;
@@ -28,15 +27,10 @@ import org.apache.streampipes.rest.impl.datalake.model.PageResult;
import org.apache.streampipes.rest.shared.annotation.GsonWithIds;
import org.apache.streampipes.rest.shared.annotation.JsonLdSerialized;
import org.apache.streampipes.rest.shared.util.SpMediaType;
-import org.influxdb.InfluxDB;
-import org.influxdb.dto.Point;
import java.io.IOException;
import java.text.ParseException;
-import java.util.ArrayList;
import java.util.List;
-import java.util.Map;
-import java.util.concurrent.TimeUnit;
import javax.ws.rs.*;
import javax.ws.rs.core.Context;
diff --git a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html
index 7eba186..3d2ce8c 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html
+++ b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.html
@@ -18,14 +18,25 @@
<div fxLayout="column" fxLayoutAlign="stretch">
<div class="assemblyOptions sp-blue-bg m-0 row header h-40" style="margin-left: 0px;margin-right: 0px;margin-top: 0px;">
+
<div fxFlex="100" layout="row" fxLayoutAlign="end center" style="margin-left: 0px;margin-right: 0px;">
- <sp-select-properties (changeSelectedProperties)="setSelectedColumn($event)" [availableProperties]="availableColumns" [selectedProperties]="selectedColumns"></sp-select-properties>
+ <sp-select-properties
+ style="margin-right: 10px;"
+ (changeSelectedProperties)="setSelectedColumn($event)"
+ [availableProperties]="availableColumns"
+ [selectedProperties]="selectedColumns">
+ </sp-select-properties>
+
+ <sp-aggregate-configuration
+ (update)="changeResolution($event)">
+ </sp-aggregate-configuration>
+
<button mat-icon-button matTooltip="Download data" class="icon" (click)="downloadDataAsFile()" color="white">
<i class="material-icons">get_app</i>
</button>
- <button mat-button mat-icon-button color="white" (click)="changeResolution()">
- <i class="material-icons">autorenew</i>
- </button>
+<!-- <button mat-button mat-icon-button color="white" (click)="changeResolution()">-->
+<!-- <i class="material-icons">autorenew</i>-->
+<!-- </button>-->
<button mat-button mat-icon-button color="white" (click)="removeWidget()">
<i class="material-icons">clear</i>
</button>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
index 1032e05..c6fb162 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
@@ -51,7 +51,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
// indicator variable if labeling mode is activated
private labelingModeOn = false;
-
+
private dialogReference = undefined;
updatemenus = [
@@ -133,13 +133,13 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.updateData();
}
- changeResolution() {
- console.log('Change Resolution');
-
+ changeResolution(event) {
+ const aggregationTimeUnit = event['aggregationTimeUnit'];
+ const aggregationValue = event['aggregationValue'];
this.setShownComponents(false, false, true);
this.dataLakeRestService.getData(
this.dataExplorerWidget.dataLakeMeasure.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime()
- , 's', 1)
+ , aggregationTimeUnit, aggregationValue)
.subscribe((res: DataResult) => {
if (res.total === 0) {
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css b/ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.css
similarity index 99%
copy from ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
copy to ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.css
index 13cbc4a..58ba04b 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.css
@@ -15,3 +15,4 @@
* limitations under the License.
*
*/
+
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html b/ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html
new file mode 100644
index 0000000..6511b49
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.html
@@ -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.
+ ~
+ -->
+
+
+<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>
+ <div *ngIf="autoAggregationActive" class="option" style="margin-left: 5px">
+ <mat-form-field style="width: 80px; margin-right: 5px">
+ <input matInput type="number" [(ngModel)]="aggregationValue">
+ <mat-label>Value</mat-label>
+ </mat-form-field>
+ <mat-form-field style="width: 100px">
+ <mat-select [(value)]="aggregationTimeUnit">
+ <mat-option style="background-color: #FFFFFF" value="ms">Milliseconds</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="s">Second</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="m">Minute</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="h">Hour</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="d">Day</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="w">Week</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="month">Month</mat-option>
+ <mat-option style="background-color: #FFFFFF" value="year">Year</mat-option>
+ </mat-select>
+ <mat-label>Unit</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-v2/components/widgets/utils/select-properties/select-properties.component.css b/ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.ts
similarity index 51%
copy from ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
copy to ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.ts
index 13cbc4a..8c55450 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/aggregate-configuration/aggregate-configuration.component.ts
@@ -15,3 +15,34 @@
* limitations under the License.
*
*/
+
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { EventProperty } from '../../../../../connect/schema-editor/model/EventProperty';
+
+@Component({
+ selector: 'sp-aggregate-configuration',
+ templateUrl: './aggregate-configuration.component.html',
+ styleUrls: ['./aggregate-configuration.component.css']
+})
+export class AggregateConfigurationComponent implements OnInit {
+
+ aggregationValue = 1;
+
+ aggregationTimeUnit = 's';
+
+ autoAggregationActive = false;
+
+ @Output()
+ update: EventEmitter<any> = new EventEmitter();
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+ updateData() {
+ this.update.emit({'aggregationValue': this.aggregationValue, 'aggregationTimeUnit': this.aggregationTimeUnit});
+ }
+
+
+}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
index 13cbc4a..4cd1a79 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.css
@@ -15,3 +15,7 @@
* limitations under the License.
*
*/
+
+/deep/ .mat-form-field-wrapper {
+ padding-bottom: 0em;
+}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.html b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.html
index f0a71b5..14c0ef0 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.html
+++ b/ui/src/app/data-explorer-v2/components/widgets/utils/select-properties/select-properties.component.html
@@ -16,7 +16,7 @@
~
-->
-<mat-form-field appearance="outline">
+<mat-form-field appearance="outline" class="sp_form_field_wrapper">
<mat-label>Select Columns</mat-label>
<mat-select [ngModel]="this.selectedProperties" (selectionChange)="triggerSelectedProperties($event.value)" multiple>
<mat-option *ngFor="let column of availableProperties" [value]="column" style="background-color: #FFFFFF">
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
index 91ec75f..eacb161 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
@@ -42,6 +42,7 @@ import { CoreUiModule } from '../core-ui/core-ui.module';
import { LabelingToolModule } from '../core-ui/linechart/labeling-tool/labeling-tool.module';
import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
import { ElementIconText } from '../services/get-element-icon-text.service';
+import { DataDownloadDialog } from './components/datadownloadDialog/dataDownload.dialog';
import { DataExplorerDashboardGridComponent } from './components/grid/data-explorer-dashboard-grid.component';
import { DataExplorerDashboardOverviewComponent } from './components/overview/data-explorer-dashboard-overview.component';
import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component';
@@ -50,6 +51,7 @@ import { DataExplorerDashboardWidgetComponent } from './components/widget/data-e
import { ImageWidgetComponent } from './components/widgets/image/image-widget.component';
import { LineChartWidgetComponent } from './components/widgets/line-chart/line-chart-widget.component';
import { TableWidgetComponent } from './components/widgets/table/table-widget.component';
+import { AggregateConfigurationComponent } from './components/widgets/utils/aggregate-configuration/aggregate-configuration.component';
import { LoadDataSpinnerComponent } from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
import { NoDataInDateRangeComponent } from './components/widgets/utils/no-data/no-data-in-date-range.component';
import { SelectPropertiesComponent } from './components/widgets/utils/select-properties/select-properties.component';
@@ -60,7 +62,6 @@ 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 { DataDownloadDialog } from './components/datadownloadDialog/dataDownload.dialog';
const dashboardWidgets = [
@@ -122,7 +123,8 @@ export const MY_NATIVE_FORMATS = {
NoDataInDateRangeComponent,
LoadDataSpinnerComponent,
DataDownloadDialog,
- SelectPropertiesComponent
+ SelectPropertiesComponent,
+ AggregateConfigurationComponent
],
providers: [
SharedDatalakeRestService,