Merge branch 'develop' into feature/timeseries-points-and-tooltip

Author: DanielSteger

build.gradle

@@ -36,7 +36,7 @@ buildscript {
     }
 }
 
-version "5.3.0"
+version "5.3.2"
 group "OpenSpeedMonitor"
 
 apply plugin: "eclipse"

frontend/package-lock.json

@@ -5,5 +5,6 @@ export enum ChartCommons {
   COMPONENT_MARGIN = 15,
   CHART_HEADER_HEIGHT = 40,
   COLOR_PREVIEW_SIZE = 10,
-  COLOR_PREVIEW_MARGIN = 5
+  COLOR_PREVIEW_MARGIN = 5,
+  LABEL_HEIGHT = 30
 }

frontend/src/app/enums/chart-commons.enum.ts

@@ -2,10 +2,12 @@
 <p>
   {{ 'frontend.de.iteratec.osm.aggregation.description' | translate }}
 </p>
-<osm-aggregation-chart *ngIf="!isHidden" [barchartAverageData]="barchartAverageData$ | async" [barchartMedianData]="barchartMedianData$ | async"></osm-aggregation-chart>
+<osm-aggregation-chart *ngIf="showChart" [barchartAverageData]="barchartAverageData$ | async"
+                       [barchartMedianData]="barchartMedianData$ | async"></osm-aggregation-chart>
 <div class="action-row">
   <div class="col-md-12">
-    <osm-result-selection-submit [applicationsRequired]="true" [measurandsRequired]="true" (submit)="getBarchartData()"></osm-result-selection-submit>
+    <osm-result-selection-submit [applicationsRequired]="true" [measurandsRequired]="true"
+                                 (submit)="getBarchartData()"></osm-result-selection-submit>
   </div>
 </div>
 <div class="row">
@@ -20,7 +22,8 @@
         <osm-result-selection-application></osm-result-selection-application>
       </div>
       <div class="col-md-5">
-        <osm-result-selection-page-location-connectivity [showPageSelection]="true" [showBrowserSelection]="true"></osm-result-selection-page-location-connectivity>
+        <osm-result-selection-page-location-connectivity [showPageSelection]="true"
+                                                         [showBrowserSelection]="true"></osm-result-selection-page-location-connectivity>
       </div>
       <div class="col-md-12">
         <osm-result-selection-reset></osm-result-selection-reset>

frontend/src/app/modules/aggregation/aggregation.component.html

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {BarchartDataService} from "./services/barchart-data.service";
 import {ResultSelectionStore} from "../result-selection/services/result-selection.store";
 import {BehaviorSubject} from "rxjs";
@@ -13,26 +13,29 @@ export class AggregationComponent implements OnInit {
 
   barchartAverageData$: BehaviorSubject<any> = new BehaviorSubject<any>([]);
   barchartMedianData$: BehaviorSubject<any> = new BehaviorSubject<any>([]);
-  isHidden: boolean;
+  showChart: boolean = false;
 
   constructor(private barchartDataService: BarchartDataService, private resultSelectionStore: ResultSelectionStore, private aggregationChartDataService: AggregationChartDataService) {
     this.aggregationChartDataService.barchartAverageData$.subscribe((data) => {
       this.barchartAverageData$.next(data);
     });
     this.aggregationChartDataService.barchartMedianData$.subscribe((data) => {
       this.barchartMedianData$.next(data);
-    })
+    });
+    this.resultSelectionStore.dataAvailable$.subscribe((dataAvailable: boolean) => {
+      this.showChart = this.showChart && dataAvailable;
+    });
   }
 
   ngOnInit() {
-    this.isHidden = true;
+    this.showChart = false;
     if (this.resultSelectionStore.validQuery) {
       this.getBarchartData();
     }
   }
 
   getBarchartData(): void {
-    this.isHidden = false;
+    this.showChart = true;
     this.aggregationChartDataService.getBarchartData(this.resultSelectionStore.resultSelectionCommand, this.resultSelectionStore.remainingResultSelection);
   }
 }

frontend/src/app/modules/aggregation/aggregation.component.ts

@@ -1,6 +1,6 @@
 <div class="card">
   <div class="aggregation-chart">
-    <osm-spinner></osm-spinner>
+    <osm-spinner [spinnerId]="'aggregation-chart-spinner'"></osm-spinner>
     <div class="filter-dropdown-group">
       <div class="btn-group pull-left perc-element" data-toggle="buttons" id="stack-bars-switch" *ngIf="!isHidden">
         <label class="btn btn-sm btn-default" id="switch-beside-button"
@@ -64,12 +64,13 @@
           </li>
         </ng-container>
       </ul>
-    </div>
 
-    <div class="in-chart-buttons">
-      <a data-toggle="modal" role="button" title="Download as PNG">
-        <i class="fas fa-download"></i>
-      </a>
+      <div class="in-chart-buttons">
+        <a data-toggle="modal" role="button" title="Download as PNG">
+          <i class="fas fa-download"></i>
+        </a>
+      </div>
+
     </div>
 
     <div class="svg-container">

frontend/src/app/modules/aggregation/components/aggregation-chart/aggregation-chart.component.html

@@ -11,21 +11,35 @@ svg.aggregation-chart-svg {
 }
 
 .in-chart-buttons {
-  position: absolute;
-  top: 10px;
-  right: 10px;
   z-index: 2;
+  position: relative;
+  top: 0;
+  right: 0;
 }
 
-.filter-dropdown-group {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  z-index: 2;
-  top: 4px;
-  right: 50px;
-  padding: 6px 12px;
+@media screen and (max-width: 1650px) {
+  .filter-dropdown-group {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    z-index: 2;
+    padding: 6px 12px;
+  }
+}
 
+@media screen and (min-width: 1651px) {
+  .filter-dropdown-group {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 4px;
+    right: 0;
+    z-index: 2;
+    padding: 6px 12px;
+  }
+}
+
+.filter-dropdown-group {
   ul > li > a {
     cursor: pointer;
   }