Add price derivation graph

frontend/src/app/app.module.ts

@@ -21,7 +21,14 @@ import {TranslateModule, TranslateService} from '@ngx-translate/core';
 // @ts-ignore
 import * as enLang from '../assets/i18n/en.json';
 import {HttpClientModule} from '@angular/common/http';
-import {MatButtonToggleModule, MatCheckboxModule, MatDialogModule, MatDividerModule, MatTooltipModule} from '@angular/material';
+import {
+  MatButtonToggleModule,
+  MatCheckboxModule,
+  MatDialogModule,
+  MatDividerModule,
+  MatTabsModule,
+  MatTooltipModule
+} from '@angular/material';
 import {FormsModule} from '@angular/forms';
 import {RegionComponent} from './components/region/region.component';
 import {ResultComponent} from './components/result/result.component';
@@ -75,7 +82,8 @@ import {DeviceDetectorModule} from 'ngx-device-detector';
     MatDividerModule,
     MatTooltipModule,
     MatDialogModule,
-    DeviceDetectorModule
+    DeviceDetectorModule,
+    MatTabsModule
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -16,6 +16,8 @@ export class GraphComponent implements AfterViewInit {
   labels: string[] = [];
   @Input()
   colors: string[] = [];
+  @Input()
+  formatSting: string;
 
   readonly randomId = uuidv4();
 
@@ -29,6 +31,7 @@ export class GraphComponent implements AfterViewInit {
         type: 'line',
         color: 'black',
         showInLegend: this.labels.length > 0,
+        yValueFormatString: this.formatSting,
         dataPoints: [
           {y: monthlyData[0], x: 1, label: 'January'},
           {y: monthlyData[1], x: 2, label: 'February'},

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

@@ -22,14 +22,38 @@
   <div class="region-stats-group">
     <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">
+  <div class="region-stats-group">
-    <span class="group-title">Temperatures [°C]</span>
+    <span class="group-title">Monthly Data</span>
-    <app-graph [colors]="['blue', 'red']" [labels]="['Min', 'Max']"
+    <mat-tab-group>
-               [monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]" class="graph"></app-graph>
+      <mat-tab *ngIf="region.avg_price_relative" label="Price Deviation">
-  </div>
+        <ng-template matTabContent>
-  <div *ngIf="region.precipitation && region.precipitation[0]" class="region-stats-group">
+          <app-graph
-    <span class="group-title">Precipitation [mm]</span>
+            [monthlyDatas]="[region.avg_price_relative]"
-    <app-graph [monthlyDatas]="[region.precipitation]" class="graph"></app-graph>
+            class="graph"
+            formatSting="##,##%">
+          </app-graph>
+        </ng-template>
+      </mat-tab>
+      <mat-tab *ngIf="region.temperature_mean_max && region.temperature_mean_max[0]" label="Temperatures">
+        <ng-template matTabContent>
+          <app-graph [colors]="['blue', 'red']"
+                     [labels]="['Min', 'Max']"
+                     [monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]"
+                     class="graph"
+                     formatSting="##,##°C">
+          </app-graph>
+        </ng-template>
+      </mat-tab>
+      <mat-tab *ngIf="region.precipitation && region.precipitation[0]" label="Precipitation">
+        <ng-template matTabContent>
+          <app-graph
+            [monthlyDatas]="[region.precipitation]"
+            class="graph"
+            formatSting="####mm">
+          </app-graph>
+        </ng-template>
+      </mat-tab>
+    </mat-tab-group>
   </div>
 </div>
 

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

@@ -48,16 +48,22 @@
 .region-stats-group {
   display: flex;
   flex-direction: column;
-  margin: 1rem 0;
+  margin: 2rem 0 1rem 0;
 
   > .group-title {
-    font-size: 1.2rem;
+    font-size: 1.5rem;
   }
 
-  > .graph {
+  mat-tab-body {
+    min-height: 30vh !important;
+  }
+
+  .graph {
     height: 30vh;
     display: block;
+    margin-top: 1rem;
   }
+
 }
 
 .spinner {