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 2022/08/08 08:42:30 UTC
[incubator-streampipes] 03/04: [hotfix] Improve resizing of echarts widgets
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit fbf11d498a9466e4e63e77048b5a46f8d2e25303
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Aug 8 10:41:31 2022 +0200
[hotfix] Improve resizing of echarts widgets
---
.../components/grid/dashboard-grid.component.html | 1 +
.../components/grid/dashboard-grid.component.ts | 22 +++++++----
.../standalone/standalone-dashboard.component.ts | 1 -
.../widget/dashboard-widget.component.html | 14 +++++++
.../widget/dashboard-widget.component.ts | 44 ++++++++++++++--------
.../bar-race/bar-race-widget.component.html | 6 +--
.../bar-race/bar-race-widget.component.scss | 9 -----
.../widgets/bar-race/bar-race-widget.component.ts | 6 +--
.../components/widgets/base/base-echarts-widget.ts | 13 ++-----
.../components/widgets/base/base-widget.ts | 31 +++++++--------
.../stacked-line-chart-widget.component.html | 6 +--
.../stacked-line-chart-widget.component.scss | 9 -----
ui/src/app/dashboard/services/resize.service.ts | 6 +--
13 files changed, 89 insertions(+), 79 deletions(-)
diff --git a/ui/src/app/dashboard/components/grid/dashboard-grid.component.html b/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
index 1e9a69f15..94baf0cbc 100644
--- a/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
+++ b/ui/src/app/dashboard/components/grid/dashboard-grid.component.html
@@ -28,6 +28,7 @@
[widget]="item"
[editMode]="editMode"
[headerVisible]="headerVisible"
+ [gridsterItemComponent]="gridsterItemComponent"
[itemWidth]="gridsterItemComponent.width"
[itemHeight]="gridsterItemComponent.height"
></dashboard-widget>
diff --git a/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts b/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts
index c31211daf..942e80157 100644
--- a/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts
+++ b/ui/src/app/dashboard/components/grid/dashboard-grid.component.ts
@@ -27,9 +27,10 @@ import {
SimpleChanges,
ViewChildren
} from '@angular/core';
-import { Dashboard, DashboardConfig, DashboardItem, DashboardWidgetModel } from '@streampipes/platform-services';
-import { ResizeService } from '../../services/resize.service';
-import { GridsterItemComponent, GridType } from 'angular-gridster2';
+import {Dashboard, DashboardConfig, DashboardItem, DashboardWidgetModel} from '@streampipes/platform-services';
+import {ResizeService} from '../../services/resize.service';
+import {GridsterItemComponent, GridType} from 'angular-gridster2';
+import {GridsterInfo} from "../../models/gridster-info.model";
@Component({
selector: 'dashboard-grid',
@@ -57,7 +58,7 @@ export class DashboardGridComponent implements OnInit, OnChanges {
ngOnInit(): void {
this.options = {
disablePushOnDrag: true,
- draggable: { enabled: this.editMode },
+ draggable: {enabled: this.editMode},
gridType: GridType.VerticalFixed,
minCols: 12,
maxCols: 12,
@@ -65,13 +66,20 @@ export class DashboardGridComponent implements OnInit, OnChanges {
fixedRowHeight: 50,
fixedColWidth: 50,
margin: 5,
- resizable: { enabled: this.editMode },
+ resizable: {enabled: this.editMode},
displayGrid: this.editMode ? 'always' : 'none',
itemResizeCallback: ((item, itemComponent) => {
- this.resizeService.notify({id: item.id, width: itemComponent.width, height: itemComponent.height});
+ this.resizeService.notify({
+ gridsterItem: item,
+ gridsterItemComponent: itemComponent
+ } as GridsterInfo);
}),
itemInitCallback: ((item, itemComponent) => {
- this.resizeService.notify({id: item.id, width: itemComponent.width, height: itemComponent.height});
+ this.resizeService.notify({
+ gridsterItem: item,
+ gridsterItemComponent: itemComponent
+ } as GridsterInfo);
+ //window.dispatchEvent(new Event('resize'));
})
};
}
diff --git a/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
index 7d51e881f..03b3d1f2a 100644
--- a/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
+++ b/ui/src/app/dashboard/components/standalone/standalone-dashboard.component.ts
@@ -36,7 +36,6 @@ export class StandaloneDashboardComponent implements OnInit {
this.activatedRoute.params.subscribe(params => {
if (params['dashboardId']) {
const dashboardId = params['dashboardId'];
- console.log(dashboardId);
this.dashboardService.getDashboard(dashboardId).subscribe(dashboard => {
this.dashboard = dashboard;
this.dashboardReady = true;
diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
index 1c4e872c2..282e5df45 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.html
@@ -54,6 +54,7 @@
<number-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget" [widgetDataConfig]="widgetDataConfig"
class="h-100"></number-widget>
</div>
@@ -61,6 +62,7 @@
<line-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></line-widget>
</div>
@@ -68,6 +70,7 @@
<area-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></area-widget>
</div>
@@ -75,6 +78,7 @@
<table-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></table-widget>
</div>
@@ -82,6 +86,7 @@
<gauge-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></gauge-widget>
</div>
@@ -89,6 +94,7 @@
<image-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></image-widget>
</div>
@@ -96,6 +102,7 @@
<map-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></map-widget>
</div>
@@ -103,6 +110,7 @@
<raw-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></raw-widget>
</div>
@@ -110,6 +118,7 @@
<html-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></html-widget>
</div>
@@ -117,6 +126,7 @@
<traffic-light-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></traffic-light-widget>
</div>
@@ -124,6 +134,7 @@
<wordcloud-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></wordcloud-widget>
</div>
@@ -131,6 +142,7 @@
<status-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></status-widget>
</div>
@@ -138,6 +150,7 @@
<bar-race-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></bar-race-widget>
</div>
@@ -145,6 +158,7 @@
<stacked-line-chart-widget [itemWidth]="itemWidth"
[itemHeight]="itemHeight"
[editMode]="editMode"
+ [gridsterItemComponent]="gridsterItemComponent"
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig"
class="h-100"></stacked-line-chart-widget>
diff --git a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
index a202201b3..b35f46003 100644
--- a/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
+++ b/ui/src/app/dashboard/components/widget/dashboard-widget.component.ts
@@ -22,7 +22,8 @@ import {
DashboardItem,
DashboardService,
DashboardWidgetModel,
- DataLakeMeasure, DatalakeRestService,
+ DataLakeMeasure,
+ DatalakeRestService,
DataViewDataExplorerService,
Pipeline,
PipelineService
@@ -31,6 +32,9 @@ import { DialogService, PanelType } from '@streampipes/shared-ui';
import { EditModeService } from '../../services/edit-mode.service';
import { ReloadPipelineService } from '../../services/reload-pipeline.service';
import { zip } from 'rxjs';
+import { GridsterItemComponent } from 'angular-gridster2';
+import { ResizeService } from '../../services/resize.service';
+import { GridsterInfo } from '../../models/gridster-info.model';
@Component({
selector: 'dashboard-widget',
@@ -44,6 +48,7 @@ export class DashboardWidgetComponent implements OnInit {
@Input() headerVisible = false;
@Input() itemWidth: number;
@Input() itemHeight: number;
+ @Input() gridsterItemComponent: GridsterItemComponent;
@Output() deleteCallback: EventEmitter<DashboardItem> = new EventEmitter<DashboardItem>();
@Output() updateCallback: EventEmitter<DashboardWidgetModel> = new EventEmitter<DashboardWidgetModel>();
@@ -62,7 +67,8 @@ export class DashboardWidgetComponent implements OnInit {
private editModeService: EditModeService,
private reloadPipelineService: ReloadPipelineService,
private dataExplorerService: DataViewDataExplorerService,
- private dataLakeRestService: DatalakeRestService) {
+ private dataLakeRestService: DatalakeRestService,
+ private resizeService: ResizeService) {
}
ngOnInit(): void {
@@ -85,17 +91,23 @@ export class DashboardWidgetComponent implements OnInit {
const vizPipeline = res[0];
const measurement = res[1].find(m => m.measureName === vizPipeline.measureName);
vizPipeline.eventSchema = measurement.eventSchema;
- this.widgetDataConfig = vizPipeline;
- this.dashboardService.getPipelineById(vizPipeline.pipelineId).subscribe(pipeline => {
- this.pipeline = pipeline;
- this.pipelineRunning = pipeline.running;
- this.widgetNotAvailable = false;
+ this.widgetDataConfig = vizPipeline;
+ this.dashboardService.getPipelineById(vizPipeline.pipelineId).subscribe(pipeline => {
+ this.pipeline = pipeline;
+ this.pipelineRunning = pipeline.running;
+ this.widgetNotAvailable = false;
+ this.widgetLoaded = true;
+ setTimeout(() => {
+ this.resizeService.notify({
+ gridsterItem: this.widget,
+ gridsterItemComponent: this.gridsterItemComponent
+ } as GridsterInfo);
+ }, 20);
+ });
+ }, err => {
this.widgetLoaded = true;
+ this.widgetNotAvailable = true;
});
- }, err => {
- this.widgetLoaded = true;
- this.widgetNotAvailable = true;
- });
}
removeWidget() {
@@ -105,11 +117,11 @@ export class DashboardWidgetComponent implements OnInit {
startPipeline() {
if (!this.pipelineRunning) {
this.pipelineService
- .startPipeline(this.pipeline._id)
- .subscribe(status => {
- // this.loadWidget();
- this.reloadPipelineService.reloadPipelineSubject.next();
- });
+ .startPipeline(this.pipeline._id)
+ .subscribe(status => {
+ // this.loadWidget();
+ this.reloadPipelineService.reloadPipelineSubject.next();
+ });
}
}
diff --git a/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.html b/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.html
index d4cf25599..59b7f59a6 100644
--- a/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.html
+++ b/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.html
@@ -20,9 +20,9 @@
<div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
{{selectedTitle}}
</div>
- <div class="value-panel">
- <div echarts [options]="chartOption" [ngStyle]="{'width': '100%', 'height': currentHeight}"
- (chartInit)="onChartInit($event)" [merge]= "dynamicData" *ngIf="configReady">
+ <div fxFlex [ngStyle]="{height: currentHeight + 'px'}" *ngIf="configReady">
+ <div echarts [options]="chartOption" [ngStyle]="{'width': '100%', 'height': '100%'}"
+ (chartInit)="onChartInit($event)" [merge]= "dynamicData">
</div>
</div>
</div>
diff --git a/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.scss b/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.scss
index 76e1caf81..e374f5dd4 100644
--- a/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.scss
+++ b/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.scss
@@ -30,15 +30,6 @@
font-size: 20px;
}
-.value-panel {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- align-content: center;
- flex: 1;
-}
-
.status-light {
border-radius: 50%;
float: left;
diff --git a/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.ts b/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.ts
index 5bbcf60c4..5f034f5ad 100644
--- a/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.ts
+++ b/ui/src/app/dashboard/components/widgets/bar-race/bar-race-widget.component.ts
@@ -46,10 +46,10 @@ export class BarRaceWidgetComponent extends BaseStreamPipesWidget implements OnI
chartOption = {
grid: {
+ left: 100,
top: 10,
- bottom: 30,
- left: 150,
- right: 80
+ right: 120,
+ bottom: 100
},
xAxis: {
max: 'dataMax',
diff --git a/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts b/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts
index ebfcf10b9..2d4e60269 100644
--- a/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts
+++ b/ui/src/app/dashboard/components/widgets/base/base-echarts-widget.ts
@@ -41,19 +41,12 @@ export abstract class BaseEchartsWidget extends BaseStreamPipesWidget {
this.currentWidth = width;
this.currentHeight = height;
this.configReady = true;
- this.applySize(width, height);
+ if (this.eChartsInstance) {
+ this.eChartsInstance.resize({width, height});
+ }
}
onChartInit(ec) {
this.eChartsInstance = ec;
- this.applySize(this.currentWidth, this.currentHeight);
}
-
- applySize(width: number, height: number) {
- console.log(height);
- if (this.eChartsInstance) {
- this.eChartsInstance.resize({width, height: height});
- }
- }
-
}
diff --git a/ui/src/app/dashboard/components/widgets/base/base-widget.ts b/ui/src/app/dashboard/components/widgets/base/base-widget.ts
index 33ee18a37..71f418673 100644
--- a/ui/src/app/dashboard/components/widgets/base/base-widget.ts
+++ b/ui/src/app/dashboard/components/widgets/base/base-widget.ts
@@ -16,12 +16,11 @@
*
*/
-import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Directive, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
import { StaticPropertyExtractor } from '../../../sdk/extractor/static-property-extractor';
import { BehaviorSubject, interval, Observable, Subscription } from 'rxjs';
import { WidgetConfigBuilder } from '../../../registry/widget-config-builder';
import { ResizeService } from '../../../services/resize.service';
-import { WidgetInfo } from '../../../models/gridster-info.model';
import {
DashboardWidgetModel,
DataLakeMeasure,
@@ -30,9 +29,10 @@ import {
SpQueryResult
} from '@streampipes/platform-services';
import { map, switchMap } from 'rxjs/operators';
+import { GridsterItemComponent } from 'angular-gridster2';
@Directive()
-export abstract class BaseStreamPipesWidget implements OnChanges {
+export abstract class BaseStreamPipesWidget implements OnInit, OnChanges, OnDestroy {
protected constructor(protected dataLakeService: DatalakeRestService,
protected resizeService: ResizeService,
@@ -45,6 +45,7 @@ export abstract class BaseStreamPipesWidget implements OnChanges {
@Input() widgetConfig: DashboardWidgetModel;
@Input() widgetDataConfig: DataLakeMeasure;
+ @Input() gridsterItemComponent: GridsterItemComponent;
@Input() itemWidth: number;
@Input() itemHeight: number;
@Input() editMode: boolean;
@@ -67,12 +68,20 @@ export abstract class BaseStreamPipesWidget implements OnChanges {
refreshIntervalInSeconds = 5;
queryLimit = 1;
+ resizeSub: Subscription;
+
ngOnInit(): void {
- this.prepareConfigExtraction();
- this.resizeService.resizeSubject.subscribe(info => {
- this.onResize(info);
+ const widthOffset = 0;
+ const heightOffset = 0;
+ this.resizeSub = this.resizeService.resizeSubject.subscribe(info => {
+ if (info.gridsterItem.id === this.widgetConfig._id) {
+ this.onSizeChanged(this.computeCurrentWidth(this.gridsterItemComponent.width - widthOffset),
+ this.computeCurrentHeight(this.gridsterItemComponent.height - heightOffset));
+ }
});
+ this.prepareConfigExtraction();
+
this.fireQuery().subscribe(result => this.processQueryResult(result));
this.intervalSubject = new BehaviorSubject<number>(this.refreshIntervalInSeconds);
@@ -113,6 +122,7 @@ export abstract class BaseStreamPipesWidget implements OnChanges {
ngOnDestroy(): void {
this.subscription.unsubscribe();
+ this.resizeSub.unsubscribe();
}
computeCurrentWidth(width: number): number {
@@ -149,15 +159,6 @@ export abstract class BaseStreamPipesWidget implements OnChanges {
}
}
- onResize(info: WidgetInfo) {
- if (info.id === this.widgetConfig._id) {
- setTimeout(() => {
- this.onSizeChanged(this.computeCurrentWidth(info.width),
- this.computeCurrentHeight(info.height));
- }, 100);
- }
- }
-
fireQuery(): Observable<SpQueryResult> {
return this.dataLakeService
.getData(this.widgetDataConfig.measureName, this.buildQuery(), true)
diff --git a/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.html b/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.html
index d4cf25599..59b7f59a6 100644
--- a/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.html
+++ b/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.html
@@ -20,9 +20,9 @@
<div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
{{selectedTitle}}
</div>
- <div class="value-panel">
- <div echarts [options]="chartOption" [ngStyle]="{'width': '100%', 'height': currentHeight}"
- (chartInit)="onChartInit($event)" [merge]= "dynamicData" *ngIf="configReady">
+ <div fxFlex [ngStyle]="{height: currentHeight + 'px'}" *ngIf="configReady">
+ <div echarts [options]="chartOption" [ngStyle]="{'width': '100%', 'height': '100%'}"
+ (chartInit)="onChartInit($event)" [merge]= "dynamicData">
</div>
</div>
</div>
diff --git a/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.scss b/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.scss
index 76e1caf81..e374f5dd4 100644
--- a/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.scss
+++ b/ui/src/app/dashboard/components/widgets/stacked-line-chart/stacked-line-chart-widget.component.scss
@@ -30,15 +30,6 @@
font-size: 20px;
}
-.value-panel {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- align-content: center;
- flex: 1;
-}
-
.status-light {
border-radius: 50%;
float: left;
diff --git a/ui/src/app/dashboard/services/resize.service.ts b/ui/src/app/dashboard/services/resize.service.ts
index 129f7c29f..32101c3fc 100644
--- a/ui/src/app/dashboard/services/resize.service.ts
+++ b/ui/src/app/dashboard/services/resize.service.ts
@@ -18,14 +18,14 @@
import { Subject } from 'rxjs';
import { Injectable } from '@angular/core';
-import { WidgetInfo } from '../models/gridster-info.model';
+import { GridsterInfo } from '../models/gridster-info.model';
@Injectable()
export class ResizeService {
- public resizeSubject: Subject<WidgetInfo> = new Subject<WidgetInfo>();
+ public resizeSubject: Subject<GridsterInfo> = new Subject<GridsterInfo>();
- public notify(info: WidgetInfo): void {
+ public notify(info: GridsterInfo): void {
this.resizeSubject.next(info);
}
}