[IT-2793] Fix legend

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/aggregation/components/aggregation-chart/aggregation-chart.component.ts

@@ -417,7 +417,6 @@ export class AggregationChartComponent implements OnChanges {
           .attr('width', ChartCommons.COLOR_PREVIEW_SIZE)
           .attr("rx", 2)
           .attr("ry", 2)
-          .attr("ry", 2)
           .attr('fill', datum => this.measurandDataMap[datum].color);
         legendElement
           .append('text')

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

@@ -1,8 +1,5 @@
 <div class="time-series-line-chart-container">
   <div class="card">
-    <div class="svg-container">
-    <svg #svg id="time-series-svg" class="time-series-svg" xmlns="http://www.w3.org/1999/html">
-    </svg>
-    </div>
+    <svg #svg />
   </div>
 </div>

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

@@ -4,16 +4,6 @@ osm-time-series-line-chart {
   visibility: hidden;
 }
 
-/*.aggregation-chart {
-  position: relative;
-  width: 100%;
-}*/
-
-svg.time-series-svg {
-  width: 100%;
-  height: 100%;
-}
-
 #time-series-chart-drawing-area {
   .axis {
     .domain {
@@ -23,6 +13,7 @@ svg.time-series-svg {
     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,16 +58,7 @@ export class TimeSeriesLineChartComponent implements AfterContentInit, OnChanges
   }
 
   redraw() {
-    this.lineChartService.initLegendData(this.timeSeriesResults);
+    this.lineChartService.setLegendData(this.timeSeriesResults);
     this.lineChartService.drawLineChart(this.timeSeriesResults);
   }
-
-  ngAfterContentInit(): void {
-    this.lineChartService.initChart(this.svgElement);
-  }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.redraw();
-  }
-
 }