Merge pull request #318 from iteratec/feature/timeseriesChart

Feature/timeseries chart

Author: j0weiss

frontend/src/app/modules/time-series/components/time-series-line-chart/time-series-line-chart.component.html

@@ -1,5 +1,19 @@
 <div class="time-series-line-chart-container">
   <div class="card">
-    <svg #svg />
+    <svg #svg/>
   </div>
 </div>
+
+<ngx-smart-modal id="pointSelectionErrorModal" identifier="pointSelectionErrorModal">
+  <header>
+    <h2>{{ "frontend.de.iteratec.chart.errorHeader" | translate }}</h2>
+  </header>
+  <main>
+    <div>{{ "frontend.de.iteratec.chart.datapointSelection.error.multipleServer" | translate }}</div>
+  </main>
+  <footer>
+    <button (click)="this.ngxSmartModalService.close('pointSelectionErrorModal')" class="btn btn-default">
+      {{ "frontend.default.button.cancel.label" | translate }}
+    </button>
+  </footer>
+</ngx-smart-modal>

frontend/src/app/modules/time-series/components/time-series-line-chart/time-series-line-chart.component.scss

@@ -75,3 +75,21 @@ osm-time-series-line-chart {
 .legend-text {
   font-size: 12px;
 }
+
+#pointSelectionErrorModal {
+  header {
+    padding: 15px;
+    border-bottom: 1px solid #e5e5e5;
+  }
+
+  main {
+    position: relative;
+    padding: 15px;
+  }
+
+  footer {
+    padding: 15px;
+    text-align: right;
+    border-top: 1px solid #e5e5e5;
+  }
+}

frontend/src/app/modules/time-series/components/time-series-line-chart/time-series-line-chart.component.ts

@@ -12,6 +12,7 @@ import {
 
 import {EventResultData} from '../../models/event-result-data.model';
 import {LineChartService} from '../../services/line-chart.service';
+import {NgxSmartModalService} from "ngx-smart-modal";
 
 
 @Component({
@@ -30,13 +31,12 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
 
   private _resizeTimeoutId: number;
 
-  constructor(
-    private lineChartService: LineChartService
-  ) {
+  constructor(private lineChartService: LineChartService,
+              private ngxSmartModalService: NgxSmartModalService) {
   }
 
   ngAfterContentInit(): void {
-    this.lineChartService.initChart(this.svgElement);
+    this.lineChartService.initChart(this.svgElement, () => this.handlePointSelectionError());
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -61,4 +61,8 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
     this.lineChartService.setLegendData(this.timeSeriesResults);
     this.lineChartService.drawLineChart(this.timeSeriesResults);
   }
+
+  handlePointSelectionError() {
+    this.ngxSmartModalService.open("pointSelectionErrorModal");
+  }
 }

frontend/src/app/modules/time-series/models/event-result-point.model.ts

@@ -1,17 +1,22 @@
+import {WptInfo} from "./wpt-info.model";
+
 export interface EventResultPointDTO {
   date: Date;
   value: number;
   agent: string;
+  wptInfo: WptInfo;
 }
 
 export class EventResultPoint implements EventResultPointDTO {
   date: Date;
   value: number;
   agent: string;
+  wptInfo: WptInfo;
 
   constructor(dto: EventResultPointDTO) {
     this.date = dto.date;
     this.value = dto.value;
     this.agent = dto.agent;
+    this.wptInfo = dto.wptInfo;
   }
 }

frontend/src/app/modules/time-series/models/points-selection.model.ts

@@ -0,0 +1,37 @@
+import {TimeSeriesPoint} from "./time-series-point.model";
+
+export class PointsSelection {
+
+  private selectedPoints: TimeSeriesPoint[] = [];
+
+  public unselectAll() {
+    this.selectedPoints = [];
+  }
+
+  public selectPoint(pointToSelect: TimeSeriesPoint) {
+    this.selectedPoints.push(pointToSelect);
+  }
+
+  public isPointSelected(pointToCheck: TimeSeriesPoint): boolean {
+    return this.selectedPoints.some(elem => elem.equals(pointToCheck));
+  }
+
+  public unselectPoint(pointToSelect: TimeSeriesPoint) {
+    this.selectedPoints = this.selectedPoints.filter(elem => !elem.equals(pointToSelect))
+  }
+
+  public count(): number {
+    return this.selectedPoints.length;
+  }
+
+  public getAll(): TimeSeriesPoint[] {
+    return this.selectedPoints;
+  }
+
+  public getFirst(): TimeSeriesPoint {
+    if(this.count() === 0) {
+      return null;
+    }
+    return this.selectedPoints[0];
+  }
+}

frontend/src/app/modules/time-series/models/time-series-point.model.ts

@@ -1,10 +1,17 @@
 /**
  * Representation of one point on the y-axis (value) with additional informations.
  */
+import {WptInfo} from "./wpt-info.model";
+
 export class TimeSeriesPoint {
   date: Date;
   value: number;
   tooltipText: string;
+  wptInfo: WptInfo;
 
   constructor() {}
+
+  public equals(other: TimeSeriesPoint) {
+    return other && this.date.getTime() == other.date.getTime() && this.tooltipText == other.tooltipText && this.value == other.value;
+  }
 }

frontend/src/app/modules/time-series/models/wpt-info.model.ts

@@ -0,0 +1,6 @@
+export class WptInfo {
+  baseUrl: string;
+  testId: string;
+  runNumber: number;
+  indexInJourney: number;
+}