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 <rie...@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";);
     }

Reply via email to