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/03/03 14:01:37 UTC
[incubator-streampipes] branch STREAMPIPES-79 updated: First draft
of table works now
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
The following commit(s) were added to refs/heads/STREAMPIPES-79 by this push:
new bf45f40 First draft of table works now
bf45f40 is described below
commit bf45f40cf709ba67c44f68bb56a24b5baec68dd6
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Tue Mar 3 15:01:15 2020 +0100
First draft of table works now
---
ui/src/app/core-model/dashboard/DashboardWidget.ts | 14 +--
.../datalake/datalake-rest.service.ts | 3 +-
.../data-explorer-dashboard-grid.component.html | 12 ++-
.../grid/data-explorer-dashboard-grid.component.ts | 116 +++++++++++----------
.../data-explorer-dashboard-panel.component.html | 11 +-
.../data-explorer-dashboard-panel.component.ts | 18 +++-
.../data-explorer-dashboard-widget.component.html | 20 ++--
.../data-explorer-dashboard-widget.component.ts | 92 +++++++++-------
.../widgets/base/base-data-explorer-widget.ts | 65 +-----------
.../line-chart/line-chart-widget.component.html | 2 +-
.../line-chart/line-chart-widget.component.ts | 10 --
.../old-explorer-widget/old-explorer.component.ts | 1 +
.../widgets/table/table-widget.component.html | 35 ++++++-
.../widgets/table/table-widget.component.ts | 88 +++++++++++-----
.../data-explorer-v2.component.html | 7 +-
.../data-explorer-v2/data-explorer-v2.component.ts | 12 ++-
.../data-explorer-v2/data-explorer-v2.module.ts | 3 +
.../data-explorer-v2/services/data-lake.service.ts | 28 +++++
18 files changed, 316 insertions(+), 221 deletions(-)
diff --git a/ui/src/app/core-model/dashboard/DashboardWidget.ts b/ui/src/app/core-model/dashboard/DashboardWidget.ts
index d6897fd..c5964dc 100644
--- a/ui/src/app/core-model/dashboard/DashboardWidget.ts
+++ b/ui/src/app/core-model/dashboard/DashboardWidget.ts
@@ -16,10 +16,10 @@
*
*/
-import {RdfsClass} from "../../platform-services/tsonld/RdfsClass";
-import {RdfProperty} from "../../platform-services/tsonld/RdfsProperty";
-import {DashboardWidgetSettings} from "./DashboardWidgetSettings";
-import {UnnamedStreamPipesEntity} from "../../connect/model/UnnamedStreamPipesEntity";
+import { UnnamedStreamPipesEntity } from '../../connect/model/UnnamedStreamPipesEntity';
+import { RdfsClass } from '../../platform-services/tsonld/RdfsClass';
+import { RdfProperty } from '../../platform-services/tsonld/RdfsProperty';
+import { DashboardWidgetSettings } from './DashboardWidgetSettings';
@RdfsClass('sp:DashboardWidgetModel')
export class DashboardWidget extends UnnamedStreamPipesEntity {
@@ -37,12 +37,12 @@ export class DashboardWidget extends UnnamedStreamPipesEntity {
_id: string;
@RdfProperty('sp:couchDbRev')
- _ref:string;
+ _ref: string;
@RdfProperty('sp:hasDashboardWidgetId')
- widgetId:string;
+ widgetId: string;
constructor() {
super();
}
-}
\ No newline at end of file
+}
diff --git a/ui/src/app/core-services/datalake/datalake-rest.service.ts b/ui/src/app/core-services/datalake/datalake-rest.service.ts
index b23e67c..36c40fc 100644
--- a/ui/src/app/core-services/datalake/datalake-rest.service.ts
+++ b/ui/src/app/core-services/datalake/datalake-rest.service.ts
@@ -23,6 +23,7 @@ import { GroupedDataResult } from '../../core-model/datalake/GroupedDataResult';
import { InfoResult } from '../../core-model/datalake/InfoResult';
import { PageResult } from '../../core-model/datalake/PageResult';
import { AuthStatusService } from '../../services/auth-status.service';
+import { Observable } from "rxjs/Observable";
@Injectable()
export class DatalakeRestService {
@@ -60,7 +61,7 @@ export class DatalakeRestService {
return this.http.get<DataResult>(this.dataLakeUrlV3 + '/data/' + index + '/last/' + value + '/' + timeunit);
}
- getData(index, startDate, endDate, aggregationTimeUnit, aggregationValue) {
+ getData(index, startDate, endDate, aggregationTimeUnit, aggregationValue): Observable<DataResult> {
return this.http.get<DataResult>(this.dataLakeUrlV3 + '/data/' + index + '/' + startDate + '/' + endDate + '?aggregationUnit=' + aggregationTimeUnit + '&aggregationValue=' + aggregationValue);
}
diff --git a/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.html b/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.html
index 34b45b3..22e1557 100644
--- a/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.html
+++ b/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.html
@@ -23,10 +23,14 @@
<gridster [options]="options" [ngClass]="editMode ? 'edit' : ''">
<ng-container *ngFor="let item of dashboard.widgets;let i=index">
<gridster-item [item]="item" #gridsterItemComponent>
- <sp-data-explorer-dashboard-widget (updateCallback)="propagateItemUpdate($event)"
- (deleteCallback)="propagateItemRemoval($event)"
- [item]="item" [widget]="item"
- [editMode]="editMode" [gridsterItemComponent]="gridsterItemComponent"></sp-data-explorer-dashboard-widget>
+ <sp-data-explorer-dashboard-widget
+ [viewDateRange]="viewDateRange"
+ (updateCallback)="propagateItemUpdate($event)"
+ (deleteCallback)="propagateItemRemoval($event)"
+ [item]="item"
+ [widget]="item"
+ [editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"></sp-data-explorer-dashboard-widget>
</gridster-item>
</ng-container>
</gridster>
\ No newline at end of file
diff --git a/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.ts b/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.ts
index fbd7b40..d97b418 100644
--- a/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.ts
+++ b/ui/src/app/data-explorer-v2/components/grid/data-explorer-dashboard-grid.component.ts
@@ -17,16 +17,17 @@
*/
import {
- Component, EventEmitter,
- Input,
- OnChanges,
- OnInit, Output,
- QueryList,
- SimpleChanges,
- ViewChildren
+ Component, EventEmitter,
+ Input,
+ OnChanges,
+ OnInit, Output,
+ QueryList,
+ SimpleChanges,
+ ViewChildren
} from '@angular/core';
import { GridsterItemComponent, GridType } from 'angular-gridster2';
import { DataExplorerWidgetModel } from '../../../core-model/datalake/DataExplorerWidgetModel';
+import { DateRange } from '../../../core-model/datalake/DateRange';
import { GridsterInfo } from '../../../dashboard-v2/models/gridster-info.model';
import { IDataViewDashboard, IDataViewDashboardConfig, IDataViewDashboardItem } from '../../models/dataview-dashboard.model';
import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
@@ -34,64 +35,73 @@ import { RefreshDashboardService } from '../../services/refresh-dashboard.servic
import { ResizeService } from '../../services/resize.service';
@Component({
- selector: 'sp-data-explorer-dashboard-grid',
- templateUrl: './data-explorer-dashboard-grid.component.html',
- styleUrls: ['./data-explorer-dashboard-grid.component.css']
+ selector: 'sp-data-explorer-dashboard-grid',
+ templateUrl: './data-explorer-dashboard-grid.component.html',
+ styleUrls: ['./data-explorer-dashboard-grid.component.css']
})
export class DataExplorerDashboardGridComponent implements OnInit, OnChanges {
- @Input() editMode: boolean;
- @Input() dashboard: IDataViewDashboard;
+ @Input()
+ editMode: boolean;
- @Output() deleteCallback: EventEmitter<IDataViewDashboardItem> = new EventEmitter<IDataViewDashboardItem>();
- @Output() updateCallback: EventEmitter<DataExplorerWidgetModel> = new EventEmitter<DataExplorerWidgetModel>();
+ @Input()
+ dashboard: IDataViewDashboard;
- options: IDataViewDashboardConfig;
- loaded = false;
+ /**
+ * This is the date range (start, end) to view the data and is set in data-explorer.ts
+ */
+ @Input()
+ viewDateRange: DateRange;
- @ViewChildren(GridsterItemComponent) gridsterItemComponents: QueryList<GridsterItemComponent>;
+ @Output() deleteCallback: EventEmitter<IDataViewDashboardItem> = new EventEmitter<IDataViewDashboardItem>();
+ @Output() updateCallback: EventEmitter<DataExplorerWidgetModel> = new EventEmitter<DataExplorerWidgetModel>();
- constructor(private resizeService: ResizeService,
- private dashboardService: DataViewDataExplorerService,
- private refreshDashboardService: RefreshDashboardService) {
+ options: IDataViewDashboardConfig;
+ loaded = false;
- }
+ @ViewChildren(GridsterItemComponent) gridsterItemComponents: QueryList<GridsterItemComponent>;
- ngOnInit(): void {
- this.options = {
- disablePushOnDrag: true,
- draggable: { enabled: this.editMode },
- gridType: GridType.VerticalFixed,
- minCols: 8,
- maxCols: 8,
- minRows: 4,
- fixedRowHeight: 100,
- fixedColWidth: 100,
- resizable: { enabled: this.editMode },
- itemResizeCallback: ((item, itemComponent) => {
- this.resizeService.notify({gridsterItem: item, gridsterItemComponent: itemComponent} as GridsterInfo);
- }),
- itemInitCallback: ((item, itemComponent) => {
- this.resizeService.notify({gridsterItem: item, gridsterItemComponent: itemComponent} as GridsterInfo);
- })
- };
- }
+ constructor(private resizeService: ResizeService,
+ private dashboardService: DataViewDataExplorerService,
+ private refreshDashboardService: RefreshDashboardService) {
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['editMode'] && this.options) {
- this.options.draggable.enabled = this.editMode;
- this.options.resizable.enabled = this.editMode;
- this.options.displayGrid = this.editMode ? 'always' : 'none';
- this.options.api.optionsChanged();
- }
- }
+ }
- propagateItemRemoval(widget: IDataViewDashboardItem) {
- this.deleteCallback.emit(widget);
- }
+ ngOnInit(): void {
+ this.options = {
+ disablePushOnDrag: true,
+ draggable: { enabled: this.editMode },
+ gridType: GridType.VerticalFixed,
+ minCols: 8,
+ maxCols: 8,
+ minRows: 4,
+ fixedRowHeight: 100,
+ fixedColWidth: 100,
+ resizable: { enabled: this.editMode },
+ itemResizeCallback: ((item, itemComponent) => {
+ this.resizeService.notify({gridsterItem: item, gridsterItemComponent: itemComponent} as GridsterInfo);
+ }),
+ itemInitCallback: ((item, itemComponent) => {
+ this.resizeService.notify({gridsterItem: item, gridsterItemComponent: itemComponent} as GridsterInfo);
+ })
+ };
+ }
- propagateItemUpdate(dashboardWidget: DataExplorerWidgetModel) {
- this.updateCallback.emit(dashboardWidget);
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['editMode'] && this.options) {
+ this.options.draggable.enabled = this.editMode;
+ this.options.resizable.enabled = this.editMode;
+ this.options.displayGrid = this.editMode ? 'always' : 'none';
+ this.options.api.optionsChanged();
}
+ }
+
+ propagateItemRemoval(widget: IDataViewDashboardItem) {
+ this.deleteCallback.emit(widget);
+ }
+
+ propagateItemUpdate(dashboardWidget: DataExplorerWidgetModel) {
+ this.updateCallback.emit(dashboardWidget);
+ }
}
diff --git a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html
index fc4bdac..119ca8b 100644
--- a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html
+++ b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.html
@@ -28,8 +28,11 @@
visualization</button>
</div>
- <sp-data-explorer-dashboard-grid [editMode]="editMode" [dashboard]="dashboard"
- (updateCallback)="updateAndQueueItemForDeletion($event)"
- (deleteCallback)="removeAndQueueItemForDeletion($event)"
- class="h-100"></sp-data-explorer-dashboard-grid>
+ <sp-data-explorer-dashboard-grid
+ [editMode]="editMode"
+ [dashboard]="dashboard"
+ [viewDateRange]="viewDateRange"
+ (updateCallback)="updateAndQueueItemForDeletion($event)"
+ (deleteCallback)="removeAndQueueItemForDeletion($event)"
+ class="h-100"></sp-data-explorer-dashboard-grid>
</div>
\ No newline at end of file
diff --git a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts
index 895ce1b..4a05559 100644
--- a/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer-v2/components/panel/data-explorer-dashboard-panel.component.ts
@@ -21,6 +21,7 @@ import { MatDialog } from '@angular/material/dialog';
import { Observable, Subscription } from 'rxjs';
import { forkJoin } from 'rxjs/internal/observable/forkJoin';
import { DataExplorerWidgetModel } from '../../../core-model/datalake/DataExplorerWidgetModel';
+import { DateRange } from '../../../core-model/datalake/DateRange';
import { DataExplorerAddVisualizationDialogComponent } from '../../dialogs/add-widget/data-explorer-add-visualization-dialog.component';
import { IDataViewDashboard, IDataViewDashboardItem } from '../../models/dataview-dashboard.model';
import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
@@ -33,9 +34,20 @@ import { RefreshDashboardService } from '../../services/refresh-dashboard.servic
})
export class DataExplorerDashboardPanelComponent implements OnInit {
- @Input() dashboard: IDataViewDashboard;
- @Input('editMode') editMode: boolean;
- @Output('editModeChange') editModeChange: EventEmitter<boolean> = new EventEmitter();
+ @Input()
+ dashboard: IDataViewDashboard;
+
+ /**
+ * This is the date range (start, end) to view the data and is set in data-explorer.ts
+ */
+ @Input()
+ viewDateRange: DateRange;
+
+ @Input('editMode')
+ editMode: boolean;
+
+ @Output('editModeChange')
+ editModeChange: EventEmitter<boolean> = new EventEmitter();
public items: IDataViewDashboardItem[];
diff --git a/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.html
index 01f4a26..c342f90 100644
--- a/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.html
+++ b/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.html
@@ -32,14 +32,22 @@
<!-- <div *ngIf="widget."></div>-->
<div *ngIf="widgetLoaded" class="h-100">
<div *ngIf="widget.widgetType === 'table'" class="h-100 p-0">
- <sp-data-explorer-table-widget [gridsterItemComponent]="gridsterItemComponent" [gridsterItem]="item"
- [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget" class="h-100"></sp-data-explorer-table-widget>
+ <sp-data-explorer-table-widget
+ [viewDateRange]="viewDateRange"
+ [gridsterItem]="item"
+ [gridsterItemComponent]="gridsterItemComponent"
+ [editMode]="editMode"
+ [dataViewDashboardItem]="widget"
+ [dataExplorerWidget]="configuredWidget" class="h-100"></sp-data-explorer-table-widget>
</div>
<div *ngIf="widget.widgetType === 'line-chart'" class="h-100 p-0">
- <sp-data-explorer-line-chart-widget [gridsterItemComponent]="gridsterItemComponent" [gridsterItem]="item"
- [widget]="widget" [editMode]="editMode"
- [widgetConfig]="configuredWidget" class="h-100"></sp-data-explorer-line-chart-widget>
+ <sp-data-explorer-line-chart-widget
+ [viewDateRange]="viewDateRange"
+ [gridsterItem]="item"
+ [gridsterItemComponent]="gridsterItemComponent"
+ [editMode]="editMode"
+ [dataViewDashboardItem]="widget"
+ [dataExplorerWidget]="configuredWidget" class="h-100"></sp-data-explorer-line-chart-widget>
</div>
</div>
</div>
diff --git a/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.ts b/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.ts
index 2f2bc3f..2ec1b95 100644
--- a/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.ts
+++ b/ui/src/app/data-explorer-v2/components/widget/data-explorer-dashboard-widget.component.ts
@@ -20,58 +20,72 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { GridsterItem, GridsterItemComponent } from 'angular-gridster2';
import { DataExplorerWidgetModel } from '../../../core-model/datalake/DataExplorerWidgetModel';
+import { DateRange } from '../../../core-model/datalake/DateRange';
import { DataExplorerAddVisualizationDialogComponent } from '../../dialogs/add-widget/data-explorer-add-visualization-dialog.component';
import { IDataViewDashboardItem } from '../../models/dataview-dashboard.model';
import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
@Component({
- selector: 'sp-data-explorer-dashboard-widget',
- templateUrl: './data-explorer-dashboard-widget.component.html',
- styleUrls: ['./data-explorer-dashboard-widget.component.css']
+ selector: 'sp-data-explorer-dashboard-widget',
+ templateUrl: './data-explorer-dashboard-widget.component.html',
+ styleUrls: ['./data-explorer-dashboard-widget.component.css']
})
export class DataExplorerDashboardWidgetComponent implements OnInit {
- @Input() widget: IDataViewDashboardItem;
- @Input() editMode: boolean;
- @Input() item: GridsterItem;
- @Input() gridsterItemComponent: GridsterItemComponent;
+ @Input()
+ widget: IDataViewDashboardItem;
- @Output() deleteCallback: EventEmitter<IDataViewDashboardItem> = new EventEmitter<IDataViewDashboardItem>();
- @Output() updateCallback: EventEmitter<DataExplorerWidgetModel> = new EventEmitter<DataExplorerWidgetModel>();
+ @Input()
+ editMode: boolean;
- widgetLoaded = false;
- configuredWidget: DataExplorerWidgetModel;
+ @Input()
+ item: GridsterItem;
- constructor(private dataViewDataExplorerService: DataViewDataExplorerService,
- private dialog: MatDialog) {
- }
+ @Input()
+ gridsterItemComponent: GridsterItemComponent;
- ngOnInit(): void {
- this.dataViewDataExplorerService.getWidget(this.widget.id).subscribe(response => {
- this.configuredWidget = response;
- this.widgetLoaded = true;
- });
- }
+ /**
+ * This is the date range (start, end) to view the data and is set in data-explorer.ts
+ */
+ @Input()
+ viewDateRange: DateRange;
- removeWidget() {
- this.deleteCallback.emit(this.widget);
- }
+ @Output() deleteCallback: EventEmitter<IDataViewDashboardItem> = new EventEmitter<IDataViewDashboardItem>();
+ @Output() updateCallback: EventEmitter<DataExplorerWidgetModel> = new EventEmitter<DataExplorerWidgetModel>();
- editWidget(): void {
- const dialogRef = this.dialog.open(DataExplorerAddVisualizationDialogComponent, {
- width: '70%',
- height: '500px',
- panelClass: 'custom-dialog-container',
- data: {
- 'widget': this.configuredWidget
- }
- });
+ widgetLoaded = false;
+ configuredWidget: DataExplorerWidgetModel;
- dialogRef.afterClosed().subscribe(widget => {
- if (widget) {
- this.configuredWidget = widget;
- this.updateCallback.emit(this.configuredWidget);
- }
- });
- }
+ constructor(private dataViewDataExplorerService: DataViewDataExplorerService,
+ private dialog: MatDialog) {
+ }
+
+ ngOnInit(): void {
+ this.dataViewDataExplorerService.getWidget(this.widget.id).subscribe(response => {
+ this.configuredWidget = response;
+ this.widgetLoaded = true;
+ });
+ }
+
+ removeWidget() {
+ this.deleteCallback.emit(this.widget);
+ }
+
+ editWidget(): void {
+ const dialogRef = this.dialog.open(DataExplorerAddVisualizationDialogComponent, {
+ width: '70%',
+ height: '500px',
+ panelClass: 'custom-dialog-container',
+ data: {
+ 'widget': this.configuredWidget
+ }
+ });
+
+ dialogRef.afterClosed().subscribe(widget => {
+ if (widget) {
+ this.configuredWidget = widget;
+ this.updateCallback.emit(this.configuredWidget);
+ }
+ });
+ }
}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts b/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts
index 9564ed6..6fce803 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/base/base-data-explorer-widget.ts
@@ -16,77 +16,22 @@
*
*/
-import { Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Input } from '@angular/core';
import { GridsterItem, GridsterItemComponent } from 'angular-gridster2';
-import { Subscription } from 'rxjs';
-import { DashboardWidget } from '../../../../core-model/dashboard/DashboardWidget';
+import { DataExplorerWidgetModel } from '../../../../core-model/datalake/DataExplorerWidgetModel';
import { IDataViewDashboardItem } from '../../../models/dataview-dashboard.model';
-import { WidgetConfigBuilder } from '../../../registry/widget-config-builder';
-import { StaticPropertyExtractor } from '../../../sdk/extractor/static-property-extractor';
-export abstract class BaseDataExplorerWidget implements OnChanges, OnInit, OnDestroy {
+export abstract class BaseDataExplorerWidget {
protected constructor() {
}
- static readonly PADDING: number = 20;
- static readonly EDIT_HEADER_HEIGHT: number = 40;
-
- @Input() widget: IDataViewDashboardItem;
- @Input() widgetConfig: DashboardWidget;
@Input() gridsterItem: GridsterItem;
@Input() gridsterItemComponent: GridsterItemComponent;
@Input() editMode: boolean;
- subscription: Subscription;
-
- hasSelectableColorSettings: boolean;
- hasTitlePanelSettings: boolean;
-
- selectedBackgroundColor: string;
- selectedPrimaryTextColor: string;
- selectedSecondaryTextColor: string;
- selectedTitle: string;
-
- defaultBackgroundColor = '#1B1464';
- defaultPrimaryTextColor = '#FFFFFF';
- defaultSecondaryTextColor = '#39B54A';
-
- ngOnInit(): void {
- // this.prepareConfigExtraction();
- }
-
- prepareConfigExtraction() {
- // const extractor: StaticPropertyExtractor = new StaticPropertyExtractor(
- // this.widgetConfig.dashboardWidgetDataConfig.schema, this.widgetConfig.dashboardWidgetSettings.config);
- // if (extractor.hasStaticProperty(WidgetConfigBuilder.BACKGROUND_COLOR_KEY)) {
- // this.hasSelectableColorSettings = true;
- // this.selectedBackgroundColor = extractor.selectedColor(WidgetConfigBuilder.BACKGROUND_COLOR_KEY);
- // this.selectedPrimaryTextColor = extractor.selectedColor(WidgetConfigBuilder.PRIMARY_TEXT_COLOR_KEY);
- // this.selectedSecondaryTextColor = extractor.selectedColor(WidgetConfigBuilder.SECONDARY_TEXT_COLOR_KEY);
- // } else {
- // this.selectedBackgroundColor = this.defaultBackgroundColor;
- // this.selectedPrimaryTextColor = this.defaultPrimaryTextColor;
- // this.selectedSecondaryTextColor = this.defaultSecondaryTextColor;
- // }
- // if (extractor.hasStaticProperty(WidgetConfigBuilder.TITLE_KEY)) {
- // this.hasTitlePanelSettings = true;
- // this.selectedTitle = extractor.stringParameter(WidgetConfigBuilder.TITLE_KEY);
- // }
- // this.extractConfig(extractor);
- }
-
- ngOnDestroy(): void {
- this.subscription.unsubscribe();
- }
-
- protected abstract extractConfig(extractor: StaticPropertyExtractor);
+ @Input() dataViewDashboardItem: IDataViewDashboardItem;
+ @Input() dataExplorerWidget: DataExplorerWidgetModel;
- protected abstract onEvent(event: any);
- ngOnChanges(changes: SimpleChanges): void {
- if (changes['widgetConfig']) {
- this.prepareConfigExtraction();
- }
- }
}
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 665f3ba..2e2d369 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
@@ -16,7 +16,7 @@
~
-->
-<div class="circleNumber" [ngStyle]="{'background-color': selectedBackgroundColor, 'color': selectedPrimaryTextColor}">
+<div class="circleNumber">
<div class="title-panel" *ngIf="hasTitlePanelSettings">
{{selectedTitle}}
</div>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
index 2b5e22b..f7acbe0 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/line-chart/line-chart-widget.component.ts
@@ -36,23 +36,13 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
ngOnInit(): void {
- super.ngOnInit();
}
ngOnDestroy(): void {
- super.ngOnDestroy();
- }
-
- extractConfig(extractor: StaticPropertyExtractor) {
- // this.selectedProperty = extractor.mappingPropertyValue(TableConfig.NUMBER_MAPPING_KEY);
}
isNumber(item: any): boolean {
return false;
}
- protected onEvent(event: any) {
- this.item = event[this.selectedProperty];
- }
-
}
diff --git a/ui/src/app/data-explorer-v2/components/widgets/old-explorer-widget/old-explorer.component.ts b/ui/src/app/data-explorer-v2/components/widgets/old-explorer-widget/old-explorer.component.ts
index a2bf9b7..513282c 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/old-explorer-widget/old-explorer.component.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/old-explorer-widget/old-explorer.component.ts
@@ -36,6 +36,7 @@ import { DataDownloadDialog } from './datadownloadDialog/dataDownload.dialog';
})
export class OldExplorerComponent implements OnInit {
+
myControl = new FormControl();
infoResult: InfoResult[];
filteredIndexInfos: Observable<InfoResult[]>;
diff --git a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html
index 665f3ba..7aa0fcb 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html
+++ b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.html
@@ -16,11 +16,36 @@
~
-->
-<div class="circleNumber" [ngStyle]="{'background-color': selectedBackgroundColor, 'color': selectedPrimaryTextColor}">
- <div class="title-panel" *ngIf="hasTitlePanelSettings">
- {{selectedTitle}}
- </div>
+<div>
+ <div fxLayout="column" fxLayoutAlign=" stretch">
+ <div *ngIf="enablePaging" fxLayout="row" fxLayoutAlign="space-between center">
+
+ <div *ngIf="dataMode === 'group' && transformedData !== undefined">
+ <mat-form-field style="margin-right: 1px;top: -3px;height: 1px" appearance="outline">
+ <mat-label>Select Group</mat-label>
+ <mat-select [ngModel]="this.selectedGroup" (selectionChange)="selectGroup($event.value)">
+ <mat-option *ngFor="let key of getGroupKeys()" [value]="key" style="background-color: #FFFFFF">
+ {{key}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ </div>
+
+
+ <div style="overflow: auto">
+ <table mat-table [dataSource]="dataSource">
- <sp-old-explorer></sp-old-explorer>
+ <ng-container *ngFor="let element of displayedColumns" [cdkColumnDef]="element">
+ <th mat-header-cell *matHeaderCellDef><label style="font-size: large">{{element}}</label></th>
+ <td mat-cell *matCellDef="let row">{{row[element]}}</td>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+ </table>
+ </div>
+
+ </div>
</div>
diff --git a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts
index 86e3846..c4b02d5 100644
--- a/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts
+++ b/ui/src/app/data-explorer-v2/components/widgets/table/table-widget.component.ts
@@ -17,43 +17,83 @@
*/
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { StaticPropertyExtractor } from '../../../sdk/extractor/static-property-extractor';
+import { DateRange } from '../../../../core-model/datalake/DateRange';
+import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
-import { TableConfig } from './table-config';
+import { MatTableDataSource } from "@angular/material/table";
+import { DataResult } from "../../../../core-model/datalake/DataResult";
@Component({
- selector: 'sp-data-explorer-table-widget',
- templateUrl: './table-widget.component.html',
- styleUrls: ['./table-widget.component.css']
+ selector: 'sp-data-explorer-table-widget',
+ templateUrl: './table-widget.component.html',
+ styleUrls: ['./table-widget.component.css']
})
export class TableWidgetComponent extends BaseDataExplorerWidget implements OnInit, OnDestroy {
- item: any;
+ @Input()
+ viewDateRange: DateRange;
- selectedProperty: string;
+ displayedColumns: string[] = ['time', 'count', 'randomNumber', 'timestamp'];
- constructor() {
- super();
- }
+ dataSource = new MatTableDataSource();
+ // item: any;
+ //
+ // selectedProperty: string;
- ngOnInit(): void {
- super.ngOnInit();
- }
+ constructor(private dataLakeRestService: DatalakeRestService) {
+ super();
+ }
- ngOnDestroy(): void {
- super.ngOnDestroy();
- }
+ ngOnInit(): void {
+ const groupbyUnit = 's';
+ const groupbyValue = 1;
- extractConfig(extractor: StaticPropertyExtractor) {
- // this.selectedProperty = extractor.mappingPropertyValue(TableConfig.NUMBER_MAPPING_KEY);
- }
+ this.dataLakeRestService.getData(
+ this.dataExplorerWidget.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime(),
+ groupbyUnit, groupbyValue).subscribe(
+ (res: DataResult) => {
- isNumber(item: any): boolean {
- return false;
- }
+ const transformed = this.transformData(res, 'time');
+
+ this.dataSource.data = this.displayData(transformed, 'time', this.displayedColumns);
+ }
+ );
+ }
+
+
+ transformData(data: DataResult, xKey: string): DataResult {
+ const tmp = [];
+ data.rows.forEach(row =>
+ tmp.push(this.createTableObject(data.headers, row))
+ );
+ data.rows = tmp;
- protected onEvent(event: any) {
- this.item = event[this.selectedProperty];
+ return data;
+ }
+
+
+ displayData(transformedData: DataResult, xKey: string, yKeys: string[]) {
+ this.displayedColumns = Object.assign([], yKeys);
+ // this.displayedColumns.unshift(xKey);
+
+ // this.dataSource.data = transformedData.rows;
+ return transformedData.rows;
}
+
+ createTableObject(keys, values) {
+ const object = {};
+ keys.forEach((key, index) => {
+ object[key] = values[index];
+ });
+ return object;
+ }
+
+
+ ngOnDestroy(): void {
+ }
+
+ isNumber(item: any): boolean {
+ return false;
+ }
}
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.component.html b/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
index c67ef0d..678e218 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.component.html
@@ -28,7 +28,7 @@
<!--</div>-->
<!--<div fxFlex fxLayoutAlign="start center" class="mr-20">-->
- <sp-time-range-selector *ngIf="selectedIndex" (dateRangeEmitter)="updateDate($event)"></sp-time-range-selector>
+ <sp-time-range-selector *ngIf="selectedIndex" (dateRangeEmitter)="updateDateRange($event)"></sp-time-range-selector>
<button mat-button mat-icon-button color="primary"
*ngIf="selectedIndex > 0" (click)="toggleEditMode()" [disabled]="editMode">
@@ -46,7 +46,10 @@
*ngIf="!dashboardTabSelected">
</sp-data-explorer-dashboard-overview>
- <sp-data-explorer-dashboard-panel fxLayout="column" [(editMode)]="editMode" [dashboard]="selectedDataViewDashboard"
+ <sp-data-explorer-dashboard-panel fxLayout="column"
+ [(editMode)]="editMode"
+ [dashboard]="selectedDataViewDashboard"
+ [viewDateRange]="viewDateRange"
style="height:100%;" *ngIf="dashboardTabSelected">
</sp-data-explorer-dashboard-panel>
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.component.ts b/ui/src/app/data-explorer-v2/data-explorer-v2.component.ts
index 3e9ee37..1b52ccb 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.component.ts
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.component.ts
@@ -38,11 +38,19 @@ export class DataExplorerV2Component implements OnInit {
dataViewDashboards: IDataViewDashboard[];
+ /**
+ * This is the date range (start, end) to view the data
+ */
+ viewDateRange: DateRange;
+
constructor(private dataViewService: DataViewDataExplorerService,
private refreshDashboardService: RefreshDashboardService) {}
+
public ngOnInit() {
this.getDashboards();
+ const currentTime = new Date();
+ this.viewDateRange = new DateRange(new Date(currentTime.getTime() - 100000 * 60000), currentTime);
this.refreshDashboardService.refreshSubject.subscribe(currentDashboardId => {
this.getDashboards(currentDashboardId);
});
@@ -82,7 +90,7 @@ export class DataExplorerV2Component implements OnInit {
this.editMode = ! (this.editMode);
}
- updateDate(dateRange: DateRange) {
- console.log(dateRange);
+ updateDateRange(dateRange: DateRange) {
+ this.viewDateRange = dateRange;
}
}
diff --git a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
index bc52703..bb10a0f 100644
--- a/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
+++ b/ui/src/app/data-explorer-v2/data-explorer-v2.module.ts
@@ -53,6 +53,8 @@ import { DataExplorerEditDataViewDialogComponent } from './dialogs/edit-dashboar
import { DataViewDataExplorerService } from './services/data-view-data-explorer.service';
import { RefreshDashboardService } from './services/refresh-dashboard.service';
import { ResizeService } from './services/resize.service';
+import { DatalakeRestService } from "../core-services/datalake/datalake-rest.service";
+import { DataLakeService } from "./services/data-lake.service";
const dashboardWidgets = [
@@ -111,6 +113,7 @@ export const MY_NATIVE_FORMATS = {
providers: [
SharedDatalakeRestService,
DataViewDataExplorerService,
+ DataLakeService,
ResizeService,
RefreshDashboardService,
SemanticTypeUtilsService,
diff --git a/ui/src/app/data-explorer-v2/services/data-lake.service.ts b/ui/src/app/data-explorer-v2/services/data-lake.service.ts
new file mode 100644
index 0000000..ff6116c
--- /dev/null
+++ b/ui/src/app/data-explorer-v2/services/data-lake.service.ts
@@ -0,0 +1,28 @@
+/*
+ * 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 { Injectable } from "@angular/core";
+
+@Injectable()
+export class DataLakeService {
+
+ constructor() {
+ }
+
+
+}