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/02/12 14:00:43 UTC
[incubator-streampipes] 02/02: Improve configuration of resizable
charts
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 843da92b9d15142eef07f0f30f1eca1664826107
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Wed Feb 12 15:00:30 2020 +0100
Improve configuration of resizable charts
---
.../widgets/base/base-ngx-charts-widget.ts | 34 ++++++++++++++++++++++
.../components/widgets/line/line-config.ts | 6 ++--
.../widgets/line/line-widget.component.html | 4 +--
.../widgets/line/line-widget.component.ts | 26 +++--------------
4 files changed, 43 insertions(+), 27 deletions(-)
diff --git a/ui/src/app/dashboard-v2/components/widgets/base/base-ngx-charts-widget.ts b/ui/src/app/dashboard-v2/components/widgets/base/base-ngx-charts-widget.ts
new file mode 100644
index 0000000..783dcf3
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/base/base-ngx-charts-widget.ts
@@ -0,0 +1,34 @@
+import {BaseStreamPipesWidget} from "./base-widget";
+import {RxStompService} from "@stomp/ng2-stompjs";
+import {ResizeService} from "../../../services/resize.service";
+import {GridsterInfo} from "../../../models/gridster-info.model";
+
+export abstract class BaseNgxChartsStreamPipesWidget extends BaseStreamPipesWidget {
+
+ view: any[] = [];
+ displayChart: boolean = false;
+
+ constructor(rxStompService: RxStompService, protected resizeService: ResizeService) {
+ super(rxStompService);
+ }
+
+ ngOnInit() {
+ super.ngOnInit();
+ this.view = [this.gridsterItem.width, this.gridsterItem.height];
+ this.displayChart = true;
+ this.resizeService.resizeSubject.subscribe(info => {
+ this.onResize(info);
+ });
+ }
+
+ onResize(info: GridsterInfo) {
+ if (info.gridsterItem.id === this.gridsterItem.id) {
+ setTimeout(() => {
+ this.displayChart = false;
+ this.view = [info.gridsterItemComponent.width, info.gridsterItemComponent.height];
+ this.displayChart = true;
+ }, 100);
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/line/line-config.ts b/ui/src/app/dashboard-v2/components/widgets/line/line-config.ts
index 709614b..de783d4 100644
--- a/ui/src/app/dashboard-v2/components/widgets/line/line-config.ts
+++ b/ui/src/app/dashboard-v2/components/widgets/line/line-config.ts
@@ -19,9 +19,9 @@ export class LineConfig extends WidgetConfig {
.requiredPropertyWithUnaryMapping(LineConfig.TIMESTAMP_MAPPING_KEY, "Timestamp field", "", EpRequirements.timestampReq())
.requiredPropertyWithUnaryMapping(LineConfig.NUMBER_MAPPING_KEY, "Number field", "", EpRequirements.numberReq())
.build())
- .requiredTextParameter(LineConfig.TITLE_KEY, "hi", "hi")
- .requiredIntegerParameter(LineConfig.MIN_Y_AXIS_KEY, "Y-axis range (min)", "")
- .requiredIntegerParameter(LineConfig.MAX_Y_AXIS_KEY, "Y-axis range (min)", "")
+ .requiredTextParameter(LineConfig.TITLE_KEY, "Line Chart Title", "The title of the cart")
+ //.requiredIntegerParameter(LineConfig.MIN_Y_AXIS_KEY, "Y-axis range (min)", "")
+ //.requiredIntegerParameter(LineConfig.MAX_Y_AXIS_KEY, "Y-axis range (min)", "")
.build();
}
diff --git a/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.html
index 610c2ac..1186c59 100644
--- a/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.html
@@ -1,5 +1,5 @@
-<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel" #pbgChartContainer>
- <ngx-charts-line-chart *ngIf="displayChart" #chart
+<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel">
+ <ngx-charts-line-chart *ngIf="displayChart"
[showXAxisLabel]="false"
[showYAxisLabel]="false"
[timeline]="true"
diff --git a/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.ts b/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.ts
index 9bdfa28..ea8b839 100644
--- a/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.ts
+++ b/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.ts
@@ -6,38 +6,29 @@ import {LineConfig} from "./line-config";
import {ResizeService} from "../../../services/resize.service";
import {GridsterInfo} from "../../../models/gridster-info.model";
import {NumberCardComponent} from "@swimlane/ngx-charts";
+import {BaseNgxChartsStreamPipesWidget} from "../base/base-ngx-charts-widget";
@Component({
selector: 'line-widget',
templateUrl: './line-widget.component.html',
styleUrls: ['./line-widget.component.css']
})
-export class LineWidgetComponent extends BaseStreamPipesWidget implements OnInit, OnDestroy {
-
- @ViewChild('pbgChartContainer') pbgChartContainer: ElementRef;
- @ViewChild('chart') chart: NumberCardComponent;
+export class LineWidgetComponent extends BaseNgxChartsStreamPipesWidget implements OnInit, OnDestroy {
multi:any = [];
- view: any[] = [];
selectedNumberProperty: string;
selectedTimestampProperty: string;
title: string;
minYAxisRange: number;
maxYAxisRange: number;
- displayChart: boolean = false;
- constructor(rxStompService: RxStompService, private resizeService: ResizeService) {
- super(rxStompService);
+ constructor(rxStompService: RxStompService, resizeService: ResizeService) {
+ super(rxStompService, resizeService);
}
ngOnInit(): void {
super.ngOnInit();
- this.view = [this.gridsterItem.width, this.gridsterItem.height];
- this.displayChart = true;
- this.resizeService.resizeSubject.subscribe(info => {
- this.onResize(info);
- });
this.multi = [
{
"name": this.selectedNumberProperty,
@@ -78,13 +69,4 @@ export class LineWidgetComponent extends BaseStreamPipesWidget implements OnInit
return timeString;
}
- onResize(info: GridsterInfo) {
- if (info.gridsterItem.id === this.gridsterItem.id) {
- setTimeout(() => {
- this.displayChart = false;
- this.view = [info.gridsterItemComponent.width, info.gridsterItemComponent.height];
- this.displayChart = true;
- }, 100);
- }
- }
}
\ No newline at end of file