You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/08/07 15:51:48 UTC
[incubator-streampipes] branch STREAMPIPES-145 updated (5c50ba2 ->
8f8b5bf)
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a change to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
from 5c50ba2 Merge branch 'STREAMPIPES-145' of github.com:apache/incubator-streampipes into STREAMPIPES-145
new 7faa21d [STREAMPIPES-79] Improve add widget dialog in data explorer
new 4ac7033 [STREAMPIPES-79] Improve layout of time selection
new 2376a17 [STREAMPIPES-79] Improve grid layout of data explorer
new 8f8b5bf Merge branch 'STREAMPIPES-145' of github.com:apache/incubator-streampipes into STREAMPIPES-145
The 4 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.
Summary of changes:
.../data-explorer-dashboard-grid.component.html | 2 +-
...=> data-explorer-dashboard-grid.component.scss} | 18 +++-
.../grid/data-explorer-dashboard-grid.component.ts | 36 +++++--
.../data-explorer-dashboard-panel.component.html | 14 +--
.../data-explorer-dashboard-panel.component.ts | 31 ++++--
.../time-selector/timeRangeSelector.component.css | 29 -----
.../time-selector/timeRangeSelector.component.html | 72 +++++++------
.../time-selector/timeRangeSelector.component.scss | 81 ++++++++++++++
.../time-selector/timeRangeSelector.component.ts | 7 +-
.../data-explorer-dashboard-widget.component.html | 2 +-
.../widgets/table/table-widget.component.css | 4 -
.../widgets/table/table-widget.component.html | 4 +-
.../app/data-explorer/data-explorer.component.css | 19 ++++
.../app/data-explorer/data-explorer.component.html | 38 +++++--
.../app/data-explorer/data-explorer.component.ts | 21 +++-
ui/src/app/data-explorer/data-explorer.module.ts | 117 +++++++++++----------
...explorer-add-visualization-dialog.component.css | 16 +++
...xplorer-add-visualization-dialog.component.html | 39 +++----
...-explorer-add-visualization-dialog.component.ts | 4 +-
.../models/dataview-dashboard.model.ts | 5 +
.../registry/data-explorer-widget-registry.ts | 11 +-
21 files changed, 367 insertions(+), 203 deletions(-)
rename ui/src/app/data-explorer/components/grid/{data-explorer-dashboard-grid.component.css => data-explorer-dashboard-grid.component.scss} (71%)
delete mode 100644 ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.css
create mode 100644 ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
[incubator-streampipes] 04/04: Merge branch 'STREAMPIPES-145' of
github.com:apache/incubator-streampipes into STREAMPIPES-145
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 8f8b5bf60724231b461e0273ab39592e00d0bf5d
Merge: 2376a17 5c50ba2
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 7 17:51:27 2020 +0200
Merge branch 'STREAMPIPES-145' of github.com:apache/incubator-streampipes into STREAMPIPES-145
ui/src/app/connect/connect.module.ts | 3 -
.../connect/new-adapter/new-adapter.component.html | 19 ++++--
.../connect/new-adapter/new-adapter.component.ts | 44 ++++++++------
.../select-static-properties.component.css | 26 --------
.../select-static-properties.component.html | 26 --------
.../select-static-properties.component.ts | 70 ----------------------
6 files changed, 40 insertions(+), 148 deletions(-)
[incubator-streampipes] 03/04: [STREAMPIPES-79] Improve grid layout
of data explorer
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 2376a17d11ecccbe1a6af741cfa37f6852c378e8
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 7 17:51:09 2020 +0200
[STREAMPIPES-79] Improve grid layout of data explorer
---
.../data-explorer-dashboard-grid.component.html | 2 +-
...=> data-explorer-dashboard-grid.component.scss} | 18 +++-
.../grid/data-explorer-dashboard-grid.component.ts | 36 +++++--
.../data-explorer-dashboard-panel.component.html | 14 +--
.../data-explorer-dashboard-panel.component.ts | 31 ++++--
.../time-selector/timeRangeSelector.component.html | 2 -
.../app/data-explorer/data-explorer.component.css | 4 +
.../app/data-explorer/data-explorer.component.html | 18 +++-
.../app/data-explorer/data-explorer.component.ts | 19 +++-
ui/src/app/data-explorer/data-explorer.module.ts | 117 +++++++++++----------
10 files changed, 166 insertions(+), 95 deletions(-)
diff --git a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.html b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.html
index 22e1557..86ba2ed 100644
--- a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.html
+++ b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.html
@@ -20,7 +20,7 @@
<h2>{{dashboard.name}}</h2>
<h3>{{dashboard.description}}</h3>
</div>
-<gridster [options]="options" [ngClass]="editMode ? 'edit' : ''">
+<gridster [options]="options" [ngClass]="editMode ? 'edit' : ''" class="custom-gridster-style">
<ng-container *ngFor="let item of dashboard.widgets;let i=index">
<gridster-item [item]="item" #gridsterItemComponent>
<sp-data-explorer-dashboard-widget
diff --git a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.css b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.scss
similarity index 71%
rename from ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.css
rename to ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.scss
index 791a047..cfa6fbc 100644
--- a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.css
+++ b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.scss
@@ -16,16 +16,26 @@
*
*/
-gridster ::ng-deep {
+gridster.custom-gridster-style ::ng-deep {
background: white;
}
-gridster.edit ::ng-deep {
- background: #d3d3d3;
+gridster.custom-gridster-style.edit ::ng-deep {
+ background: white;
}
gridster.scrollVertical ::ng-deep {
min-height: 100%;
display: flex;
flex: 1 1 100%;
-}
\ No newline at end of file
+}
+
+::ng-deep gridster.custom-gridster-style>.gridster-row {
+ border-bottom: 1px solid #ccc;
+ border-top: 1px solid #ccc;
+}
+
+::ng-deep gridster.custom-gridster-style>div.gridster-column {
+ border-left: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+}
diff --git a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts
index 1b6f702..d983610 100644
--- a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts
+++ b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts
@@ -17,27 +17,34 @@
*/
import {
- Component, EventEmitter,
+ Component,
+ EventEmitter,
Input,
OnChanges,
- OnInit, Output,
+ OnInit,
+ Output,
QueryList,
SimpleChanges,
- ViewChildren
+ ViewChildren,
+ ViewEncapsulation
} from '@angular/core';
-import { GridsterItemComponent, GridType } from 'angular-gridster2';
-import { DateRange } from '../../../core-model/datalake/DateRange';
-import { GridsterInfo } from '../../../dashboard/models/gridster-info.model';
-import { IDataViewDashboard, IDataViewDashboardConfig, IDataViewDashboardItem } from '../../models/dataview-dashboard.model';
-import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
-import { RefreshDashboardService } from '../../services/refresh-dashboard.service';
-import { ResizeService } from '../../services/resize.service';
+import {GridsterItemComponent, GridType} from 'angular-gridster2';
+import {DateRange} from '../../../core-model/datalake/DateRange';
+import {GridsterInfo} from '../../../dashboard/models/gridster-info.model';
+import {
+ IDataViewDashboard,
+ IDataViewDashboardConfig,
+ IDataViewDashboardItem
+} from '../../models/dataview-dashboard.model';
+import {DataViewDataExplorerService} from '../../services/data-view-data-explorer.service';
+import {RefreshDashboardService} from '../../services/refresh-dashboard.service';
+import {ResizeService} from '../../services/resize.service';
import {DataExplorerWidgetModel} from "../../../core-model/gen/streampipes-model";
@Component({
selector: 'sp-data-explorer-dashboard-grid',
templateUrl: './data-explorer-dashboard-grid.component.html',
- styleUrls: ['./data-explorer-dashboard-grid.component.css']
+ styleUrls: ['./data-explorer-dashboard-grid.component.scss'],
})
export class DataExplorerDashboardGridComponent implements OnInit, OnChanges {
@@ -77,6 +84,8 @@ export class DataExplorerDashboardGridComponent implements OnInit, OnChanges {
minRows: 4,
fixedRowHeight: 100,
fixedColWidth: 100,
+ margin: 5,
+ displayGrid: "always",
resizable: { enabled: this.editMode },
itemResizeCallback: ((item, itemComponent) => {
this.resizeService.notify({gridsterItem: item, gridsterItemComponent: itemComponent} as GridsterInfo);
@@ -104,4 +113,9 @@ export class DataExplorerDashboardGridComponent implements OnInit, OnChanges {
this.updateCallback.emit(dashboardWidget);
}
+ toggleGrid() {
+ this.options.displayGrid = this.options.displayGrid === "none" ? "always" : "none";
+ this.options.api.optionsChanged();
+ }
+
}
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
index 76ba569..2890ba4 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.html
@@ -16,19 +16,9 @@
~
-->
-<div fxFlex="100" fxLayout="column" class="m-20">
- <div fxLayout="row wrap" style="margin-bottom:20px;" *ngIf="editMode">
- <button mat-button mat-raised-button color="primary" (click)="updateDashboardAndCloseEditMode()"
- style="margin-right:10px;">Save
- </button>
- <button mat-button mat-raised-button class="mat-basic" (click)="discardChanges()"
- style="margin-right:10px;">Discard
- </button>
- <button mat-button mat-raised-button color="primary" (click)="addWidget()" [disabled]="!editMode">Add
- visualization</button>
- </div>
-
+<div fxFlex="100" fxLayout="column">
<sp-data-explorer-dashboard-grid
+ #dashboardGrid
[editMode]="editMode"
[dashboard]="dashboard"
[viewDateRange]="viewDateRange"
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
index 0c02b07..8d13144 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
@@ -16,7 +16,7 @@
*
*/
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Observable, Subscription } from 'rxjs';
import { forkJoin } from 'rxjs/internal/observable/forkJoin';
@@ -26,6 +26,7 @@ import { IDataViewDashboard, IDataViewDashboardItem } from '../../models/datavie
import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
import { RefreshDashboardService } from '../../services/refresh-dashboard.service';
import {DataExplorerWidgetModel} from "../../../core-model/gen/streampipes-model";
+import {DataExplorerDashboardGridComponent} from "../grid/data-explorer-dashboard-grid.component";
@Component({
selector: 'sp-data-explorer-dashboard-panel',
@@ -49,6 +50,8 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
@Output('editModeChange')
editModeChange: EventEmitter<boolean> = new EventEmitter();
+ @ViewChild('dashboardGrid') dashboardGrid: DataExplorerDashboardGridComponent;
+
public items: IDataViewDashboardItem[];
protected subscription: Subscription;
@@ -91,26 +94,29 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
this.dashboard.widgets.push(dashboardItem);
}
- updateDashboardAndCloseEditMode() {
+ updateDashboard(closeEditMode?: boolean) {
this.dataViewDataExplorerService.updateDashboard(this.dashboard).subscribe(result => {
if (this.widgetsToUpdate.size > 0) {
forkJoin(this.prepareWidgetUpdates()).subscribe(result => {
- this.closeEditModeAndReloadDashboard();
+ if (closeEditMode) {
+ this.closeEditModeAndReloadDashboard(false);
+ }
});
} else {
this.deleteWidgets();
- this.closeEditModeAndReloadDashboard();
+ if (closeEditMode) {
+ this.closeEditModeAndReloadDashboard(false);
+ }
}
});
- this.editModeChange.emit(!(this.editMode));
- this.refreshDashboardService.notify(this.dashboard._id);
- this.closeEditModeAndReloadDashboard();
-
+ this.closeEditModeAndReloadDashboard(false);
}
- closeEditModeAndReloadDashboard() {
- this.editModeChange.emit(!(this.editMode));
+ closeEditModeAndReloadDashboard(closeEditMode: boolean) {
+ if (closeEditMode) {
+ this.editModeChange.emit(!(this.editMode));
+ }
this.refreshDashboardService.notify(this.dashboard._id);
}
@@ -142,4 +148,9 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
this.dataViewDataExplorerService.deleteWidget(widgetId).subscribe();
});
}
+
+ toggleGrid(gridVisible: boolean) {
+ console.log(this.dashboardGrid);
+ this.dashboardGrid.toggleGrid();
+ }
}
diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
index ff6ef00..9d9375d 100644
--- a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
+++ b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
@@ -38,7 +38,6 @@
[owlDateTime]="dt1"
[owlDateTimeTrigger]="dt1"
[(ngModel)]="dateRange.startDate"
- [disabled]="selectedTimeButton.value !== 'custom'"
(dateTimeChange)="changeCustomDateRange()">
<owl-date-time #dt1></owl-date-time>
</mat-form-field>
@@ -48,7 +47,6 @@
[owlDateTime]="dt2"
[owlDateTimeTrigger]="dt2"
[(ngModel)]="dateRange.endDate"
- [disabled]="selectedTimeButton.value !== 'custom'"
(dateTimeChange)="changeCustomDateRange()">
<owl-date-time #dt2></owl-date-time>
</mat-form-field>
diff --git a/ui/src/app/data-explorer/data-explorer.component.css b/ui/src/app/data-explorer/data-explorer.component.css
index 23e7afa..e7ecf3a 100644
--- a/ui/src/app/data-explorer/data-explorer.component.css
+++ b/ui/src/app/data-explorer/data-explorer.component.css
@@ -86,3 +86,7 @@
display: inline;
margin-right: 10px;
}
+
+.pl-10 {
+ padding-left: 10px;
+}
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index 3030e90..cc4bc54 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -29,7 +29,22 @@
</div>
</div>
</div>
- <div class="fixed-height data-explorer-options" fxLayout="column" *ngIf="selectedIndex > 0">
+ <div class="fixed-height data-explorer-options" fxLayout="row" *ngIf="selectedIndex > 0">
+ <div class="data-explorer-options-item pl-10" fxLayoutAlign="start center" fxLayout="row">
+ <button mat-button color="primary" matTooltip="Save" [matTooltipPosition]="'above'" (click)="saveDashboard()">
+ <mat-icon>save</mat-icon> <span>Save</span>
+ </button>
+ </div>
+ <div class="data-explorer-options-item" fxLayoutAlign="start center" fxLayout="row">
+ <button mat-button color="primary" matTooltip="Add visualization" [matTooltipPosition]="'above'" (click)="addVisualization()">
+ <mat-icon>add</mat-icon> <span>Add visualization</span>
+ </button>
+ </div>
+ <div class="data-explorer-options-item" fxLayoutAlign="start center" fxLayout="row">
+ <mat-slide-toggle color="primary" [(ngModel)]="gridVisible" (ngModelChange)="toggleGrid()">
+ <span>Show grid</span>
+ </mat-slide-toggle>
+ </div>
<div class="data-explorer-options-item" fxLayoutAlign="end center" fxFlex fxLayout="row">
<sp-time-range-selector *ngIf="selectedIndex" (dateRangeEmitter)="updateDateRange($event)"></sp-time-range-selector>
</div>
@@ -50,6 +65,7 @@
</sp-data-explorer-dashboard-overview>
<sp-data-explorer-dashboard-panel fxLayout="column"
+ #dashboardPanel
[(editMode)]="editMode"
[dashboard]="selectedDataViewDashboard"
[viewDateRange]="viewDateRange"
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index b046800..c96119c 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -16,11 +16,13 @@
*
*/
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
import { DateRange } from '../core-model/datalake/DateRange';
import { IDataViewDashboard } from './models/dataview-dashboard.model';
import { DataViewDataExplorerService } from './services/data-view-data-explorer.service';
import { RefreshDashboardService } from './services/refresh-dashboard.service';
+import {DashboardPanelComponent} from "../dashboard/components/panel/dashboard-panel.component";
+import {DataExplorerDashboardPanelComponent} from "./components/panel/data-explorer-dashboard-panel.component";
@Component({
selector: 'sp-data-explorer',
@@ -35,9 +37,12 @@ export class DataExplorerComponent implements OnInit {
dashboardTabSelected = false;
editMode = true;
+ gridVisible: boolean = true;
dataViewDashboards: IDataViewDashboard[];
+ @ViewChild('dashboardPanel') dashboardPanel: DataExplorerDashboardPanelComponent;
+
/**
* This is the date range (start, end) to view the data
*/
@@ -93,4 +98,16 @@ export class DataExplorerComponent implements OnInit {
updateDateRange(dateRange: DateRange) {
this.viewDateRange = dateRange;
}
+
+ saveDashboard() {
+ this.dashboardPanel.updateDashboard(false);
+ }
+
+ addVisualization() {
+ this.dashboardPanel.addWidget();
+ }
+
+ toggleGrid() {
+ this.dashboardPanel.toggleGrid(this.gridVisible);
+ }
}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 2f4424c..4ccff1a 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -16,61 +16,71 @@
*
*/
-import { CdkTableModule } from '@angular/cdk/table';
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatNativeDateModule } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTabsModule } from '@angular/material/tabs';
-import { OWL_DATE_TIME_FORMATS, OwlDateTimeModule, OwlNativeDateTimeModule } from '@danielmoncada/angular-datetime-picker';
-import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { GridsterModule } from 'angular-gridster2';
-import { PlotlyViaWindowModule } from 'angular-plotly.js';
-import { DynamicModule } from 'ng-dynamic-component';
-import { ColorPickerModule } from 'ngx-color-picker';
-import { ConnectModule } from '../connect/connect.module';
-import { DatalakeRestService } from '../core-services/datalake/datalake-rest.service';
-import { SemanticTypeUtilsService } from '../core-services/semantic-type/semantic-type-utils.service';
-import { SharedDatalakeRestService } from '../core-services/shared/shared-dashboard.service';
-import { CoreUiModule } from '../core-ui/core-ui.module';
-import { LabelingToolModule } from '../core-ui/linechart/labeling-tool/labeling-tool.module';
-import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
-import { ElementIconText } from '../services/get-element-icon-text.service';
-import { DataDownloadDialog } from './components/datadownloadDialog/dataDownload.dialog';
-import { DataExplorerDashboardGridComponent } from './components/grid/data-explorer-dashboard-grid.component';
-import { DataExplorerDashboardOverviewComponent } from './components/overview/data-explorer-dashboard-overview.component';
-import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component';
-import { TimeRangeSelectorComponent } from './components/time-selector/timeRangeSelector.component';
-import { DataExplorerDashboardWidgetComponent } from './components/widget/data-explorer-dashboard-widget.component';
-import { ImageWidgetComponent } from './components/widgets/image/image-widget.component';
-import { LineChartWidgetComponent } from './components/widgets/line-chart/line-chart-widget.component';
-import { TableWidgetComponent } from './components/widgets/table/table-widget.component';
-import { AggregateConfigurationComponent } from './components/widgets/utils/aggregate-configuration/aggregate-configuration.component';
-import { LoadDataSpinnerComponent } from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
-import { NoDataInDateRangeComponent } from './components/widgets/utils/no-data/no-data-in-date-range.component';
-import { SelectPropertiesComponent } from './components/widgets/utils/select-properties/select-properties.component';
-import { DataExplorerComponent } from './data-explorer.component';
-import { DataExplorerAddVisualizationDialogComponent } from './dialogs/add-widget/data-explorer-add-visualization-dialog.component';
-import { DataExplorerEditDataViewDialogComponent } from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
-import { DataLakeService } from './services/data-lake.service';
-import { DataViewDataExplorerService } from './services/data-view-data-explorer.service';
-import { RefreshDashboardService } from './services/refresh-dashboard.service';
-import { ResizeService } from './services/resize.service';
-import { GroupConfigurationComponent } from './components/widgets/utils/group-configuration/group-configuration.component';
+import {CdkTableModule} from '@angular/cdk/table';
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatNativeDateModule} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatTabsModule} from '@angular/material/tabs';
+import {
+ OWL_DATE_TIME_FORMATS,
+ OwlDateTimeModule,
+ OwlNativeDateTimeModule
+} from '@danielmoncada/angular-datetime-picker';
+import {NgxChartsModule} from '@swimlane/ngx-charts';
+import {GridsterModule} from 'angular-gridster2';
+import {PlotlyViaWindowModule} from 'angular-plotly.js';
+import {DynamicModule} from 'ng-dynamic-component';
+import {ColorPickerModule} from 'ngx-color-picker';
+import {ConnectModule} from '../connect/connect.module';
+import {DatalakeRestService} from '../core-services/datalake/datalake-rest.service';
+import {SemanticTypeUtilsService} from '../core-services/semantic-type/semantic-type-utils.service';
+import {SharedDatalakeRestService} from '../core-services/shared/shared-dashboard.service';
+import {CoreUiModule} from '../core-ui/core-ui.module';
+import {LabelingToolModule} from '../core-ui/linechart/labeling-tool/labeling-tool.module';
+import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
+import {ElementIconText} from '../services/get-element-icon-text.service';
+import {DataDownloadDialog} from './components/datadownloadDialog/dataDownload.dialog';
+import {DataExplorerDashboardGridComponent} from './components/grid/data-explorer-dashboard-grid.component';
+import {DataExplorerDashboardOverviewComponent} from './components/overview/data-explorer-dashboard-overview.component';
+import {DataExplorerDashboardPanelComponent} from './components/panel/data-explorer-dashboard-panel.component';
+import {TimeRangeSelectorComponent} from './components/time-selector/timeRangeSelector.component';
+import {DataExplorerDashboardWidgetComponent} from './components/widget/data-explorer-dashboard-widget.component';
+import {ImageWidgetComponent} from './components/widgets/image/image-widget.component';
+import {LineChartWidgetComponent} from './components/widgets/line-chart/line-chart-widget.component';
+import {TableWidgetComponent} from './components/widgets/table/table-widget.component';
+import {AggregateConfigurationComponent} from './components/widgets/utils/aggregate-configuration/aggregate-configuration.component';
+import {LoadDataSpinnerComponent} from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
+import {NoDataInDateRangeComponent} from './components/widgets/utils/no-data/no-data-in-date-range.component';
+import {SelectPropertiesComponent} from './components/widgets/utils/select-properties/select-properties.component';
+import {DataExplorerComponent} from './data-explorer.component';
+import {DataExplorerAddVisualizationDialogComponent} from './dialogs/add-widget/data-explorer-add-visualization-dialog.component';
+import {DataExplorerEditDataViewDialogComponent} from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
+import {DataLakeService} from './services/data-lake.service';
+import {DataViewDataExplorerService} from './services/data-view-data-explorer.service';
+import {RefreshDashboardService} from './services/refresh-dashboard.service';
+import {ResizeService} from './services/resize.service';
+import {GroupConfigurationComponent} from './components/widgets/utils/group-configuration/group-configuration.component';
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
-const dashboardWidgets = [
-
-];
+const dashboardWidgets = [];
export const MY_NATIVE_FORMATS = {
- fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', 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},
@@ -84,7 +94,7 @@ export const MY_NATIVE_FORMATS = {
CommonModule,
MatTabsModule,
DynamicModule.withComponents(
- dashboardWidgets
+ dashboardWidgets
),
FlexLayoutModule,
GridsterModule,
@@ -107,6 +117,7 @@ export const MY_NATIVE_FORMATS = {
MatDatepickerModule,
MatNativeDateModule,
MatSliderModule,
+ MatSlideToggleModule,
MatChipsModule,
LabelingToolModule
],
[incubator-streampipes] 02/04: [STREAMPIPES-79] Improve layout of
time selection
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 4ac7033b50bdcf0c88023906333d572a96f063e5
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Fri Aug 7 10:59:56 2020 +0200
[STREAMPIPES-79] Improve layout of time selection
---
.../time-selector/timeRangeSelector.component.css | 29 --------
.../time-selector/timeRangeSelector.component.html | 74 +++++++++++---------
.../time-selector/timeRangeSelector.component.scss | 81 ++++++++++++++++++++++
.../time-selector/timeRangeSelector.component.ts | 7 +-
.../data-explorer-dashboard-widget.component.html | 2 +-
.../widgets/table/table-widget.component.css | 4 --
.../widgets/table/table-widget.component.html | 4 +-
.../app/data-explorer/data-explorer.component.css | 15 ++++
.../app/data-explorer/data-explorer.component.html | 22 +++---
.../app/data-explorer/data-explorer.component.ts | 2 +-
10 files changed, 157 insertions(+), 83 deletions(-)
diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.css b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.css
deleted file mode 100644
index f0e291c..0000000
--- a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * 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.
- *
- */
-
-.start-date {
- width: 130px;
- margin-left: 10px;
- margin-right: 5px;
-}
-
-.end-date {
- width: 130px;
- margin-left: 5px;
- margin-right: 10px;
-}
diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
index 5e75fec..ff6ef00 100644
--- a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
+++ b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.html
@@ -16,43 +16,51 @@
~
-->
-<div flex layout-fill layout="row" layout-align="start center" style="padding-top: 5px;">
+<div fxLayout="row" fxLayoutAlign="start center">
<!-- <Button (click)="decreaseTime()"><</Button>-->
- <button mat-icon-button class="icon" style="margin-right: -15px">
- <mat-icon style="font-size: 30px;height: 30px; width: 30px; padding-top: 3px" (click)="decreaseTime()">navigate_before</mat-icon>
- </button>
- <mat-form-field appearance="outline" class="start-date">
- <mat-label>Start</mat-label>
- <input matInput
- [owlDateTime]="dt1"
- [owlDateTimeTrigger]="dt1"
- [(ngModel)]="dateRange.startDate"
- (dateTimeChange)="changeCustomDateRange()">
- <owl-date-time #dt1></owl-date-time>
- </mat-form-field>
- <mat-form-field appearance="outline" class="end-date">
- <mat-label>End</mat-label>
- <input matInput
- [owlDateTime]="dt2"
- [owlDateTimeTrigger]="dt2"
- [(ngModel)]="dateRange.endDate"
- (dateTimeChange)="changeCustomDateRange()">
- <owl-date-time #dt2></owl-date-time>
- </mat-form-field>
- <button mat-icon-button class="icon" style="margin-left: -15px" color="primary">
- <mat-icon style="font-size: 30px;height: 30px; width: 30px; padding-top: 3px" (click)="increaseTime()">navigate_next</mat-icon>
- </button>
+
<!-- <Button (click)="increaseTime()">></Button>-->
<!-- -->
- <button mat-raised-button
+ <div class="time-range-wrapper" fxFlex fxLayoutAlign="center center">
+ <button mat-button mat-raised-button
*ngFor="let item of possibleTimeButtons"
[color]="selectedTimeButton.value === item.value ? 'primary' : ''"
+ class="button-margin smaller-button-font-size"
(click)="this.setCurrentDateRange(item)">{{item.value}}</button>
-
-
- <button mat-icon-button class="icon" style="margin-left: 5px" color="primary">
- <mat-icon style="font-size: 30px;height: 30px; width: 30px; padding-top: 3px" (click)="reloadData()">autorenew</mat-icon>
- </button>
-
-
+ </div>
+ <div class="time-wrapper" fxFlex fxLayoutAlign="center center">
+ <button mat-button style="margin-right: -15px" class="button-icon icon-button-font-size">
+ <mat-icon (click)="decreaseTime()">navigate_before</mat-icon>
+ </button>
+ <mat-form-field appearance="standard" class="start-date form-field-margin form-field-size-smaller">
+ <mat-label>From</mat-label>
+ <input matInput
+ [owlDateTime]="dt1"
+ [owlDateTimeTrigger]="dt1"
+ [(ngModel)]="dateRange.startDate"
+ [disabled]="selectedTimeButton.value !== 'custom'"
+ (dateTimeChange)="changeCustomDateRange()">
+ <owl-date-time #dt1></owl-date-time>
+ </mat-form-field>
+ <mat-form-field appearance="standard" class="end-date form-field-margin form-field-size-smaller">
+ <mat-label>To</mat-label>
+ <input matInput
+ [owlDateTime]="dt2"
+ [owlDateTimeTrigger]="dt2"
+ [(ngModel)]="dateRange.endDate"
+ [disabled]="selectedTimeButton.value !== 'custom'"
+ (dateTimeChange)="changeCustomDateRange()">
+ <owl-date-time #dt2></owl-date-time>
+ </mat-form-field>
+ <button mat-button style="margin-left: -15px" class="button-icon icon-button-font-size" color="primary">
+ <mat-icon (click)="increaseTime()">navigate_next</mat-icon>
+ </button>
+ </div>
+ <div class="time-range-wrapper" fxFlex fxLayoutAlign="center center">
+ <button mat-button mat-raised-button color="primary"
+ class="button-margin smaller-button-font-size"
+ matTooltip="Reload" matTooltipPosition="above">
+ <mat-icon (click)="reloadData()">autorenew</mat-icon>
+ </button>
+ </div>
</div>
diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
new file mode 100644
index 0000000..e1b1c3d
--- /dev/null
+++ b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.scss
@@ -0,0 +1,81 @@
+/*
+ * 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 "../../../../scss/variables";
+
+.start-date {
+ width: 100px;
+ margin-left: 10px;
+ margin-right: 5px;
+}
+
+.end-date {
+ width: 100px;
+ margin-left: 5px;
+ margin-right: 10px;
+}
+
+mat-form-field.mat-form-field.form-field-size {
+ font-size: 12px;
+}
+
+mat-form-field.mat-form-field.form-field-size-smaller {
+ font-size: 10px;
+}
+
+.form-field-margin .mat-form-field-wrapper{
+ margin-bottom: -1.25em;
+ padding-bottom: 1.25em;
+}
+
+.button-margin {
+ border-radius: 0;
+ padding-left: 4px;
+ padding-right:4px;
+ border-right: 1px solid #cccccc;
+}
+
+.button-margin:last-of-type {
+ border-right: 0;
+}
+
+.time-range-wrapper {
+ border: 1px solid $sp-color-accent;
+ background: $sp-color-accent;
+}
+
+.time-wrapper {
+ border: 1px solid $sp-color-accent;
+ background: white;
+}
+
+.smaller-button-font-size.mat-raised-button {
+ font-size: 0.8em;
+ letter-spacing: 0.05em;
+}
+
+.icon-button-font-size.mat-button {
+ font-size: 0.8em;
+ letter-spacing: 0.05em;
+}
+
+.button-icon.mat-button {
+ min-width:0;
+ border-radius: 0;
+ padding: 0 4px;
+}
diff --git a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts
index f488fd1..e94f983 100644
--- a/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts
+++ b/ui/src/app/data-explorer/components/time-selector/timeRangeSelector.component.ts
@@ -16,13 +16,14 @@
*
*/
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { DateRange } from '../../../core-model/datalake/DateRange';
+import {Component, EventEmitter, OnInit, Output, ViewEncapsulation} from '@angular/core';
+import {DateRange} from '../../../core-model/datalake/DateRange';
@Component({
selector: 'sp-time-range-selector',
templateUrl: 'timeRangeSelector.component.html',
- styleUrls: ['./timeRangeSelector.component.css']
+ styleUrls: ['./timeRangeSelector.component.scss'],
+ encapsulation: ViewEncapsulation.None
})
export class TimeRangeSelectorComponent implements OnInit {
diff --git a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
index 77e8983..ca8c803 100644
--- a/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
+++ b/ui/src/app/data-explorer/components/widget/data-explorer-dashboard-widget.component.html
@@ -18,7 +18,7 @@
<div style="height:100%;">
<div class="box">
- <div class="h-100 p-0 row content"style="margin-left: 0px;margin-right: 0px;">
+ <div class="h-100 p-0 row content" style="margin-left: 0px;margin-right: 0px;">
<!-- <div *ngIf="widget."></div>-->
<div *ngIf="widgetLoaded" class="h-100">
<div *ngIf="widget.widgetType === 'table'" class="h-100 p-0">
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.css b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.css
index a13c131..e4606e1 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.css
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.css
@@ -32,8 +32,4 @@
.assemblyOptionsDataExplorer {
color: white;
padding: 5px;
-}
-
-::ng-deep .mat-form-field-wrapper {
- padding: 0px !important;
}
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
index a88215e..ff56778 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.html
@@ -31,8 +31,8 @@
multiple = true
(changeSelectedProperties)="setSelectedColumn($event)"
[availableProperties]="availableColumns"
- [selectedProperties]="selectedColumns"
- ></sp-select-properties>
+ [selectedProperties]="selectedColumns">
+ </sp-select-properties>
<button mat-icon-button matTooltip="Download data" class="icon" (click)="downloadDataAsFile()" color="white">
<i class="material-icons">get_app</i>
diff --git a/ui/src/app/data-explorer/data-explorer.component.css b/ui/src/app/data-explorer/data-explorer.component.css
index 5a1c565..23e7afa 100644
--- a/ui/src/app/data-explorer/data-explorer.component.css
+++ b/ui/src/app/data-explorer/data-explorer.component.css
@@ -71,3 +71,18 @@
border-bottom: 3px solid transparent;
border-top: 3px solid #f5b53f;
}
+
+.fixed-height {
+ height: 50px;
+}
+
+.data-explorer-options {
+ padding:0px;
+ background-color:#f6f6f6;
+ border-bottom: 1px solid #cccccc;
+}
+
+.data-explorer-options-item {
+ display: inline;
+ margin-right: 10px;
+}
diff --git a/ui/src/app/data-explorer/data-explorer.component.html b/ui/src/app/data-explorer/data-explorer.component.html
index 5c8921f..3030e90 100644
--- a/ui/src/app/data-explorer/data-explorer.component.html
+++ b/ui/src/app/data-explorer/data-explorer.component.html
@@ -23,21 +23,23 @@
<div fxFlex fxLayoutAlign="start center">
<mat-tab-group [selectedIndex]="selectedIndex" (selectedIndexChange)="selectDashboard($event)">
<mat-tab label="Start"></mat-tab>
- <!--<mat-tab *ngFor="let dataViewDashboard of dataViewDashboards" label="{{dataViewDashboard.name}}"></mat-tab>-->
+ <mat-tab *ngFor="let dataViewDashboard of dataViewDashboards" label="{{dataViewDashboard.name}}"></mat-tab>
</mat-tab-group>
-
- <!--</div>-->
- <!--<div fxFlex fxLayoutAlign="start center" class="mr-20">-->
- <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">
- <i class="material-icons">edit</i>
- </button>
</div>
</div>
</div>
</div>
+ <div class="fixed-height data-explorer-options" fxLayout="column" *ngIf="selectedIndex > 0">
+ <div class="data-explorer-options-item" fxLayoutAlign="end center" fxFlex fxLayout="row">
+ <sp-time-range-selector *ngIf="selectedIndex" (dateRangeEmitter)="updateDateRange($event)"></sp-time-range-selector>
+ </div>
+<!-- <div class="data-explorer-options-item" fxLayoutAlign="start center" fxLayout="row">-->
+<!-- <button mat-button mat-icon-button color="primary"-->
+<!-- *ngIf="selectedIndex > 0" (click)="toggleEditMode()" [disabled]="editMode">-->
+<!-- <i class="material-icons">edit</i>-->
+<!-- </button>-->
+<!-- </div>-->
+ </div>
<div class="page-container-padding-inner" fxLayout="column" fxFlex="100" *ngIf="dashboardsLoaded">
<div class="ribbon"><span>Beta</span></div>
diff --git a/ui/src/app/data-explorer/data-explorer.component.ts b/ui/src/app/data-explorer/data-explorer.component.ts
index a4f22c6..b046800 100644
--- a/ui/src/app/data-explorer/data-explorer.component.ts
+++ b/ui/src/app/data-explorer/data-explorer.component.ts
@@ -34,7 +34,7 @@ export class DataExplorerComponent implements OnInit {
dashboardsLoaded = false;
dashboardTabSelected = false;
- editMode = false;
+ editMode = true;
dataViewDashboards: IDataViewDashboard[];
[incubator-streampipes] 01/04: [STREAMPIPES-79] Improve add widget
dialog in data explorer
Posted by ri...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 7faa21dbf3fc3b2f057d941360c936ffcf984d0d
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Aug 6 22:27:49 2020 +0200
[STREAMPIPES-79] Improve add widget dialog in data explorer
---
...explorer-add-visualization-dialog.component.css | 16 +++++++++
...xplorer-add-visualization-dialog.component.html | 39 ++++++++++------------
...-explorer-add-visualization-dialog.component.ts | 4 +--
.../models/dataview-dashboard.model.ts | 5 +++
.../registry/data-explorer-widget-registry.ts | 11 +++---
5 files changed, 47 insertions(+), 28 deletions(-)
diff --git a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
index e00a7b4..554bb0a 100644
--- a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
+++ b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.css
@@ -52,4 +52,20 @@ mat-dialog-content {
.mat-radio-button {
padding: 10px;
+}
+
+.pipeline-avatar {
+ align-items: center;
+ justify-content: center;
+ display: flex;
+ color:white;
+}
+
+.list-item:hover {
+ background: #E0E0E0;
+ cursor: pointer;
+}
+
+.list-item {
+ border-bottom: 1px solid #BDBDBD;
}
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
index dfcf1c3..3fef00b 100644
--- a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
+++ b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.html
@@ -31,35 +31,30 @@
<div fxFlex="100" style="margin:5px;width:100%">
<div *ngIf="page == 'select-pipeline'">
<h4>{{pages[0].description}}</h4>
- <mat-grid-list
- [cols]="3" [rowHeight]="200"
- [gutterSize]="100">
-
- <mat-grid-tile class="gray" *ngFor="let dataSet of visualizableData">
- <div [ngClass]="getSelectedPipelineCss(dataSet)"
- (click)="selectPipeline(dataSet)">
- {{iconText(dataSet.measureName)}}
- <h5>{{dataSet.measureName}}</h5>
+ <mat-list>
+ <mat-list-item *ngFor="let dataSet of visualizableData"
+ (click)="selectPipeline(dataSet)" class="list-item">
+ <div mat-list-avatar
+ class="pipeline-avatar sp-accent-bg">{{iconText(dataSet.measureName)}}
</div>
- </mat-grid-tile>
- </mat-grid-list>
+ <h4 mat-line>{{dataSet.measureName}}</h4>
+ </mat-list-item>
+ </mat-list>
</div>
<!-- Select Type -->
<div *ngIf="page == 'select-widget'" fxLayout="column">
<h4>{{pages[1].description}}</h4>
- <mat-grid-list
- [cols]="3" [rowHeight]="200"
- [gutterSize]="100">
-
- <mat-grid-tile class="gray" *ngFor="let widget of availableWidgets">
- <div [ngClass]="getSelectedPipelineCss(widget)"
- (click)="selectWidget(widget)">
- {{iconText(widget)}}
- <h5>{{widget}}</h5>
+ <mat-list>
+ <mat-list-item *ngFor="let widget of availableWidgets"
+ (click)="selectWidget(widget.id)" class="list-item">
+ <div mat-list-avatar
+ class="pipeline-avatar sp-accent-bg">
+ <span>{{iconText(widget.label)}}</span>
</div>
- </mat-grid-tile>
- </mat-grid-list>
+ <h4 mat-line>{{widget.label}}</h4>
+ </mat-list-item>
+ </mat-list>
</div>
</div>
</div>
diff --git a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.ts b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.ts
index 3527dbf..f7584f4 100644
--- a/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.ts
+++ b/ui/src/app/data-explorer/dialogs/add-widget/data-explorer-add-visualization-dialog.component.ts
@@ -19,7 +19,7 @@
import { Component, Inject, OnInit } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { ElementIconText } from '../../../services/get-element-icon-text.service';
-import { IDataViewDashboard } from '../../models/dataview-dashboard.model';
+import {IDataViewDashboard, IWidget} from '../../models/dataview-dashboard.model';
import { DataExplorerWidgetRegistry } from '../../registry/data-explorer-widget-registry';
import { DataViewDataExplorerService } from '../../services/data-view-data-explorer.service';
import {
@@ -54,7 +54,7 @@ export class DataExplorerAddVisualizationDialogComponent implements OnInit {
}];
visualizableData: DataLakeMeasure[] = [];
- availableWidgets: string[];
+ availableWidgets: IWidget[];
selectedDataSet: DataLakeMeasure;
selectedWidget: string;
diff --git a/ui/src/app/data-explorer/models/dataview-dashboard.model.ts b/ui/src/app/data-explorer/models/dataview-dashboard.model.ts
index 832c02d..d282903 100644
--- a/ui/src/app/data-explorer/models/dataview-dashboard.model.ts
+++ b/ui/src/app/data-explorer/models/dataview-dashboard.model.ts
@@ -35,3 +35,8 @@ export interface IDataViewDashboard {
_id?: string;
_rev?: string;
}
+
+export interface IWidget {
+ id: string;
+ label: string;
+}
diff --git a/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts b/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts
index e76404d..f89ee85 100644
--- a/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts
+++ b/ui/src/app/data-explorer/registry/data-explorer-widget-registry.ts
@@ -19,6 +19,7 @@
import { DashboardWidgetSettings } from '../../core-model/dashboard/DashboardWidgetSettings';
import { WidgetConfig } from '../components/widgets/base/base-config';
import { TableConfig } from '../components/widgets/table/table-config';
+import {IWidget} from "../models/dataview-dashboard.model";
export class DataExplorerWidgetRegistry {
@@ -32,12 +33,14 @@ export class DataExplorerWidgetRegistry {
// return widgetTemplates;
// }
- private static availableWidgets: string[] = [
- 'table', 'line-chart', 'image'
+ private static availableWidgets: IWidget[] = [
+ {id: 'table', label: 'Table'},
+ {id: 'line-chart', label: 'Line Chart'},
+ {id: 'image', label: 'Image'}
];
- static getAvailableWidgetTemplates(): string[] {
- const widgetTemplates = new Array<string>();
+ static getAvailableWidgetTemplates(): IWidget[] {
+ const widgetTemplates = new Array<IWidget>();
this.availableWidgets.forEach(widget => widgetTemplates.push(widget));
return widgetTemplates;
}