diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 487f5fe..da36f83 100644 --- a/frontend/src/app/app.module.ts +++ b/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], diff --git a/frontend/src/app/components/graph/graph.component.ts b/frontend/src/app/components/graph/graph.component.ts index aa1a3bb..4f4b41e 100644 --- a/frontend/src/app/components/graph/graph.component.ts +++ b/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'}, diff --git a/frontend/src/app/containers/region-details/region-details.component.html b/frontend/src/app/containers/region-details/region-details.component.html index acd6cbb..4150ad5 100644 --- a/frontend/src/app/containers/region-details/region-details.component.html +++ b/frontend/src/app/containers/region-details/region-details.component.html @@ -22,14 +22,38 @@
-
- Temperatures [°C] - -
-
- Precipitation [mm] - +
+ Monthly Data + + + + + + + + + + + + + + + + + + + +
diff --git a/frontend/src/app/containers/region-details/region-details.component.scss b/frontend/src/app/containers/region-details/region-details.component.scss index 7d56b93..177cc04 100644 --- a/frontend/src/app/containers/region-details/region-details.component.scss +++ b/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 {