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; formatSting: string;
@Input() @Input()
graphType = 'line'; graphType = 'line';
@Input()
minMax: number[];
readonly randomId = uuidv4(); readonly randomId = uuidv4();
@ -60,6 +62,14 @@ export class GraphComponent implements AfterViewInit {
data[i].color = this.colors[i]; 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, { const chart = new CanvasJS.Chart(this.randomId, {
animationEnabled: true, animationEnabled: true,
@ -70,6 +80,7 @@ export class GraphComponent implements AfterViewInit {
horizontalAlign: 'left', horizontalAlign: 'left',
dockInsidePlotArea: true dockInsidePlotArea: true
}, },
axisY,
data data
}); });

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

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