Display events in time series chart

frontend/package.json

@@ -29,7 +29,7 @@
     "d3": "^5.11.0",
     "ng-pick-datetime": "^7.0.0",
     "ngx-smart-modal": "^7.1.1",
-    "rxjs": "^6.4.0",
+    "rxjs": "^6.5.0",
     "spin.js": "^4.0.0",
     "zone.js": "^0.9.0"
   },

frontend/src/app/enums/url.enum.ts

@@ -10,5 +10,6 @@ export enum URL {
   RESULT_COUNT = '/resultSelection/getResultCount',
   AGGREGATION_BARCHART_DATA = '/aggregation/getBarchartData',
   EVENT_RESULT_DASHBOARD_LINECHART_DATA = '/eventResultDashboard/getLinechartData',
+  EVENTS = '/rest/events',
   DISTRIBUTION_VIOLINCHART_DATA = '/distributionChart/getViolinchartData'
 }

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

@@ -31,6 +31,18 @@ osm-time-series-line-chart {
     }
   }
 
+  #event-marker-tooltip {
+    position: absolute;
+    text-align: left;
+    font: 10pt sans-serif;
+    color: white;
+    background: rgba(0, 0, 0, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.4);
+    border-radius: 3px;
+    pointer-events: none;
+    max-width: 250px;
+  }
+
   #time-series-chart-drawing-area {
     .axis {
       .domain {
@@ -64,13 +76,53 @@ osm-time-series-line-chart {
     .marker-line {
       stroke: $color-contour-medium;
       stroke-width: 1px;
-      opacity: 0.7;
+      shape-rendering: crispEdges;
     }
 
     circle.dot {
       stroke-width: 2px;
       fill: white;
     }
+
+    circle.event-marker-dot {
+      fill: $color-contour-light;
+      opacity: 0.9;
+    }
+
+    circle.selected-event-marker-dot {
+      fill: $color-contour-medium;
+    }
+
+    .event-marker-line {
+      stroke: $color-contour-medium;
+      stroke-width: 1px;
+      shape-rendering: crispEdges;
+    }
+
+    .unselected-event-marker-line {
+      opacity: 0;
+    }
+
+    .selected-event-marker-line {
+      opacity: 1;
+    }
+
+    circle.event-marker-dot:hover {
+      fill: $color-contour-medium;
+      opacity: 0.7;
+    }
+
+    .event-time-line {
+      stroke: $color-contour-light;
+      stroke-width: 1px;
+      shape-rendering: crispEdges;
+    }
+
+    .event-time-line-label {
+      font-size: 10px;
+      fill: $color-text-light;
+      opacity: 0.7;
+    }
   }
 }
 
@@ -160,3 +212,25 @@ osm-time-series-line-chart {
     border-right: 0;
   }
 }
+
+.grid-container {
+  display: grid;
+}
+
+.event-marker-tooltip-element {
+  padding: 0.2em 0.75em 0.2em 0.75em;
+}
+
+.event-marker-tooltip-date {
+  margin-bottom: 10px;
+}
+
+.event-marker-tooltip-title {
+  font-weight: bold;
+  margin: 0;
+}
+
+.event-marker-tooltip-text {
+  margin: 0;
+  text-align: justify;
+}

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

@@ -15,6 +15,8 @@ import {LineChartService} from '../../services/line-chart.service';
 import {NgxSmartModalService} from 'ngx-smart-modal';
 import {SpinnerService} from '../../../shared/services/spinner.service';
 import {TranslateService} from '@ngx-translate/core';
+import {TimeEvent} from '../../models/event.model';
+import {TimeSeries} from '../../models/time-series.model';
 
 
 @Component({
@@ -88,9 +90,11 @@ export class TimeSeriesChartComponent implements AfterContentInit, OnChanges {
       return;
     }
 
-    const timeSeries = this.lineChartService.prepareData(this.timeSeriesResults, this.selectedTrimValues);
-    this.lineChartService.prepareLegend(this.timeSeriesResults);
-    this.lineChartService.drawLineChart(timeSeries, this.timeSeriesResults.measurandGroups,
+    const timeSeries: { [key: string]: TimeSeries[] } = this.lineChartService.prepareData(this.timeSeriesResults, this.selectedTrimValues);
+    const eventData: TimeEvent[] = this.lineChartService.prepareEventsData(this.timeSeriesResults.events);
+
+    this.lineChartService.prepareLegendData(this.timeSeriesResults);
+    this.lineChartService.drawLineChart(timeSeries, eventData, this.timeSeriesResults.measurandGroups,
       this.timeSeriesResults.summaryLabels, this.timeSeriesResults.numberOfTimeSeries, this.selectedTrimValues);
 
     this.spinnerService.hideSpinner('time-series-line-chart-spinner');
@@ -102,10 +106,12 @@ export class TimeSeriesChartComponent implements AfterContentInit, OnChanges {
       return;
     }
 
-    const timeSeries = this.lineChartService.prepareData(this.timeSeriesResults, this.selectedTrimValues);
-    this.lineChartService.drawLineChart(timeSeries, this.timeSeriesResults.measurandGroups,
+    const timeSeries: { [key: string]: TimeSeries[] } = this.lineChartService.prepareData(this.timeSeriesResults, this.selectedTrimValues);
+    const eventData: TimeEvent[] = this.lineChartService.prepareEventsData(this.timeSeriesResults.events);
+
+    this.lineChartService.drawLineChart(timeSeries, eventData, this.timeSeriesResults.measurandGroups,
       this.timeSeriesResults.summaryLabels, this.timeSeriesResults.numberOfTimeSeries, this.selectedTrimValues);
-    this.lineChartService.restoreZoom(timeSeries, this.selectedTrimValues);
+    this.lineChartService.restoreZoom(timeSeries, this.selectedTrimValues, eventData);
 
     this.spinnerService.hideSpinner('time-series-line-chart-spinner');
   }

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

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

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

@@ -0,0 +1,20 @@
+export interface EventDTO {
+  id: number;
+  eventDate: Date;
+  description: string;
+  shortName: string;
+}
+
+export class TimeEvent implements EventDTO {
+  id: number;
+  eventDate: Date;
+  description: string;
+  shortName: string;
+
+  constructor(id: number, eventDate: Date, description: string, shortName: string) {
+    this.id = id;
+    this.eventDate = eventDate;
+    this.description = description;
+    this.shortName = shortName;
+  }
+}