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:11 UTC
[incubator-streampipes] 01/01: Move components to data explorer
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