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 2020/10/27 10:20:58 UTC
[incubator-streampipes] 01/02: Refactor line chart
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-234
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit c7fff83ecbc54744abb9a78d532d8af22817341a
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Mon Oct 26 17:58:42 2020 +0100
Refactor line chart
---
ui/src/app/core-ui/core-ui.module.ts | 5 +-
.../image-categorize.component.html | 1 -
.../image-labeling/image-labeling.component.html | 1 -
.../configure-labels.component.html | 2 +-
.../configure-labels/configure-labels.component.ts | 2 +-
.../labels/components/labels/labels.component.css | 0
.../labels/components/labels/labels.component.html | 9 +
.../labels/components/labels/labels.component.ts | 17 ++
.../select-label/select-label.component.html | 15 +-
.../select-label/select-label.component.ts | 44 ++--
.../app/core-ui/labels/services/label.service.ts | 46 ----
.../line-chart/line-chart-widget.component.html | 6 +-
.../line-chart/line-chart-widget.component.ts | 263 ++++++---------------
13 files changed, 133 insertions(+), 278 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 1ffc90b..29dbce2 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -75,6 +75,7 @@ import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { ConfigureLabelsComponent } from './labels/components/configure-labels/configure-labels.component';
import { LabelListItemComponent } from './labels/components/label-list-item/label-list-item.component';
+import { LabelsComponent } from './labels/components/labels/labels.component';
@NgModule({
imports: [
@@ -128,6 +129,7 @@ import { LabelListItemComponent } from './labels/components/label-list-item/labe
StaticRuntimeResolvableAnyInputComponent,
StaticRuntimeResolvableOneOfInputComponent,
LabelListItemComponent,
+ LabelsComponent,
],
providers: [
MatDatepickerModule,
@@ -167,7 +169,8 @@ import { LabelListItemComponent } from './labels/components/label-list-item/labe
StaticOneOfInputComponent,
StaticRuntimeResolvableAnyInputComponent,
StaticRuntimeResolvableOneOfInputComponent,
- ImageViewerComponent
+ ImageViewerComponent,
+ LabelsComponent
]
})
export class CoreUiModule {
diff --git a/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html b/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html
index 6f50352..d7be940 100644
--- a/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html
+++ b/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html
@@ -21,7 +21,6 @@
<div fxLayout="row" fxLayoutAlign="space-around start">
<sp-select-label
- [labels]="labels"
[enableShortCuts]="true"
(labelChange)="handleLabelChange($event)">
</sp-select-label>
diff --git a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
index 8940538..0078120 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
@@ -22,7 +22,6 @@
<div fxLayout="row" fxLayoutAlign="space-around start">
<sp-select-label style="width: 270px"
- [labels]="labels"
[enableShortCuts]="isHoverComponent"
(labelChange)="handleLabelChange($event)">
</sp-select-label>
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
index 0088ffb..1e85365 100644
--- a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
@@ -40,7 +40,7 @@
<mat-icon class="icon">add</mat-icon><span>Add new Label</span>
</button>
<button mat-button mat-raised-button color="primary" (click)="endEditCategory()">
- <span>Back</span>
+ <span>Done</span>
</button>
</div>
</div>
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
index 7029a27..c0d9f65 100644
--- a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
@@ -14,7 +14,7 @@ import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
})
export class ConfigureLabelsComponent implements OnInit {
- constructor(private formBuilder: FormBuilder, public colorService: ColorService, public labelService: LabelService) { }
+ constructor(public colorService: ColorService, public labelService: LabelService) { }
public categories: Category[];
public selectedCategory: Category;
diff --git a/ui/src/app/core-ui/labels/components/labels/labels.component.css b/ui/src/app/core-ui/labels/components/labels/labels.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/core-ui/labels/components/labels/labels.component.html b/ui/src/app/core-ui/labels/components/labels/labels.component.html
new file mode 100644
index 0000000..25b0c6d
--- /dev/null
+++ b/ui/src/app/core-ui/labels/components/labels/labels.component.html
@@ -0,0 +1,9 @@
+<sp-configure-labels *ngIf="editLabels"></sp-configure-labels>
+
+<sp-select-label
+ *ngIf="!editLabels"
+ [labels]="possibleLabels"
+ [enableShortCuts]="true"
+ (labelChange)="handleLabelChange($event)">
+</sp-select-label>
+
diff --git a/ui/src/app/core-ui/labels/components/labels/labels.component.ts b/ui/src/app/core-ui/labels/components/labels/labels.component.ts
new file mode 100644
index 0000000..8287ede
--- /dev/null
+++ b/ui/src/app/core-ui/labels/components/labels/labels.component.ts
@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'sp-labels',
+ templateUrl: './labels.component.html',
+ styleUrls: ['./labels.component.css']
+})
+export class LabelsComponent implements OnInit {
+
+ public editLabels = false;
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/ui/src/app/core-ui/labels/components/select-label/select-label.component.html b/ui/src/app/core-ui/labels/components/select-label/select-label.component.html
index a041e44..48fa1a4 100644
--- a/ui/src/app/core-ui/labels/components/select-label/select-label.component.html
+++ b/ui/src/app/core-ui/labels/components/select-label/select-label.component.html
@@ -20,20 +20,21 @@
<h2>Labels</h2>
<div style="padding-left: 5px; padding-right: 5px; border-radius: 50px; font-size: 20px;">
<mat-form-field style="margin-top: -15px; margin-bottom: -10px">
- <mat-select [(value)]="selectedCategory">
+ <mat-select (selectionChange)="changeCategory($event)" [(value)]="selectedCategory">
<mat-option *ngFor="let category of categories" [value]="category">
- {{category}}
+ {{category.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-list>
- <mat-list-item *ngFor="let label of _labels[selectedCategory]; index as i"
- [style.background-color]="_selectedLabel.label == label ? 'lightgrey' : 'white'"
+ <mat-list-item *ngFor="let label of labels; index as i"
+ [style.background-color]="selectedLabel.name == label.name ? 'lightgrey' : 'white'"
style="height: 30px; padding-top: 5px; padding-buttom: 5px; border-radius: 50px; margin-bottom: 5px"
- (click)="selectLabel({category: labelCategory, label: label})">
- <mat-icon matListIcon [style.color]="colorService.getColor(label)" style="margin-top: -8px;">color_lens</mat-icon>
- <h4 style="margin-top: -3px;"> {{label}} <label *ngIf="i < 10"> #{{i+1}}</label> </h4>
+ (click)="selectLabel(label)">
+
+ <mat-icon matListIcon [style.color]="label.color" style="margin-top: -8px;">color_lens</mat-icon>
+ <h4 style="margin-top: -3px;"> {{label.name}} <label *ngIf="i < 10"> #{{i+1}}</label> </h4>
</mat-list-item>
</mat-list>
</div>
\ No newline at end of file
diff --git a/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts b/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
index 43b3144..c673856 100644
--- a/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
+++ b/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
@@ -18,6 +18,8 @@
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import { ColorService } from '../../../image/services/color.service';
+import { Category, Label } from '../../../../core-model/gen/streampipes-model';
+import { LabelService } from '../../services/label.service';
@Component({
selector: 'sp-select-label',
@@ -26,35 +28,33 @@ import { ColorService } from '../../../image/services/color.service';
})
export class SelectLabelComponent implements OnInit {
- @Input()
- set labels(labels) {
- this._labels = labels;
- this.update();
- }
+ public categories: Category[];
+ public selectedCategory: Category;
+
@Input() enableShortCuts: boolean;
- @Output() labelChange: EventEmitter<{category, label}> = new EventEmitter<{category, label}>();
+ @Output() labelChange: EventEmitter<Label> = new EventEmitter<Label>();
- public _labels;
- public _selectedLabel: {category, label};
- public categories;
- public selectedCategory;
+ public labels: Label[];
+ public selectedLabel: Label;
- constructor(public colorService: ColorService) { }
+ constructor(public labelService: LabelService, public colorService: ColorService) { }
ngOnInit(): void {
-
+ this.labelService.getCategories().subscribe(res => {
+ this.categories = res;
+ });
}
- update() {
- this.categories = Object.keys(this._labels);
- this.selectedCategory = this.categories[0];
- this._selectedLabel = {category: this.selectedCategory, label: this._labels[this.selectedCategory][0]};
- this.labelChange.emit(this._selectedLabel);
+ changeCategory(c) {
+ this.labelService.getLabelsOfCategory(c.value).subscribe(res => {
+ this.labels = res;
+ this.selectedLabel = this.labels[0];
+ });
}
- selectLabel(e: {category, label}) {
- this._selectedLabel = e;
- this.labelChange.emit(this._selectedLabel);
+ selectLabel(e: Label) {
+ this.selectedLabel = e;
+ this.labelChange.emit(this.selectedLabel);
}
@HostListener('document:keydown', ['$event'])
@@ -63,8 +63,8 @@ export class SelectLabelComponent implements OnInit {
if (event.code.toLowerCase().includes('digit')) {
// Number
const value = Number(event.key);
- if (value !== 0 && value <= this._labels[this.selectedCategory].length) {
- this.selectLabel({category: this.selectedCategory, label: this._labels[this.selectedCategory][value - 1]});
+ if (value !== 0 && value <= this.labels.length) {
+ this.selectLabel(this.labels[value - 1]);
}
}
}
diff --git a/ui/src/app/core-ui/labels/services/label.service.ts b/ui/src/app/core-ui/labels/services/label.service.ts
index a7588cb..df60325 100644
--- a/ui/src/app/core-ui/labels/services/label.service.ts
+++ b/ui/src/app/core-ui/labels/services/label.service.ts
@@ -18,58 +18,20 @@ export class LabelService {
private platformServicesCommons: PlatformServicesCommons,
private $http: HttpClient) { }
- // getLabels() {
- // return {
- // 'boxes': ['blue', 'red'],
- // 'sign': ['trafficsign'],
- // 'person': ['person', 'Child'],
- // 'vehicle': ['bicycle', 'car', 'motorcycle', 'airplane', 'bus', 'train', 'truck', 'boat'],
- // 'outdoor': ['traffic light', 'fire hydrant', 'stop sign', 'parking meter', 'bench'],
- // 'animal': ['bird', 'cat', 'dog'],
- // 'accessory': ['backpack', 'umbrella', 'handbag', 'suitcase'],
- // 'sports': ['frisbee', 'sports ball', 'skis', 'frisbee', 'baseball bat'],
- // 'kitchen': ['bottle', 'cup', 'fork', 'knife', 'spoon'],
- // 'furniture': ['chair', 'couch', 'bed', 'table'],
- // 'electronic': ['tv', 'laptop', 'mouse', 'keyboard']
- // };
- // }
-
getCategories(): Observable<any> {
return this.$http.get(this.urlBase() + '/labeling/category');
- //
- // const c1 = new Category();
- // c1.name = 'Straßenschild';
- //
- // c1.labels = [];
- // c1.labels.push(this.getLabel('Stop', '#0000ff'));
- // c1.labels.push(this.getLabel('50', '#ff0000'));
- //
- // const c2 = new Category();
- // c2.name = 'furniture';
- //
- // c2.labels = [];
- // c2.labels.push(this.getLabel('chair', '#7dff24'));
- // c2.labels.push(this.getLabel('couch', '#ff6ef7'));
- //
- // this.categories.push(c1);
- // this.categories.push(c2);
- //
- // return this.categories;
}
getLabelsOfCategory(category: Category): Observable<any> {
return this.$http.get(this.urlBase() + '/labeling/label/category/' + category._id);
}
-
addCategory(c: Category) {
return this.$http.post(this.urlBase() + '/labeling/category', c);
- // this.categories.push(c);
}
updateCategory(c: Category) {
return this.$http.put(this.urlBase() + '/labeling/category/' + c._id, c);
- // this.categories.push(c);
}
deleteCategory(c: Category) {
@@ -87,12 +49,4 @@ export class LabelService {
deleteLabel(l: Label) {
return this.$http.delete(this.urlBase() + '/labeling/label/' + l._id);
}
-
-
- private getLabel(name, color): Label {
- const label1 = new Label();
- label1.name = name;
- label1.color = color;
- return label1;
- }
}
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 5decf46..3a5e3b0 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
@@ -30,12 +30,12 @@
</sp-select-properties>
<sp-select-properties
- label="Select Label Column"
+ label="Select String Property"
multiple = false
style="margin-right: 10px;"
*ngIf="showLabelColumnSelection"
(changeSelectedProperties)="setSelectedLabelColumn($event)"
- [availableProperties]="availableNonNumericColumns"
+ [availableProperties]="availableNoneNumericColumns"
[selectedProperties]="selectedNonNumericColumn">
</sp-select-properties>
<sp-aggregate-configuration
@@ -69,9 +69,7 @@
<sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner>
<sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
-
<sp-select-label *ngIf="labelingModeOn"
- [labels]="possibleLabels"
[enableShortCuts]="true"
(labelChange)="handleLabelChange($event)">
</sp-select-label>
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 b4c07b3..61fc733 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
@@ -18,7 +18,6 @@
import { Component, OnInit, Renderer2 } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
-import { PlotlyService } from 'angular-plotly.js';
import { DataResult } from '../../../../core-model/datalake/DataResult';
import { GroupedDataResult } from '../../../../core-model/datalake/GroupedDataResult';
import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
@@ -37,7 +36,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
data: any[] = undefined;
labels: any[] = undefined;
availableColumns: EventPropertyUnion[] = [];
- availableNonNumericColumns: EventPropertyUnion[] = [];
+ availableNoneNumericColumns: EventPropertyUnion[] = [];
selectedColumns: EventPropertyUnion[] = [];
selectedNonNumericColumn: EventPropertyUnion = undefined;
dimensionProperties: EventPropertyUnion[] = [];
@@ -53,7 +52,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
selectedEndX = undefined;
n_selected_points = undefined;
- possibleLabels;
selectedLabel;
aggregationValue = 1;
@@ -66,7 +64,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
constructor(public dialog: MatDialog,
- public plotlyService: PlotlyService,
public colorService: ColorService,
public renderer: Renderer2,
protected dataLakeRestService: DatalakeRestService,
@@ -77,8 +74,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
// indicator variable if labeling mode is activated
labelingModeOn = false;
- private dialogReference = undefined;
-
updatemenus = [
{
buttons: [
@@ -137,11 +132,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
dragmode: 'zoom'
},
config: {
- // removing lasso-selection, box-selecting, toggling-spikelines and exporting-to-image buttons
modeBarButtonsToRemove: ['lasso2d', 'select2d', 'toggleSpikelines', 'toImage'],
- // adding custom button: labeling
- // modeBarButtonsToAdd: [this.createLabelingModeBarButton()],
- // removing plotly-icon from graph
displaylogo: false
}
};
@@ -150,16 +141,12 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
ngOnInit(): void {
this.availableColumns = this.getNumericProperty(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
this.dimensionProperties = this.getDimensionProperties(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
- this.availableNonNumericColumns = this.getNonNumericProperties(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
+ this.availableNoneNumericColumns = this.getNonNumericProperties(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
// Reduce selected columns when more then 6
this.selectedColumns = this.availableColumns.length > 6 ? this.availableColumns.slice(0, 5) : this.availableColumns;
- if (this.availableNonNumericColumns.length > 0) {
- // this.selectedNonNumericColumn = this.availableNonNumericColumns[0];
- }
this.xKey = this.getTimestampProperty(this.dataExplorerWidget.dataLakeMeasure.eventSchema).runtimeName;
this.yKeys = this.getRuntimeNames(this.selectedColumns);
- // this.nonNumericKey = this.selectedNonNumericColumn.runtimeName;
this.updateData();
this.resizeService.resizeSubject.subscribe(info => {
if (info.gridsterItem.id === this.gridsterItem.id) {
@@ -170,9 +157,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}, 100);
}
});
-
-
- this.possibleLabels = this.dataLakeRestService.getLabels();
}
updateData() {
@@ -182,20 +166,8 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.dataLakeRestService.getDataAutoAggregation(
this.dataExplorerWidget.dataLakeMeasure.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime())
.subscribe((res: DataResult) => {
- if (res.total === 0) {
- this.setShownComponents(true, false, false);
- } else {
- res.measureName = this.dataExplorerWidget.dataLakeMeasure.measureName;
- const tmp = this.transformData(res, this.xKey);
- this.data = this.displayData(tmp, this.yKeys);
- this.labels = this.loadLabels(tmp, this.nonNumericKey);
- this.addLabelsToGraph(this.data, this.labels);
- this.data['measureName'] = tmp.measureName;
-
- this.setShownComponents(false, true, false);
- }
- }
- );
+ this.processNoneGroupedData(res);
+ });
} else {
if (this.groupValue === 'None') {
this.setShownComponents(false, false, true);
@@ -203,47 +175,49 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.dataExplorerWidget.dataLakeMeasure.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime()
, this.aggregationTimeUnit, this.aggregationValue)
.subscribe((res: DataResult) => {
- if (res.total === 0) {
- this.setShownComponents(true, false, false);
- } else {
- res.measureName = this.dataExplorerWidget.dataLakeMeasure.measureName;
- const tmp = this.transformData(res, this.xKey);
- this.data = this.displayData(tmp, this.yKeys);
- this.labels = this.loadLabels(tmp, this.nonNumericKey);
- this.addLabelsToGraph(this.data, this.labels);
- this.data['measureName'] = tmp.measureName;
-
- this.setShownComponents(false, true, false);
- }
- }
- );
+ this.processNoneGroupedData(res);
+ });
} else {
this.dataLakeRestService.getGroupedData(
this.dataExplorerWidget.dataLakeMeasure.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime(),
this.aggregationTimeUnit, this.aggregationValue, this.groupValue)
.subscribe((res: GroupedDataResult) => {
- if (res.total === 0) {
- this.setShownComponents(true, false, false);
- } else {
- // res.measureName = this.dataExplorerWidget.dataLakeMeasure.measureName;
- const tmp = this.transformGroupedData(res, this.xKey);
- this.data = this.displayGroupedData(tmp, this.yKeys);
- // this.data['measureName'] = tmp.measureName;
- // this.data['labels'] = tmp.labels;
-
- if (this.data !== undefined && this.data['labels'] !== undefined && this.data['labels'].length > 0) {
- this.addInitialColouredShapesToGraph();
- }
-
- this.setShownComponents(false, true, false);
- }
-
- }
- );
+ this.processGroupedData(res);
+ });
}
}
}
+ private processNoneGroupedData(res: DataResult) {
+ if (res.total === 0) {
+ this.setShownComponents(true, false, false);
+ } else {
+ res.measureName = this.dataExplorerWidget.dataLakeMeasure.measureName;
+ const tmp = this.transformData(res, this.xKey);
+ this.data = this.displayData(tmp, this.yKeys);
+ this.labels = this.loadLabels(tmp, this.nonNumericKey);
+ this.addLabelsToGraph(this.data, this.labels);
+ this.data['measureName'] = tmp.measureName;
+
+ 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.xKey);
+ this.data = this.displayGroupedData(tmp);
+
+ if (this.data !== undefined && this.data['labels'] !== undefined && this.data['labels'].length > 0) {
+ this.addInitialColouredShapesToGraph();
+ }
+
+ this.setShownComponents(false, true, false);
+ }
+ }
+
displayData(transformedData: DataResult, yKeys: string[]) {
if (this.yKeys.length > 0) {
const tmp = [];
@@ -289,9 +263,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.data = data;
}
- displayGroupedData(transformedData: GroupedDataResult, yKeys: string[]) {
- // if (this.yKeys.length > 0) {
-
+ displayGroupedData(transformedData: GroupedDataResult) {
const tmp = [];
const groupNames = Object.keys(transformedData.dataResults);
@@ -321,48 +293,54 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
transformData(data: DataResult, xKey: string): DataResult {
- const tmp: any[] = [];
- const dataKeys = [];
- const label_columns = [];
+ const columnsContainingNumbers = [];
+ const columnsContainingStrings = [];
+ // Check column type
data.rows.forEach(row => {
data.headers.forEach((headerName, index) => {
- if (!dataKeys.includes(index) && typeof row[index] === 'number') {
- dataKeys.push(index);
- } else if (!label_columns.includes(index) && typeof row[index] === 'string') {
- label_columns.push(index);
+ if (!columnsContainingNumbers.includes(index) && typeof row[index] === 'number') {
+ columnsContainingNumbers.push(index);
+ } else if (!columnsContainingStrings.includes(index) && typeof row[index] === 'string') {
+ columnsContainingStrings.push(index);
}
});
});
+ // Get key of timestamp column for x axis
const indexXkey = data.headers.findIndex(headerName => headerName === this.xKey);
- dataKeys.forEach(key => {
+
+ const tmpLineChartTraces: any[] = [];
+
+ // create line chart traces according to column type
+ columnsContainingNumbers.forEach(key => {
const headerName = data.headers[key];
- tmp[key] = {
+ tmpLineChartTraces[key] = {
type: 'scatter', mode: 'lines', name: headerName, connectgaps: false, x: [], y: []};
});
- label_columns.forEach(key => {
+ columnsContainingStrings.forEach(key => {
const headerName = data.headers[key];
- tmp[key] = {
+ tmpLineChartTraces[key] = {
name: headerName, x: [], y: []};
});
+ // fill line chart traces with data
data.rows.forEach(row => {
data.headers.forEach((headerName, index) => {
- if (dataKeys.includes(index) || label_columns.includes(index)) {
- tmp[index].x.push(new Date(row[indexXkey]));
+ if (columnsContainingNumbers.includes(index) || columnsContainingStrings.includes(index)) {
+ tmpLineChartTraces[index].x.push(new Date(row[indexXkey]));
if ((row[index]) !== undefined) {
- tmp[index].y.push(row[index]);
+ tmpLineChartTraces[index].y.push(row[index]);
} else {
- tmp[index].y.push(null);
+ tmpLineChartTraces[index].y.push(null);
}
}
});
});
- data.rows = tmp;
+ data.rows = tmpLineChartTraces;
return data;
}
@@ -387,20 +365,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.updateData();
}
- // handleDefaultModeBarButtonClicks($event) {
- // if (!('xaxis.autorange' in $event) && !('hovermode' in $event)) {
- // if ($event.dragmode !== 'select') {
- // this.deactivateLabelingMode();
- // this.labelingModeOn = false;
- // }
- // } else if (($event['xaxis.autorange'] === true || $event['hovermode'] === true) && this.labelingModeOn) {
- // this.activateLabelingMode();
- // }
- // }
-
changeLabelOfArea($event) {
- console.log($event.points[0].customdata);
- console.log($event.points[0].x);
const selected = $event.points[0];
const allData = selected.fullData;
@@ -425,13 +390,10 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.selectedEndX = allData.x[searchIndex - 1];
- console.log($event.points[0].fullData.x[indexOfSelected]);
- console.log($event.points[0].fullData.customdata[indexOfSelected]);
-
- this.saveLabelsInDatabase(this.selectedLabel.label, this.selectedStartX, this.selectedEndX);
+ this.saveLabelsInDatabase(this.selectedLabel.name, this.selectedStartX, this.selectedEndX);
// adding coloured shape (based on selected label) to graph (equals selected time interval)
- this.addShapeToGraph(this.selectedStartX, this.selectedEndX, this.colorService.getColor(this.selectedLabel.label));
+ this.addShapeToGraph(this.selectedStartX, this.selectedEndX, this.selectedLabel.color);
}
@@ -462,91 +424,16 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
for (const series of this.data) {
for (const point of series['selectedpoints']) {
- series['customdata'][point] = this.selectedLabel.label;
+ series['customdata'][point] = this.selectedLabel.name;
}
}
this.labels = this.data[0]['customdata'];
// saving labels persistently
- this.saveLabelsInDatabase(this.selectedLabel.label, this.selectedStartX, this.selectedEndX);
+ this.saveLabelsInDatabase(this.selectedLabel.name, this.selectedStartX, this.selectedEndX);
// adding coloured shape (based on selected label) to graph (equals selected time interval)
- this.addShapeToGraph(this.selectedStartX, this.selectedEndX, this.colorService.getColor(this.selectedLabel.label));
+ this.addShapeToGraph(this.selectedStartX, this.selectedEndX, this.selectedLabel.color);
- // this.openLabelingDialog();
- // this.dialogReference.componentInstance.data = {labels: this.dataLakeRestService.get_timeseries_labels(), selected_label: '',
- // startX: this.selectedStartX, endX: this.selectedEndX, n_selected_points: this.n_selected_points};
- }
- }
-
- private openLabelingDialog() {
- if (this.dialog.openDialogs.length === 0) {
-
- // displaying Info-Dialog 'Change Chart-Mode' if current graph mode is 'lines'
- if (this.data[0]['mode'] === 'lines') {
-
- // deactivating labeling mode
- this.labelingModeOn = false;
- this.deactivateLabelingMode();
-
- // const dialogRef = this.dialog.open(ChangeChartmodeDialog,
- // {
- // width: '400px',
- // position: {top: '150px'}
- // });
- //
- // this.dialogReference = dialogRef;
-
- // displaying Labeling-Dialog, obtaining selected label and drawing coloured shape
- } else {
- // const dialogRef = this.dialog.open(LabelingDialog,
- // {
- // width: '400px',
- // height: 'auto',
- // position: {top: '75px'},
- // data: {labels: this.dataLakeRestService.get_timeseries_labels(), selected_label: '', startX: this.selectedStartX, endX:
- // this.selectedEndX, n_selected_points: this.n_selected_points}
- // });
- //
- // this.dialogReference = dialogRef;
-
- for (const series of this.data) {
- for (const point of series['selectedpoints']) {
- series['customdata'][point] = this.selectedLabel.label;
- }
- }
- this.labels = this.data[0]['customdata'];
- // saving labels persistently
- this.saveLabelsInDatabase(this.selectedLabel.label, this.selectedStartX, this.selectedEndX);
-
- // adding coloured shape (based on selected label) to graph (equals selected time interval)
- this.addShapeToGraph(this.selectedStartX, this.selectedEndX, this.colorService.getColor(this.selectedLabel.label));
-
- // after closing Labeling-Dialog
- // dialogRef.afterClosed().subscribe(result => {
- //
- // // adding selected label to displayed data points
- // if (result !== undefined) {
- // for (const series of this.data) {
- // for (const point of series['selectedpoints']) {
- // series['customdata'][point] = result;
- // }
- // }
- // this.labels = this.data[0]['customdata'];
- // // saving labels persistently
- // this.saveLabelsInDatabase(result, this.selectedStartX, this.selectedEndX);
- //
- // // adding coloured shape (based on selected label) to graph (equals selected time interval)
- // this.addShapeToGraph(this.selectedStartX, this.selectedEndX, this.colorService.getColor(result));
- //
- // // remain in selection dragmode if labeling mode is still activated
- // // if (this.labelingModeOn) {
- // // this.graph.layout.dragmode = 'select';
- // // } else {
- // // this.graph.layout.dragmode = 'zoom';
- // // }
- // }
- // });
- }
}
}
@@ -569,18 +456,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
}
- // private createLabelingModeBarButton() {
- // const labelingModeBarButton = {
- // name: 'Labeling',
- // icon: this.plotlyService.getPlotly().Icons.pencil,
- // direction: 'up',
- // click: (gd) => {
- // this.toggleLabelingMode();
- // }
- // };
- // return labelingModeBarButton;
- // }
-
private activateLabelingMode() {
const modeBarButtons = document.getElementsByClassName('modebar-btn');
@@ -641,16 +516,16 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
);
}
+ // TODO change here to change shape color
private addInitialColouredShapesToGraph() {
let selectedLabel = '';
let indices = [];
- for (let label = 0; label <= this.labels.length; label++) {
+ for (let label = 0; label < this.labels.length; label++) {
if (selectedLabel !== this.labels[label] && indices.length > 0) {
const startdate = new Date(this.data[0]['x'][indices[0]]).getTime();
const enddate = new Date(this.data[0]['x'][indices[indices.length - 1]]).getTime();
- const color = this.colorService.getColor(selectedLabel);
- this.addShapeToGraph(startdate, enddate, color, true);
+ this.addShapeToGraph(startdate, enddate, this.colorService.getColor(this.labels[label]), true);
selectedLabel = undefined;
indices = [];