This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 3741b06 [STREAMPIPES-452] Refactor line charts into time series charts
3741b06 is described below
commit 3741b06f5b7bac4448fc471bb7cef4041af78a4c
Author: Philipp Zehnder <[email protected]>
AuthorDate: Sat Oct 30 11:10:43 2021 +0200
[STREAMPIPES-452] Refactor line charts into time series charts
---
...css => time-series-chart-widget.component.scss} | 0
.../time-series-chart-widget.component.ts | 10 ++--
.../select-color-properties.component.html | 53 +++++++++++++---------
....css => select-color-properties.component.scss} | 10 ++++
.../select-color-properties.component.ts | 8 ++--
5 files changed, 52 insertions(+), 29 deletions(-)
diff --git
a/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.css
b/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.scss
similarity index 100%
rename from
ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.css
rename to
ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.scss
diff --git
a/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
b/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
index d83236b..c6b25e0 100644
---
a/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
+++
b/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
@@ -25,7 +25,7 @@ import { SpQueryResult } from
'../../../../core-model/gen/streampipes-model';
@Component({
selector: 'sp-data-explorer-time-series-chart-widget',
templateUrl: './time-series-chart-widget.component.html',
- styleUrls: ['./time-series-chart-widget.component.css']
+ styleUrls: ['./time-series-chart-widget.component.scss']
})
export class TimeSeriesChartWidgetComponent extends
BaseDataExplorerWidget<TimeSeriesChartWidgetModel> implements OnInit {
@@ -146,8 +146,8 @@ export class TimeSeriesChartWidgetComponent extends
BaseDataExplorerWidget<TimeS
const columnIndex = this.getColumnIndex(field, data);
let value = row[columnIndex];
- if (this.fieldProvider.booleanFields.find(f => field.fullDbName ===
f.fullDbName
- && f.sourceIndex === data.sourceIndex) !== undefined) {
+ if (this.fieldProvider.booleanFields.find(f => field.fullDbName ===
f.fullDbName
+ && f.sourceIndex === data.sourceIndex) !== undefined) {
if (value === true) {
value = 1;
} else {
@@ -178,7 +178,7 @@ export class TimeSeriesChartWidgetComponent extends
BaseDataExplorerWidget<TimeS
this.graph.layout.font.color =
this.dataExplorerWidget.baseAppearanceConfig.textColor;
if (this.data) {
this.dataExplorerWidget.visualizationConfig.selectedLineChartProperties.map((field,
index) => {
- if (this.data[index] !== undefined) {
+ if (this.data[index] !== undefined) {
this.data[index]['marker'] = { 'color': '' };
const name = field.runtimeName + field.sourceIndex.toString();
@@ -204,7 +204,7 @@ export class TimeSeriesChartWidgetComponent extends
BaseDataExplorerWidget<TimeS
const setType =
this.dataExplorerWidget.visualizationConfig.displayType[name];
if (setType !== 'bar') {
- displayMode = setType;
+ displayMode = setType;
} else {
displayType = 'bar';
}
diff --git
a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.html
b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.html
index 65f0db8..a06ac74 100644
---
a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.html
+++
b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.html
@@ -30,33 +30,44 @@
</button>
</div>
</div>
- <div *ngFor="let field of availableProperties" fxLayout="column"
class="field-scroll-panel">
-
+ <div style="margin-left: 1px; margin-right: 1px;" *ngFor="let field of
availableProperties" fxLayout="column"
+ class="field-scroll-panel">
<mat-checkbox color="accent" [checked]="isSelected(field)"
(change)="toggleFieldSelection(field)">
<b>{{field.runtimeName}}</b>
- {{'(' +(field.aggregation ? field.aggregation + ', ': '') +
field.measure +')'}}
+ {{'(' + (field.aggregation ? field.aggregation + ', ' : '') +
field.measure + ')'}}
</mat-checkbox>
<div fxFlex fxLayoutAlign="end center" *ngIf="isSelected(field)">
- <mat-form-field color="accent" fxFlex="100">
+ <mat-form-field class="marginColorField"
+ color="accent"
+ fxFlex="60">
+ <input
[(ngModel)]="currentlyConfiguredWidget.visualizationConfig.displayName[field.runtimeName
+ field.sourceIndex.toString()]"
+ matInput (input)="onFilterChange($event.target.value,
field)"/>
+ </mat-form-field>
+ <mat-form-field class="marginColorField"
+ color="accent"
+ fxFlex="35">
+ <mat-select
+
[(value)]="currentlyConfiguredWidget.visualizationConfig.displayType[field.runtimeName
+ field.sourceIndex.toString()]"
+ (selectionChange)="triggerDataRefresh()">
+ <mat-option [value]="'lines'">Line</mat-option>
+ <mat-option [value]="'markers'">Scatter</mat-option>
+ <mat-option [value]="'lines+markers'">Scattered
Line</mat-option>
+ <mat-option [value]="'bar'">Bar</mat-option>
+ </mat-select>
+ </mat-form-field>
+ <mat-form-field
+ class="marginColorFieldRight"
+ color="accent"
+ fxFlex="5">
<input matInput
-
[(colorPicker)]="currentlyConfiguredWidget.visualizationConfig.chosenColor[field.runtimeName
+ field.sourceIndex.toString()]"
-
[style.background]="currentlyConfiguredWidget.visualizationConfig.chosenColor[field.runtimeName
+ field.sourceIndex.toString()]" required
- [cpPosition]="'bottom'"
- [cpPresetColors]="presetColors"
- (colorPickerSelect)="triggerDataRefresh()"
- autocomplete="off"/>
- <input
[(ngModel)]="currentlyConfiguredWidget.visualizationConfig.displayName[field.runtimeName
+ field.sourceIndex.toString()]" matInput
(input)="onFilterChange($event.target.value, field)">
- <mat-form-field color="accent" fxFlex="100">
- <mat-select
[(value)]="currentlyConfiguredWidget.visualizationConfig.displayType[field.runtimeName
+ field.sourceIndex.toString()]" (selectionChange)="triggerDataRefresh()">
- <mat-option [value]="'lines'">Line</mat-option>
- <mat-option [value]="'markers'">Scatter</mat-option>
- <mat-option [value]="'lines+markers'">Scattered
Line</mat-option>
- <mat-option [value]="'bar'">Bar</mat-option>
- </mat-select>
- </mat-form-field>
+
[(colorPicker)]="currentlyConfiguredWidget.visualizationConfig.chosenColor[field.runtimeName
+ field.sourceIndex.toString()]"
+
[style.background]="currentlyConfiguredWidget.visualizationConfig.chosenColor[field.runtimeName
+ field.sourceIndex.toString()]"
+ required
+ [cpPosition]="'bottom'"
+ [cpPresetColors]="presetColors"
+ (colorPickerSelect)="triggerDataRefresh()"
+ autocomplete="off"/>
</mat-form-field>
</div>
-
-
</div>
</div>
diff --git
a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.css
b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.scss
similarity index 85%
rename from
ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.css
rename to
ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.scss
index 13cbc4a..d758e22 100644
---
a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.css
+++
b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.scss
@@ -15,3 +15,13 @@
* limitations under the License.
*
*/
+
+.marginColorField {
+ margin-left: 1px;
+ margin-right: 1px;
+}
+
+.marginColorFieldRight {
+ margin-left: 1px;
+ margin-right: 5px;
+}
diff --git
a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.ts
b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.ts
index 085c9c3..c31ca8d 100644
---
a/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.ts
+++
b/ui/src/app/data-explorer/components/widgets/utils/select-color-properties/select-color-properties.component.ts
@@ -25,7 +25,7 @@ import { TimeSeriesChartWidgetModel } from
'../../time-series-chart/model/time-s
@Component({
selector: 'sp-select-color-properties',
templateUrl: './select-color-properties.component.html',
- styleUrls: ['./select-color-properties.component.css']
+ styleUrls: ['./select-color-properties.component.scss']
})
export class SelectColorPropertiesComponent implements OnInit {
@@ -37,7 +37,8 @@ export class SelectColorPropertiesComponent implements OnInit
{
@Input() multiple: boolean;
@Input() currentlyConfiguredWidget: TimeSeriesChartWidgetModel;
- constructor(protected widgetConfigurationService:
WidgetConfigurationService) { }
+ constructor(protected widgetConfigurationService:
WidgetConfigurationService) {
+ }
presetColors: string[] = ['#39B54A', '#1B1464', '#f44336', '#4CAF50',
'#FFEB3B', '#FFFFFF', '#000000'];
@@ -71,7 +72,7 @@ export class SelectColorPropertiesComponent implements OnInit
{
toggleFieldSelection(field: DataExplorerField) {
if (this.isSelected(field)) {
this.selectedProperties = this.selectedProperties.filter(
- sp => !(sp.fullDbName === field.fullDbName && sp.sourceIndex ===
field.sourceIndex)
+ sp => !(sp.fullDbName === field.fullDbName && sp.sourceIndex ===
field.sourceIndex)
);
} else {
this.selectedProperties.push(field);
@@ -86,6 +87,7 @@ export class SelectColorPropertiesComponent implements OnInit
{
refreshView: true
});
}
+
getColor(field: DataExplorerField) {
return '#000000';
}
