Merge branch 'develop' into feature/distributionChart

Author: DanielSteger

frontend/src/app/modules/result-selection/components/application/application.component.html

@@ -1,6 +1,6 @@
 <div class="card form-horizontal">
   <h2>{{ 'frontend.de.iteratec.osm.resultSelection.application.title' | translate }}</h2>
-  <select (ngModelChange)="onSelectionChange()" [(ngModel)]="selectedApplications" class="form-control" id='applications-selection'
+  <select [(ngModel)]="selectedApplications" (ngModelChange)="onSelectionChange()" class="form-control" id='applications-selection'
           multiple>
     <ng-container *ngIf="filteredApplications?.length > 0; else elseBlock">
       <option *ngFor="let application of filteredApplications" [ngValue]="application.id">

frontend/src/app/modules/result-selection/components/measurands/measurand-select/measurand-select.component.html

@@ -1,4 +1,4 @@
-<select (ngModelChange)="selectMeasurand()" [(ngModel)]="selectedMeasurand" [compareWith]="compareMeasurands"
+<select [(ngModel)]="selectedMeasurand" (ngModelChange)="selectMeasurand()" [compareWith]="compareMeasurands"
         class="form-control">
   <optgroup label="{{'frontend.de.iteratec.osm.performance-aspects' | translate}}">
     <option *ngFor="let type of (perfAspectTypes$ |async)?.data" [ngValue]="type">

frontend/src/app/modules/result-selection/components/page-location-connectivity/selection-data/selection-data.component.html

@@ -1,5 +1,6 @@
 <div class="form-group">
-  <select (ngModelChange)="filterSelectableItems(parentSelection)" [(ngModel)]="parentSelection" [style.opacity]="determineOpacity(parentSelection.length)" class="form-control"
+  <select [(ngModel)]="parentSelection" (ngModelChange)="filterSelectableItems(parentSelection)"
+          [style.opacity]="determineOpacity(parentSelection.length)" class="form-control"
           id="result-selection-parent-selection"
           multiple="multiple">
     <ng-container *ngIf="(uniqueParents$ | async)?.length > 0; else noResults">
@@ -11,7 +12,8 @@
       </option>
     </ng-template>
   </select>
-  <div (click)="selectAllParentsCheckbox.checked = true; parentSelection = []; filterSelectableItems(parentSelection)" *ngIf="!parentRequired"
+  <div (click)="selectAllParentsCheckbox.checked = true; parentSelection = []; filterSelectableItems(parentSelection)"
+       *ngIf="!parentRequired"
        class="checkbox-inline">
     <input #selectAllParentsCheckbox [checked]="parentSelection.length < 1" id="selectAllParentsCheckbox"
            type="checkbox">
@@ -24,9 +26,10 @@
     <strong>{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.label.' + childType | translate }}
       :</strong>
   </label>
-  <ng-select (ngModelChange)="updateResultSelectionCommand()"
-             [(ngModel)]="childSelection" [closeOnSelect]="true" [groupBy]="'parent.id'"
-             [items]="childData$ | async" [multiple]="true" bindLabel="name" bindValue="id" id="result-selection-child-selection"
+  <ng-select [(ngModel)]="childSelection" (ngModelChange)="updateResultSelectionCommand()"
+             [closeOnSelect]="true" [groupBy]="'parent.id'"
+             [items]="childData$ | async" [multiple]="true" bindLabel="name" bindValue="id"
+             id="result-selection-child-selection"
              placeholder="{{ 'frontend.de.iteratec.osm.resultSelection.pageBrowserConnectivity.selectOption.placeholder' | translate }}">
   </ng-select>
   <div (click)="selectAllChildrenCheckbox.checked = true; childSelection = []; updateResultSelectionCommand()"

frontend/src/app/modules/result-selection/components/time-frame/time-frame.component.html

@@ -12,7 +12,7 @@ <h2>
       {{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.aggregation.heading' | translate }}:
     </label>
     <div class="col-md-8">
-      <select (ngModelChange)="selectInterval()" [(ngModel)]="aggregationIntervalInSeconds" class="form-control">
+      <select [(ngModel)]="aggregationIntervalInSeconds" (ngModelChange)="selectInterval()" class="form-control">
         <option *ngFor="let intervals of selectableAggregationIntervalsInSeconds" [value]="intervals">
           {{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.aggregation.intervals.' + intervals | translate }}
         </option>
@@ -25,7 +25,7 @@ <h2>
       {{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.heading' | translate }}:
     </label>
     <div class="col-md-8">
-      <select (ngModelChange)="selectTimeFrame()" [(ngModel)]="timeFrameInSeconds" class="form-control">
+      <select [(ngModel)]="timeFrameInSeconds" (ngModelChange)="selectTimeFrame()" class="form-control">
         <option *ngFor="let seconds of selectableTimeFramesInSeconds" [value]="seconds">
           {{ 'frontend.de.iteratec.osm.resultSelection.timeFrame.seconds.' + seconds | translate }}
         </option>

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

@@ -358,6 +358,9 @@ export class LineChartService {
             .attr('class', 'legend-text')
             .attr('x', 15)
             .attr('y', ChartCommons.COLOR_PREVIEW_SIZE)
+            .style('opacity', (datum) => {
+              return (this.legendDataMap[datum].show) ? 1 : 0.2;
+            })
             .text(datum => this.legendDataMap[datum].text);
           return legendElement;
         },
@@ -538,9 +541,9 @@ export class LineChartService {
         // Remove after resize
         chart.selectAll('.lines').remove();
         // Remove old dots
-        this._chartContentContainer.select('.single-dots').remove();
+        chart.selectAll('.single-dots').remove();
         // Remove old dots
-        this._chartContentContainer.select('.dots').remove();
+        chart.selectAll('.dots').remove();
       }
       // Create one group per line / data entry
       this._chartContentContainer
@@ -824,6 +827,9 @@ export class LineChartService {
 
       this._legendGroupColumnWidth = maximumLabelWidth + ChartCommons.COLOR_PREVIEW_SIZE + 30;
       this._legendGroupColumns = Math.floor(this._width / this._legendGroupColumnWidth);
+      if (this._legendGroupColumns < 1) {
+        this._legendGroupColumns = 1;
+      }
       this._legendGroupHeight = Math.ceil(labels.length / this._legendGroupColumns) * ChartCommons.LABEL_HEIGHT + 30;
     };
 
@@ -1086,7 +1092,7 @@ export class LineChartService {
       this.translationService.get(`frontend.de.iteratec.isr.measurand.group.${axisLabelKey}`).pipe(take(1)).subscribe(title => {
         d3Select(`.axis-unit${index}`).append('text')
           .attr('class', 'description unit')
-          .attr('transform', `translate(${xPosition}, ${(this._height / 2 - this._margin.bottom)}) rotate(-90)`)
+          .attr('transform', `translate(${xPosition}, ${this._height / 2}) rotate(-90)`)
           .text(`${title} [${measurandGroups[axisLabelKey]}]`);
       });
     });