tvolkmann/travopti
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add price derivation graph

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-22 16:45:10 +02:00
parent 47c664894c
commit 49d207473b
4 changed files with 54 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/app/app.module.ts
View File

@ -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],

3
frontend/src/app/components/graph/graph.component.ts
View File

@ -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'},

40
frontend/src/app/containers/region-details/region-details.component.html
View File

@ -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">
<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 [monthlyDatas]="[region.precipitation]" class="graph"></app-graph>
<div class="region-stats-group">
<span class="group-title">Monthly Data</span>
<mat-tab-group>
<mat-tab *ngIf="region.avg_price_relative" label="Price Deviation">
<ng-template matTabContent>
<app-graph
[monthlyDatas]="[region.avg_price_relative]"
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>

12
frontend/src/app/containers/region-details/region-details.component.scss
View File

@ -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 {