Add min temperatures to chart

frontend/src/app/app.component.scss

@@ -28,7 +28,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    min-width: 10vw;
+    min-width: 12.5vw;
     box-sizing: border-box;
     padding: 1rem 0;
 
@@ -52,7 +52,7 @@
 }
 
 .content {
-  padding: 2rem;
+  padding: 1rem;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

frontend/src/app/components/graph/graph.component.ts

@@ -1,6 +1,7 @@
 import {AfterViewInit, Component, Input} from '@angular/core';
 import * as CanvasJS from './canvasjs.min';
 import {v4 as uuidv4} from 'uuid';
+import {ChartDataSeriesOptions} from 'canvasjs';
 
 @Component({
   selector: 'app-graph',
@@ -10,7 +11,11 @@ import {v4 as uuidv4} from 'uuid';
 export class GraphComponent implements AfterViewInit {
 
   @Input()
-  monthlyData: number[] = [];
+  monthlyDatas: number[][] = [];
+  @Input()
+  labels: string[] = [];
+  @Input()
+  colors: string[] = [];
 
   readonly randomId = uuidv4();
 
@@ -18,27 +23,48 @@ export class GraphComponent implements AfterViewInit {
   }
 
   ngAfterViewInit() {
+    const data: ChartDataSeriesOptions[] = [];
+    for (const monthlyData of this.monthlyDatas) {
+      data.push({
+        type: 'line',
+        color: 'black',
+        showInLegend: this.labels.length > 0,
+        dataPoints: [
+          {y: monthlyData[0], x: 1, label: 'January'},
+          {y: monthlyData[1], x: 2, label: 'February'},
+          {y: monthlyData[2], x: 3, label: 'March'},
+          {y: monthlyData[3], x: 4, label: 'April'},
+          {y: monthlyData[4], x: 5, label: 'May'},
+          {y: monthlyData[5], x: 6, label: 'June'},
+          {y: monthlyData[6], x: 7, label: 'July'},
+          {y: monthlyData[7], x: 8, label: 'August'},
+          {y: monthlyData[8], x: 9, label: 'September'},
+          {y: monthlyData[9], x: 10, label: 'October'},
+          {y: monthlyData[10], x: 11, label: 'November'},
+          {y: monthlyData[11], x: 12, label: 'December'}
+        ]
+      });
+    }
+
+    for (let i = 0; i < this.labels.length; i++) {
+      data[i].name = this.labels[i];
+    }
+
+
+    for (let i = 0; i < this.colors.length; i++) {
+      data[i].color = this.colors[i];
+    }
+
+
     const chart = new CanvasJS.Chart(this.randomId, {
       animationEnabled: true,
       exportEnabled: false,
-      data: [{
-        type: 'line',
-        color: 'green',
-        dataPoints: [
-          {y: this.monthlyData[0], label: 'January'},
-          {y: this.monthlyData[1], label: 'February'},
-          {y: this.monthlyData[2], label: 'March'},
-          {y: this.monthlyData[3], label: 'April'},
-          {y: this.monthlyData[4], label: 'May'},
-          {y: this.monthlyData[5], label: 'June'},
-          {y: this.monthlyData[6], label: 'July'},
-          {y: this.monthlyData[7], label: 'August'},
-          {y: this.monthlyData[8], label: 'September'},
-          {y: this.monthlyData[9], label: 'October'},
-          {y: this.monthlyData[10], label: 'November'},
-          {y: this.monthlyData[11], label: 'December'}
-        ]
-      }]
+      legend: {
+        verticalAlign: 'bottom',
+        horizontalAlign: 'left',
+        dockInsidePlotArea: true
+      },
+      data
     });
 
     chart.render();

frontend/src/app/containers/region-details/region-details.component.html

@@ -19,12 +19,13 @@
     <app-region-stats [region]="region" [shownKeys]="SHOWN_PROPS"></app-region-stats>
   </div>
   <div *ngIf="region.temperature_mean_max && region.temperature_mean_max[0]" class="region-stats-group">
-    <span class="group-title">Max Temperatures [°C]</span>
-    <app-graph [monthlyData]="region.temperature_mean_max" class="graph"></app-graph>
+    <span class="group-title">Temperatures [°C]</span>
+    <app-graph [colors]="['blue', 'red']" [labels]="['Min', 'Max']"
+               [monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]" class="graph"></app-graph>
   </div>
   <div *ngIf="region.precipitation && region.precipitation[0]" class="region-stats-group">
     <span class="group-title">Precipitation [mm]</span>
-    <app-graph [monthlyData]="region.precipitation" class="graph"></app-graph>
+    <app-graph [monthlyDatas]="[region.precipitation]" class="graph"></app-graph>
   </div>
 </div>