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 06:07:05 UTC
[incubator-streampipes] 02/05: Change arrows to select time range
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
commit 9b33775741fba12307b80cfcdf31beb0fe784c82
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri May 29 09:59:54 2020 +0200
Change arrows to select time range
---
.../time-selector/timeRangeSelector.component.html | 15 ++++---
.../time-selector/timeRangeSelector.component.ts | 48 +++++++---------------
.../line-chart/line-chart-widget.component.html | 2 +-
3 files changed, 25 insertions(+), 40 deletions(-)
diff --git a/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.html b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.html
index 63dc4af..5e75fec 100644
--- a/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.html
+++ b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.html
@@ -17,7 +17,10 @@
-->
<div flex layout-fill layout="row" layout-align="start center" style="padding-top: 5px;">
- <Button (click)="decreaseStart()"><</Button>
+<!-- <Button (click)="decreaseTime()"><</Button>-->
+ <button mat-icon-button class="icon" style="margin-right: -15px">
+ <mat-icon style="font-size: 30px;height: 30px; width: 30px; padding-top: 3px" (click)="decreaseTime()">navigate_before</mat-icon>
+ </button>
<mat-form-field appearance="outline" class="start-date">
<mat-label>Start</mat-label>
<input matInput
@@ -27,9 +30,6 @@
(dateTimeChange)="changeCustomDateRange()">
<owl-date-time #dt1></owl-date-time>
</mat-form-field>
- <Button (click)="increaseStart()">></Button>
-
- <Button (click)="decreaseEnd()"><</Button>
<mat-form-field appearance="outline" class="end-date">
<mat-label>End</mat-label>
<input matInput
@@ -39,8 +39,11 @@
(dateTimeChange)="changeCustomDateRange()">
<owl-date-time #dt2></owl-date-time>
</mat-form-field>
- <Button (click)="increaseEnd()">></Button>
-
+ <button mat-icon-button class="icon" style="margin-left: -15px" color="primary">
+ <mat-icon style="font-size: 30px;height: 30px; width: 30px; padding-top: 3px" (click)="increaseTime()">navigate_next</mat-icon>
+ </button>
+<!-- <Button (click)="increaseTime()">></Button>-->
+<!-- -->
<button mat-raised-button
*ngFor="let item of possibleTimeButtons"
[color]="selectedTimeButton.value === item.value ? 'primary' : ''"
diff --git a/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.ts b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.ts
index 3c2c931..657f03f 100644
--- a/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.ts
+++ b/ui/src/app/data-explorer-v2/components/time-selector/timeRangeSelector.component.ts
@@ -54,43 +54,25 @@ export class TimeRangeSelectorComponent implements OnInit {
reloadData() {
this.dateRangeEmitter.emit(this.dateRange);
}
- increaseStart(){
-
- if(this.selectedTimeButton.offset == -1){
- this.dateRange = new DateRange(new Date(this.dateRange.startDate.getTime() + 5*60000 ),this.dateRange.endDate);
- }
- else{
- this.dateRange = new DateRange(new Date(this.dateRange.startDate.getTime() + this.selectedTimeButton.offset*60000 ),this.dateRange.endDate);
- }
- this.reloadData();
- }
- decreaseStart(){
- if(this.selectedTimeButton.offset == -1){
- this.dateRange = new DateRange(new Date(this.dateRange.startDate.getTime() - 5*60000 ),this.dateRange.endDate);
- }
- else{
- this.dateRange = new DateRange(new Date(this.dateRange.startDate.getTime() - this.selectedTimeButton.offset*60000 ),this.dateRange.endDate);
- }
- this.reloadData();
+
+ increaseTime() {
+ this.changeTimeByInterval((a, b) => a + b);
}
- increaseEnd(){
- if(this.selectedTimeButton.offset == -1){
- this.dateRange = new DateRange(this.dateRange.startDate,new Date(this.dateRange.endDate.getTime() + 5*60000 ));
- }
- else{
- this.dateRange = new DateRange(this.dateRange.startDate,new Date(this.dateRange.endDate.getTime() + this.selectedTimeButton.offset*60000 ));
- }
- this.reloadData();
+
+ decreaseTime() {
+ this.changeTimeByInterval((a, b) => a - b);
}
- decreaseEnd(){
- if(this.selectedTimeButton.offset == -1){
- this.dateRange = new DateRange(this.dateRange.startDate,new Date(this.dateRange.endDate.getTime() - 5*60000 ));
- }
- else{
- this.dateRange = new DateRange(this.dateRange.startDate,new Date(this.dateRange.endDate.getTime() - this.selectedTimeButton.offset*60000 ));
- }
+
+ private changeTimeByInterval(func) {
+ const difference = this.dateRange.endDate.getTime() - this.dateRange.startDate.getTime();
+ const newStartTime = new Date(func(this.dateRange.startDate.getTime(), difference));
+ const newEndTime = new Date(func(this.dateRange.endDate.getTime(), difference));
+
+ this.dateRange = new DateRange(newStartTime, newEndTime);
+ this.selectedTimeButton = this.possibleTimeButtons[this.possibleTimeButtons.length - 1];
this.reloadData();
}
+
changeCustomDateRange() {
this.selectedTimeButton = this.possibleTimeButtons[this.possibleTimeButtons.length - 1];
this.dateRange = new DateRange(this.dateRange.startDate, this.dateRange.endDate)
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 12574fc..fcddbb6 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
@@ -40,7 +40,7 @@
<!-- Chart -->
<plotly-plot fxFlex
- *ngIf="data !== undefined"
+ *ngIf="data !== undefined && !showNoDataInDateRange"
flex
[data]="data"
[layout]="graph.layout"