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/02/20 11:33:17 UTC
[incubator-streampipes] 01/02: Extract time interval selector into
own component
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 24fb6d5e666952079437d0bd67ef7f02a166e162
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Thu Feb 20 11:57:34 2020 +0100
Extract time interval selector into own component
---
.../app/data-explorer/data-explorer.component.html | 6 +--
ui/src/app/data-explorer/data-explorer.module.ts | 2 +
.../explorer-widget/explorer.component.ts | 44 ++++++++++-----------
.../time-selector/timeRangeSelector.component.css | 17 ++++++++
.../time-selector/timeRangeSelector.component.html | 45 ++++++++++++++++++++++
.../time-selector/timeRangeSelector.component.ts | 38 ++++++++++++++++++
6 files changed, 127 insertions(+), 25 deletions(-)
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index a7e96bd..d7395f1 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -18,13 +18,13 @@
<div flex class="page-container page-container-padding" style="height: 1px">
<div flex="100" layout="column" style="padding:0px;background-color:#f6f6f6; display: inline-block; width: 100%;" >
- <div flex layout-fill layout="row" layout-align="start center"
+ <div flex layout-fill layout="row" layout-align="end center"
style="height:48px;padding-left:10px;font-size:14px;line-height:24px;border-bottom:1px solid #ccc">
- <label style="font-size: 30px; padding-top: 10px;">Data Explorer</label>
+ <sp-time-range-selector ></sp-time-range-selector>
</div>
</div>
<div class="container-fluid">
- <sp-explorer></sp-explorer>
+ <sp-explorer></sp-explorer>
</div>
</div>
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 131578e..ddb5873 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -36,6 +36,7 @@ import { OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlNativeDateTimeModule } fro
import { PlotlyViaWindowModule } from 'angular-plotly.js';
import { LineChartComponent } from './explorer-widget/explorer-visualisations/linechart/lineChart.component';
import { TableComponent } from './explorer-widget/explorer-visualisations/table/table.component';
+import { TimeRangeSelectorComponent } from './time-selector/timeRangeSelector.component';
export const MY_NATIVE_FORMATS = {
fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false},
@@ -67,6 +68,7 @@ export const MY_NATIVE_FORMATS = {
DataDownloadDialog,
TableComponent,
LineChartComponent,
+ TimeRangeSelectorComponent,
],
providers: [
DatalakeRestService,
diff --git a/ui/src/app/data-explorer/explorer-widget/explorer.component.ts b/ui/src/app/data-explorer/explorer-widget/explorer.component.ts
index 10a7dcb..99208aa 100644
--- a/ui/src/app/data-explorer/explorer-widget/explorer.component.ts
+++ b/ui/src/app/data-explorer/explorer-widget/explorer.component.ts
@@ -105,28 +105,28 @@ export class ExplorerComponent implements OnInit {
);
}
- selectTimeUnit(value) {
- 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') {
- this.groupbyUnit = 'm';
- this.groupbyValue = 30;
- } else if (this.selectedTimeUnit === '1 Month') {
- this.groupbyUnit = 'h';
- this.groupbyValue = 4;
- } else if (this.selectedTimeUnit === '1 Year') {
- this.groupbyUnit = 'h';
- this.groupbyValue = 12;
- }
-
- this.loadData(false);
- }
+ // selectTimeUnit(value) {
+ // 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') {
+ // this.groupbyUnit = 'm';
+ // this.groupbyValue = 30;
+ // } else if (this.selectedTimeUnit === '1 Month') {
+ // this.groupbyUnit = 'h';
+ // this.groupbyValue = 4;
+ // } else if (this.selectedTimeUnit === '1 Year') {
+ // this.groupbyUnit = 'h';
+ // this.groupbyValue = 12;
+ // }
+ //
+ // this.loadData(false);
+ // }
loadData(silentLoading?) {
this.isLoadingData = true;
diff --git a/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.css b/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.css
new file mode 100644
index 0000000..13cbc4a
--- /dev/null
+++ b/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.css
@@ -0,0 +1,17 @@
+/*
+ * 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/time-selector/timeRangeSelector.component.html b/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.html
new file mode 100644
index 0000000..91b77af
--- /dev/null
+++ b/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.html
@@ -0,0 +1,45 @@
+<!--
+ ~ 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 flex layout-fill layout="row" layout-align="start center" style="padding-top: 5px;">
+
+
+ <!--<div flex layout-fill class="option">-->
+ <!--<div class="optionName">Date range</div>-->
+ <!--<mat-form-field style="top: -10px; width: 270px">-->
+ <!--<input matInput [owlDateTime]="dt1" [owlDateTimeTrigger]="dt1"-->
+ <!--[(ngModel)]="dateRange" [selectMode]="'range'" (dateTimeChange)="loadData()">-->
+ <!--<mat-icon matSuffix [owlDateTimeTrigger]="dt1" style="color: grey">event</mat-icon>-->
+ <!--<owl-date-time #dt1></owl-date-time>-->
+ <!--</mat-form-field>-->
+ <!--</div>-->
+ <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>
+ <button mat-button mat-stroked-button *ngIf="selectedTimeUnit === '1 Week'" color="primary" mat-raised-button>1 Week</button>
+ <button mat-button mat-stroked-button *ngIf="selectedTimeUnit !== '1 Month'" (click)="selectTimeUnit('1 Month')">1 Month</button>
+ <button mat-button mat-stroked-button *ngIf="selectedTimeUnit === '1 Month'" color="primary" mat-raised-button>1 Month</button>
+ <button mat-button mat-stroked-button *ngIf="selectedTimeUnit !== '1 Year'" (click)="selectTimeUnit('1 Year')">1 Year</button>
+ <button mat-button mat-stroked-button *ngIf="selectedTimeUnit === '1 Year'" color="primary" mat-raised-button>1 Year</button>
+ <button mat-button mat-stroked-button *ngIf="selectedTimeUnit !== 'Custom'" (click)="selectTimeUnit('Custom')">Custom</button>
+ <button mat-button mat-stroked-button *ngIf="selectedTimeUnit === 'Custom'" color="primary" mat-raised-button>Custom</button>
+
+
+</div>
diff --git a/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.ts b/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.ts
new file mode 100644
index 0000000..911aedd
--- /dev/null
+++ b/ui/src/app/data-explorer/time-selector/timeRangeSelector.component.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 } from '@angular/core';
+
+@Component({
+ selector: 'sp-time-range-selector',
+ templateUrl: 'timeRangeSelector.component.html',
+ styleUrls: ['./timeRangeSelector.component.css']
+})
+export class TimeRangeSelectorComponent {
+
+ selectedTimeUnit = '1 Hour';
+
+ dateRange: Date []; // [0] start, [1] end
+
+ constructor() {
+ }
+
+ selectTimeUnit(value) {
+ this.selectedTimeUnit = value;
+ }
+}