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/15 12:43:03 UTC
[incubator-streampipes] 01/02: STREAMPIPES-58: Add title field to
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 bd70dff25f10b206397d40d39a21487e707ecf1d
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Feb 15 13:12:17 2020 +0100
STREAMPIPES-58: Add title field to widgets
---
.../components/widget/dashboard-widget.component.css | 4 ----
.../components/widgets/base/base-ngx-charts-widget.ts | 6 +++++-
.../components/widgets/gauge/gauge-widget.component.css | 11 +++++++----
.../components/widgets/gauge/gauge-widget.component.html | 3 +++
.../app/dashboard-v2/components/widgets/line/line-config.ts | 4 +---
.../components/widgets/line/line-widget.component.css | 8 ++++++++
.../components/widgets/line/line-widget.component.html | 3 +++
.../components/widgets/line/line-widget.component.ts | 1 -
.../components/widgets/number/number-widget.component.css | 3 ---
.../components/widgets/number/number-widget.component.html | 2 +-
ui/src/app/dashboard-v2/registry/widget-config-builder.ts | 4 ++--
11 files changed, 30 insertions(+), 19 deletions(-)
diff --git a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css
index 5a10c6a..9924f8e 100644
--- a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css
+++ b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.css
@@ -33,7 +33,3 @@
flex: 0 1 auto;
}
-/*::ng-deep .ngx-charts {*/
-/* margin-left:0px;*/
-/* margin-top:20px;*/
-/*}*/
\ No newline at end of file
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
index 4706448..990f9df 100644
--- 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
@@ -42,11 +42,15 @@ export abstract class BaseNgxChartsStreamPipesWidget extends BaseStreamPipesWidg
}
computeCurrentHeight(gridsterItemComponent: GridsterItemComponent): number {
- return (gridsterItemComponent.height - (BaseNgxChartsStreamPipesWidget.PADDING * 2) - this.editModeOffset());
+ return (gridsterItemComponent.height - (BaseNgxChartsStreamPipesWidget.PADDING * 2) - this.editModeOffset() - this.titlePanelOffset());
}
editModeOffset(): number {
return this.editMode ? BaseNgxChartsStreamPipesWidget.EDIT_HEADER_HEIGHT : 0;
}
+ titlePanelOffset(): number {
+ return this.hasTitlePanelSettings ? 20 : 0;
+ }
+
}
\ 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
index 4f48d9a..75128f5 100644
--- 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
@@ -5,7 +5,10 @@
align-content: center;
}
-/*::ng-deep .ngx-charts {*/
-/* margin-left:0px;*/
-/* margin-top:20px;*/
-/*}*/
\ No newline at end of file
+.mt-20 {
+ margin-top:20px;
+}
+
+.title-panel {
+ font-size:20px;
+}
\ No newline at end of file
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
index d77d3df..2e2a4f5 100644
--- 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
@@ -1,5 +1,8 @@
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel"
[ngStyle]="{'background-color': selectedBackgroundColor, 'color': selectedPrimaryTextColor}">
+ <div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
+ {{selectedTitle}}
+ </div>
<ngx-charts-gauge
[view]="view"
[scheme]="colorScheme"
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 de783d4..813d42c 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
@@ -6,20 +6,18 @@ import {EpRequirements} from "../../../sdk/ep-requirements";
export class LineConfig extends WidgetConfig {
- static readonly TITLE_KEY: string = "title";
static readonly NUMBER_MAPPING_KEY: string = "number-mapping";
static readonly TIMESTAMP_MAPPING_KEY: string = "timestamp-mapping";
static readonly MIN_Y_AXIS_KEY: string = "min-y-axis-key";
static readonly MAX_Y_AXIS_KEY: string = "max-y-axis-key";
getConfig(): DashboardWidgetSettings {
- return WidgetConfigBuilder.create("line", "line")
+ return WidgetConfigBuilder.createWithSelectableColorsAndTitlePanel("line", "line")
.requiredSchema(SchemaRequirementsBuilder
.create()
.requiredPropertyWithUnaryMapping(LineConfig.TIMESTAMP_MAPPING_KEY, "Timestamp field", "", EpRequirements.timestampReq())
.requiredPropertyWithUnaryMapping(LineConfig.NUMBER_MAPPING_KEY, "Number field", "", EpRequirements.numberReq())
.build())
- .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.css b/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.css
index 0f2195f..75128f5 100644
--- a/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.css
+++ b/ui/src/app/dashboard-v2/components/widgets/line/line-widget.component.css
@@ -3,4 +3,12 @@
height: 100%;
display:inline-grid;
align-content: center;
+}
+
+.mt-20 {
+ margin-top:20px;
+}
+
+.title-panel {
+ font-size:20px;
}
\ No newline at end of file
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 0d7e10f..7897e3b 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,4 +1,7 @@
<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel" [ngStyle]="{'background-color': selectedBackgroundColor, 'color': selectedPrimaryTextColor}">
+ <div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
+ {{selectedTitle}}
+ </div>
<ngx-charts-line-chart *ngIf="displayChart"
[showXAxisLabel]="false"
[showYAxisLabel]="false"
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 73528be..52c836e 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
@@ -39,7 +39,6 @@ export class LineWidgetComponent extends BaseNgxChartsStreamPipesWidget implemen
}
protected extractConfig(extractor: StaticPropertyExtractor) {
- this.title = extractor.singleValueParameter(LineConfig.TITLE_KEY);
this.selectedNumberProperty = extractor.mappingPropertyValue(LineConfig.NUMBER_MAPPING_KEY);
this.selectedTimestampProperty = extractor.mappingPropertyValue(LineConfig.TIMESTAMP_MAPPING_KEY);
//this.minYAxisRange = extractor.integerParameter(LineConfig.MIN_Y_AXIS_KEY);
diff --git a/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.css b/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.css
index 501a8ae..f04f5e4 100644
--- a/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.css
+++ b/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.css
@@ -7,9 +7,6 @@
align-content: center;
}
-.numberTitle {
- font-size:20px;
-}
.numberItem {
font-size:60px;
diff --git a/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.html
index c8882d9..7eb8cc3 100644
--- a/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widgets/number/number-widget.component.html
@@ -1,5 +1,5 @@
<div class="circleNumber" [ngStyle]="{'background-color': selectedBackgroundColor, 'color': selectedPrimaryTextColor}">
- <div class="numberTitle" *ngIf="hasTitlePanelSettings">
+ <div class="title-panel" *ngIf="hasTitlePanelSettings">
{{selectedTitle}}
</div>
<div class="numberItem">
diff --git a/ui/src/app/dashboard-v2/registry/widget-config-builder.ts b/ui/src/app/dashboard-v2/registry/widget-config-builder.ts
index eba4ea2..362898e 100644
--- a/ui/src/app/dashboard-v2/registry/widget-config-builder.ts
+++ b/ui/src/app/dashboard-v2/registry/widget-config-builder.ts
@@ -10,7 +10,7 @@ export class WidgetConfigBuilder {
static readonly PRIMARY_TEXT_COLOR_KEY: string = "spi-primary-text-color-key";
static readonly SECONDARY_TEXT_COLOR_KEY: string = "spi-secondary-text-color-key";
- static readonly TITLE_KEY: string = "title-key";
+ static readonly TITLE_KEY: string = "spi-title-key";
private widget: DashboardWidgetSettings;
@@ -29,7 +29,7 @@ export class WidgetConfigBuilder {
" color", "#bebebe")
}
if (withTitlePanel) {
- this.requiredTextParameter(WidgetConfigBuilder.TITLE_KEY.TITLE_KEY, "Title", "The title")
+ this.requiredTextParameter(WidgetConfigBuilder.TITLE_KEY, "Title", "The title")
}
}