Merge pull request #326 from iteratec/bugfix/timeseriesCharSelection

Fixes #319 - Time series chart selection of points

Author: BennyLi

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

@@ -1,4 +1,6 @@
-<div class="time-series-line-chart-container">
+<div id="time-series-line-chart-container">
+  <osm-spinner [spinnerId]="'time-series-line-chart-spinner'"></osm-spinner>
+
   <div class="card">
     <svg #svg/>
   </div>

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

@@ -1,7 +1,10 @@
 @import "../../../../../styles/colors";
 
 osm-time-series-line-chart {
-  visibility: hidden;
+  #time-series-line-chart-container {
+    position: relative;
+    width: 100%;
+  }
 
   #marker-tooltip {
     position: absolute;
@@ -67,7 +70,7 @@ osm-time-series-line-chart {
 .summary-label {
   font-weight: normal;
 }
-  
+
 .legend-entry {
   cursor: pointer;
 }

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

@@ -13,6 +13,7 @@ import {
 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";
 
 
 @Component({
@@ -32,7 +33,8 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
   private _resizeTimeoutId: number;
 
   constructor(private lineChartService: LineChartService,
-              private ngxSmartModalService: NgxSmartModalService) {
+              private ngxSmartModalService: NgxSmartModalService,
+              private spinnerService: SpinnerService) {
   }
 
   ngAfterContentInit(): void {
@@ -58,6 +60,13 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
   }
 
   redraw() {
+    if(this.timeSeriesResults == null) {
+      this.spinnerService.showSpinner("time-series-line-chart-spinner");
+      return;
+    }
+
+    this.spinnerService.hideSpinner("time-series-line-chart-spinner");
+
     this.lineChartService.setLegendData(this.timeSeriesResults);
     this.lineChartService.drawLineChart(this.timeSeriesResults);
   }

frontend/src/app/modules/time-series/models/context-menu-position.model.ts

@@ -0,0 +1,11 @@
+import {TimeSeriesPoint} from "./time-series-point.model";
+
+export default class ContextMenuPosition {
+  //if divider is set on true, the other fields are ignored
+  divider?: boolean = false;
+
+  title?: string;
+  icon?: string;
+  visible?: (d: TimeSeriesPoint, i: number, elem) => boolean;
+  action?: (d: TimeSeriesPoint, i: number, elem) => void;
+}