Merge remote-tracking branch 'origin/develop' into feature/timeseriesChart

# Conflicts:
#	frontend/src/app/modules/time-series/services/line-chart.service.ts
#	grails-app/i18n/messages.properties
#	grails-app/i18n/messages_de.properties
#	grails-app/services/de/iteratec/osm/linechart/LineChartTimeSeriesService.groovy

Author: mekiert

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

@@ -60,6 +60,14 @@ osm-time-series-line-chart {
   }
 }
 
+.summary-label-key {
+  font-weight: bold;
+}
+
+.summary-label {
+  font-weight: normal;
+}
+  
 .legend-entry {
   cursor: pointer;
 }

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

@@ -1,13 +1,17 @@
 import {EventResultSeriesDTO} from './event-result-series.model';
+import {SummaryLabel} from "./summary-label.model";
 
 export interface EventResultDataDTO {
   series: EventResultSeriesDTO[];
+  summaryLabels: SummaryLabel[];
 }
 
 export class EventResultData implements EventResultDataDTO {
   series: EventResultSeriesDTO[];
+  summaryLabels: SummaryLabel[];
 
   constructor() {
     this.series = [];
+    this.summaryLabels = [];
   }
 }

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

@@ -0,0 +1,4 @@
+export interface SummaryLabel {
+  key: string;
+  label: string;
+}

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

@@ -49,6 +49,7 @@ import {getColorScheme} from 'src/app/enums/color-scheme.enum';
 import {ChartCommons} from "../../../enums/chart-commons.enum";
 import {UrlBuilderService} from "./url-builder.service";
 import {PointsSelection} from "../models/points-selection.model";
+import {SummaryLabel} from "../models/summary-label.model";
 
 /**
  * Generate line charts with ease and fun 😎
@@ -69,10 +70,9 @@ export class LineChartService {
   private _height: number = 550 - this._margin.top - this._margin.bottom;
   private _labelGroupHeight: number;
   private _legendGroupTop: number = this._margin.top + this._height + 50;
-  private _legendGroupLeft: number = this._margin.left;
-  private _legendGroupHeight;
-  private _legendGroupColumnWidth;
-  private _legendGroupColumns;
+  private _legendGroupHeight: number;
+  private _legendGroupColumnWidth: number;
+  private _legendGroupColumns: number;
   private legendDataMap: Object = {};
   private brush: BrushBehavior<{}>;
   private focusedLegendEntry: string;
@@ -261,6 +261,7 @@ export class LineChartService {
     d3Select('.y-axis').transition().call(this.updateYAxis, yScale, this._width, this._margin);
 
     this.addLegendsToChart(chart, incomingData);
+    this.setSummaryLabel(chart, incomingData.summaryLabels);
     this.addDataLinesToChart(chart, xScale, yScale, data);
     this.drawAllSelectedPoints();
 
@@ -298,12 +299,14 @@ export class LineChartService {
 
     let labelDataMap = {};
     incomingData.series.forEach((data: EventResultSeriesDTO) => {
-      let label = data.identifier;
+      if (incomingData.summaryLabels.length > 0 && incomingData.summaryLabels[0].key != "measurand") {
+        data.identifier = this.translateMeasurand(data);
+      }
       let key = this.generateKey(data);
       labelDataMap[key] = {
-        text: label,
+        text: data.identifier,
         key: key,
-        show: true,
+        show: true
       }
     });
     this.legendDataMap = labelDataMap;
@@ -313,16 +316,18 @@ export class LineChartService {
    * Prepares the incoming data for drawing with D3.js
    */
   private prepareData(incomingData: EventResultDataDTO): TimeSeries[] {
-
     return incomingData.series.map((data: EventResultSeriesDTO) => {
       let lineChartData: TimeSeries = new TimeSeries();
+      if (incomingData.summaryLabels.length > 0 && incomingData.summaryLabels[0].key != "measurand") {
+        data.identifier = this.translateMeasurand(data);
+      }
       lineChartData.key = this.generateKey(data);
 
       lineChartData.values = data.data.map((point: EventResultPointDTO) => {
         let lineChartDataPoint: TimeSeriesPoint = new TimeSeriesPoint();
         lineChartDataPoint.date = parseDate(point.date);
         lineChartDataPoint.value = point.value;
-        lineChartDataPoint.tooltipText = data.jobGroup + ' | ' + data.measuredEvent + ' : '; // TODO Set exact label text when IT-2793 is implemented
+        lineChartDataPoint.tooltipText = data.identifier + ' : ';
         lineChartDataPoint.wptInfo = point.wptInfo;
         return lineChartDataPoint;
       });
@@ -331,10 +336,21 @@ export class LineChartService {
     });
   }
 
+  private translateMeasurand(data: EventResultSeriesDTO): string {
+    let splitLabelList: string[] = data.identifier.split(' | ');
+    let splitLabel: string = this.translationService.instant('frontend.de.iteratec.isr.measurand.' + splitLabelList[0]);
+    if (!splitLabel.startsWith('frontend.de.iteratec.isr.measurand.')) {
+      splitLabelList[0] = splitLabel;
+    }
+    return splitLabelList.join(' | ');
+  }
+
   private generateKey(data: EventResultSeriesDTO): string {
-    return data.jobGroup
-      + data.measuredEvent
-      + data.data.length;
+    let key: string = data.identifier.replace(/[^_a-zA-Z0-9-]/g, "");
+    if (new RegExp('[0-9]').test(key.charAt(0))) {
+      key = key.replace(/[0-9]/, '_');
+    }
+    return key;
   }
 
   /**
@@ -347,14 +363,69 @@ export class LineChartService {
       .attr('width', this._width + this._margin.left + this._margin.right)
       .attr('height', 0);
 
+    svg.append('g')
+      .attr('id', 'header-group')
+      .attr('transform', `translate(${this._margin.left}, ${this._margin.top - 16})`);
+
+    let chart = svg.append('g') // g =  grouping element; group all other stuff into the chart
+      .attr('id', 'time-series-chart-drawing-area')
+      .attr('transform', `translate(${this._margin.left}, ${this._margin.top})`); // translates the origin to the top left corner (default behavior of D3)
+
     svg.append('g')
       .attr('id', 'time-series-chart-legend')
       .attr('class', 'legend-group')
-      .attr('transform', `translate(${this._legendGroupLeft}, ${this._legendGroupTop})`);
+      .attr('transform', `translate(${this._margin.left}, ${this._legendGroupTop})`);
 
-    return svg.append('g') // g =  grouping element; group all other stuff into the chart
-      .attr('id', 'time-series-chart-drawing-area')
-      .attr('transform', 'translate(' + this._margin.left + ', ' + this._margin.top + ')'); // translates the origin to the top left corner (default behavior of D3)
+    return chart;
+  }
+
+  private setSummaryLabel(chart: D3Selection<D3BaseType, {}, D3ContainerElement, {}>, summaryLabels: SummaryLabel[]): void {
+    d3Select('g#header-group').selectAll('.summary-label-text').remove();
+    if (summaryLabels.length > 0) {
+      d3Select('#header-group')
+        .append('g')
+        .attr('class', 'summary-label-text')
+        .append('text')
+        .attr('id', 'summary-label-part0')
+        .attr('x', this._width / 2)
+        .attr('text-anchor', 'middle')
+        .attr('fill', '#555555');
+
+      summaryLabels.forEach((summaryLabel: SummaryLabel, index: number) => {
+        this.translationService
+          .get('frontend.de.iteratec.osm.timeSeries.chart.label.' + summaryLabel.key)
+          .pipe(take(1))
+          .subscribe((key: string) => {
+            if (summaryLabel.key == 'measurand') {
+              this.translationService
+                .get('frontend.de.iteratec.isr.measurand.' + summaryLabel.label)
+                .pipe(take(1))
+                .subscribe((label: string) => {
+                  if (label.startsWith('frontend.de.iteratec.isr.measurand.')) {
+                    label = summaryLabel.label
+                  }
+                  label = index < summaryLabels.length - 1 ? `${label} | ` : label;
+                  this.addSummaryLabel(key, label, index);
+                });
+            } else {
+              const label: string = index < summaryLabels.length - 1 ? `${summaryLabel.label} | ` : summaryLabel.label;
+              this.addSummaryLabel(key, label, index);
+            }
+          });
+      });
+      chart.selectAll('.summary-label-text').remove();
+    }
+  }
+
+  private addSummaryLabel(key: string, label: string, index: number): void {
+    d3Select(`#summary-label-part${index}`)
+      .append('tspan')
+      .attr('id', `summary-label-part${index + 1}`)
+      .attr('class', 'summary-label-key')
+      .text(`${key}: `)
+      .append('tspan')
+      .attr('class', 'summary-label')
+      .text(label);
   }
 
   public startResize(svgElement: ElementRef): void {
@@ -709,7 +780,7 @@ export class LineChartService {
       })
       // fade in
       .transition().duration(500).style('opacity', (timeSeries: TimeSeries) => {
-      return (this.legendDataMap[timeSeries.key].show) ? '1' : '0.2';
+      return (this.legendDataMap[timeSeries.key].show) ? '1' : '0.1';
     });
 
     return resultingSelection;

grails-app/i18n/messages.properties

@@ -1069,6 +1069,9 @@ frontend.default.button.save=Save
 frontend.default.button.cancel=Cancel
 frontend.de.iteratec.osm.measurement.setup.title=Measurement Setup
 frontend.de.iteratec.osm.applicationDashboard.kpi.title=Total Customer Satisfaction
+frontend.de.iteratec.isr.measurand.PAGE_CONSTRUCTION_STARTED=Is it happening?
+frontend.de.iteratec.isr.measurand.PAGE_SHOWS_USEFUL_CONTENT=Is it useful?
+frontend.de.iteratec.isr.measurand.PAGE_IS_USABLE=Is it useable?
 frontend.de.iteratec.isr.measurand.DOC_COMPLETE_TIME=Document Complete
 frontend.de.iteratec.isr.measurand.DOM_TIME=DOM Time
 frontend.de.iteratec.isr.measurand.FIRST_BYTE=First Byte
@@ -1288,3 +1291,8 @@ frontend.de.iteratec.chart.contextMenu.deselectPoint=Deselect Point
 frontend.de.iteratec.chart.contextMenu.deselectAllPoints=Deselect all Points
 frontend.de.iteratec.chart.errorHeader=Error
 frontend.de.iteratec.chart.datapointSelection.error.multipleServer=Comparison of the filmstrips is only possible for measurements on the same server.
+frontend.de.iteratec.osm.timeSeries.chart.label.measurand=Measurand
+frontend.de.iteratec.osm.timeSeries.chart.label.application=Application
+frontend.de.iteratec.osm.timeSeries.chart.label.measuredEvent=Measured step
+frontend.de.iteratec.osm.timeSeries.chart.label.location=Location
+frontend.de.iteratec.osm.timeSeries.chart.label.connectivity=Connectivity

grails-app/i18n/messages_de.properties

@@ -1051,6 +1051,9 @@ frontend.default.button.save=Speichern
 frontend.default.button.cancel=Abbrechen
 frontend.de.iteratec.osm.measurement.setup.title=Setup Messungen
 frontend.de.iteratec.osm.applicationDashboard.kpi.title=Gesamte Kundenzufriedenheit
+frontend.de.iteratec.isr.measurand.PAGE_CONSTRUCTION_STARTED=Is it happening?
+frontend.de.iteratec.isr.measurand.PAGE_SHOWS_USEFUL_CONTENT=Is it useful?
+frontend.de.iteratec.isr.measurand.PAGE_IS_USABLE=Is it useable?
 frontend.de.iteratec.isr.measurand.DOC_COMPLETE_TIME=Document Complete
 frontend.de.iteratec.isr.measurand.DOM_TIME=DOM Time
 frontend.de.iteratec.isr.measurand.FIRST_BYTE=First Byte
@@ -1262,3 +1265,8 @@ frontend.de.iteratec.chart.contextMenu.deselectPoint=Punkt abwählen
 frontend.de.iteratec.chart.contextMenu.deselectAllPoints=Alle Punkte abwählen
 frontend.de.iteratec.chart.errorHeader=Fehler
 frontend.de.iteratec.chart.datapointSelection.error.multipleServer=Vergleich der Filmstreifen ist nur für Messungen des gleichen Servers möglich.
+frontend.de.iteratec.osm.timeSeries.chart.label.measurand=Messgröße
+frontend.de.iteratec.osm.timeSeries.chart.label.application=Anwendung
+frontend.de.iteratec.osm.timeSeries.chart.label.measuredEvent=Messschritt
+frontend.de.iteratec.osm.timeSeries.chart.label.location=Location
+frontend.de.iteratec.osm.timeSeries.chart.label.connectivity=Anbindung