You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2021/10/30 06:52:24 UTC
[incubator-streampipes] branch dev updated: [STREAMPIPES-452]
Refactor line charts into time series charts for data-explorer
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 3c685c2 [STREAMPIPES-452] Refactor line charts into time series charts for data-explorer
new c382b00 Merge pull request #56 from patrickraoulphilipp/dev
3c685c2 is described below
commit 3c685c279b87ba7ca9c8d04e35047ab877e74806
Author: Patrick Philipp <ph...@fzi.de>
AuthorDate: Fri Oct 29 18:42:10 2021 +0200
[STREAMPIPES-452] Refactor line charts into time series charts for data-explorer
---
...-explorer-visualisation-settings.component.html | 6 +-
...time-series-chart-widget-config.component.html} | 9 --
...time-series-chart-widget-config.component.scss} | 0
.../time-series-chart-widget-config.component.ts} | 34 ++---
.../model/time-series-chart-widget.model.ts} | 9 +-
.../services/color.service.ts | 0
.../time-series-chart-widget.component.css} | 0
.../time-series-chart-widget.component.html} | 0
.../time-series-chart-widget.component.ts} | 138 ++++++---------------
.../select-color-properties.component.html | 11 +-
.../select-color-properties.component.ts | 13 +-
ui/src/app/data-explorer/data-explorer.module.ts | 10 +-
.../registry/data-explorer-widgets.ts | 8 +-
13 files changed, 91 insertions(+), 147 deletions(-)
diff --git a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html b/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html
index dc59ce4..5a80302 100644
--- a/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html
+++ b/ui/src/app/data-explorer/components/designer-panel/visualisation-settings/data-explorer-visualisation-settings.component.html
@@ -48,10 +48,10 @@
[currentlyConfiguredWidget]="currentlyConfiguredWidget">
</sp-data-explorer-heatmap-widget-config>
</div>
- <div *ngIf="currentlyConfiguredWidget.widgetType === 'line-chart'" class="h-100 p-0">
- <sp-data-explorer-line-chart-widget-config
+ <div *ngIf="currentlyConfiguredWidget.widgetType === 'time-series-chart'" class="h-100 p-0">
+ <sp-data-explorer-time-series-chart-widget-config
[currentlyConfiguredWidget]="currentlyConfiguredWidget">
- </sp-data-explorer-line-chart-widget-config>
+ </sp-data-explorer-time-series-chart-widget-config>
</div>
<div *ngIf="currentlyConfiguredWidget.widgetType === 'histogram-chart'" class="h-100 p-0">
<sp-data-explorer-histogram-chart-widget-config
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/time-series-chart/config/time-series-chart-widget-config.component.html
similarity index 74%
rename from ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.html
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/config/time-series-chart-widget-config.component.html
index 38eeb5e..66a8dc5 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/time-series-chart/config/time-series-chart-widget-config.component.html
@@ -18,15 +18,6 @@
<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.visualizationConfig.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-color-properties
label="Select Properties"
multiple=true
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.scss b/ui/src/app/data-explorer/components/widgets/time-series-chart/config/time-series-chart-widget-config.component.scss
similarity index 100%
rename from ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.scss
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/config/time-series-chart-widget-config.component.scss
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/time-series-chart/config/time-series-chart-widget-config.component.ts
similarity index 80%
rename from ui/src/app/data-explorer/components/widgets/line-chart/config/line-chart-widget-config.component.ts
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/config/time-series-chart-widget-config.component.ts
index af654a3..b4f7c01 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/time-series-chart/config/time-series-chart-widget-config.component.ts
@@ -18,7 +18,7 @@
import { Component, OnInit } from '@angular/core';
import { BaseWidgetConfig } from '../../base/base-widget-config';
-import { LineCartVisConfig, LineChartWidgetModel } from '../model/line-chart-widget.model';
+import { TimeSeriesChartVisConfig, TimeSeriesChartWidgetModel } from '../model/time-series-chart-widget.model';
import { WidgetConfigurationService } from '../../../../services/widget-configuration.service';
import { EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model';
import { DataExplorerFieldProviderService } from '../../../../services/data-explorer-field-provider-service';
@@ -26,11 +26,11 @@ import { DataExplorerField } from '../../../../models/dataview-dashboard.model';
import { WidgetType } from '../../../../registry/data-explorer-widgets';
@Component({
- selector: 'sp-data-explorer-line-chart-widget-config',
- templateUrl: './line-chart-widget-config.component.html',
- styleUrls: ['./line-chart-widget-config.component.scss']
+ selector: 'sp-data-explorer-time-series-chart-widget-config',
+ templateUrl: './time-series-chart-widget-config.component.html',
+ styleUrls: ['./time-series-chart-widget-config.component.scss']
})
-export class LineChartWidgetConfigComponent extends BaseWidgetConfig<LineChartWidgetModel, LineCartVisConfig> implements OnInit {
+export class TimeSeriesChartWidgetConfigComponent extends BaseWidgetConfig<TimeSeriesChartWidgetModel, TimeSeriesChartVisConfig> implements OnInit {
constructor(widgetConfigurationService: WidgetConfigurationService,
fieldService: DataExplorerFieldProviderService) {
@@ -61,12 +61,6 @@ export class LineChartWidgetConfigComponent extends BaseWidgetConfig<LineChartWi
this.triggerDataRefresh();
}
- // handlingAdvancedToggleChange() {
- // this.currentlyConfiguredWidget.dataConfig.showBackgroundColorProperty =
- // !this.currentlyConfiguredWidget.dataConfig.showBackgroundColorProperty;
- // this.triggerDataRefresh();
- // }
-
toggleLabelingMode() {
// this.triggerViewRefresh();
}
@@ -75,20 +69,30 @@ export class LineChartWidgetConfigComponent extends BaseWidgetConfig<LineChartWi
return WidgetType.LineChart;
}
- protected initWidgetConfig(): LineCartVisConfig {
+ protected initWidgetConfig(): TimeSeriesChartVisConfig {
+ const numericPlusBooleanFields = this.fieldProvider.numericFields.concat(this.fieldProvider.booleanFields);
+
const colors = {};
- this.fieldProvider.numericFields.map((field, index) => {
+ const names = {};
+ const dTypes = {};
+
+ numericPlusBooleanFields.map((field, index) => {
colors[field.runtimeName + field.sourceIndex] = this.presetColors[index];
+ names[field.runtimeName + field.sourceIndex] = field.fullDbName;
+ dTypes[field.runtimeName + field.sourceIndex] = 'lines';
});
- const numericPlusBooleanFields = this.fieldProvider.numericFields.concat(this.fieldProvider.booleanFields);
+
+
+
return {
forType: this.getWidgetType(),
yKeys: [],
- chartMode: 'lines',
selectedLineChartProperties: numericPlusBooleanFields.length > 6 ?
numericPlusBooleanFields.slice(0, 5) :
numericPlusBooleanFields,
chosenColor: colors,
+ displayName: names,
+ displayType: dTypes,
};
}
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/time-series-chart/model/time-series-chart-widget.model.ts
similarity index 83%
rename from ui/src/app/data-explorer/components/widgets/line-chart/model/line-chart-widget.model.ts
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/model/time-series-chart-widget.model.ts
index cbadffb..d98a940 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/time-series-chart/model/time-series-chart-widget.model.ts
@@ -19,7 +19,7 @@
import { DataExplorerWidgetModel, EventPropertyUnion } from '../../../../../core-model/gen/streampipes-model';
import { DataExplorerDataConfig, DataExplorerField, DataExplorerVisConfig } from '../../../../models/dataview-dashboard.model';
-export interface LineCartVisConfig extends DataExplorerVisConfig {
+export interface TimeSeriesChartVisConfig extends DataExplorerVisConfig {
selectedLineChartProperties: DataExplorerField[];
selectedBackgroundColorProperty?: EventPropertyUnion;
groupValue?: string;
@@ -29,11 +29,12 @@ export interface LineCartVisConfig extends DataExplorerVisConfig {
xKey?: DataExplorerField;
backgroundColorPropertyKey?: string;
labelingModeOn?: boolean;
- chartMode: string;
chosenColor: { [id: string]: string; };
+ displayName: { [id: string]: string; };
+ displayType: { [id: string]: string; };
}
-export interface LineChartWidgetModel extends DataExplorerWidgetModel {
+export interface TimeSeriesChartWidgetModel extends DataExplorerWidgetModel {
dataConfig: DataExplorerDataConfig;
- visualizationConfig: LineCartVisConfig;
+ visualizationConfig: TimeSeriesChartVisConfig;
}
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/services/color.service.ts b/ui/src/app/data-explorer/components/widgets/time-series-chart/services/color.service.ts
similarity index 100%
rename from ui/src/app/data-explorer/components/widgets/line-chart/services/color.service.ts
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/services/color.service.ts
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/time-series-chart/time-series-chart-widget.component.css
similarity index 100%
rename from ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.css
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.css
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/time-series-chart/time-series-chart-widget.component.html
similarity index 100%
rename from ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.html
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/time-series-chart/time-series-chart-widget.component.ts
similarity index 64%
rename from ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
rename to ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
index 520f3b9..d83236b 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/time-series-chart/time-series-chart-widget.component.ts
@@ -18,18 +18,16 @@
import { Component, OnInit } from '@angular/core';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
-import { LineChartWidgetModel } from './model/line-chart-widget.model';
+import { TimeSeriesChartWidgetModel } from './model/time-series-chart-widget.model';
import { DataExplorerField } from '../../../models/dataview-dashboard.model';
import { SpQueryResult } from '../../../../core-model/gen/streampipes-model';
-import { strictEqual } from 'assert';
-import { V } from '@angular/cdk/keycodes';
@Component({
- selector: 'sp-data-explorer-line-chart-widget',
- templateUrl: './line-chart-widget.component.html',
- styleUrls: ['./line-chart-widget.component.css']
+ selector: 'sp-data-explorer-time-series-chart-widget',
+ templateUrl: './time-series-chart-widget.component.html',
+ styleUrls: ['./time-series-chart-widget.component.css']
})
-export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWidgetModel> implements OnInit {
+export class TimeSeriesChartWidgetComponent extends BaseDataExplorerWidget<TimeSeriesChartWidgetModel> implements OnInit {
presetColors: string[] = ['#39B54A', '#1B1464', '#f44336', '#4CAF50', '#FFEB3B', '#FFFFFF', '#000000'];
@@ -63,14 +61,9 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
},
updatemenus: this.updatemenus,
- // setting hovermode to 'closest'
hovermode: 'closest',
- // adding shapes for displaying labeled time intervals
shapes: [],
- // box selection with fixed height
selectdirection: 'h',
-
- // default dragmode is zoom
dragmode: 'zoom'
},
config: {
@@ -79,7 +72,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
}
};
-
ngOnInit(): void {
this.updatemenus = [{
buttons: [
@@ -125,56 +117,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
});
}
- // private processNonGroupedData(spQueryResult: SpQueryResult
- // ) {
- // if (spQueryResult.total === 0) {
- // this.setShownComponents(true, false, false);
- // } else {
- // this.data = this.transformData(spQueryResult, spQueryResult.sourceIndex);
- // this.setShownComponents(false, true, false);
- // }
- // }
-
- // private processGroupedData(res: GroupedDataResult) {
- // if (res.total === 0) {
- // this.setShownComponents(true, false, false);
- // } else {
- // const tmp = this.transformGroupedData(res, this.fieldProvider.primaryTimestampField.runtimeName);
- // this.data = this.displayGroupedData(tmp);
- //
- // this.setShownComponents(false, true, false);
- // }
- // }
-
- // displayGroupedData(transformedData: GroupedDataResult) {
- // const tmp = [];
- //
- // const groupNames = Object.keys(transformedData.dataResults);
- // for (const groupName of groupNames) {
- // const value = transformedData.dataResults[groupName];
- // this.dataExplorerWidget.visualizationConfig.yKeys.forEach(key => {
- // value.rows.forEach(serie => {
- // if (serie.name === key) {
- // serie.name = groupName + ' ' + serie.name;
- // tmp.push(serie);
- // }
- // });
- // });
- //
- // if (this.dataExplorerWidget.visualizationConfig.showCountValue) {
- // let containsCount = false;
- // value.rows.forEach(serie => {
- // if (serie.name.startsWith('count') && !containsCount) {
- // serie.name = groupName + ' count';
- // tmp.push(serie);
- // containsCount = true;
- // }
- // });
- // }
- // }
- // return tmp;
- // }
-
transformData(data: SpQueryResult,
sourceIndex: number): any[] {
@@ -183,20 +125,14 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
const columnsContainingNumbersPlusBooleans = this.dataExplorerWidget.visualizationConfig.selectedLineChartProperties
.filter(f => numericPlusBooleanFields.find(field => field.fullDbName === f.fullDbName && f.sourceIndex === data.sourceIndex));
-
-
- // const columnsContainingStrings = this.dataExplorerWidget.visualizationConfig.selectedLineChartProperties
- // .filter(f => this.fieldProvider.nonNumericFields.find(field => field.fullDbName === f.fullDbName && f.sourceIndex === data.sourceIndex));
-
const indexXkey = 0;
const tmpLineChartTraces: any[] = [];
- // create line chart traces according to column type
- columnsContainingNumbersPlusBooleans.forEach(key => {
- const headerName = data.headers[this.getColumnIndex(key, data)];
- tmpLineChartTraces[key.fullDbName + sourceIndex.toString()] = {
+ columnsContainingNumbersPlusBooleans.forEach(field => {
+ const headerName = data.headers[this.getColumnIndex(field, data)];
+ tmpLineChartTraces[field.fullDbName + sourceIndex.toString()] = {
type: 'scatter',
- mode: this.dataExplorerWidget.visualizationConfig.chartMode,
+ mode: 'Line',
name: headerName,
connectgaps: false,
x: [],
@@ -204,15 +140,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
};
});
- // columnsContainingStrings.forEach(key => {
- // const headerName = data.headers[key.fullDbName];
- // tmpLineChartTraces[key.fullDbName + sourceIndex.toString()] = {
- // name: headerName, x: [], y: []
- // };
- // });
-
- // fill line chart traces with data
-
data.allDataSeries[0].rows.forEach(row => {
this.dataExplorerWidget.visualizationConfig.selectedLineChartProperties.forEach(field => {
if (field.sourceIndex === data.sourceIndex) {
@@ -237,16 +164,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
return Object.values(tmpLineChartTraces);
}
- // transformGroupedData(data: GroupedDataResult, xKey: string): GroupedDataResult {
- // // TODO not yet supported after refactoring
- // for (const key in data.dataResults) {
- // const dataResult = data.dataResults[key];
- // this.data = this.transformData(dataResult, 0);
- // }
- //
- // return data;
- // }
-
setStartX(startX: string) {
this.selectedStartX = startX;
}
@@ -260,9 +177,8 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
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.visualizationConfig.chartMode);
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();
@@ -271,11 +187,35 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
this.dataExplorerWidget.visualizationConfig.chosenColor[name] = this.presetColors[index];
}
+ if (!(name in this.dataExplorerWidget.visualizationConfig.displayName)) {
+ this.dataExplorerWidget.visualizationConfig.displayName[name] = field.fullDbName;
+ }
+
+ if (!(name in this.dataExplorerWidget.visualizationConfig.displayType)) {
+ this.dataExplorerWidget.visualizationConfig.displayType[name] = 'lines';
+ }
+
this.data[index].marker.color = this.dataExplorerWidget.visualizationConfig.chosenColor[name];
+ this.data[index].name = this.dataExplorerWidget.visualizationConfig.displayName[name];
+
+ let displayType = 'scatter';
+ let displayMode = 'lines';
+
+ const setType = this.dataExplorerWidget.visualizationConfig.displayType[name];
+
+ if (setType !== 'bar') {
+ displayMode = setType;
+ } else {
+ displayType = 'bar';
+ }
+
+ this.data[index].type = displayType;
+ this.data[index].mode = displayMode;
}
});
}
+
}
refreshView() {
@@ -296,19 +236,11 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
onDataReceived(spQueryResults: SpQueryResult[]) {
this.data = [];
- // if (spQueryResult.total === 0) {
this.setShownComponents(true, false, false);
- // } else {
spQueryResults.map((spQueryResult, index) => {
this.data = this.data.concat(this.transformData(spQueryResult, spQueryResult.sourceIndex));
});
this.setShownComponents(false, true, false);
- // }
-
- // this.processNonGroupedData(spQueryResult);
- // spQueryResult.allDataSeries.forEach((result, index) => {
- // this.processNonGroupedData(result, index);
- // });
}
handleUpdatedFields(addedFields: DataExplorerField[],
@@ -321,4 +253,4 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget<LineChartWi
(field) => field.fieldCharacteristics.numeric
);
}
-}
\ No newline at end of file
+}
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 112b05f..65f0db8 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
@@ -45,7 +45,16 @@
[cpPresetColors]="presetColors"
(colorPickerSelect)="triggerDataRefresh()"
autocomplete="off"/>
- </mat-form-field> -->
+ <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>
+ </mat-form-field>
</div>
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 92d7a7d..085c9c3 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
@@ -19,7 +19,7 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { WidgetConfigurationService } from '../../../../services/widget-configuration.service';
import { DataExplorerField } from '../../../../models/dataview-dashboard.model';
-import { LineChartWidgetModel } from '../../line-chart/model/line-chart-widget.model';
+import { TimeSeriesChartWidgetModel } from '../../time-series-chart/model/time-series-chart-widget.model';
@Component({
@@ -35,7 +35,7 @@ export class SelectColorPropertiesComponent implements OnInit {
@Input() selectedProperties: DataExplorerField[];
@Input() label: string;
@Input() multiple: boolean;
- @Input() currentlyConfiguredWidget: LineChartWidgetModel;
+ @Input() currentlyConfiguredWidget: TimeSeriesChartWidgetModel;
constructor(protected widgetConfigurationService: WidgetConfigurationService) { }
@@ -70,7 +70,9 @@ 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));
+ this.selectedProperties = this.selectedProperties.filter(
+ sp => !(sp.fullDbName === field.fullDbName && sp.sourceIndex === field.sourceIndex)
+ );
} else {
this.selectedProperties.push(field);
}
@@ -88,4 +90,9 @@ export class SelectColorPropertiesComponent implements OnInit {
return '#000000';
}
+ onFilterChange(searchValue: string, field: DataExplorerField): void {
+ this.currentlyConfiguredWidget.visualizationConfig.displayName[field.runtimeName + field.sourceIndex.toString()] = searchValue;
+ this.triggerDataRefresh();
+ }
+
}
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index cbc2b62..8885a56 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -51,7 +51,7 @@ import { DataExplorerDashboardPanelComponent } from './components/panel/data-exp
import { TimeRangeSelectorComponent } from './components/time-selector/timeRangeSelector.component';
import { DataExplorerDashboardWidgetComponent } from './components/widget/data-explorer-dashboard-widget.component';
import { ImageWidgetComponent } from './components/widgets/image/image-widget.component';
-import { LineChartWidgetComponent } from './components/widgets/line-chart/line-chart-widget.component';
+import { TimeSeriesChartWidgetComponent } from './components/widgets/time-series-chart/time-series-chart-widget.component';
import { TableWidgetComponent } from './components/widgets/table/table-widget.component';
import { AggregateConfigurationComponent } from './components/widgets/utils/aggregate-configuration/aggregate-configuration.component';
import { LoadDataSpinnerComponent } from './components/widgets/utils/load-data-spinner/load-data-spinner.component';
@@ -65,7 +65,7 @@ import { RefreshDashboardService } from './services/refresh-dashboard.service';
import { ResizeService } from './services/resize.service';
import { GroupConfigurationComponent } from './components/widgets/utils/group-configuration/group-configuration.component';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { ColorService } from './components/widgets/line-chart/services/color.service';
+import { ColorService } from './components/widgets/time-series-chart/services/color.service';
import { DataExplorerDesignerPanelComponent } from './components/designer-panel/data-explorer-designer-panel.component';
import { TableWidgetConfigComponent } from './components/widgets/table/config/table-widget-config.component';
import { MapWidgetComponent } from './components/widgets/map/map-widget.component';
@@ -75,7 +75,7 @@ import { HeatmapWidgetConfigComponent } from './components/widgets/heatmap/confi
import { DataExplorerWidgetAppearanceSettingsComponent } from './components/designer-panel/appearance-settings/data-explorer-widget-appearance-settings.component';
import { DataExplorerWidgetDataSettingsComponent } from './components/designer-panel/data-settings/data-explorer-widget-data-settings.component';
import { WidgetConfigurationService } from './services/widget-configuration.service';
-import { LineChartWidgetConfigComponent } from './components/widgets/line-chart/config/line-chart-widget-config.component';
+import { TimeSeriesChartWidgetConfigComponent } from './components/widgets/time-series-chart/config/time-series-chart-widget-config.component';
import { ImageWidgetConfigComponent } from './components/widgets/image/config/image-widget-config.component';
import { DatalakeRestService } from '../platform-services/apis/datalake-rest.service';
import { IndicatorChartWidgetComponent } from './components/widgets/indicator/indicator-chart-widget.component';
@@ -175,8 +175,8 @@ export const MY_NATIVE_FORMATS = {
ImageWidgetConfigComponent,
IndicatorChartWidgetComponent,
IndicatorWidgetConfigComponent,
- LineChartWidgetComponent,
- LineChartWidgetConfigComponent,
+ TimeSeriesChartWidgetComponent,
+ TimeSeriesChartWidgetConfigComponent,
LoadDataSpinnerComponent,
NoDataInDateRangeComponent,
PieChartWidgetComponent,
diff --git a/ui/src/app/data-explorer/registry/data-explorer-widgets.ts b/ui/src/app/data-explorer/registry/data-explorer-widgets.ts
index 6493a23..5c5578d 100644
--- a/ui/src/app/data-explorer/registry/data-explorer-widgets.ts
+++ b/ui/src/app/data-explorer/registry/data-explorer-widgets.ts
@@ -20,7 +20,7 @@ import { IWidget } from '../models/dataview-dashboard.model';
import { TableWidgetComponent } from '../components/widgets/table/table-widget.component';
import { MapWidgetComponent } from '../components/widgets/map/map-widget.component';
import { HeatmapWidgetComponent } from '../components/widgets/heatmap/heatmap-widget.component';
-import { LineChartWidgetComponent } from '../components/widgets/line-chart/line-chart-widget.component';
+import { TimeSeriesChartWidgetComponent } from '../components/widgets/time-series-chart/time-series-chart-widget.component';
import { ImageWidgetComponent } from '../components/widgets/image/image-widget.component';
import { IndicatorChartWidgetComponent } from '../components/widgets/indicator/indicator-chart-widget.component';
import { HistogramChartWidgetComponent } from '../components/widgets/histogram/histogram-chart-widget.component';
@@ -56,9 +56,9 @@ export const WidgetTypeMap = new Map<number, IWidget>([
componentClass: HeatmapWidgetComponent
}],
[WidgetType.LineChart, {
- id: 'line-chart',
- label: 'Line',
- componentClass: LineChartWidgetComponent
+ id: 'time-series-chart',
+ label: 'Time Series',
+ componentClass: TimeSeriesChartWidgetComponent
}],
[WidgetType.Image, {id: 'image', label: 'Image', componentClass: ImageWidgetComponent}],
[WidgetType.IndicatorChart, {