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 <[email protected]> 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 = [];
