Newer
Older
<div style="height:100%;overflow:auto">
<p class="text-xs ma-1 ">
@change="$emit('layerVisibility',$event,'stationLayer')"
<svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24" fill="%23333333"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" stroke="black"/></svg>
Wetterstationen
</template>
</v-checkbox>
{{parseInt(this.mapProperties.getTemperatureBound().min)}} °C
</div>
<div
class="gradient mx-1"
:style="{ backgroundImage: createStationColorramp() }"
></div>
<div style="float:left;margin-top:5px;">
{{parseInt(this.mapProperties.getTemperatureBound().max)}} °C
step="1"
:min="daterange[0]"
:max="daterange[1]"
thumb-label="always"
</v-card-text>
</v-card>
<v-card class="ma-1">
<v-card-text>
<v-checkbox
v-model="layer1"
hide-details
@change="layerChanged('layer1')"
dense
>
<template v-slot:label>
<div>
<v-icon>
mdi-checkerboard
</v-icon>
Durchschnittstemperatur Layer 1
</div>
</template>
</v-checkbox>
<div ref="legendTemperature1" id="legendTemperature1"></div>
<v-range-slider
v-model="range1"
step="1"
:min="daterange[0]"
:max="daterange[1]"
thumb-label="always"
thumb-size="29px"
style="margin-top:1em;width:90%;margin-left:20px;margin-bottom:-25px;"
>
</v-range-slider>
</v-card-text>
</v-card>
v-model="layer2"
hide-details
@change="layerChanged('layer2')"
dense
>
<template v-slot:label>
<div>
<v-icon>
mdi-checkerboard
</v-icon>
Durchschnittstemperatur Layer 2
</div>
</template>
</v-checkbox>
<div ref="legendTemperature2" id="legendTemperature2"></div>
step="1"
:min="daterange[0]"
:max="daterange[1]"
thumb-label="always"
thumb-size="29px"
style="margin-top:1em;width:90%;margin-left:20px;margin-bottom:-25px;"
>
</v-range-slider>
</v-card-text>
</v-card>
<v-card class="ma-1">
<v-card-text>
<v-checkbox
v-model="anomalieLayer"
hide-details
@change="layerChanged('anomalieLayer')"
dense
>
<template v-slot:label>
<div>
<v-icon>
mdi-checkerboard
</v-icon>
Temperaturanomalie
</div>
</template>
</v-checkbox>
</v-card-text>
</v-card>
<v-btn
class="ma-1"
:loading="loading"
:disabled="loading"
color="blue"
@click="calculate()"
>
Berechne Anomalie
</v-btn>
.gradient{
width:75%;
float:left;
height:30px;
background-color:black;
}
</style>
import {Vue, Ref, Component, Emit, Prop } from 'vue-property-decorator';
import MapProperties from './MapProperties';
import { TemperatureSeries } from './StationLayer';
import TemperatureLegendChart from './TemperatureLegendChart';
@Component({})
export default class Legend extends Vue{
@Prop({type: MapProperties, required: true}) mapProperties: MapProperties;
private layer1: boolean = true;
private layer2: boolean = true;
private stationLayer: boolean = true;
private anomalieLayer: boolean = true;
private range1: number[] = [1960, 1990];
private range2: number[] = [1991, 2020];
private stationYear: number = 1990;
private loading: boolean = false;
axios.get("http://127.0.0.1:42000/annualMean", {
headers: {'Access-Control-Allow-Origin': '*'}
}).then(resp => {
let tChart1 = new TemperatureLegendChart();
tChart1.render("legendTemperature1", resp.data);
let tChart2 = new TemperatureLegendChart();
tChart2.render("legendTemperature2", resp.data);
});
}
public layerChanged(layer: any):void{
if(layer=="layer1"){
console.log("layerChanged "+layer+": "+this.layer1);
}else if(layer=="layer2"){
console.log("layerChanged "+layer+": "+this.layer2);
}else if(layer=="stationLayer"){
console.log("layerChanged "+layer+": "+this.stationLayer);
}
}
private calculate(): void{
setTimeout(() => (this.loading = false), 3000)
this.loading = true;
private createStationColorramp(){
let colormap: string[] = this.mapProperties.getTemperatureColorMap();
let gradientStyle = 'linear-gradient(to right, ';
gradientStyle += colormap.join(', ');
gradientStyle += ')';
return gradientStyle;
}
private getTemperatureIcon(color:string):string{
return 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" stroke="black"/></svg>';
//return this.mapProperties.getTemperatureIcon(color);
}