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

Add fixed graph scales

Browse Source
This commit is contained in:
Patrick Gebhardt 2020-06-25 21:41:28 +02:00
parent 28b25da1ad
commit eaaee3c14a
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,8 @@ export class GraphComponent implements AfterViewInit {
formatSting: string;
@Input()
graphType = 'line';
@Input()
minMax: number[];
readonly randomId = uuidv4();
@ -60,6 +62,14 @@ export class GraphComponent implements AfterViewInit {
data[i].color = this.colors[i];
}
let axisY: CanvasJS.ChartOptions.ChartAxisY;
if (this.minMax) {
axisY = {
minimum: this.minMax[0],
maximum: this.minMax[1]
};
}
const chart = new CanvasJS.Chart(this.randomId, {
animationEnabled: true,
@ -70,6 +80,7 @@ export class GraphComponent implements AfterViewInit {
horizontalAlign: 'left',
dockInsidePlotArea: true
},
axisY,
data
});

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

@ -36,25 +36,27 @@
<ng-template matTabContent>
<app-graph [colors]="['blue', 'red']" [labels]="['Min', 'Max']"
[monthlyDatas]="[region.temperature_mean_min, region.temperature_mean_max]" class="graph"
formatSting="##,##°C">
[minMax]="[-25, 50]" formatSting="##,##°C">
</app-graph>
</ng-template>
</mat-tab>
<mat-tab *ngIf="region.precipitation" label="Precipitation">
<ng-template matTabContent>
<app-graph [monthlyDatas]="[region.precipitation]" class="graph" formatSting="####'mm'">
<app-graph [minMax]="[0, 1200]" [monthlyDatas]="[region.precipitation]" class="graph" formatSting="####'mm'">
</app-graph>
</ng-template>
</mat-tab>
<mat-tab *ngIf="region.rain_days" label="Rain days">
<ng-template matTabContent>
<app-graph [monthlyDatas]="[region.rain_days]" class="graph" formatSting="####" graphType="column">
<app-graph [minMax]="[0, 31]" [monthlyDatas]="[region.rain_days]" class="graph" formatSting="####"
graphType="column">
</app-graph>
</ng-template>
</mat-tab>
<mat-tab *ngIf="region.sun_hours" label="Sun hours">
<ng-template matTabContent>
<app-graph [monthlyDatas]="[region.sun_hours]" class="graph" formatSting="####" graphType="column">
<app-graph [minMax]="[0, 450]" [monthlyDatas]="[region.sun_hours]" class="graph" formatSting="####"
graphType="column">
</app-graph>
</ng-template>
</mat-tab>