Legend.vue

<template>
    
    <div style="height:100%;overflow:auto">
        <p class="text-xs ma-1 ">
            Legende
        </p>
         <v-card  class="mx-1">

            <v-card-text>
                <v-checkbox
                    v-model="stationLayer"
                    hide-details
                    @change="layerChanged('stationLayer')"
                    dense
                >
                    <template v-slot:label>
                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" viewBox="0 0 24 24" fill="%23000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" stroke="black"/></svg>   
                        Wetterstationen
                    </template>
                </v-checkbox>
                <div>
                    <div style="float:left;margin-top:5px;">   
                        -20 °C
                    </div>
                    <div 
                        class="gradient mx-1"
                        :style="{ backgroundImage: createStationColorramp() }"
                    ></div>
                    <div style="float:left;margin-top:5px;">   
                        10 °C
                    </div>

                </div>
                <v-slider
                    width="50px"
                    v-model="stationYear"
                    step="1"
                    :min="daterange[0]"
                    :max="daterange[1]"
                    thumb-label="always"
                    thumb-size="29px"
                    style="margin-top:4em;margin-bottom:-25px;"
                    dense
                    @change="$emit('stationUpdate', $event)"
                >
                </v-slider>
                
            </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;"
                    dense
                >
                </v-range-slider>
            </v-card-text>
        </v-card>
        
        <v-card class="ma-1">
            <v-card-text>
                
                <v-checkbox
                    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>
                <v-range-slider
                    v-model="range2"
                    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;"
                    dense
                >
                </v-range-slider>
            </v-card-text>
        </v-card>
        <v-card class="ma-1">
            <v-card-text>
                <v-checkbox
                    v-model="anomalieLayer"
                    label="Temperaturanomalie"
                    hide-details
                    @change="layerChanged('anomalieLayer')"
                    dense
                ></v-checkbox>
            </v-card-text>
        </v-card>

        <v-btn
        class="ma-1"
        :loading="loading"
        :disabled="loading"
        color="blue"
        @click="calculate()"
        >
            Berechne Anomalie
        </v-btn>
    </div>
    
</template>

<style scoped>

.gradient{
    width:75%;
    float:left;
    height:30px;
    background-color:black;
}

</style>

<script lang="ts">

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 daterange: number[] = [1940, 2020];
    private range1: number[] = [1960, 1990];
    private range2: number[] = [1991, 2020];
    private stationYear: number = 1990;
    private loading: boolean = false;
    
    mounted(){
        console.log("Legend mounted");

        let series: TemperatureSeries[] = new Array<TemperatureSeries>();
        
        series.push({date: 2005, value: 3});
        series.push({date: 2006, value: 5});
        series.push({date: 2007, value: 7});
        series.push({date: 2008, value: 4});
        series.push({date: 2009, value: 9});
        series.push({date: 2010, value: 3});
        series.push({date: 2011, value: 5});
        series.push({date: 2012, value: 7});
        series.push({date: 2013, value: 4});
        series.push({date: 2014, value: 9});

        let tChart1 = new TemperatureLegendChart();
        tChart1.render("legendTemperature1", series);

        let tChart2 = new TemperatureLegendChart();
        tChart2.render("legendTemperature2", series);
    }

    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);
    }

}
</script>