streampipes-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From zehn...@apache.org
Subject [incubator-streampipes] branch dev updated: data explorer improvement - add data explorer short time selection: 1 hour - line chart reload data if zooming
Date Wed, 04 Dec 2019 15:10:51 GMT
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 e083dd2  data explorer improvement - add data explorer short time selection: 1 hour
- line chart reload data if zooming
e083dd2 is described below

commit e083dd2e30d793190897c932cc4e7e4fdc311521
Author: tex <tex@fzi.de>
AuthorDate: Wed Dec 4 15:55:24 2019 +0100

    data explorer improvement
    - add data explorer short time selection: 1 hour
    - line chart reload data if zooming
---
 .../app/core-ui/linechart/lineChart.component.html |  3 ++-
 .../app/core-ui/linechart/lineChart.component.ts   |  7 ++++++
 .../data-explorer/explorer/explorer.component.html |  7 ++++--
 .../data-explorer/explorer/explorer.component.ts   | 28 ++++++++++++++++------
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/ui/src/app/core-ui/linechart/lineChart.component.html b/ui/src/app/core-ui/linechart/lineChart.component.html
index 669cded..139465e 100644
--- a/ui/src/app/core-ui/linechart/lineChart.component.html
+++ b/ui/src/app/core-ui/linechart/lineChart.component.html
@@ -16,7 +16,8 @@
                 *ngIf="dataToDisplay !== undefined"
                 flex
                 [data]="dataToDisplay"
-                [layout]="graph.layout">
+                [layout]="graph.layout"
+                (relayout)="zoomIn($event)">
         </plotly-plot>
 
         <div *ngIf="enablePaging" fxFlex="5">
diff --git a/ui/src/app/core-ui/linechart/lineChart.component.ts b/ui/src/app/core-ui/linechart/lineChart.component.ts
index 2776968..0a6e52a 100644
--- a/ui/src/app/core-ui/linechart/lineChart.component.ts
+++ b/ui/src/app/core-ui/linechart/lineChart.component.ts
@@ -11,6 +11,8 @@ import {GroupedDataResult} from '../../core-model/datalake/GroupedDataResult';
 })
 export class LineChartComponent extends BaseChartComponent implements OnChanges {
 
+    @Output() zoomEvent =  new EventEmitter<[number, number]>();
+
     constructor() {
         super();
     }
@@ -172,4 +174,9 @@ export class LineChartComponent extends BaseChartComponent implements
OnChanges
     stopDisplayData() {
     }
 
+  zoomIn($event) {
+        console.log();
+        this.zoomEvent.emit([$event["xaxis.range[0]"], $event["xaxis.range[1]"]])
+  }
+
 }
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/explorer/explorer.component.html b/ui/src/app/data-explorer/explorer/explorer.component.html
index c11f28f..07e6ef4 100644
--- a/ui/src/app/data-explorer/explorer/explorer.component.html
+++ b/ui/src/app/data-explorer/explorer/explorer.component.html
@@ -33,6 +33,8 @@
                             </mat-option>
                         </mat-select>
                     </mat-form-field>
+                    <button mat-button mat-stroked-button *ngIf="selectedTimeUnit !==
'1 Hour'" (click)="selectTimeUnit('1 Hour')">1 Hour</button>
+                    <button mat-button mat-stroked-button *ngIf="selectedTimeUnit ===
'1 Hour'"color="primary" mat-raised-button>1 Hour</button>
                     <button mat-button mat-stroked-button *ngIf="selectedTimeUnit !==
'1 Day'" (click)="selectTimeUnit('1 Day')">1 Day</button>
                     <button mat-button mat-stroked-button *ngIf="selectedTimeUnit ===
'1 Day'"color="primary" mat-raised-button>1 Day</button>
                     <button mat-button mat-stroked-button *ngIf="selectedTimeUnit !==
'1 Week'" (click)="selectTimeUnit('1 Week')">1 Week</button>
@@ -221,7 +223,7 @@
 
 
             <!-- Charts -->
-            <mat-tab-group *ngIf="!displayIsLoadingData && data !== undefined
&& yAxesKeys.length > 0"
+            <mat-tab-group *ngIf="!displayIsLoadingData &&  data !== undefined
&& yAxesKeys.length > 0"
                            [selectedIndex]="selectedMatGroup.value"
                            (selectedIndexChange)="selectedMatGroup.setValue($event)"
                             style="margin-top: -35px;">
@@ -258,7 +260,8 @@
                             (nextPage)="handleNextPage()"
                             (previousPage)="handlePreviousPage()"
                             (firstPage)=handleFirstPage()
-                            (lastPage)="handleLastPage()">
+                            (lastPage)="handleLastPage()"
+                            (zoomEvent)="zoomEventHandler($event)">
                     </sp-lineChart>
                 </mat-tab>
             </mat-tab-group>
diff --git a/ui/src/app/data-explorer/explorer/explorer.component.ts b/ui/src/app/data-explorer/explorer/explorer.component.ts
index 4a5c0f3..ea2c61b 100644
--- a/ui/src/app/data-explorer/explorer/explorer.component.ts
+++ b/ui/src/app/data-explorer/explorer/explorer.component.ts
@@ -43,7 +43,7 @@ export class ExplorerComponent implements OnInit {
     selectedInfoResult: InfoResult = undefined;
 
     //timeunit selection
-    selectedTimeUnit = '1 Day';
+    selectedTimeUnit = '1 Hour';
 
     //aggregation / advanced options
     //group by
@@ -87,7 +87,7 @@ export class ExplorerComponent implements OnInit {
 
     constructor(private restService: DatalakeRestService, private snackBar: MatSnackBar,
public dialog: MatDialog) {
         let dateTmp = new Date();
-        this.setDateRange(dateTmp, new Date(dateTmp.getTime() - 60000 * 60 * 24));
+        this.setDateRange(dateTmp, new Date(dateTmp.getTime() - 60000 * 60 * 1));
     }
 
     ngOnInit(): void {
@@ -107,6 +107,10 @@ export class ExplorerComponent implements OnInit {
         this.selectedTimeUnit = value;
 
         if (this.selectedTimeUnit === '1 Day') {
+            this.groupbyUnit = 's';
+            this.groupbyValue = 10;
+        }
+        else if (this.selectedTimeUnit === '1 Day') {
             this.groupbyUnit = 'm';
             this.groupbyValue = 1;
         } else if (this.selectedTimeUnit === '1 Week') {
@@ -136,14 +140,16 @@ export class ExplorerComponent implements OnInit {
             let endDateTmp = new Date();
             let startDateTmp;
 
-            if (this.selectedTimeUnit === '1 Day') {
-                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 1);
+            if (this.selectedTimeUnit === '1 Hour') {
+                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 1); // 1 Hour
+            } else if (this.selectedTimeUnit === '1 Day') {
+                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 1); // 1
Day
             } else if (this.selectedTimeUnit === '1 Week') {
-                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 7);
+                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 7); // 7
Days
             } else if (this.selectedTimeUnit === '1 Month') {
-                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 30);
+                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 30); //
30 Days
             } else if (this.selectedTimeUnit === '1 Year') {
-                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 365);
+                startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 365); //365
Days
             }
             this.setDateRange(startDateTmp, endDateTmp);
         }
@@ -393,4 +399,12 @@ export class ExplorerComponent implements OnInit {
             return false;
         }
     }
+
+    zoomEventHandler(timeRange) {
+      this.selectedTimeUnit = 'Custom';
+      if (timeRange[0] !== undefined) {
+        this.setDateRange(new Date(timeRange[0]), new Date(timeRange[1]));
+      }
+      this.loadData(true);
+    }
 }
\ No newline at end of file


Mime
View raw message