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:44 UTC
[incubator-streampipes] branch dev updated (921ed50 -> 190a79b)
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a change to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
from 921ed50 STREAMPIPES-58: Refactor and extend live dashboard Add service to check for semantic type and format dates in table
new be10a4e STREAMPIPES-58: Add more visualizations to dashboard
new 190a79b Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
The 2 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:
.../widget/dashboard-widget.component.html | 8 ++++
.../number-config.ts => gauge/gauge-config.ts} | 18 +++++---
.../gauge-widget.component.css} | 0
.../widgets/gauge/gauge-widget.component.html | 10 ++++
.../widgets/gauge/gauge-widget.component.ts | 53 ++++++++++++++++++++++
.../table-config.ts => image/image-config.ts} | 10 ++--
.../image-widget.component.css} | 11 ++---
.../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, 157 insertions(+), 26 deletions(-)
copy ui/src/app/dashboard-v2/components/widgets/{number/number-config.ts => gauge/gauge-config.ts} (52%)
copy ui/src/app/dashboard-v2/components/widgets/{table/table-widget.component.css => gauge/gauge-widget.component.css} (100%)
create mode 100644 ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.html
create mode 100644 ui/src/app/dashboard-v2/components/widgets/gauge/gauge-widget.component.ts
copy ui/src/app/dashboard-v2/components/widgets/{table/table-config.ts => image/image-config.ts} (62%)
copy ui/src/app/dashboard-v2/components/widgets/{number/number-widget.component.css => image/image-widget.component.css} (57%)
create mode 100644 ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.html
create mode 100644 ui/src/app/dashboard-v2/components/widgets/image/image-widget.component.ts
[incubator-streampipes] 01/02: STREAMPIPES-58: Add more
visualizations to dashboard
Posted by ri...@apache.org.
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");
}
[incubator-streampipes] 02/02: Merge branch 'dev' of
github.com:apache/incubator-streampipes into dev
Posted by ri...@apache.org.
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 190a79b7eee703fee9bcdb9d0ec30c2705c6abc8
Merge: be10a4e 921ed50
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Wed Feb 12 18:50:28 2020 +0100
Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
.../semantic-type/semantic-type-utils.service.ts | 36 ++++++++++++++++++++++
.../widgets/table/table-widget.component.ts | 9 +++++-
ui/src/app/dashboard-v2/dashboard.module.ts | 2 ++
3 files changed, 46 insertions(+), 1 deletion(-)
diff --cc ui/src/app/dashboard-v2/dashboard.module.ts
index 0ce8cb3,c66a309..c80d2cb
--- a/ui/src/app/dashboard-v2/dashboard.module.ts
+++ b/ui/src/app/dashboard-v2/dashboard.module.ts
@@@ -28,8 -28,7 +28,9 @@@ import {ResizeService} from "./services
import {TableWidgetComponent} from "./components/widgets/table/table-widget.component";
import {CdkTableModule} from "@angular/cdk/table";
import {RefreshDashboardService} from "./services/refresh-dashboard.service";
+ import {SemanticTypeUtilsService} from '../core-services/semantic-type/semantic-type-utils.service';
+import {GaugeWidgetComponent} from "./components/widgets/gauge/gauge-widget.component";
+import {ImageWidgetComponent} from "./components/widgets/image/image-widget.component";
const dashboardWidgets = [