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 2021/08/12 19:41:06 UTC
[incubator-streampipes] 01/03: [STREAMPIPES-402] Refactor line
chart config, bump plotly version
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-319
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit c16e6806d152a9fcc84d45511a46e8ae8eb5de94
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Thu Aug 12 21:16:28 2021 +0200
[STREAMPIPES-402] Refactor line chart config, bump plotly version
---
.../rest/impl/datalake/DataLakeWidgetResource.java | 2 +-
ui/package.json | 4 +-
...lorer-widget-appearance-settings.component.html | 2 +
...xplorer-widget-appearance-settings.component.ts | 12 ++
.../data-explorer-designer-panel.component.html | 2 +-
.../grid/data-explorer-dashboard-grid.component.ts | 4 +-
.../data-explorer-dashboard-panel.component.ts | 3 +-
.../widgets/base/base-data-explorer-widget.ts | 11 +-
.../widgets/image/image-widget.component.ts | 6 +-
.../config/line-chart-widget-config.component.html | 10 ++
.../config/line-chart-widget-config.component.ts | 1 -
.../line-chart/line-chart-widget.component.css | 2 +-
.../line-chart/line-chart-widget.component.html | 10 +-
.../line-chart/line-chart-widget.component.ts | 177 ++++++++++++---------
.../line-chart/model/line-chart-widget.model.ts | 1 +
.../table/config/table-widget-config.component.ts | 1 -
.../widgets/table/table-widget.component.ts | 10 +-
.../services/refresh-dashboard.service.ts | 6 +-
.../app/data-explorer/services/resize.service.ts | 4 +-
19 files changed, 158 insertions(+), 110 deletions(-)
diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeWidgetResource.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeWidgetResource.java
index 9a87047..e8a2525 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeWidgetResource.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeWidgetResource.java
@@ -52,7 +52,7 @@ public class DataLakeWidgetResource extends AbstractRestResource {
@Path("/{widgetId}")
public Response modifyDataExplorerWidget(DataExplorerWidgetModel dataExplorerWidgetModel) {
getDataExplorerWidgetStorage().updateDataExplorerWidget(dataExplorerWidgetModel);
- return ok();
+ return ok(getDataExplorerWidgetStorage().getDataExplorerWidget(dataExplorerWidgetModel.getId()));
}
@DELETE
diff --git a/ui/package.json b/ui/package.json
index b58c3a5..02ef3ab 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -43,7 +43,7 @@
"angular-gridster2": "8.3.0",
"angular-loading-bar": "0.8.0",
"angular-material-icons": "0.4.0",
- "angular-plotly.js": "1.5.0",
+ "angular-plotly.js": "^4.0.0",
"angular-tree-component": "8.5.6",
"angular-ui-tree": "2.9.0",
"angular2-uuid": "1.1.1",
@@ -78,7 +78,7 @@
"ngx-quill": "12.0.1",
"ngx-showdown": "5.1.0",
"path": "^0.12.7",
- "plotly.js": "1.52.2",
+ "plotly.js": "^2.3.1",
"prismjs": "1.16.0",
"quill": "1.3.7",
"roboto-fontface": "0.10.0",
diff --git a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html b/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
index 72062f0..601e3e3 100644
--- a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.html
@@ -35,6 +35,7 @@
[cpPosition]="'bottom'"
[style.background]="baseAppearanceConfig.backgroundColor" required
[cpPresetColors] = "presetColors"
+ (colorPickerSelect)="triggerViewUpdate()"
autocomplete="off"/>
</mat-form-field>
</div>
@@ -48,6 +49,7 @@
[style.background]="baseAppearanceConfig.textColor"
required
[cpPresetColors] = "presetColors"
+ (colorPickerSelect)="triggerViewUpdate()"
autocomplete="off"/>
</mat-form-field>
</div>
diff --git a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts b/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
index 47dcbca..e6eecfe 100644
--- a/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
+++ b/ui/src/app/data-explorer/components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component.ts
@@ -19,6 +19,7 @@
import {Component, Input, OnInit} from '@angular/core';
import {DataExplorerWidgetModel} from "../../../../core-model/gen/streampipes-model";
import {WidgetBaseAppearanceConfig} from "../../../models/dataview-dashboard.model";
+import { WidgetConfigurationService } from '../../../services/widget-configuration.service';
@Component({
selector: 'sp-data-explorer-widget-appearance-settings',
@@ -28,12 +29,23 @@ import {WidgetBaseAppearanceConfig} from "../../../models/dataview-dashboard.mod
export class DataExplorerWidgetAppearanceSettingsComponent implements OnInit {
@Input() baseAppearanceConfig: WidgetBaseAppearanceConfig;
+ @Input() widgetId: string;
presetColors: Array<any> = ["#39B54A", "#1B1464", "#f44336", "#4CAF50", "#FFEB3B", "#FFFFFF", "#000000"];
+
+ constructor(private widgetConfigurationService: WidgetConfigurationService) {
+
+ }
+
ngOnInit(): void {
}
+ triggerViewUpdate() {
+ console.log("trigger view update");
+ this.widgetConfigurationService.notify({widgetId: this.widgetId, refreshView: true, refreshData: false });
+ }
+
}
diff --git a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
index cbdee90..2e3384f 100644
--- a/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/data-explorer-designer-panel.component.html
@@ -34,7 +34,6 @@
</sp-data-explorer-widget-data-settings>
</div>
<div *ngIf="selectedIndex == 1">
- Visualization
<div *ngIf="currentlyConfiguredWidget.widgetType === 'table'" class="h-100 p-0">
<sp-data-explorer-table-widget-config [currentlyConfiguredWidget]="currentlyConfiguredWidget" [dataLakeMeasure]="dataLakeMeasure">
@@ -48,6 +47,7 @@
</div>
<div *ngIf="selectedIndex == 2">
<sp-data-explorer-widget-appearance-settings
+ [widgetId]="currentlyConfiguredWidget._id"
[baseAppearanceConfig]="currentlyConfiguredWidget.baseAppearanceConfig">
</sp-data-explorer-widget-appearance-settings>
diff --git a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts
index 1c9ddf2..72b10c0 100644
--- a/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts
+++ b/ui/src/app/data-explorer/components/grid/data-explorer-dashboard-grid.component.ts
@@ -157,7 +157,9 @@ export class DataExplorerDashboardGridComponent implements OnInit, OnChanges {
updateAllWidgets() {
this.configuredWidgets.forEach((value, key) => {
- this.dataViewDataExplorerService.updateWidget(value).subscribe();
+ this.dataViewDataExplorerService.updateWidget(value).subscribe(response => {
+ value._rev = response._rev;
+ });
});
}
diff --git a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
index 8ea99af..476d62b 100644
--- a/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
+++ b/ui/src/app/data-explorer/components/panel/data-explorer-dashboard-panel.component.ts
@@ -97,7 +97,8 @@ export class DataExplorerDashboardPanelComponent implements OnInit {
updateDashboard(closeEditMode?: boolean) {
this.dataViewDataExplorerService.updateDashboard(this.dashboard).subscribe(result => {
- this.refreshDashboardService.notify(this.dashboard._id);
+ this.dashboard._rev = result._rev;
+ //this.refreshDashboardService.notify(this.dashboard._id);
// TODO delete widgets
this.dashboardGrid.updateAllWidgets();
// if (this.widgetsToUpdate.size > 0) {
diff --git a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts
index 42acfa6..3b68f8f 100644
--- a/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts
+++ b/ui/src/app/data-explorer/components/widgets/base/base-data-explorer-widget.ts
@@ -36,6 +36,7 @@ import {
} from "../../../../core-model/gen/streampipes-model";
import {WidgetConfigurationService} from "../../../services/widget-configuration.service";
import {DashboardItem, TimeSettings} from "../../../../dashboard/models/dashboard.model";
+import { ResizeService } from '../../../services/resize.service';
@Directive()
export abstract class BaseDataExplorerWidget<T extends DataExplorerWidgetModel> implements OnInit, OnChanges, OnDestroy {
@@ -63,7 +64,8 @@ export abstract class BaseDataExplorerWidget<T extends DataExplorerWidgetModel>
constructor(protected dataLakeRestService: DatalakeRestService,
protected dialog: MatDialog,
- protected widgetConfigurationService: WidgetConfigurationService) {
+ protected widgetConfigurationService: WidgetConfigurationService,
+ protected resizeService: ResizeService) {
}
@@ -78,7 +80,7 @@ export abstract class BaseDataExplorerWidget<T extends DataExplorerWidgetModel>
this.refreshView();
}
}
- })
+ });
}
ngOnDestroy(): void {
@@ -99,8 +101,9 @@ export abstract class BaseDataExplorerWidget<T extends DataExplorerWidgetModel>
}
ngOnChanges(changes: SimpleChanges) {
- console.log(changes);
- this.timeSettings = changes.timeSettings.currentValue;
+ if (changes.timeSettings) {
+ this.timeSettings = changes.timeSettings.currentValue;
+ }
this.updateData();
}
diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
index 76471d3..2ab2a16 100644
--- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
@@ -25,6 +25,7 @@ import {MatDialog} from '@angular/material/dialog';
import {EventPropertyUnion, EventSchema} from '../../../../core-model/gen/streampipes-model';
import {ImageWidgetModel} from "./model/image-widget.model";
import {WidgetConfigurationService} from "../../../services/widget-configuration.service";
+import { ResizeService } from '../../../services/resize.service';
@Component({
selector: 'sp-data-explorer-image-widget',
@@ -47,8 +48,9 @@ export class ImageWidgetComponent extends BaseDataExplorerWidget<ImageWidgetMode
constructor(
protected dataLakeRestService: DatalakeRestService,
protected dialog: MatDialog,
- widgetConfigurationService: WidgetConfigurationService) {
- super(dataLakeRestService, dialog, widgetConfigurationService);
+ widgetConfigurationService: WidgetConfigurationService,
+ resizeService: ResizeService) {
+ super(dataLakeRestService, dialog, widgetConfigurationService, resizeService);
}
ngOnInit(): void {
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html
index 81b48a2..f37e87c 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html
@@ -17,6 +17,16 @@
-->
<div fxFlex="100" fxLayout="column" class="ml-0 mr-0">
+
+ <mat-form-field color="accent" fxFlex="100">
+ <mat-label>Mode</mat-label>
+ <mat-select [(value)]="currentlyConfiguredWidget.dataConfig.chartMode" (selectionChange)="triggerViewRefresh()">
+ <mat-option [value]="'lines'">Line</mat-option>
+ <mat-option [value]="'markers'">Dots</mat-option>
+ <mat-option [value]="'lines+markers'">Line+Dots</mat-option>
+ </mat-select>
+ </mat-form-field>
+
<sp-select-properties
label="Select Properties"
multiple=true
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts
index e182213..d8a15cb 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts
@@ -72,5 +72,4 @@ export class LineChartWidgetConfigComponent extends BaseWidgetConfig<LineChartWi
toggleLabelingMode() {
//this.triggerViewRefresh();
}
-
}
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css
index 396e87a..d5ac69a 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css
@@ -30,7 +30,7 @@
.plotly-container {
width: 100%;
align-self:start;
- height: calc(100% - 40px);
+ height: 100%;
}
.labeling-active {
width: 85%;
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
index b0cfbbf..facd55c 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
@@ -16,9 +16,9 @@
~
-->
-<div class="widget-content">
- <div class="widget-inner-content h-100 overflow-y-hidden">
- <sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner>
+<div fxLayout="column" fxFlex="100" [ngStyle]="{background: dataExplorerWidget.baseAppearanceConfig.backgroundColor, color: dataExplorerWidget.baseAppearanceConfig.textColor}">
+
+ <sp-load-data-spinner *ngIf="showIsLoadingData" class="h-100"></sp-load-data-spinner>
<sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="timeSettings"></sp-no-data-in-date-range>
<sp-select-label *ngIf="dataExplorerWidget.dataConfig.labelingModeOn"
@@ -27,15 +27,15 @@
</sp-select-label>
<plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData"
+ [divId]="dataExplorerWidget._id"
class="plotly-container"
[class.labeling-active]="dataExplorerWidget.dataConfig.labelingModeOn"
[data]="data"
[layout]="graph.layout"
[config]="graph.config"
(selected)="selectDataPoints($event)"
- (plotly_click)="changeLabelOfArea($event)">
+ (plotlyClick)="changeLabelOfArea($event)">
<!-- (relayout)="handleDefaultModeBarButtonClicks($event)"-->
</plotly-plot>
- </div>
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
index 8877806..bafe107 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
@@ -16,18 +16,18 @@
*
*/
-import {Component, OnInit, Renderer2} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
-import {DataResult} from '../../../../core-model/datalake/DataResult';
-import {GroupedDataResult} from '../../../../core-model/datalake/GroupedDataResult';
-import {DatalakeRestService} from '../../../../core-services/datalake/datalake-rest.service';
-import {ColorService} from './services/color.service';
-import {BaseDataExplorerWidget} from '../base/base-data-explorer-widget';
-import {Label} from '../../../../core-model/gen/streampipes-model';
-import {ResizeService} from '../../../services/resize.service';
-import {LabelService} from '../../../../core-ui/labels/services/label.service';
-import {LineChartWidgetModel} from "./model/line-chart-widget.model";
-import {WidgetConfigurationService} from "../../../services/widget-configuration.service";
+import { Component, OnInit, Renderer2 } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { DataResult } from '../../../../core-model/datalake/DataResult';
+import { GroupedDataResult } from '../../../../core-model/datalake/GroupedDataResult';
+import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
+import { ColorService } from './services/color.service';
+import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
+import { Label } from '../../../../core-model/gen/streampipes-model';
+import { ResizeService } from '../../../services/resize.service';
+import { LabelService } from '../../../../core-ui/labels/services/label.service';
+import { LineChartWidgetModel } from './model/line-chart-widget.model';
+import { WidgetConfigurationService } from '../../../services/widget-configuration.service';
@Component({
selector: 'sp-data-explorer-line-chart-widget',
@@ -38,18 +38,10 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
data: any[] = undefined;
colorPropertyStringValues: any[] = undefined;
- //availableProperties: EventPropertyUnion[] = [];
- //availableNoneNumericColumns: EventPropertyUnion[] = [];
- //selectedLineChartProperties: EventPropertyUnion[] = [];
- //selectedBackgroundColorProperty: EventPropertyUnion = undefined;
- //dimensionProperties: EventPropertyUnion[] = [];
-
- //yKeys: string[] = [];
- //xKey: string;
private backgroundColorPropertyKey: string = undefined;
advancedSettingsActive = false;
- showBackgroundColorProperty = true;
+ showBackgroundColorProperty = true;
selectedStartX = undefined;
selectedEndX = undefined;
@@ -57,11 +49,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
selectedLabel;
- //aggregationValue = 1;
- //aggregationTimeUnit = 's';
- //groupValue = 'None';
- //showCountValue = false;
-
// this can be set to scale the line chart according to the layout
offsetRightLineChart = 10;
@@ -70,51 +57,23 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
public colorService: ColorService,
public renderer: Renderer2,
protected dataLakeRestService: DatalakeRestService,
- private resizeService: ResizeService,
public labelService: LabelService,
- widgetConfigurationService: WidgetConfigurationService) {
- super(dataLakeRestService, dialog, widgetConfigurationService);
+ widgetConfigurationService: WidgetConfigurationService,
+ resizeService: ResizeService) {
+ super(dataLakeRestService, dialog, widgetConfigurationService, resizeService);
}
// indicator variable if labeling mode is activated
//labelingModeOn = false;
- updatemenus = [
- {
- buttons: [
- {
- args: ['mode', 'lines'],
- label: 'Line',
- method: 'restyle'
- },
- {
- args: ['mode', 'markers'],
- label: 'Dots',
- method: 'restyle'
- },
-
- {
- args: ['mode', 'lines+markers'],
- label: 'Dots + Lines',
- method: 'restyle'
- }
- ],
- direction: 'left',
- pad: {'r': 10, 't': 10},
- showactive: true,
- type: 'buttons',
- x: 0.0,
- xanchor: 'left',
- y: 1.3,
- yanchor: 'top',
- font: {color: '#000'},
- bgcolor: '#fafafa',
- bordercolor: '#000'
- }
- ];
+ updatemenus = [];
graph = {
+
layout: {
+ font: {
+ color: '#FFF'
+ },
autosize: true,
plot_bgcolor: '#fff',
paper_bgcolor: '#fff',
@@ -144,6 +103,40 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
ngOnInit(): void {
+ this.updatemenus = [{
+ buttons: [
+ {
+ args: ['mode', 'lines'],
+ label: 'Line',
+ method: 'restyle'
+ },
+ {
+ args: ['mode', 'markers'],
+ label: 'Dots',
+ method: 'restyle'
+ },
+
+ {
+ args: ['mode', 'lines+markers'],
+ label: 'Dots + Lines',
+ method: 'restyle'
+ }
+ ],
+ direction: 'left',
+ pad: {'r': 10, 't': 10},
+ showactive: true,
+ type: 'buttons',
+ x: 0.0,
+ xanchor: 'left',
+ y: 1.3,
+ yanchor: 'top',
+ font: {color: this.dataExplorerWidget.baseAppearanceConfig.textColor},
+ bgcolor: this.dataExplorerWidget.baseAppearanceConfig.backgroundColor,
+ bordercolor: '#000'
+ }];
+
+ this.updateAppearance();
+
super.ngOnInit();
this.updateData();
this.resizeService.resizeSubject.subscribe(info => {
@@ -157,7 +150,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
});
}
- private processNoneGroupedData(res: DataResult) {
+ private processNonGroupedData(res: DataResult) {
if (res.total === 0) {
this.setShownComponents(true, false, false);
} else {
@@ -184,7 +177,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
this.data = this.displayGroupedData(tmp);
if (this.data !== undefined &&
- this.data['colorPropertyStringValues'] !== undefined && this.data['colorPropertyStringValues'].length > 0) {
+ this.data['colorPropertyStringValues'] !== undefined && this.data['colorPropertyStringValues'].length > 0) {
this.addInitialColouredShapesToGraph(this.colorPropertyStringValues, this.colorService.getColor);
}
@@ -262,8 +255,8 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
colorFunction = this.colorService.getColor;
}
- // Add labes and colors for each series of the line chart
- data.forEach(serie => {
+ // Add labes and colors for each series of the line chart
+ data.forEach(serie => {
// add custom data property in order to store colorPropertyStringValues in graph
if (newColorPropertyStringValues !== undefined && newColorPropertyStringValues.length !== 0) {
serie['customdata'] = newColorPropertyStringValues;
@@ -337,13 +330,20 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
columnsContainingNumbers.forEach(key => {
const headerName = data.headers[key];
tmpLineChartTraces[key] = {
- type: 'scatter', mode: 'lines', name: headerName, connectgaps: false, x: [], y: []};
+ type: 'scatter',
+ mode: this.dataExplorerWidget.dataConfig.chartMode,
+ name: headerName,
+ connectgaps: false,
+ x: [],
+ y: []
+ };
});
columnsContainingStrings.forEach(key => {
const headerName = data.headers[key];
tmpLineChartTraces[key] = {
- name: headerName, x: [], y: []};
+ name: headerName, x: [], y: []
+ };
});
// fill line chart traces with data
@@ -373,7 +373,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
}
-
changeLabelOfArea($event) {
const selected = $event.points[0];
const allData = selected.fullData;
@@ -471,7 +470,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
// fetching path of labeling button icon
const path = modeBarButtons[i].getElementsByClassName('icon').item(0)
- .getElementsByTagName('path').item(0);
+ .getElementsByTagName('path').item(0);
// adding 'clicked' to class list
modeBarButtons[i].classList.add('clicked');
@@ -496,7 +495,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
// fetching path of labeling button icon
const path = modeBarButtons[i].getElementsByClassName('icon').item(0)
- .getElementsByTagName('path').item(0);
+ .getElementsByTagName('path').item(0);
// removing 'clicked' from class list
modeBarButtons[i].classList.remove('clicked');
@@ -516,11 +515,18 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
const startdate = new Date(start_X).getTime() - 1;
const enddate = new Date(end_X).getTime() + 1;
- this.dataLakeRestService.saveLabelsInDatabase(this.data['measureName'], 'sp_internal_label', startdate, enddate, label, this.dataExplorerWidget.dataConfig.xKey).subscribe(
- res => {
- // TODO add pop up similar to images
- // console.log('Successfully wrote label ' + currentLabel + ' into database.');
- }
+ this.dataLakeRestService.saveLabelsInDatabase(
+ this.data['measureName'],
+ 'sp_internal_label',
+ startdate,
+ enddate,
+ label,
+ this.dataExplorerWidget.dataConfig.xKey
+ ).subscribe(
+ res => {
+ // TODO add pop up similar to images
+ // console.log('Successfully wrote label ' + currentLabel + ' into database.');
+ }
);
}
@@ -548,7 +554,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
}
}
- private addShapeToGraph(start, end, color, initial= false) {
+ private addShapeToGraph(start, end, color, initial = false) {
start = new Date(start).getTime();
end = new Date(end).getTime();
@@ -638,7 +644,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
this.dataLakeRestService.getDataAutoAggregation(
this.dataLakeMeasure.measureName, this.timeSettings.startTime, this.timeSettings.endTime)
.subscribe((res: DataResult) => {
- this.processNoneGroupedData(res);
+ this.processNonGroupedData(res);
});
} else {
if (this.dataExplorerWidget.dataConfig.groupValue === 'None') {
@@ -647,7 +653,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
this.dataLakeMeasure.measureName, this.timeSettings.startTime, this.timeSettings.endTime,
this.dataExplorerWidget.dataConfig.aggregationTimeUnit, this.dataExplorerWidget.dataConfig.aggregationValue)
.subscribe((res: DataResult) => {
- this.processNoneGroupedData(res);
+ this.processNonGroupedData(res);
});
} else {
// this.dataLakeRestService.getGroupedData(
@@ -660,7 +666,20 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
}
}
+ updateAppearance() {
+ this.graph.layout.paper_bgcolor = this.dataExplorerWidget.baseAppearanceConfig.backgroundColor;
+ this.graph.layout.plot_bgcolor = this.dataExplorerWidget.baseAppearanceConfig.backgroundColor;
+ this.graph.layout.font.color = this.dataExplorerWidget.baseAppearanceConfig.textColor;
+ if (this.data) {
+ this.data.forEach(d => d.mode = this.dataExplorerWidget.dataConfig.chartMode);
+ }
+ }
+
refreshView() {
+ this.updateAppearance();
+ if (this.data && !this.showNoDataInDateRange && !this.showIsLoadingData) {
+ window.Plotly.restyle(this.dataExplorerWidget._id, this.graph, 0);
+ }
//this.toggleLabelingMode();
}
}
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts b/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts
index 93bb6fc..6c01c28 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts
@@ -37,6 +37,7 @@ export interface LineChartDataConfig {
xKey: string;
backgroundColorPropertyKey: string;
labelingModeOn: boolean;
+ chartMode: string;
}
export interface LineChartWidgetModel extends DataExplorerWidgetModel {
diff --git a/ui/src/app/data-explorer/components/widgets/table/config/table-widget-config.component.ts b/ui/src/app/data-explorer/components/widgets/table/config/table-widget-config.component.ts
index c76c3b2..11c6366 100644
--- a/ui/src/app/data-explorer/components/widgets/table/config/table-widget-config.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/table/config/table-widget-config.component.ts
@@ -37,7 +37,6 @@ export class TableWidgetConfigComponent extends BaseWidgetConfig<TableWidgetMode
}
ngOnInit(): void {
- console.log(this.currentlyConfiguredWidget);
if (!this.currentlyConfiguredWidget.dataConfig.availableColumns) {
this.currentlyConfiguredWidget.dataConfig.availableColumns = [this.getTimestampProperty(this.dataLakeMeasure.eventSchema)];
this.currentlyConfiguredWidget.dataConfig.availableColumns = this.currentlyConfiguredWidget.dataConfig.availableColumns.concat(this.getValuePropertyKeys(this.dataLakeMeasure.eventSchema));
diff --git a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
index 77cb5d9..8a76f61 100644
--- a/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/table/table-widget.component.ts
@@ -25,6 +25,7 @@ import {DatalakeRestService} from '../../../../core-services/datalake/datalake-r
import {BaseDataExplorerWidget} from '../base/base-data-explorer-widget';
import {WidgetConfigurationService} from "../../../services/widget-configuration.service";
import {TableWidgetModel} from "./model/table-widget.model";
+import { ResizeService } from '../../../services/resize.service';
@Component({
selector: 'sp-data-explorer-table-widget',
@@ -35,16 +36,13 @@ export class TableWidgetComponent extends BaseDataExplorerWidget<TableWidgetMode
@ViewChild(MatSort, {static: true}) sort: MatSort;
- //availableColumns: EventPropertyUnion[];
- //selectedColumns: EventPropertyUnion[];
- //columnNames: string[];
-
dataSource = new MatTableDataSource();
constructor(protected dataLakeRestService: DatalakeRestService,
protected dialog: MatDialog,
- widgetConfigurationService: WidgetConfigurationService) {
- super(dataLakeRestService, dialog, widgetConfigurationService);
+ widgetConfigurationService: WidgetConfigurationService,
+ resizeService: ResizeService) {
+ super(dataLakeRestService, dialog, widgetConfigurationService, resizeService);
}
ngOnInit(): void {
diff --git a/ui/src/app/data-explorer/services/refresh-dashboard.service.ts b/ui/src/app/data-explorer/services/refresh-dashboard.service.ts
index 26b7f3a..cfe8129 100644
--- a/ui/src/app/data-explorer/services/refresh-dashboard.service.ts
+++ b/ui/src/app/data-explorer/services/refresh-dashboard.service.ts
@@ -16,13 +16,13 @@
*
*/
-import {Injectable} from '@angular/core';
-import {ReplaySubject} from 'rxjs';
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
@Injectable()
export class RefreshDashboardService {
- public refreshSubject: ReplaySubject<string> = new ReplaySubject<string>();
+ public refreshSubject: Subject<string> = new Subject<string>();
public notify(currentDashboard: string): void {
this.refreshSubject.next(currentDashboard);
diff --git a/ui/src/app/data-explorer/services/resize.service.ts b/ui/src/app/data-explorer/services/resize.service.ts
index 21b5c0b..cbda3d9 100644
--- a/ui/src/app/data-explorer/services/resize.service.ts
+++ b/ui/src/app/data-explorer/services/resize.service.ts
@@ -17,13 +17,13 @@
*/
import {Injectable} from '@angular/core';
-import {ReplaySubject} from 'rxjs';
+import { ReplaySubject, Subject } from 'rxjs';
import {GridsterInfo} from '../../dashboard/models/gridster-info.model';
@Injectable()
export class ResizeService {
- public resizeSubject: ReplaySubject<GridsterInfo> = new ReplaySubject<GridsterInfo>();
+ public resizeSubject: Subject<GridsterInfo> = new Subject<GridsterInfo>();
public notify(info: GridsterInfo): void {
this.resizeSubject.next(info);