Merge pull request #284 from iteratec/feature/addTimeSeriesLegends

Feature/add time series legends

Author: DanielSteger

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

@@ -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/modules/time-series/components/time-series-line-chart/time-series-line-chart.component.html

@@ -1,7 +1,5 @@
 <div class="time-series-line-chart-container">
   <div class="card">
-    <svg #svg>
-      <g class="time-series-chart"></g>
-    </svg>
+    <svg #svg />
   </div>
 </div>

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

@@ -13,6 +13,7 @@ osm-time-series-line-chart {
     line {
       stroke: $color-contour-medium;
     }
+
     text {
       fill: $color-text-light;
     }

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

@@ -18,7 +18,7 @@ import {LineChartService} from '../../services/line-chart.service';
   selector: 'osm-time-series-line-chart',
   encapsulation: ViewEncapsulation.None,  // needed! otherwise the scss style do not apply to svg content (see https://stackoverflow.com/questions/36214546/styles-in-component-for-d3-js-do-not-show-in-angular-2/36214723#36214723)
   templateUrl: './time-series-line-chart.component.html',
-  styleUrls: [ './time-series-line-chart.component.scss' ]
+  styleUrls: ['./time-series-line-chart.component.scss']
 })
 export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges {
 
@@ -32,13 +32,22 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
 
   constructor(
     private lineChartService: LineChartService
-  ) {}
+  ) {
+  }
+
+  ngAfterContentInit(): void {
+    this.lineChartService.initChart(this.svgElement);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.redraw();
+  }
 
   @HostListener('window:resize', ['$event'])
   windowIsResized() {
     this.lineChartService.startResize(this.svgElement);
 
-    // Wati until the resize is done before redrawing the chart
+    // Wait until the resize is done before redrawing the chart
     clearTimeout(this._resizeTimeoutId);
     this._resizeTimeoutId = window.setTimeout(() => {
       this.lineChartService.resizeChart(this.svgElement);
@@ -49,15 +58,7 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
   }
 
   redraw() {
+    this.lineChartService.setLegendData(this.timeSeriesResults);
     this.lineChartService.drawLineChart(this.timeSeriesResults);
   }
-
-  ngAfterContentInit(): void {
-    this.lineChartService.initChart(this.svgElement);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.redraw();
-  }
-
 }