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 17:50:45 UTC
[incubator-streampipes] 01/02: STREAMPIPES-58: Add more
visualizations to dashboard
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 be10a4e16f696e275cd5395a6e861d79bf3ea543
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Wed Feb 12 18:49:03 2020 +0100
STREAMPIPES-58: Add more visualizations to dashboard
---
.../widget/dashboard-widget.component.html | 8 ++++
.../components/widgets/gauge/gauge-config.ts | 32 +++++++++++++
.../widgets/gauge/gauge-widget.component.css | 0
.../widgets/gauge/gauge-widget.component.html | 10 ++++
.../widgets/gauge/gauge-widget.component.ts | 53 ++++++++++++++++++++++
.../components/widgets/image/image-config.ts | 26 +++++++++++
.../widgets/image/image-widget.component.css | 13 ++++++
.../widgets/image/image-widget.component.html | 8 ++++
.../widgets/image/image-widget.component.ts | 44 ++++++++++++++++++
.../widgets/line/line-widget.component.ts | 5 +-
ui/src/app/dashboard-v2/dashboard.module.ts | 6 ++-
.../app/dashboard-v2/registry/widget-registry.ts | 6 ++-
ui/src/app/dashboard-v2/sdk/ep-requirements.ts | 4 ++
13 files changed, 209 insertions(+), 6 deletions(-)
diff --git a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
index 7d982c1..d4d491a 100644
--- a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
@@ -24,6 +24,14 @@
<table-widget [gridsterItem]="item" [widget]="widget"
[widgetConfig]="configuredWidget"></table-widget>
</div>
+ <div *ngIf="widget.widgetType === 'gauge'" class="h-100 p-0">
+ <gauge-widget [gridsterItem]="item" [widget]="widget"
+ [widgetConfig]="configuredWidget"></gauge-widget>
+ </div>
+ <div *ngIf="widget.widgetType === 'image'" class="h-100 p-0">
+ <image-widget [gridsterItem]="item" [widget]="widget"
+ [widgetConfig]="configuredWidget"></image-widget>
+ </div>
</div>
</div>
</div>
diff --git a/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-config.ts b/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-config.ts
new file mode 100644
index 0000000..198b74f
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-config.ts
@@ -0,0 +1,32 @@
+import {WidgetConfig} from "../base/base-config";
+import {DashboardWidgetSettings} from "../../../../core-model/dashboard/DashboardWidgetSettings";
+import {WidgetConfigBuilder} from "../../../registry/widget-config-builder";
+import {SchemaRequirementsBuilder} from "../../../sdk/schema-requirements-builder";
+import {EpRequirements} from "../../../sdk/ep-requirements";
+
+export class GaugeConfig extends WidgetConfig {
+
+ static readonly TITLE_KEY: string = "title-key";
+ static readonly NUMBER_MAPPING_KEY: string = "number-mapping";
+ static readonly COLOR_KEY: string = "color-key";
+ static readonly MIN_KEY: string = "min-key";
+ static readonly MAX_KEY: string = "max-key";
+
+ constructor() {
+ super();
+ }
+
+ getConfig(): DashboardWidgetSettings {
+ return WidgetConfigBuilder.create("gauge", "gauge")
+ .requiredSchema(SchemaRequirementsBuilder
+ .create()
+ .requiredPropertyWithUnaryMapping(GaugeConfig.NUMBER_MAPPING_KEY, "Select property", "", EpRequirements.numberReq())
+ .build())
+ .requiredTextParameter(GaugeConfig.TITLE_KEY, "Title", "The title")
+ .requiredIntegerParameter(GaugeConfig.MIN_KEY, "Min Y axis value", "")
+ .requiredIntegerParameter(GaugeConfig.MAX_KEY, "Max Y axis value", "")
+ .requiredColorParameter(GaugeConfig.COLOR_KEY, "Color", "The background color", "#000000")
+ .build();
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.css b/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.html
new file mode 100644
index 0000000..e066fd9
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.html
@@ -0,0 +1,10 @@
+<ngx-charts-gauge
+ [view]="view"
+ [results]="data"
+ [min]="min"
+ [max]="max"
+ [angleSpan]="240"
+ [startAngle]="-120"
+ [bigSegments]="10"
+ [smallSegments]="5">
+</ngx-charts-gauge>
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.ts b/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.ts
new file mode 100644
index 0000000..432b614
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.ts
@@ -0,0 +1,53 @@
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {BaseNgxChartsStreamPipesWidget} from "../base/base-ngx-charts-widget";
+import {RxStompService} from "@stomp/ng2-stompjs";
+import {ResizeService} from "../../../services/resize.service";
+import {StaticPropertyExtractor} from "../../../sdk/extractor/static-property-extractor";
+import {GaugeConfig} from "./gauge-config";
+
+
+@Component({
+ selector: 'gauge-widget',
+ templateUrl: './gauge-widget.component.html',
+ styleUrls: ['./gauge-widget.component.css']
+})
+export class GaugeWidgetComponent extends BaseNgxChartsStreamPipesWidget implements OnInit, OnDestroy {
+
+ data: any = [];
+ title: string;
+ color: string = "green";
+ min: number;
+ max: number;
+
+ selectedProperty: string;
+
+ constructor(rxStompService: RxStompService, resizeService: ResizeService) {
+ super(rxStompService, resizeService);
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+ }
+
+ ngOnDestroy(): void {
+ super.ngOnDestroy();
+ }
+
+ extractConfig(extractor: StaticPropertyExtractor) {
+ this.color = extractor.selectedColor(GaugeConfig.COLOR_KEY);
+ this.min = extractor.integerParameter(GaugeConfig.MIN_KEY);
+ this.max = extractor.integerParameter(GaugeConfig.MAX_KEY);
+ this.title = extractor.singleValueParameter(GaugeConfig.TITLE_KEY);
+ this.selectedProperty = extractor.mappingPropertyValue(GaugeConfig.NUMBER_MAPPING_KEY);
+ }
+
+ isNumber(item: any): boolean {
+ return false;
+ }
+
+ protected onEvent(event: any) {
+ this.data[0] = ({"name": "value", "value": event[this.selectedProperty]});
+ this.data = [...this.data];
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/image/image-config.ts b/ui/src/app/dashboard-v2/components/widgets/image/image-config.ts
new file mode 100644
index 0000000..063b5bc
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/image/image-config.ts
@@ -0,0 +1,26 @@
+import {WidgetConfig} from "../base/base-config";
+import {DashboardWidgetSettings} from "../../../../core-model/dashboard/DashboardWidgetSettings";
+import {WidgetConfigBuilder} from "../../../registry/widget-config-builder";
+import {SchemaRequirementsBuilder} from "../../../sdk/schema-requirements-builder";
+import {EpRequirements} from "../../../sdk/ep-requirements";
+
+export class ImageConfig extends WidgetConfig {
+
+ static readonly TITLE_KEY: string = "title-key";
+ static readonly NUMBER_MAPPING_KEY: string = "number-mapping";
+
+ constructor() {
+ super();
+ }
+
+ getConfig(): DashboardWidgetSettings {
+ return WidgetConfigBuilder.create("image", "image")
+ .requiredSchema(SchemaRequirementsBuilder
+ .create()
+ .requiredPropertyWithUnaryMapping(ImageConfig.NUMBER_MAPPING_KEY, "Select property", "", EpRequirements.imageReq())
+ .build())
+ .requiredTextParameter(ImageConfig.TITLE_KEY, "Title", "The title")
+ .build();
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.css b/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.css
new file mode 100644
index 0000000..ea9a026
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.css
@@ -0,0 +1,13 @@
+.image-box {
+ width:100%;
+ height: 100%;
+ color: #fff;
+ text-align: center;
+ left: 50%;
+ display:inline-grid;
+ align-content: center;
+}
+
+.image-title {
+ font-size:14px;
+}
diff --git a/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.html
new file mode 100644
index 0000000..ee7b227
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.html
@@ -0,0 +1,8 @@
+<div class="image-box" [ngStyle]="{'background-color': 'white'}">
+ <div class="imageTitle">
+ {{title}}
+ </div>
+ <div class="imageContent">
+ <img style="width: 100%;" src="data:image/jpg;base64,{{item}}" *ngIf="item" />
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.ts b/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.ts
new file mode 100644
index 0000000..4c437f2
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.ts
@@ -0,0 +1,44 @@
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {BaseNgxChartsStreamPipesWidget} from "../base/base-ngx-charts-widget";
+import {RxStompService} from "@stomp/ng2-stompjs";
+import {ResizeService} from "../../../services/resize.service";
+import {StaticPropertyExtractor} from "../../../sdk/extractor/static-property-extractor";
+import {GaugeConfig} from "../gauge/gauge-config";
+
+@Component({
+ selector: 'image-widget',
+ templateUrl: './image-widget.component.html',
+ styleUrls: ['./image-widget.component.css']
+})
+export class ImageWidgetComponent extends BaseNgxChartsStreamPipesWidget implements OnInit, OnDestroy {
+
+ item: any;
+ title: string;
+ selectedProperty: string;
+
+ constructor(rxStompService: RxStompService, resizeService: ResizeService) {
+ super(rxStompService, resizeService);
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+ }
+
+ ngOnDestroy(): void {
+ super.ngOnDestroy();
+ }
+
+ extractConfig(extractor: StaticPropertyExtractor) {
+ this.title = extractor.singleValueParameter(GaugeConfig.TITLE_KEY);
+ this.selectedProperty = extractor.mappingPropertyValue(GaugeConfig.NUMBER_MAPPING_KEY);
+ }
+
+ isNumber(item: any): boolean {
+ return false;
+ }
+
+ protected onEvent(event: any) {
+ this.item = event[this.selectedProperty];
+ }
+
+}
\ No newline at end of file
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 ea8b839..73528be 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
@@ -1,11 +1,8 @@
-import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from "@angular/core";
-import {BaseStreamPipesWidget} from "../base/base-widget";
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit} from "@angular/core";
import {StaticPropertyExtractor} from "../../../sdk/extractor/static-property-extractor";
import {RxStompService} from "@stomp/ng2-stompjs";
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({
diff --git a/ui/src/app/dashboard-v2/dashboard.module.ts b/ui/src/app/dashboard-v2/dashboard.module.ts
index fb5374d..0ce8cb3 100644
--- a/ui/src/app/dashboard-v2/dashboard.module.ts
+++ b/ui/src/app/dashboard-v2/dashboard.module.ts
@@ -28,6 +28,8 @@ import {ResizeService} from "./services/resize.service";
import {TableWidgetComponent} from "./components/widgets/table/table-widget.component";
import {CdkTableModule} from "@angular/cdk/table";
import {RefreshDashboardService} from "./services/refresh-dashboard.service";
+import {GaugeWidgetComponent} from "./components/widgets/gauge/gauge-widget.component";
+import {ImageWidgetComponent} from "./components/widgets/image/image-widget.component";
const dashboardWidgets = [
@@ -62,7 +64,9 @@ const dashboardWidgets = [
EditDashboardDialogComponent,
LineWidgetComponent,
NumberWidgetComponent,
- TableWidgetComponent
+ TableWidgetComponent,
+ GaugeWidgetComponent,
+ ImageWidgetComponent
],
providers: [
DashboardService,
diff --git a/ui/src/app/dashboard-v2/registry/widget-registry.ts b/ui/src/app/dashboard-v2/registry/widget-registry.ts
index bb687ac..971b34c 100644
--- a/ui/src/app/dashboard-v2/registry/widget-registry.ts
+++ b/ui/src/app/dashboard-v2/registry/widget-registry.ts
@@ -3,13 +3,17 @@ import {DashboardWidgetSettings} from "../../core-model/dashboard/DashboardWidge
import {WidgetConfig} from "../components/widgets/base/base-config";
import {LineConfig} from "../components/widgets/line/line-config";
import {TableConfig} from "../components/widgets/table/table-config";
+import {GaugeConfig} from "../components/widgets/gauge/gauge-config";
+import {ImageConfig} from "../components/widgets/image/image-config";
export class WidgetRegistry {
private static availableWidgets: Array<WidgetConfig> = [
new NumberConfig(),
new LineConfig(),
- new TableConfig()
+ new TableConfig(),
+ new GaugeConfig(),
+ new ImageConfig()
];
static getAvailableWidgetTemplates(): Array<DashboardWidgetSettings> {
diff --git a/ui/src/app/dashboard-v2/sdk/ep-requirements.ts b/ui/src/app/dashboard-v2/sdk/ep-requirements.ts
index 646f7c0..909bcc4 100644
--- a/ui/src/app/dashboard-v2/sdk/ep-requirements.ts
+++ b/ui/src/app/dashboard-v2/sdk/ep-requirements.ts
@@ -13,6 +13,10 @@ export class EpRequirements {
return EpRequirements.ep();
}
+ static imageReq(): EventProperty {
+ return EpRequirements.domainPropertyReq("https://image.com");
+ }
+
static timestampReq(): EventProperty {
return EpRequirements.domainPropertyReq("http://schema.org/DateTime");
}