Merge pull request #335 from iteratec/feature/timeSeriesChartDetails

 Optimization of the new time series chart (collected tasks)

Author: DanielSteger

frontend/src/app/enums/color-scheme.enum.ts

@@ -13,15 +13,15 @@ export enum COLOR_SCHEME {
   DARK_BLUE             = '#751ec3', // dark blue
   RED                   = '#ff0000', // red
   BLACK                 = '#0d233a', // black
-  YELLOW                = '#ffdb00', // yellow  
+  YELLOW                = '#ffdb00', // yellow
   HIGHCHARTS_YELLOW     = '#ffdc08', // highcharts yellow
   HIGHCHARTS_PURPLE     = '#492970', // highcharts purple
   HIGHCHARTS_LIGHT_BLUE = '#77a1e5', // highcharts light blue
   HIGHCHARTS_ORANGE     = '#f28f43', // highcharts orange
   HIGHCHARTS_RED        = '#910000', // highcharts red
   HIGHCHARTS_BLACK      = '#0d233a', // highcharts black
   HIGHCHARTS_BLUE       = '#2f7ed8', // highcharts blue
-  HIGHCHARTS_GREEN      = '#8bbc21' // highcharts green
+  HIGHCHARTS_GREEN      = '#8bbc21'  // highcharts green
 }
 
 export function getColorScheme(): string[] {

frontend/src/app/modules/shared/components/spinner/spinner.component.scss

@@ -32,4 +32,6 @@
   background: white;
   opacity: 0.5;
   z-index: 10;
+  top: 0;
+  left: 0;
 }

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

@@ -52,6 +52,10 @@ osm-time-series-line-chart {
         font-size: 14px;
         fill: $color-text-light;
       }
+
+      .unit {
+        text-anchor: middle;
+      }
     }
 
     .marker-line {
@@ -63,7 +67,6 @@ osm-time-series-line-chart {
       stroke-width: 2px;
       fill: white;
     }
-
   }
 }
 

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

@@ -8,12 +8,12 @@ import {
   SimpleChanges,
   ViewChild,
   ViewEncapsulation
-} from "@angular/core";
+} from '@angular/core';
 
 import {EventResultData} from '../../models/event-result-data.model';
 import {LineChartService} from '../../services/line-chart.service';
-import {NgxSmartModalService} from "ngx-smart-modal";
-import {SpinnerService} from "../../../shared/services/spinner.service";
+import {NgxSmartModalService} from 'ngx-smart-modal';
+import {SpinnerService} from '../../../shared/services/spinner.service';
 
 
 @Component({
@@ -27,7 +27,7 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
   @Input()
   timeSeriesResults: EventResultData;
 
-  @ViewChild("svg")
+  @ViewChild('svg')
   svgElement: ElementRef;
 
   public ngxSmartModalService;
@@ -63,17 +63,16 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
   }
 
   redraw() {
-    if(this.timeSeriesResults == null) {
-      this.spinnerService.showSpinner("time-series-line-chart-spinner");
+    if (this.timeSeriesResults == null) {
+      this.spinnerService.showSpinner('time-series-line-chart-spinner');
       return;
     }
-
-    this.spinnerService.hideSpinner("time-series-line-chart-spinner");
+    this.spinnerService.hideSpinner('time-series-line-chart-spinner');
 
     this.lineChartService.drawLineChart(this.timeSeriesResults);
   }
 
   handlePointSelectionError() {
-    this.ngxSmartModalService.open("pointSelectionErrorModal");
+    this.ngxSmartModalService.open('pointSelectionErrorModal');
   }
 }

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

@@ -2,16 +2,22 @@ import {EventResultSeriesDTO} from './event-result-series.model';
 import {SummaryLabel} from "./summary-label.model";
 
 export interface EventResultDataDTO {
+  measurandGroups: any;
   series: EventResultSeriesDTO[];
   summaryLabels: SummaryLabel[];
+  numberOfTimeSeries: number;
 }
 
 export class EventResultData implements EventResultDataDTO {
+  measurandGroups: any;
   series: EventResultSeriesDTO[];
   summaryLabels: SummaryLabel[];
+  numberOfTimeSeries: number;
 
   constructor() {
+    this.measurandGroups = {};
     this.series = [];
     this.summaryLabels = [];
+    this.numberOfTimeSeries = 0;
   }
 }

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

@@ -6,6 +6,7 @@ import {WptInfo} from "./wpt-info.model";
 export class TimeSeriesPoint {
   date: Date;
   value: number;
+  agent: string;
   tooltipText: string;
   wptInfo: WptInfo;
 

frontend/src/app/modules/time-series/services/line-chart-scale.service.ts

@@ -1,80 +1,95 @@
-import { Injectable } from '@angular/core';
-import {TimeSeries} from "../models/time-series.model";
+import {Injectable} from '@angular/core';
+import {TimeSeries} from '../models/time-series.model';
 import {
   scaleLinear as d3ScaleLinear,
   ScaleLinear as D3ScaleLinear,
   scaleTime as d3ScaleTime,
   ScaleTime as D3ScaleTime
-} from "d3-scale";
-import {TimeSeriesPoint} from "../models/time-series-point.model";
-import {max as d3Max, min as d3Min} from "d3-array";
+} from 'd3-scale';
+import {TimeSeriesPoint} from '../models/time-series-point.model';
+import {max as d3Max, min as d3Min} from 'd3-array';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LineChartScaleService {
 
-  constructor() { }
-
-  private getDate(data: TimeSeries[], f: Function): Date {
-    return f(data, (dataItem: TimeSeries) => {
-      return f(dataItem.values, (point: TimeSeriesPoint) => {
-        return point.date;
-      });
-    });
-  };
+  constructor() {
+  }
 
-  public getMinDate(data: TimeSeries[]): Date {
+  public getMinDate(data: TimeSeries[][]): Date {
     return this.getDate(data, d3Min);
-  };
-
-  public getMaxDate(data: TimeSeries[]): Date {
-    return this.getDate(data, d3Max);
-  };
-
-  private getMaxValue(data: TimeSeries[]): number {
-    return d3Max(data, (dataItem: TimeSeries) => {
-      return d3Max(dataItem.values, (point: TimeSeriesPoint) => {
-        return point.value;
-      });
-    });
   }
 
-  private getMaxValueInTime(data: TimeSeries[], minDate: Date, maxDate: Date): number {
-    return d3Max(data, (dataSeries: TimeSeries) => {
-      const valuesInRange = dataSeries.values.filter(value => value.date <= maxDate && value.date >= minDate);
-      return d3Max(valuesInRange, (point: TimeSeriesPoint) => {
-        return point.value;
-      });
-    });
+  public getMaxDate(data: TimeSeries[][]): Date {
+    return this.getDate(data, d3Max);
   }
 
   /**
    * Determine the xScale for the given data
    */
-  public getXScale(data: TimeSeries[], width: number): D3ScaleTime<number, number> {
+  public getXScale(data: TimeSeries[][], width: number): D3ScaleTime<number, number> {
     return d3ScaleTime()               // Define a scale for the X-Axis
       .range([0, width])  // Display the X-Axis over the complete width
       .domain([this.getMinDate(data), this.getMaxDate(data)]);
   }
 
   /**
-   * Determine the yScale for the given data
+   * Determine the yScales for the given data
    */
-  public getYScale(data: TimeSeries[], height: number): D3ScaleLinear<number, number> {
-    return d3ScaleLinear()              // Linear scale for the numbers on the Y-Axis
-      .range([height, 0])  // Display the Y-Axis over the complete height - origin is top left corner, so height comes first
-      .domain([0, this.getMaxValue(data)])
-      .nice();
+  public getYScales(dataList: TimeSeries[][], height: number): D3ScaleLinear<number, number>[] {
+    const yScales: D3ScaleLinear<number, number>[] = [];
+    dataList.forEach((data: TimeSeries[]) => {
+      const yScale: D3ScaleLinear<number, number> = d3ScaleLinear()              // Linear scale for the numbers on the Y-Axis
+        .range([height, 0])  // Display the Y-Axis over the complete height - origin is top left corner, so height comes first
+        .domain([0, this.getMaxValue(data)])
+        .nice();
+      yScales.push(yScale);
+    });
+
+    return yScales;
   }
 
   /**
-   * Determine the yScale for the given data in time range
+   * Determine the yScales for the given data in time range
    */
-  public getYScaleInRange(data: TimeSeries[], minDate: Date, maxDate: Date, height: number): D3ScaleLinear<number, number> {
-    return d3ScaleLinear()              // Linear scale for the numbers on the Y-Axis
-      .range([height, 0])  // Display the Y-Axis over the complete height - origin is top left corner, so height comes first
-      .domain([0, this.getMaxValueInTime(data, minDate, maxDate)])
-      .nice();
+  public getYScalesInTimeRange(dataList: TimeSeries[][], minDate: Date, maxDate: Date, height: number): D3ScaleLinear<number, number>[] {
+    const yScales: D3ScaleLinear<number, number>[] = [];
+    dataList.forEach((data: TimeSeries[]) => {
+      const yScale: D3ScaleLinear<number, number> = d3ScaleLinear()              // Linear scale for the numbers on the Y-Axis
+        .range([height, 0])  // Display the Y-Axis over the complete height - origin is top left corner, so height comes first
+        .domain([0, this.getMaxValueInTime(data, minDate, maxDate)])
+        .nice();
+      yScales.push(yScale);
+    });
+
+    return yScales;
+  }
+
+  private getDate(dataList: TimeSeries[][], f: Function): Date {
+    return f(dataList, (data: TimeSeries[]) => {
+      return f(data, (dataItem: TimeSeries) => {
+        return f(dataItem.values, (point: TimeSeriesPoint) => {
+          return point.date;
+        });
+      });
+    });
+  }
+
+  private getMaxValue(data: TimeSeries[]): number {
+    return d3Max(data, (dataItem: TimeSeries) => {
+      return d3Max(dataItem.values, (point: TimeSeriesPoint) => {
+        return point.value;
+      });
+    });
+  }
+
+  private getMaxValueInTime(data: TimeSeries[], minDate: Date, maxDate: Date): number {
+    return d3Max(data, (dataSeries: TimeSeries) => {
+      const valuesInRange = dataSeries.values.filter(value => value.date <= maxDate && value.date >= minDate);
+      return d3Max(valuesInRange, (point: TimeSeriesPoint) => {
+        return point.value;
+      });
+    });
   }
 }