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/09/11 07:16:43 UTC
[incubator-streampipes] branch STREAMPIPES-234 created (now a66efe6)
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a change to branch STREAMPIPES-234
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
at a66efe6 [STREAMPIPES-234] Integrated label component of image labeling
This branch includes the following new commits:
new a9fe97a Move line chart labeling to data explorer module
new a66efe6 [STREAMPIPES-234] Integrated label component of image labeling
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-streampipes] 02/02: [STREAMPIPES-234] Integrated label
component of image labeling
Posted by ze...@apache.org.
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 a66efe6cfc3302ee4131fd88392c0464e7c07d80
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Fri Sep 11 09:09:30 2020 +0200
[STREAMPIPES-234] Integrated label component of image labeling
---
ui/src/app/core-ui/core-ui.module.ts | 1 +
.../change-chartmode/change-chartmode.dialog.css | 29 ---
.../change-chartmode/change-chartmode.dialog.html | 26 ---
.../change-chartmode/change-chartmode.dialog.ts | 35 ---
.../line-chart/line-chart-widget.component.css | 5 +-
.../line-chart/line-chart-widget.component.html | 17 +-
.../line-chart/line-chart-widget.component.ts | 242 +++++++++++----------
ui/src/app/data-explorer/data-explorer.module.ts | 4 +-
8 files changed, 143 insertions(+), 216 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 8d16215..abc30b3 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -141,6 +141,7 @@ import {CodemirrorModule} from "@ctrl/ngx-codemirror";
exports: [
ImageComponent,
ImageLabelingComponent,
+ ImageLabelsComponent,
StandardDialogComponent,
PanelDialogComponent,
ConfirmDialogComponent,
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.css b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.css
deleted file mode 100644
index 254f0ee..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.css
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.mat-dialog-title {
- margin: -24px -24px 0px -24px !important;
- padding: 10px 24px;
- background: #39B54A;
- color: #fff;
- cursor: move;
-}
-
-.mat-dialog-container {
- padding-top: 0px;
- margin-top: 0px;
-}
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.html b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.html
deleted file mode 100644
index 21d20d5..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.html
+++ /dev/null
@@ -1,26 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-<h1 mat-dialog-title>Info</h1>
-<div mat-dialog-content>
- <p></p>
- <p><b>Labeling</b> is not available in 'line'-mode.</p>
- Please switch to 'dots'-mode or 'dots + lines'-mode.
-</div>
-<div mat-dialog-actions style="float: right">
- <button mat-button (click)="onOKClick()" cdkFocusInitial>OK</button>
-</div>
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.ts b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.ts
deleted file mode 100644
index fa794ea..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component } from '@angular/core';
-import { MatDialogRef } from '@angular/material/dialog';
-
-@Component({
- selector: 'sp-dialog-change-chartmode',
- templateUrl: './change-chartmode.dialog.html',
- styleUrls: ['./change-chartmode.dialog.css']
-})
-export class ChangeChartmodeDialog {
-
- constructor(
- public dialogRef: MatDialogRef<ChangeChartmodeDialog>) {
- }
-
- onOKClick(): void {
- this.dialogRef.close();
- }
-}
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 644d91a..7e46b8a 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
@@ -31,4 +31,7 @@
width: 100%;
align-self:start;
height: calc(100% - 40px);
-}
\ No newline at end of file
+}
+.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 11b1e06..38f85cb 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
@@ -55,23 +55,36 @@
(click)="updateData()" mat-button mat-icon-button color="primary">
<mat-icon>autorenew</mat-icon>
</button>
+ <div >
+ <mat-slide-toggle color="primary" [(ngModel)]="advancedSettingsActive" (change)="handlingAdvancedToggleChange()">Aggregate</mat-slide-toggle>
+ </div>
</div>
+
<div fxFlex fxLayoutAlign="end center">
- <mat-slide-toggle color="primary" [(ngModel)]="advancedSettingsActive" (change)="handlingAdvancedToggleChange()">Aggregate</mat-slide-toggle>
+ <mat-slide-toggle color="primary" [(ngModel)]="labelingModeOn" (change)="toggleLabelingMode()">Label</mat-slide-toggle>
</div>
</div>
</div>
<div class="widget-inner-content" style="height: 100%;overflow-y:hidden;">
<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-image-labels *ngIf="labelingModeOn"
+ [labels]="possibleLabels"
+ [enableShortCuts]="true"
+ (labelChange)="handleLabelChange($event)">
+ </sp-image-labels>
+
<plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData"
class="plotly-container"
+ [class.labeling-active]="labelingModeOn"
[data]="data"
[layout]="graph.layout"
[config]="graph.config"
- (relayout)="handleDefaultModeBarButtonClicks($event)"
(selecting)="selectDataPoints($event)"
(plotly_click)="test($event)">
+ <!-- (relayout)="handleDefaultModeBarButtonClicks($event)"-->
</plotly-plot>
</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 54c03f9..c5cb0c3 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
@@ -22,7 +22,6 @@ 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';
-import { ChangeChartmodeDialog } from './dialogs/change-chartmode/change-chartmode.dialog';
import { LabelingDialog } from './dialogs/labeling/labeling.dialog';
import { ColorService } from './services/color.service';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
@@ -55,13 +54,16 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
selectedEndX = undefined;
n_selected_points = undefined;
-
+ possibleLabels;
aggregationValue = 1;
aggregationTimeUnit = 's';
groupValue = 'None';
showCountValue = false;
+ // this can be set to scale the line chart according to the layout
+ offsetRightLineChart = 10;
+
constructor(public dialog: MatDialog,
public plotlyService: PlotlyService,
@@ -73,7 +75,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
// indicator variable if labeling mode is activated
- private labelingModeOn = false;
+ labelingModeOn = false;
private dialogReference = undefined;
@@ -138,7 +140,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
// removing lasso-selection, box-selecting, toggling-spikelines and exporting-to-image buttons
modeBarButtonsToRemove: ['lasso2d', 'select2d', 'toggleSpikelines', 'toImage'],
// adding custom button: labeling
- modeBarButtonsToAdd: [this.createLabelingModeBarButton()],
+ // modeBarButtonsToAdd: [this.createLabelingModeBarButton()],
// removing plotly-icon from graph
displaylogo: false
}
@@ -163,11 +165,14 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
if (info.gridsterItem.id === this.gridsterItem.id) {
setTimeout(() => {
this.graph.layout.autosize = false;
- (this.graph.layout as any).width = (info.gridsterItemComponent.width - 10);
+ (this.graph.layout as any).width = (info.gridsterItemComponent.width - this.offsetRightLineChart);
(this.graph.layout as any).height = (info.gridsterItemComponent.height - 80);
}, 100);
}
});
+
+
+ this.possibleLabels = this.dataLakeRestService.getLabels();
}
updateData() {
@@ -198,19 +203,19 @@ 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);
- }
+ 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);
}
+ }
);
} else {
this.dataLakeRestService.getGroupedData(
@@ -287,32 +292,32 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
displayGroupedData(transformedData: GroupedDataResult, yKeys: string[]) {
// if (this.yKeys.length > 0) {
- const tmp = [];
+ const tmp = [];
- const groupNames = Object.keys(transformedData.dataResults);
- for (const groupName of groupNames) {
- const value = transformedData.dataResults[groupName];
- this.yKeys.forEach(key => {
- value.rows.forEach(serie => {
- if (serie.name === key) {
- serie.name = groupName + ' ' + serie.name;
- tmp.push(serie);
- }
- });
+ const groupNames = Object.keys(transformedData.dataResults);
+ for (const groupName of groupNames) {
+ const value = transformedData.dataResults[groupName];
+ this.yKeys.forEach(key => {
+ value.rows.forEach(serie => {
+ if (serie.name === key) {
+ serie.name = groupName + ' ' + serie.name;
+ tmp.push(serie);
+ }
});
+ });
- if (this.showCountValue) {
- let containsCount = false;
- value.rows.forEach(serie => {
- if (serie.name.startsWith('count') && !containsCount) {
- serie.name = groupName + ' count';
- tmp.push(serie);
- containsCount = true;
- }
- });
- }
+ if (this.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;
+ }
+ return tmp;
}
transformData(data: DataResult, xKey: string): DataResult {
@@ -382,16 +387,16 @@ 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();
- }
- }
+ // 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();
+ // }
+ // }
test($event) {
console.log($event);
@@ -434,24 +439,24 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.labelingModeOn = false;
this.deactivateLabelingMode();
- const dialogRef = this.dialog.open(ChangeChartmodeDialog,
- {
- width: '400px',
- position: {top: '150px'}
- });
-
- this.dialogReference = dialogRef;
+ // 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}
- });
+ {
+ 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;
@@ -484,40 +489,37 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
}
- private createLabelingModeBarButton() {
- const labelingModeBarButton = {
- name: 'Labeling',
- icon: this.plotlyService.getPlotly().Icons.pencil,
- direction: 'up',
- click: (gd) => {
-
- // only allowing to activate labeling mode if current graph mode does not equal 'lines'
- if (this.data[0]['mode'] !== 'lines') {
- this.labelingModeOn = !this.labelingModeOn;
+ handleLabelChange(event) {
- // activating labeling mode
- if (this.labelingModeOn) {
- this.activateLabelingMode();
-
- // deactivating labeling mode
- } else {
- this.deactivateLabelingMode();
- }
+ }
- // otherwise displaying 'Change Chart Mode Dialog' or deactivating labeling mode
- } else {
- if (this.labelingModeOn) {
- this.labelingModeOn = !this.labelingModeOn;
- this.deactivateLabelingMode();
- } else {
- this.openLabelingDialog();
- }
- }
+ toggleLabelingMode() {
+ // only allowing to activate labeling mode if current graph mode does not equal 'lines'
+ if (this.labelingModeOn) {
+ for (let i = 0; i < this.data.length; i++) {
+ this.data[i]['mode'] = 'lines+markers';
}
- };
- return labelingModeBarButton;
+ this.activateLabelingMode();
+ this.offsetRightLineChart = 150;
+ } else {
+ this.labelingModeOn = false;
+ this.offsetRightLineChart = 10;
+ this.deactivateLabelingMode();
+ }
}
+ // 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');
@@ -526,7 +528,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
// 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');
@@ -548,7 +550,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
// 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');
@@ -571,11 +573,11 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
this.dataLakeRestService.saveLabelsInDatabase(this.data['measureName'], this.nonNumericKey, startdate, enddate, label, this.xKey).subscribe(
- res => {
- // TODO add pop up similar to images
- // console.log('Successfully wrote label ' + currentLabel + ' into database.');
- }
- );
+ res => {
+ // TODO add pop up similar to images
+ // console.log('Successfully wrote label ' + currentLabel + ' into database.');
+ }
+ );
}
private addInitialColouredShapesToGraph() {
@@ -641,33 +643,33 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
private createShape(start, end, color) {
const shape = {
- // shape: rectangle
- type: 'rect',
+ // shape: rectangle
+ type: 'rect',
- // x-reference is assigned to the x-values
- xref: 'x',
+ // x-reference is assigned to the x-values
+ xref: 'x',
- // y-reference is assigned to the plot paper [0,1]
- yref: 'paper',
- y0: 0,
- y1: 1,
+ // y-reference is assigned to the plot paper [0,1]
+ yref: 'paper',
+ y0: 0,
+ y1: 1,
- // start x: left side of selected time interval
- x0: start,
- // end x: right side of selected time interval
- x1: end,
+ // start x: left side of selected time interval
+ x0: start,
+ // end x: right side of selected time interval
+ x1: end,
- // adding color
- fillcolor: color,
+ // adding color
+ fillcolor: color,
- // opacity of 20%
- opacity: 0.2,
+ // opacity of 20%
+ opacity: 0.2,
- line: {
- width: 0
- }
- };
- return shape;
+ line: {
+ width: 0
+ }
+ };
+ return shape;
}
handlingAdvancedToggleChange() {
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index c81b67c..508383e 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -18,7 +18,7 @@
import { CdkTableModule } from '@angular/cdk/table';
import { CommonModule } from '@angular/common';
-import { AfterViewInit, NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatChipsModule } from '@angular/material/chips';
@@ -67,7 +67,6 @@ import { GroupConfigurationComponent } from './components/widgets/utils/group-co
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { PointSelectionInfoComponent } from './components/widgets/line-chart/components/point-selection-info/point-selection-info.component';
import { LabelSelectionComponent } from './components/widgets/line-chart/components/label-selection/label-selection.component';
-import { ChangeChartmodeDialog } from './components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog';
import { LabelingDialog } from './components/widgets/line-chart/dialogs/labeling/labeling.dialog';
import { ColorService } from './components/widgets/line-chart/services/color.service';
@@ -131,7 +130,6 @@ export const MY_NATIVE_FORMATS = {
NoDataInDateRangeComponent,
LoadDataSpinnerComponent,
DataDownloadDialog,
- ChangeChartmodeDialog,
LabelingDialog,
SelectPropertiesComponent,
LabelSelectionComponent ,
[incubator-streampipes] 01/02: Move line chart labeling to data
explorer module
Posted by ze...@apache.org.
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 a9fe97a69dfc34275e41195769ff92d60ef4e589
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Sep 9 18:54:22 2020 +0200
Move line chart labeling to data explorer module
---
.../rest/impl/datalake/DataLakeManagementV3.java | 4 +-
.../rest/impl/datalake/DataLakeResourceV3.java | 9 +-
.../datalake/datalake-rest.service.ts | 4 +-
.../labeling-tool/labeling-tool.module.ts | 90 ------------------
.../label-selection/label-selection.component.css | 0
.../label-selection/label-selection.component.html | 0
.../label-selection/label-selection.component.ts | 2 +-
.../point-selection-info.component.css | 0
.../point-selection-info.component.html | 0
.../point-selection-info.component.ts | 2 +-
.../change-chartmode/change-chartmode.dialog.css | 0
.../change-chartmode/change-chartmode.dialog.html | 0
.../change-chartmode/change-chartmode.dialog.ts | 2 +-
.../dialogs/labeling/labeling.dialog.css | 0
.../dialogs/labeling/labeling.dialog.html | 0
.../dialogs/labeling/labeling.dialog.ts | 0
.../line-chart/line-chart-widget.component.html | 4 +-
.../line-chart/line-chart-widget.component.ts | 31 ++++---
.../widgets/line-chart}/services/color.service.ts | 0
ui/src/app/data-explorer/data-explorer.module.ts | 103 +++++++++++----------
20 files changed, 87 insertions(+), 164 deletions(-)
diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeManagementV3.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeManagementV3.java
index 8d64aa9..d2cb97f 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeManagementV3.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeManagementV3.java
@@ -602,7 +602,7 @@ public class DataLakeManagementV3 {
return route;
}
- public void updateLabels(String index, String labelColumn, long startdate, long enddate, String label) {
+ public void updateLabels(String index, String labelColumn, long startdate, long enddate, String label, String timestampColumn) {
DataResult queryResult = getEvents(index, startdate, enddate);
Map<String, String> headerWithTypes = getHeadersWithTypes(index);
List<String> headers = queryResult.getHeaders();
@@ -611,7 +611,7 @@ public class DataLakeManagementV3 {
influxDB.setDatabase(BackendConfig.INSTANCE.getInfluxDatabaseName());
for (List<Object> row : queryResult.getRows()) {
- long timestampValue = Math.round((double) row.get(headers.indexOf("timestamp")));
+ long timestampValue = Math.round((double) row.get(headers.indexOf(timestampColumn)));
Point.Builder p = Point.measurement(index).time(timestampValue, TimeUnit.MILLISECONDS);
diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java
index 6afbe83..d94c2fe 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/datalake/DataLakeResourceV3.java
@@ -232,15 +232,16 @@ public class DataLakeResourceV3 extends AbstractRestInterface {
@POST
@Produces(MediaType.TEXT_PLAIN)
- @Path("/data/{index}/{startdate}/{enddate}/labeling/{column}")
+ @Path("/data/{index}/{startdate}/{enddate}/labeling/{column}/{timestampColumn}")
public Response labelData(@Context UriInfo info,
@PathParam("index") String index,
@PathParam("startdate") long startdate,
@PathParam("enddate") long enddate,
- @PathParam("column") String column) {
+ @PathParam("column") String column,
+ @PathParam("timestampColumn") String timestampColumn) {
- String label = info.getQueryParameters().getFirst("label");
- this.dataLakeManagement.updateLabels(index, column, startdate, enddate, label);
+ String label = info.getQueryParameters().getFirst("label");
+ this.dataLakeManagement.updateLabels(index, column, startdate, enddate, label, timestampColumn);
return Response.ok("Successfully updated database.", MediaType.TEXT_PLAIN).build();
}
diff --git a/ui/src/app/core-services/datalake/datalake-rest.service.ts b/ui/src/app/core-services/datalake/datalake-rest.service.ts
index 26be418..a78631a 100644
--- a/ui/src/app/core-services/datalake/datalake-rest.service.ts
+++ b/ui/src/app/core-services/datalake/datalake-rest.service.ts
@@ -130,9 +130,9 @@ export class DatalakeRestService {
return this.http.delete(this.dataLakeUrlV3 + '/data/delete/all');
}
- saveLabelsInDatabase(index, labelColumn, startDate, endDate, label) {
+ saveLabelsInDatabase(index, labelColumn, startDate, endDate, label, timestampColumn) {
const request = new HttpRequest('POST', this.dataLakeUrlV3 + '/data/' + index + '/' + startDate + '/' +
- endDate + '/labeling/' + labelColumn + '?label=' + label, {}, {
+ endDate + '/labeling/' + labelColumn + '/' + timestampColumn + '?label=' + label , {}, {
reportProgress: true,
responseType: 'text'
});
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/labeling-tool.module.ts b/ui/src/app/core-ui/linechart/labeling-tool/labeling-tool.module.ts
deleted file mode 100644
index f43bab9..0000000
--- a/ui/src/app/core-ui/linechart/labeling-tool/labeling-tool.module.ts
+++ /dev/null
@@ -1,90 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import { NgModule } from '@angular/core';
-
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { LabelSelectionComponent } from './components/label-selection/label-selection.component';
-import { PointSelectionInfoComponent } from './components/point-selection-info/point-selection-info.component';
-import { ChangeChartmodeDialog } from './dialogs/change-chartmode/change-chartmode.dialog';
-import { LabelingDialog } from './dialogs/labeling/labeling.dialog';
-import { ColorService } from './services/color.service';
-import {CommonModule} from "@angular/common";
-import {FlexLayoutModule} from "@angular/flex-layout";
-import {CustomMaterialModule} from "../../../CustomMaterial/custom-material.module";
-import {FormsModule, ReactiveFormsModule} from "@angular/forms";
-import {CdkTableModule} from "@angular/cdk/table";
-import {MatSnackBarModule} from "@angular/material/snack-bar";
-import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
-import {MatDatepickerModule} from "@angular/material/datepicker";
-import {MatNativeDateModule} from "@angular/material/core";
-import {PlotlyViaWindowModule} from "angular-plotly.js";
-
-
-export const MY_NATIVE_FORMATS = {
- fullPickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false},
- datePickerInput: {year: 'numeric', month: 'numeric', day: 'numeric', hour12: false},
- timePickerInput: {hour: 'numeric', minute: 'numeric', hour12: false},
- monthYearLabel: {year: 'numeric', month: 'short', hour12: false},
- dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric', hour12: false},
- monthYearA11yLabel: {year: 'numeric', month: 'long', hour12: false},
-};
-
-@NgModule({
- imports: [
- CommonModule,
- FlexLayoutModule,
- CustomMaterialModule,
- ReactiveFormsModule,
- FormsModule,
- CdkTableModule,
- MatSnackBarModule,
- MatProgressSpinnerModule,
- MatDatepickerModule,
- MatNativeDateModule,
- PlotlyViaWindowModule,
- MatDialogModule,
- MatInputModule,
- MatChipsModule,
- MatTooltipModule,
- DragDropModule,
- MatIconModule,
- ],
- declarations: [
- LabelSelectionComponent,
- PointSelectionInfoComponent,
- LabelingDialog,
- ChangeChartmodeDialog,
- ],
- providers: [
- ColorService,
- ],
- entryComponents: [
- ],
- exports: [
- LabelingDialog,
- ChangeChartmodeDialog,
- ]
-})
-export class LabelingToolModule {
-}
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/components/label-selection/label-selection.component.css b/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.css
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/components/label-selection/label-selection.component.css
rename to ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.css
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/components/label-selection/label-selection.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.html
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/components/label-selection/label-selection.component.html
rename to ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.html
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/components/label-selection/label-selection.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.ts
similarity index 97%
rename from ui/src/app/core-ui/linechart/labeling-tool/components/label-selection/label-selection.component.ts
rename to ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.ts
index 7898f98..fe3b7b4 100644
--- a/ui/src/app/core-ui/linechart/labeling-tool/components/label-selection/label-selection.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.ts
@@ -16,7 +16,7 @@
*/
import { Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import { ColorService} from '../../services/color.service';
+import { ColorService } from '../../services/color.service';
@Component({
selector: 'sp-label-selection',
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/components/point-selection-info/point-selection-info.component.css b/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.css
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/components/point-selection-info/point-selection-info.component.css
rename to ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.css
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/components/point-selection-info/point-selection-info.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.html
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/components/point-selection-info/point-selection-info.component.html
rename to ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.html
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/components/point-selection-info/point-selection-info.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.ts
similarity index 96%
rename from ui/src/app/core-ui/linechart/labeling-tool/components/point-selection-info/point-selection-info.component.ts
rename to ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.ts
index a3cedf4..7a2b5c8 100644
--- a/ui/src/app/core-ui/linechart/labeling-tool/components/point-selection-info/point-selection-info.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/components/point-selection-info/point-selection-info.component.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { Component, Input, OnInit} from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'sp-point-selection-info',
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog.css b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.css
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog.css
rename to ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.css
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog.html b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.html
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog.html
rename to ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.html
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog.ts b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.ts
similarity index 96%
rename from ui/src/app/core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog.ts
rename to ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.ts
index 0601e5b..fa794ea 100644
--- a/ui/src/app/core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog.ts
@@ -15,7 +15,7 @@
* limitations under the License.
*/
-import { Component} from '@angular/core';
+import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
@Component({
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog.css b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.css
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog.css
rename to ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.css
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog.html b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.html
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog.html
rename to ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.html
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog.ts b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.ts
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog.ts
rename to ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.ts
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 1e4690a..11b1e06 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
@@ -70,7 +70,9 @@
[layout]="graph.layout"
[config]="graph.config"
(relayout)="handleDefaultModeBarButtonClicks($event)"
- (selecting)="selectDataPoints($event)">
+ (selecting)="selectDataPoints($event)"
+ (plotly_click)="test($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 55dedda..54c03f9 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 {AfterViewInit, Component, OnInit, Renderer2} from '@angular/core';
+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';
-import { ChangeChartmodeDialog } from '../../../../core-ui/linechart/labeling-tool/dialogs/change-chartmode/change-chartmode.dialog';
-import { LabelingDialog } from '../../../../core-ui/linechart/labeling-tool/dialogs/labeling/labeling.dialog';
-import { ColorService } from '../../../../core-ui/linechart/labeling-tool/services/color.service';
+import { ChangeChartmodeDialog } from './dialogs/change-chartmode/change-chartmode.dialog';
+import { LabelingDialog } from './dialogs/labeling/labeling.dialog';
+import { ColorService } from './services/color.service';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
-import {EventPropertyUnion} from "../../../../core-model/gen/streampipes-model";
-import {ResizeService} from "../../../services/resize.service";
+import { EventPropertyUnion } from '../../../../core-model/gen/streampipes-model';
+import { ResizeService } from '../../../services/resize.service';
@Component({
selector: 'sp-data-explorer-line-chart-widget',
@@ -157,7 +157,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
this.xKey = this.getTimestampProperty(this.dataExplorerWidget.dataLakeMeasure.eventSchema).runtimeName;
this.yKeys = this.getRuntimeNames(this.selectedColumns);
- //this.nonNumericKey = this.selectedNonNumericColumn.runtimeName;
+ // this.nonNumericKey = this.selectedNonNumericColumn.runtimeName;
this.updateData();
this.resizeService.resizeSubject.subscribe(info => {
if (info.gridsterItem.id === this.gridsterItem.id) {
@@ -165,7 +165,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.graph.layout.autosize = false;
(this.graph.layout as any).width = (info.gridsterItemComponent.width - 10);
(this.graph.layout as any).height = (info.gridsterItemComponent.height - 80);
- }, 100)
+ }, 100);
}
});
}
@@ -258,7 +258,7 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
loadLabels(transformedData: DataResult, labelKey: string) {
- let labels = undefined;
+ let labels;
if (labelKey !== undefined) {
transformedData.rows.forEach(serie => {
if (serie.name === labelKey) {
@@ -287,7 +287,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
displayGroupedData(transformedData: GroupedDataResult, yKeys: string[]) {
// if (this.yKeys.length > 0) {
- console.log('count value ' + this.showCountValue);
const tmp = [];
const groupNames = Object.keys(transformedData.dataResults);
@@ -314,10 +313,6 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
}
return tmp;
-
- // } else {
- // return undefined;
- // }
}
transformData(data: DataResult, xKey: string): DataResult {
@@ -398,8 +393,13 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
}
}
+ test($event) {
+ console.log($event);
+ }
+
selectDataPoints($event) {
// getting selected time interval
+ console.log($event);
const xStart = $event['range']['x'][0];
const xEnd = $event['range']['x'][1];
@@ -570,8 +570,9 @@ export class LineChartWidgetComponent extends BaseDataExplorerWidget implements
this.nonNumericKey = 'sp_internal_label';
}
- this.dataLakeRestService.saveLabelsInDatabase(this.data['measureName'], this.nonNumericKey, startdate, enddate, label).subscribe(
+ this.dataLakeRestService.saveLabelsInDatabase(this.data['measureName'], this.nonNumericKey, startdate, enddate, label, this.xKey).subscribe(
res => {
+ // TODO add pop up similar to images
// console.log('Successfully wrote label ' + currentLabel + ' into database.');
}
);
diff --git a/ui/src/app/core-ui/linechart/labeling-tool/services/color.service.ts b/ui/src/app/data-explorer/components/widgets/line-chart/services/color.service.ts
similarity index 100%
rename from ui/src/app/core-ui/linechart/labeling-tool/services/color.service.ts
rename to ui/src/app/data-explorer/components/widgets/line-chart/services/color.service.ts
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 91b87f2..c81b67c 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -16,56 +16,60 @@
*
*/
-import {CdkTableModule} from '@angular/cdk/table';
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FlexLayoutModule} from '@angular/flex-layout';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatNativeDateModule} from '@angular/material/core';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatGridListModule} from '@angular/material/grid-list';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatSliderModule} from '@angular/material/slider';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {MatTabsModule} from '@angular/material/tabs';
+import { CdkTableModule } from '@angular/cdk/table';
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatGridListModule } from '@angular/material/grid-list';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSliderModule } from '@angular/material/slider';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTabsModule } from '@angular/material/tabs';
import {
OWL_DATE_TIME_FORMATS,
OwlDateTimeModule,
OwlNativeDateTimeModule
} from '@danielmoncada/angular-datetime-picker';
-import {NgxChartsModule} from '@swimlane/ngx-charts';
-import {GridsterModule} from 'angular-gridster2';
-import {PlotlyViaWindowModule} from 'angular-plotly.js';
-import {ColorPickerModule} from 'ngx-color-picker';
-import {DatalakeRestService} from '../core-services/datalake/datalake-rest.service';
-import {SemanticTypeUtilsService} from '../core-services/semantic-type/semantic-type-utils.service';
-import {SharedDatalakeRestService} from '../core-services/shared/shared-dashboard.service';
-import {CoreUiModule} from '../core-ui/core-ui.module';
-import {LabelingToolModule} from '../core-ui/linechart/labeling-tool/labeling-tool.module';
-import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
-import {DataDownloadDialog} from './components/datadownloadDialog/dataDownload.dialog';
-import {DataExplorerDashboardGridComponent} from './components/grid/data-explorer-dashboard-grid.component';
-import {DataExplorerDashboardOverviewComponent} from './components/overview/data-explorer-dashboard-overview.component';
-import {DataExplorerDashboardPanelComponent} from './components/panel/data-explorer-dashboard-panel.component';
-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 {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';
-import {NoDataInDateRangeComponent} from './components/widgets/utils/no-data/no-data-in-date-range.component';
-import {SelectPropertiesComponent} from './components/widgets/utils/select-properties/select-properties.component';
-import {DataExplorerComponent} from './data-explorer.component';
-import {DataExplorerAddVisualizationDialogComponent} from './dialogs/add-widget/data-explorer-add-visualization-dialog.component';
-import {DataExplorerEditDataViewDialogComponent} from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
-import {DataLakeService} from './services/data-lake.service';
-import {DataViewDataExplorerService} from './services/data-view-data-explorer.service';
-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 { NgxChartsModule } from '@swimlane/ngx-charts';
+import { GridsterModule } from 'angular-gridster2';
+import { PlotlyViaWindowModule } from 'angular-plotly.js';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { DatalakeRestService } from '../core-services/datalake/datalake-rest.service';
+import { SemanticTypeUtilsService } from '../core-services/semantic-type/semantic-type-utils.service';
+import { SharedDatalakeRestService } from '../core-services/shared/shared-dashboard.service';
+import { CoreUiModule } from '../core-ui/core-ui.module';
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
+import { DataDownloadDialog } from './components/datadownloadDialog/dataDownload.dialog';
+import { DataExplorerDashboardGridComponent } from './components/grid/data-explorer-dashboard-grid.component';
+import { DataExplorerDashboardOverviewComponent } from './components/overview/data-explorer-dashboard-overview.component';
+import { DataExplorerDashboardPanelComponent } from './components/panel/data-explorer-dashboard-panel.component';
+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 { 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';
+import { NoDataInDateRangeComponent } from './components/widgets/utils/no-data/no-data-in-date-range.component';
+import { SelectPropertiesComponent } from './components/widgets/utils/select-properties/select-properties.component';
+import { DataExplorerComponent } from './data-explorer.component';
+import { DataExplorerAddVisualizationDialogComponent } from './dialogs/add-widget/data-explorer-add-visualization-dialog.component';
+import { DataExplorerEditDataViewDialogComponent } from './dialogs/edit-dashboard/data-explorer-edit-data-view-dialog.component';
+import { DataLakeService } from './services/data-lake.service';
+import { DataViewDataExplorerService } from './services/data-view-data-explorer.service';
+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 { PointSelectionInfoComponent } from './components/widgets/line-chart/components/point-selection-info/point-selection-info.component';
+import { LabelSelectionComponent } from './components/widgets/line-chart/components/label-selection/label-selection.component';
+import { ChangeChartmodeDialog } from './components/widgets/line-chart/dialogs/change-chartmode/change-chartmode.dialog';
+import { LabelingDialog } from './components/widgets/line-chart/dialogs/labeling/labeling.dialog';
+import { ColorService } from './components/widgets/line-chart/services/color.service';
const dashboardWidgets = [];
@@ -110,8 +114,7 @@ export const MY_NATIVE_FORMATS = {
MatNativeDateModule,
MatSliderModule,
MatSlideToggleModule,
- MatChipsModule,
- LabelingToolModule
+ MatChipsModule
],
declarations: [
DataExplorerComponent,
@@ -128,7 +131,11 @@ export const MY_NATIVE_FORMATS = {
NoDataInDateRangeComponent,
LoadDataSpinnerComponent,
DataDownloadDialog,
+ ChangeChartmodeDialog,
+ LabelingDialog,
SelectPropertiesComponent,
+ LabelSelectionComponent ,
+ PointSelectionInfoComponent,
AggregateConfigurationComponent,
GroupConfigurationComponent
],
@@ -138,6 +145,7 @@ export const MY_NATIVE_FORMATS = {
DataViewDataExplorerService,
DataLakeService,
ResizeService,
+ ColorService,
RefreshDashboardService,
SemanticTypeUtilsService,
{
@@ -151,6 +159,7 @@ export const MY_NATIVE_FORMATS = {
DataExplorerComponent,
DataExplorerAddVisualizationDialogComponent,
DataDownloadDialog,
+ LabelingDialog,
DataExplorerEditDataViewDialogComponent
]
})