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/19 13:28:10 UTC
[incubator-streampipes] branch STREAMPIPES-79 created (now 5823d91)
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a change to branch STREAMPIPES-79
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
at 5823d91 Move components to data explorer
This branch includes the following new commits:
new 5823d91 Move components to data explorer
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-streampipes] 01/01: Move components to data explorer
Posted by ze...@apache.org.
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 5823d9134336778822ed986f3a2f1b6c2607c7fb
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Feb 19 14:26:37 2020 +0100
Move components to data explorer
---
ui/package.json | 30 +++---
ui/src/app/core-ui/core-ui.module.ts | 27 ++----
.../app/data-explorer/data-explorer.component.ts | 25 +++--
ui/src/app/data-explorer/data-explorer.module.ts | 104 +++++++++++----------
.../datadownloadDialog/dataDownload.dialog.css | 0
.../datadownloadDialog/dataDownload.dialog.html | 0
.../datadownloadDialog/dataDownload.dialog.ts | 0
.../base/baseVisualisation.component.ts} | 53 +++++------
.../linechart/lineChart.component.css | 0
.../linechart/lineChart.component.html | 0
.../linechart/lineChart.component.ts | 67 ++++++-------
.../table/table.component.css | 0
.../table/table.component.html | 0
.../table/table.component.ts | 28 +++---
.../explorer.component.html | 0
.../explorer.component.ts | 99 ++++++++++----------
.../{explorer => explorer-widget}/explorer.css | 0
17 files changed, 213 insertions(+), 220 deletions(-)
diff --git a/ui/package.json b/ui/package.json
index 4fed6ca..7eca2e5 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -29,13 +29,14 @@
"@angular/platform-browser-dynamic": "9.0.1",
"@angular/router": "9.0.1",
"@angular/upgrade": "9.0.1",
+ "@danielmoncada/angular-datetime-picker": "^9.2.0",
"@ngui/datetime-picker": "0.16.2",
"@stomp/ng2-stompjs": "^7.2.0",
"@swimlane/ngx-charts": "^13.0.2",
+ "@uirouter/angular": "^6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
+ "@uirouter/angularjs": "^1.0.25",
"@uirouter/core": "6.0.4",
- "@uirouter/angular": "^6.0.1",
- "@uirouter/angularjs": "^1.0.25",
"@uirouter/rx": "^0.6.5",
"angular": "1.7.7",
"angular-animate": "1.7.7",
@@ -57,7 +58,7 @@
"angular-sanitize": "1.7.7",
"angular-slick-carousel": "3.1.7",
"angular-touch": "1.7.7",
- "angular-tree-component": "^8.4.0",
+ "angular-tree-component": "^8.5.6",
"angular-trix": "1.0.2",
"angular-ui-bootstrap": "0.14.3",
"angular-ui-sortable": "0.13.4",
@@ -78,7 +79,6 @@
"lodash": "3.10.1",
"ng-dynamic-component": "4.0.3",
"ng-file-upload": "9.0.13",
- "@danielmoncada/angular-datetime-picker": "^9.2.0",
"ng-prettyjson": "0.1.8",
"ng-showdown": "^1.1.0",
"ng-simple-slideshow": "^1.2.9",
@@ -87,9 +87,9 @@
"ngmap": "1.18.0",
"ngx-color-picker": "^9.0.0",
"plotly.js": "^1.52.2",
- "prismjs": "^1.16.0",
- "rxjs": "^6.3.3",
- "rxjs-compat": "^6.3.3",
+ "prismjs": "^1.19.0",
+ "rxjs": "^6.5.4",
+ "rxjs-compat": "^6.5.4",
"shepherd.js": "2.4.0",
"slick-carousel": "1.6.0",
"tslib": "^1.10.0",
@@ -103,12 +103,12 @@
"@ngtools/webpack": "9.0.2",
"@types/angular": "^1.6.43",
"@types/jasmine": "~2.8.3",
- "@types/jqueryui": "^1.12.7",
+ "@types/jqueryui": "^1.12.10",
"@types/node": "^12.11.1",
"@types/rx": "^4.1.1",
"codelyzer": "^5.1.2",
+ "compression-webpack-plugin": "^3.1.0",
"copy-webpack-plugin": "^5.0.2",
- "compression-webpack-plugin": "^3.0.0",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
@@ -118,13 +118,13 @@
"karma": "~2.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.2.1",
- "karma-firefox-launcher": "^1.1.0",
+ "karma-firefox-launcher": "^1.3.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-verbose-reporter": "0.0.6",
"mini-css-extract-plugin": "^0.9.0",
"mustache": "^2.3.0",
- "node-sass": "^4.8.3",
+ "node-sass": "^4.13.1",
"prettier": "1.14.2",
"raw-loader": "^0.5.1",
"sass-loader": "^6.0.7",
@@ -134,10 +134,10 @@
"tslint-config-prettier": "^1.15.0",
"typescript": "3.7.5",
"uglifyjs-webpack-plugin": "^2.1.2",
- "webpack": "^4.29.6",
- "webpack-cli": "^3.2.3",
- "webpack-dev-server": "^3.2.1",
+ "webpack": "^4.41.6",
"webpack-bundle-analyzer": "^3.4.1",
+ "webpack-cli": "^3.3.11",
+ "webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.1"
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 33438df..a7d9ce4 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -16,23 +16,17 @@
*
*/
-import {NgModule} from '@angular/core';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {CommonModule} from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
-import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {CdkTableModule} from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk/table';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBarModule } from '@angular/material/snack-bar';
-import {TableComponent} from './table/table.component';
-import {LineChartComponent} from './linechart/lineChart.component';
-
-//import * as PlotlyJS from 'plotly.js/dist/plotly.js';
-import { PlotlyViaWindowModule } from 'angular-plotly.js';
-//PlotlyViaCDNModule.plotlyjs = PlotlyJS;
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
@NgModule({
imports: [
@@ -46,11 +40,9 @@ import { PlotlyViaWindowModule } from 'angular-plotly.js';
MatProgressSpinnerModule,
MatDatepickerModule,
MatNativeDateModule,
- PlotlyViaWindowModule,
],
declarations: [
- TableComponent,
- LineChartComponent,
+
],
providers: [
MatDatepickerModule
@@ -58,9 +50,8 @@ import { PlotlyViaWindowModule } from 'angular-plotly.js';
entryComponents: [
],
exports: [
- TableComponent,
- LineChartComponent,
+
]
})
export class CoreUiModule {
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index 0474b03..92792d4 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -16,13 +16,13 @@
*
*/
-import {Component, OnInit, ViewChild} from '@angular/core';
-import {DatalakeRestService} from '../core-services/datalake/datalake-rest.service';
-import {InfoResult} from '../core-model/datalake/InfoResult';
-import {Observable} from 'rxjs/Observable';
-import {FormControl} from '@angular/forms';
-import {map, startWith} from 'rxjs/operators';
+import { Component, OnInit } from '@angular/core';
+import { FormControl } from '@angular/forms';
import { MatSnackBar } from '@angular/material/snack-bar';
+import { Observable } from 'rxjs/Observable';
+import { map, startWith } from 'rxjs/operators';
+import { InfoResult } from '../core-model/datalake/InfoResult';
+import { DatalakeRestService } from '../core-services/datalake/datalake-rest.service';
@Component({
selector: 'sp-data-explorer',
@@ -35,12 +35,11 @@ export class DataExplorerComponent implements OnInit {
infoResult: InfoResult[];
filteredIndexInfos: Observable<InfoResult[]>;
- page: number = 0;
- //selectedIndex: string = '';
+ page = 0;
selectedInfoResult: InfoResult = undefined;
- downloadFormat: string = 'csv';
- isDownloading: boolean = false;
+ downloadFormat = 'csv';
+ isDownloading = false;
constructor(private restService: DatalakeRestService, private snackBar: MatSnackBar) {
@@ -59,9 +58,7 @@ export class DataExplorerComponent implements OnInit {
}
selectIndex(index: string) {
- this.selectedInfoResult = this._filter(index)[0]
-
- // this.selectedIndex = index;
+ this.selectedInfoResult = this._filter(index)[0];
}
_filter(value: string): InfoResult[] {
@@ -75,4 +72,4 @@ export class DataExplorerComponent implements OnInit {
duration: 2000,
});
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index c21ce7d..131578e 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -16,64 +16,70 @@
*
*/
-import {NgModule} from '@angular/core';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {CommonModule} from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
-import {DataExplorerComponent} from './data-explorer.component';
+import { DataExplorerComponent } from './data-explorer.component';
-import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
-import {DatalakeRestService} from '../core-services/datalake/datalake-rest.service';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {CdkTableModule} from '@angular/cdk/table';
+import { CdkTableModule } from '@angular/cdk/table';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSnackBarModule } from '@angular/material/snack-bar';
-import {CoreUiModule} from '../core-ui/core-ui.module';
-import {ExplorerComponent} from './explorer/explorer.component';
-import {DataDownloadDialog} from './explorer/datadownloadDialog/dataDownload.dialog';
+import { DatalakeRestService } from '../core-services/datalake/datalake-rest.service';
+import { CoreUiModule } from '../core-ui/core-ui.module';
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
+import { DataDownloadDialog } from './explorer-widget/datadownloadDialog/dataDownload.dialog';
+import { ExplorerComponent } from './explorer-widget/explorer.component';
-import {OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlNativeDateTimeModule} from '@danielmoncada/angular-datetime-picker';
+import { OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
+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';
export const MY_NATIVE_FORMATS = {
- fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false},
- datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour12: false},
- timePickerInput: {hour: 'numeric', minute: 'numeric', hour12: false},
- monthYearLabel: {year: 'numeric', month: 'short', hour12: false},
- dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric', hour12: false},
- monthYearA11yLabel: {year: 'numeric', month: 'long', hour12: false},
+ fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false},
+ datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour12: false},
+ timePickerInput: {hour: 'numeric', minute: 'numeric', hour12: false},
+ monthYearLabel: {year: 'numeric', month: 'short', hour12: false},
+ dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric', hour12: false},
+ monthYearA11yLabel: {year: 'numeric', month: 'long', hour12: false},
};
@NgModule({
- imports: [
- CommonModule,
- FlexLayoutModule,
- CustomMaterialModule,
- ReactiveFormsModule,
- FormsModule,
- CdkTableModule,
- MatSnackBarModule,
- MatProgressSpinnerModule,
- CoreUiModule,
- OwlDateTimeModule,
- OwlNativeDateTimeModule,
- ],
- declarations: [
- DataExplorerComponent,
- ExplorerComponent,
- DataDownloadDialog,
- ],
- providers: [
- DatalakeRestService,
- {
- provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS
- },
- ],
- entryComponents: [
- DataExplorerComponent,
- DataDownloadDialog,
- ],
- exports: [
- ]
+ imports: [
+ CommonModule,
+ FlexLayoutModule,
+ CustomMaterialModule,
+ ReactiveFormsModule,
+ FormsModule,
+ CdkTableModule,
+ MatSnackBarModule,
+ MatProgressSpinnerModule,
+ CoreUiModule,
+ OwlDateTimeModule,
+ OwlNativeDateTimeModule,
+ PlotlyViaWindowModule,
+ ],
+ declarations: [
+ DataExplorerComponent,
+ ExplorerComponent,
+ DataDownloadDialog,
+ TableComponent,
+ LineChartComponent,
+ ],
+ providers: [
+ DatalakeRestService,
+ {
+ provide: OWL_DATE_TIME_FORMATS, useValue: MY_NATIVE_FORMATS
+ },
+ ],
+ entryComponents: [
+ DataExplorerComponent,
+ DataDownloadDialog,
+ ],
+ exports: [
+ ]
})
export class DataExplorerModule {
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.css b/ui/src/app/data-explorer/explorer-widget/datadownloadDialog/dataDownload.dialog.css
similarity index 100%
rename from ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.css
rename to ui/src/app/data-explorer/explorer-widget/datadownloadDialog/dataDownload.dialog.css
diff --git a/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.html b/ui/src/app/data-explorer/explorer-widget/datadownloadDialog/dataDownload.dialog.html
similarity index 100%
rename from ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.html
rename to ui/src/app/data-explorer/explorer-widget/datadownloadDialog/dataDownload.dialog.html
diff --git a/ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts b/ui/src/app/data-explorer/explorer-widget/datadownloadDialog/dataDownload.dialog.ts
similarity index 100%
rename from ui/src/app/data-explorer/explorer/datadownloadDialog/dataDownload.dialog.ts
rename to ui/src/app/data-explorer/explorer-widget/datadownloadDialog/dataDownload.dialog.ts
diff --git a/ui/src/app/core-ui/chart/baseChart.component.ts b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/base/baseVisualisation.component.ts
similarity index 75%
rename from ui/src/app/core-ui/chart/baseChart.component.ts
rename to ui/src/app/data-explorer/explorer-widget/explorer-visualisations/base/baseVisualisation.component.ts
index cf71a6e..1f4d7f6 100644
--- a/ui/src/app/core-ui/chart/baseChart.component.ts
+++ b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/base/baseVisualisation.component.ts
@@ -16,18 +16,18 @@
*
*/
-import {Directive, EventEmitter, Injectable, Input, Output} from '@angular/core';
-import {EventSchema} from '../../connect/schema-editor/model/EventSchema';
-import {DataResult} from '../../core-model/datalake/DataResult';
-import {GroupedDataResult} from '../../core-model/datalake/GroupedDataResult';
+import { Directive, EventEmitter, Injectable, Input, Output } from '@angular/core';
+import { EventSchema } from '../../../../connect/schema-editor/model/EventSchema';
+import { DataResult } from '../../../../core-model/datalake/DataResult';
+import { GroupedDataResult } from '../../../../core-model/datalake/GroupedDataResult';
@Injectable()
@Directive()
-export abstract class BaseChartComponent {
+export abstract class BaseVisualisationComponent {
@Input() set datas(value: DataResult | GroupedDataResult) {
- if (value != undefined) {
+ if (value !== undefined) {
this.data = this.clone(value);
if (this.data !== undefined && this.xKey !== undefined && this.yKeys !== undefined) {
this.transform();
@@ -39,7 +39,7 @@ export abstract class BaseChartComponent {
}
}
@Input() set xAxesKey(value: string) {
- if (value != undefined) {
+ if (value !== undefined) {
this.xKey = value;
if (this.data !== undefined && this.xKey !== undefined && this.yKeys !== undefined) {
this.transform();
@@ -54,8 +54,9 @@ export abstract class BaseChartComponent {
if (value !== undefined) {
this.yKeys = value;
if (this.data !== undefined && this.xKey !== undefined && this.yKeys !== undefined) {
- if (this.transformedData === undefined)
+ if (this.transformedData === undefined) {
this.transform();
+ }
this.display();
}
} else {
@@ -66,13 +67,13 @@ export abstract class BaseChartComponent {
@Input() eventschema: EventSchema = undefined;
- @Input() startDateData:Date = undefined;
- @Input() endDateData:Date = undefined;
+ @Input() startDateData: Date = undefined;
+ @Input() endDateData: Date = undefined;
@Input() currentPage: number = undefined;
@Input() maxPage: number = undefined;
- @Input() enablePaging: boolean = false;
+ @Input() enablePaging = false;
@Output() previousPage = new EventEmitter<boolean>();
@Output() nextPage = new EventEmitter<boolean>();
@@ -86,11 +87,11 @@ export abstract class BaseChartComponent {
transformedData: DataResult | GroupedDataResult = undefined;
- dataMode: string = '';
+ dataMode = '';
transform() {
- if (this.data["headers"] !== undefined) {
+ if (this.data['headers'] !== undefined) {
this.transformedData = this.transformData(this.data as DataResult, this.xKey);
this.dataMode = 'single';
} else {
@@ -100,46 +101,46 @@ export abstract class BaseChartComponent {
}
display() {
- if (this.data["headers"] !== undefined) {
+ if (this.data['headers'] !== undefined) {
this.displayData(this.transformedData as DataResult, this.yKeys);
} else {
this.displayGroupedData(this.transformedData as GroupedDataResult, this.yKeys);
}
}
- //transform the input data to the schema of the chart
+ // transform the input data to the schema of the chart
abstract transformData(data: DataResult, xKey: String): DataResult;
- //transform the grouped input data to the schema of the chart
+ // transform the grouped input data to the schema of the chart
abstract transformGroupedData(data: GroupedDataResult, xKey: string): GroupedDataResult;
- //display the data
+ // display the data
abstract displayData(transformedData: DataResult, yKeys: string[]);
- //display the grouped data
+ // display the grouped data
abstract displayGroupedData(transformedData: GroupedDataResult, yKeys: string[]);
//
- abstract stopDisplayData()
+ abstract stopDisplayData();
- clickPreviousPage(){
- this.previousPage.emit()
+ clickPreviousPage() {
+ this.previousPage.emit();
}
clickNextPage() {
- this.nextPage.emit()
+ this.nextPage.emit();
}
- clickFirstPage(){
- this.firstPage.emit()
+ clickFirstPage() {
+ this.firstPage.emit();
}
clickLastPage() {
- this.lastPage.emit()
+ this.lastPage.emit();
}
clone(value): DataResult {
return (JSON.parse(JSON.stringify(value)));
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/linechart/lineChart.component.css b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/linechart/lineChart.component.css
similarity index 100%
rename from ui/src/app/core-ui/linechart/lineChart.component.css
rename to ui/src/app/data-explorer/explorer-widget/explorer-visualisations/linechart/lineChart.component.css
diff --git a/ui/src/app/core-ui/linechart/lineChart.component.html b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/linechart/lineChart.component.html
similarity index 100%
rename from ui/src/app/core-ui/linechart/lineChart.component.html
rename to ui/src/app/data-explorer/explorer-widget/explorer-visualisations/linechart/lineChart.component.html
diff --git a/ui/src/app/core-ui/linechart/lineChart.component.ts b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/linechart/lineChart.component.ts
similarity index 73%
rename from ui/src/app/core-ui/linechart/lineChart.component.ts
rename to ui/src/app/data-explorer/explorer-widget/explorer-visualisations/linechart/lineChart.component.ts
index 72d4720..ee949b3 100644
--- a/ui/src/app/core-ui/linechart/lineChart.component.ts
+++ b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/linechart/lineChart.component.ts
@@ -16,10 +16,10 @@
*
*/
-import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
-import {BaseChartComponent} from '../chart/baseChart.component';
-import {DataResult} from '../../core-model/datalake/DataResult';
-import {GroupedDataResult} from '../../core-model/datalake/GroupedDataResult';
+import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
+import { DataResult } from '../../../../core-model/datalake/DataResult';
+import { GroupedDataResult } from '../../../../core-model/datalake/GroupedDataResult';
+import { BaseVisualisationComponent } from '../base/baseVisualisation.component';
@Component({
@@ -27,7 +27,7 @@ import {GroupedDataResult} from '../../core-model/datalake/GroupedDataResult';
templateUrl: './lineChart.component.html',
styleUrls: ['./lineChart.component.css']
})
-export class LineChartComponent extends BaseChartComponent implements OnChanges {
+export class LineChartComponent extends BaseVisualisationComponent implements OnChanges {
@Output() zoomEvent = new EventEmitter<[number, number]>();
@@ -37,13 +37,13 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
dataToDisplay: any[] = undefined;
- updatemenus=[
+ updatemenus = [
{
buttons: [
{
args: ['mode', 'lines'],
- label:'Line',
- method:'restyle'
+ label: 'Line',
+ method: 'restyle'
},
{
args: ['mode', 'markers'],
@@ -53,8 +53,8 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
{
args: ['mode', 'lines+markers'],
- label:'Dots + Lines',
- method:'restyle'
+ label: 'Dots + Lines',
+ method: 'restyle'
}
],
direction: 'left',
@@ -74,8 +74,8 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
graph = {
layout: {
autosize: true,
- plot_bgcolor:"#fafafa",
- paper_bgcolor:"#fafafa",
+ plot_bgcolor: '#fafafa',
+ paper_bgcolor: '#fafafa',
xaxis: {
type: 'date',
},
@@ -87,14 +87,14 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
};
ngOnChanges(changes: SimpleChanges) {
- //TODO: is needed because bindings are not working correct
+ // TODO: is needed because bindings are not working correct
if (changes.endDateData !== undefined) {
this.endDateData = changes.endDateData.currentValue;
}
if (changes.startDateData !== undefined) {
this.startDateData = changes.startDateData.currentValue;
}
- //TODO should be done in displaydata
+ // TODO should be done in displaydata
if (this.startDateData !== undefined && this.endDateData !== undefined) {
this.graph.layout.xaxis['range'] = [this.startDateData.getTime(), this.endDateData.getTime()];
}
@@ -107,9 +107,10 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
const tmp = [];
this.yKeys.forEach(key => {
transformedData.rows.forEach(serie => {
- if (serie.name === key)
- tmp.push(serie)
- })
+ if (serie.name === key) {
+ tmp.push(serie);
+ }
+ });
});
this.dataToDisplay = tmp;
@@ -124,16 +125,16 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
const tmp = [];
- let groupNames = Object.keys(transformedData.dataResults);
- for(let groupName of groupNames) {
- let value = transformedData.dataResults[groupName];
+ 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)
+ tmp.push(serie);
}
- })
+ });
});
}
this.dataToDisplay = tmp;
@@ -146,7 +147,7 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
transformData(data: DataResult, xKey: String): DataResult {
const tmp: any[] = [];
- let dataKeys = [];
+ const dataKeys = [];
data.rows.forEach(row => {
data.headers.forEach((headerName, index) => {
@@ -156,24 +157,24 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
});
});
- let indexXkey = data.headers.findIndex(headerName => headerName === this.xKey);
+ const indexXkey = data.headers.findIndex(headerName => headerName === this.xKey);
dataKeys.forEach(key => {
- let headerName = data.headers[key];
+ const headerName = data.headers[key];
tmp[key] = {
- type: 'scatter', mode: 'lines', name: headerName, connectgaps: false, x: [], y: []}
+ type: 'scatter', mode: 'lines', name: headerName, connectgaps: false, x: [], y: []};
});
data.rows.forEach(row => {
data.headers.forEach((headerName, index) => {
if (dataKeys.includes(index)) {
tmp[index].x.push(new Date(row[indexXkey]));
if ((row[index]) !== undefined) {
- tmp[index].y.push(row[index])
+ tmp[index].y.push(row[index]);
} else {
- tmp[index].y.push(null)
+ tmp[index].y.push(null);
}
}
- })
+ });
});
data.rows = tmp;
@@ -181,8 +182,8 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
}
transformGroupedData(data: GroupedDataResult, xKey: string): GroupedDataResult {
- for (var key in data.dataResults) {
- let dataResult = data.dataResults[key];
+ for (const key in data.dataResults) {
+ const dataResult = data.dataResults[key];
dataResult.rows = this.transformData(dataResult, xKey).rows;
}
@@ -193,7 +194,7 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
}
zoomIn($event) {
- this.zoomEvent.emit([$event["xaxis.range[0]"], $event["xaxis.range[1]"]])
+ this.zoomEvent.emit([$event['xaxis.range[0]'], $event['xaxis.range[1]']]);
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-ui/table/table.component.css b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/table/table.component.css
similarity index 100%
rename from ui/src/app/core-ui/table/table.component.css
rename to ui/src/app/data-explorer/explorer-widget/explorer-visualisations/table/table.component.css
diff --git a/ui/src/app/core-ui/table/table.component.html b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/table/table.component.html
similarity index 100%
rename from ui/src/app/core-ui/table/table.component.html
rename to ui/src/app/data-explorer/explorer-widget/explorer-visualisations/table/table.component.html
diff --git a/ui/src/app/core-ui/table/table.component.ts b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/table/table.component.ts
similarity index 78%
rename from ui/src/app/core-ui/table/table.component.ts
rename to ui/src/app/data-explorer/explorer-widget/explorer-visualisations/table/table.component.ts
index 1493eb3..62f3e30 100644
--- a/ui/src/app/core-ui/table/table.component.ts
+++ b/ui/src/app/data-explorer/explorer-widget/explorer-visualisations/table/table.component.ts
@@ -16,20 +16,20 @@
*
*/
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
-import {BaseChartComponent} from '../chart/baseChart.component';
-import {DataResult} from '../../core-model/datalake/DataResult';
-import {GroupedDataResult} from '../../core-model/datalake/GroupedDataResult';
+import { DataResult } from '../../../../core-model/datalake/DataResult';
+import { GroupedDataResult } from '../../../../core-model/datalake/GroupedDataResult';
+import { BaseVisualisationComponent } from '../base/baseVisualisation.component';
@Component({
selector: 'sp-table',
templateUrl: './table.component.html',
styleUrls: ['./table.component.css']
})
-export class TableComponent extends BaseChartComponent {
+export class TableComponent extends BaseVisualisationComponent {
- displayedColumns: String[] = [];
+ displayedColumns: string[] = [];
dataSource = new MatTableDataSource();
selectedGroup: string = undefined;
@@ -38,8 +38,8 @@ export class TableComponent extends BaseChartComponent {
super();
}
- transformData(data: DataResult, xKey: String): DataResult {
- let tmp = [];
+ transformData(data: DataResult, xKey: string): DataResult {
+ const tmp = [];
data.rows.forEach(row =>
tmp.push(this.createTableObject(data.headers, row))
);
@@ -49,8 +49,8 @@ export class TableComponent extends BaseChartComponent {
}
transformGroupedData(data: GroupedDataResult, xKey: string): GroupedDataResult {
- for (var key in data.dataResults) {
- let dataResult = data.dataResults[key];
+ for (const key in data.dataResults) {
+ const dataResult = data.dataResults[key];
dataResult.rows = this.transformData(dataResult, xKey).rows;
}
return data;
@@ -64,7 +64,7 @@ export class TableComponent extends BaseChartComponent {
}
displayGroupedData(transformedData: GroupedDataResult, yKeys: string[]) {
- this.displayedColumns = Object.assign([], yKeys);
+ this.displayedColumns = {...[], ...yKeys};
this.displayedColumns.unshift(this.xKey);
if (this.selectedGroup === undefined) {
@@ -74,11 +74,11 @@ export class TableComponent extends BaseChartComponent {
}
stopDisplayData() {
- this.dataSource.data = []
+ // this.dataSource.data = [];
}
createTableObject(keys, values) {
- let object = {};
+ const object = {};
keys.forEach((key, index) => {
object[key] = values[index];
});
@@ -96,4 +96,4 @@ export class TableComponent extends BaseChartComponent {
.dataResults[this.selectedGroup].rows;
}
}
-}
\ 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-widget/explorer.component.html
similarity index 100%
rename from ui/src/app/data-explorer/explorer/explorer.component.html
rename to ui/src/app/data-explorer/explorer-widget/explorer.component.html
diff --git a/ui/src/app/data-explorer/explorer/explorer.component.ts b/ui/src/app/data-explorer/explorer-widget/explorer.component.ts
similarity index 86%
rename from ui/src/app/data-explorer/explorer/explorer.component.ts
rename to ui/src/app/data-explorer/explorer-widget/explorer.component.ts
index 86174d0..10a7dcb 100644
--- a/ui/src/app/data-explorer/explorer/explorer.component.ts
+++ b/ui/src/app/data-explorer/explorer-widget/explorer.component.ts
@@ -16,18 +16,18 @@
*
*/
-import {Component, OnInit} from '@angular/core';
-import {DatalakeRestService} from '../../core-services/datalake/datalake-rest.service';
-import {InfoResult} from '../../core-model/datalake/InfoResult';
-import {Observable} from 'rxjs/Observable';
-import {FormControl, FormGroup} from '@angular/forms';
-import {map, startWith} from 'rxjs/operators';
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
-import {DataDownloadDialog} from './datadownloadDialog/dataDownload.dialog';
-import {timer} from 'rxjs/internal/observable/timer';
-import {DataResult} from '../../core-model/datalake/DataResult';
-import {GroupedDataResult} from '../../core-model/datalake/GroupedDataResult';
+import { timer } from 'rxjs/internal/observable/timer';
+import { Observable } from 'rxjs/Observable';
+import { map, startWith } from 'rxjs/operators';
+import { DataResult } from '../../core-model/datalake/DataResult';
+import { GroupedDataResult } from '../../core-model/datalake/GroupedDataResult';
+import { InfoResult } from '../../core-model/datalake/InfoResult';
+import { DatalakeRestService } from '../../core-services/datalake/datalake-rest.service';
+import { DataDownloadDialog } from './datadownloadDialog/dataDownload.dialog';
@Component({
selector: 'sp-explorer',
@@ -40,27 +40,27 @@ export class ExplorerComponent implements OnInit {
infoResult: InfoResult[];
filteredIndexInfos: Observable<InfoResult[]>;
- page: number = 0;
- //selectedIndex: string = '';
+ page = 0;
+ // selectedIndex: string = '';
selectedInfoResult: InfoResult = undefined;
- //timeunit selection
+ // timeunit selection
selectedTimeUnit = '1 Hour';
- //aggregation / advanced options
- //group by
+ // aggregation / advanced options
+ // group by
enableAdvanceOptions = false;
groupbyUnit = 'd';
groupbyValue = 1;
- //key selections
+ // key selections
dataKeys: string[] = [];
- //grouped Data
+ // grouped Data
dimensionProperties: string[] = [];
selectedGroup = undefined;
- //y and x axe
+ // y and x axe
yAxesKeys: [] = [];
xAxesKey = 'time';
@@ -69,26 +69,26 @@ export class ExplorerComponent implements OnInit {
isLoadingData;
displayIsLoadingData = false;
- //user messages
+ // user messages
noDateFoundinTimeRange;
noKeySelected;
noIndexSelection;
- //custom time range
+ // custom time range
dateRange: Date []; // [0] start, [1] end
- //Mat Group
+ // Mat Group
selectedMatGroup = new FormControl(0);
- //auto update data
- optionAutoUpdateData: boolean = false;
- autoUpdateData:boolean = false;
- autoUpdatePeriod: number = 10;
+ // auto update data
+ optionAutoUpdateData = false;
+ autoUpdateData = false;
+ autoUpdatePeriod = 10;
autoUpdateTimer;
autoUpdateTimerSubcribtion;
constructor(private restService: DatalakeRestService, private snackBar: MatSnackBar, public dialog: MatDialog) {
- let dateTmp = new Date();
+ const dateTmp = new Date();
this.setDateRange(dateTmp, new Date(dateTmp.getTime() - 60000 * 60 * 1));
}
@@ -111,8 +111,7 @@ export class ExplorerComponent implements OnInit {
if (this.selectedTimeUnit === '1 Day') {
this.groupbyUnit = 's';
this.groupbyValue = 10;
- }
- else if (this.selectedTimeUnit === '1 Day') {
+ } else if (this.selectedTimeUnit === '1 Day') {
this.groupbyUnit = 'm';
this.groupbyValue = 1;
} else if (this.selectedTimeUnit === '1 Week') {
@@ -139,7 +138,7 @@ export class ExplorerComponent implements OnInit {
}
if (this.selectedTimeUnit !== 'Custom') {
- let endDateTmp = new Date();
+ const endDateTmp = new Date();
let startDateTmp;
if (this.selectedTimeUnit === '1 Hour') {
@@ -151,7 +150,7 @@ export class ExplorerComponent implements OnInit {
} else if (this.selectedTimeUnit === '1 Month') {
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); //365 Days
+ startDateTmp = new Date(endDateTmp.getTime() - 60000 * 60 * 24 * 365); // 365 Days
}
this.setDateRange(startDateTmp, endDateTmp);
}
@@ -162,12 +161,12 @@ export class ExplorerComponent implements OnInit {
if (this.groupbyUnit === 'month') {
groupbyUnit = 'w';
groupbyValue = 4 * groupbyValue;
- } else if(this.groupbyUnit === 'year') {
+ } else if (this.groupbyUnit === 'year') {
groupbyUnit = 'd';
groupbyValue = 365 * groupbyValue;
}
if (this.selectedGroup === undefined) {
- let startTime = new Date().getTime();
+ const startTime = new Date().getTime();
this.restService.getData(this.selectedInfoResult.measureName, this.dateRange[0].getTime(), this.dateRange[1].getTime(),
groupbyUnit, groupbyValue).subscribe(
res => {
@@ -181,7 +180,7 @@ export class ExplorerComponent implements OnInit {
res => {
this.processReceivedGroupedData(res);
}
- )
+ );
}
} else {
@@ -197,7 +196,7 @@ export class ExplorerComponent implements OnInit {
res => {
this.processReceivedGroupedData(res);
}
- )
+ );
}
}
@@ -213,19 +212,19 @@ export class ExplorerComponent implements OnInit {
this.autoUpdateData = true;
this.autoUpdateTimer = timer(this.autoUpdatePeriod * 1000, this.autoUpdatePeriod * 1000);
this.autoUpdateTimerSubcribtion = this.autoUpdateTimer.subscribe(val => {
- //Just Load new data if last request finished
+ // Just Load new data if last request finished
if (!this.isLoadingData) {
- this.loadData(true)
+ this.loadData(true);
}
- })
+ });
}
} else {
- this.loadData(false)
+ this.loadData(false);
}
}
processReceivedData(res) {
- if(res.total > 0) {
+ if (res.total > 0) {
this.data = res as DataResult;
this.noDateFoundinTimeRange = false;
if (this.yAxesKeys.length === 0) {
@@ -259,21 +258,19 @@ export class ExplorerComponent implements OnInit {
this.selectedInfoResult = this._filter(index)[0];
this.selectedInfoResult.eventSchema.eventProperties.forEach(property => {
- //Check if property is Primitive (only primitives has a runtimeType
+ // Check if property is Primitive (only primitives has a runtimeType
if (property['runtimeType'] !== undefined) {
if (property['propertyScope'] !== undefined && property['propertyScope'] === 'DIMENSION_PROPERTY') {
- this.dimensionProperties.push(property['runtimeName'])
- }
- //if property is number and is no timestamp property
- else if (this.isNumberProperty(property) &&
+ this.dimensionProperties.push(property['runtimeName']);
+ } else if (this.isNumberProperty(property) &&
(property['domainProperties'] === undefined || (property.domainProperty !== 'http://schema.org/DateTime' &&
property['domainProperties'][0] != 'http://schema.org/DateTime'))) {
this.dataKeys.push(property['runtimeName']);
}
} else {
- //list and nested properties
- this.dataKeys.push(property['runtimeName'])
+ // list and nested properties
+ this.dataKeys.push(property['runtimeName']);
}
});
this.selectKey(this.dataKeys.slice(0, 3));
@@ -297,11 +294,11 @@ export class ExplorerComponent implements OnInit {
selectDimensionProperty(value) {
if (value !== this.selectedGroup) {
- //remove group property from the "data selection"
+ // remove group property from the "data selection"
this.dataKeys = this.dataKeys.filter(key => key !== value);
this.selectKey(this.dataKeys.filter(key => key !== value));
- //add last grouped property
+ // add last grouped property
if (this.selectedGroup !== undefined) {
this.dataKeys.push(this.selectedGroup);
}
@@ -363,11 +360,11 @@ export class ExplorerComponent implements OnInit {
}
handleFirstPage() {
- //TODO
+ // TODO
}
handleLastPage() {
- //TODO
+ // TODO
}
setDateRange(start, end) {
@@ -409,4 +406,4 @@ export class ExplorerComponent implements OnInit {
}
this.loadData(true);
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/data-explorer/explorer/explorer.css b/ui/src/app/data-explorer/explorer-widget/explorer.css
similarity index 100%
rename from ui/src/app/data-explorer/explorer/explorer.css
rename to ui/src/app/data-explorer/explorer-widget/explorer.css