Untitled

<template>
    <div class="electricity-pricing-chart__inner">
        <div class="electricity-pricing-chart__options">
            <div class="electricity-pricing-chart__filler"></div>
            <div class="electricity-pricing-chart__date"><button @click="decreaseDateOffset">-</button><span>{{
                    currentDate
            }}</span><button @click="increaseDateOffset" :disabled="dateOffset == 0">+</button>
            </div>
            <div class="electricity-pricing-chart__datasets">
                <input @change="getPricingData" type="radio" id="dk1" name="currentDataset" value="DK1"
                    v-model="deliveryArea" />
                <label for="dk1">{{ dictionary.ElectricityPricingChartWestLabel }}</label>
                <input @change="getPricingData" type="radio" id="dk2" name="currentDataset" value="DK2"
                    v-model="deliveryArea" />
                <label for="dk2">{{ dictionary.ElectricityPricingChartEastLabel }}</label>
            </div>

        </div>
        <div class="electricity-pricing-chart__current-price" :class="{'electricity-pricing-chart__current-price--hidden' : dateOffset != 0}" >

                <small>{{ dictionary.ElectricityPricingChartCurrentPriceLabel }}</small>
                <p>{{ currentPrice }} <span>{{ dictionary.ElectricityPricingChartPriceLabel }}</span></p>
        </div>

        <Chart type="bar" :data="chartData" :options="chartOptions" />
        <p class="electricity-pricing-chart__price-info">{{ dictionary.ElectricityPricingChartPriceInfo }}</p>
        <div class="electricity-pricing-chart__price-boxes">
            <div v-if="highestPrice != null"
                class="electricity-pricing-chart__price-box electricity-pricing-chart__price-box--cheap">
                <p><span class="electricity-pricing-chart__price-box-title">{{
                        dictionary.ElectricityPricingChartLowestPriceLabel
                }}</span> <br />
                    {{ dictionary.ElectricityPricingChartTimeLabel }} {{ lowestPrice.timespan }} <br />
                    @ <br />
                    {{ lowestPrice.value }} {{ dictionary.ElectricityPricingChartPriceLabel }}</p>

            </div>
            <div v-if="highestPrice != null"
                class="electricity-pricing-chart__price-box electricity-pricing-chart__price-box--expensive">
                <p><span class="electricity-pricing-chart__price-box-title">{{
                        dictionary.ElectricityPricingChartHighestPriceLabel
                }}</span><br />
                    {{ dictionary.ElectricityPricingChartTimeLabel }} {{ highestPrice.timespan }}<br />
                    @<br />
                    {{ highestPrice.value }} {{ dictionary.ElectricityPricingChartPriceLabel }}</p>

            </div>
            <div class="electricity-pricing-chart__price-box">
                <p><span class="electricity-pricing-chart__price-box-title">{{
                        dictionary.ElectricityPricingChartAveragePriceLabel
                }}</span><br />
                    {{ currentDate }}<br />
                    @<br />
                    {{ averagePrice }} {{ dictionary.ElectricityPricingChartPriceLabel }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import Chart from 'primevue/chart';
export default {
    name: "electricityPricingChart",
    components: {
        Chart
    },
    data() {
        return {
            dictionary: [],
            deliveryArea: 'DK1',
            dateOffset: 0,
            currentDateRaw: null,
            lowestPrice: null,
            highestPrice: null,
            averagePrice: null,
            currentPrice: null,
            chartData: {
                labels: [],
                datasets: [
                ]
            }
        };
    },
    computed: {
        chartOptions() {
            var vm = this;
            return {
                responsive: true,
                elements: {
                },
                scales: {
                    y: {
                        display: true,
                        title: {
                            display: true,
                            text: vm.dictionary.YAxisLabel
                        },
                        grid: { display: false }
                    },
                    x: {
                        grid: { display: false }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        displayColors: false,
                        callbacks: {
                            title: function (context) {
                                return vm.dictionary.ElectricityPricingChartTimeLabel + " " + context[0].label;
                            },
                            label: function (context) {
                                return context.formattedValue + " " + vm.dictionary.ElectricityPricingChartPriceLabel;
                            }
                        }
                    }
                }
            }

        },
        currentDate() {
            const vm = this;
            if (vm.currentDateRaw != null) {
                const dateObject = new Date(this.currentDateRaw);
                let prefix = '';
                if (vm.dateOffset == 0) {
                    prefix = vm.dictionary.ElectricityPricingChartCurrentDatePrefix;
                } else if (this.dateOffset == -1) {
                    prefix = vm.dictionary.ElectricityPricingChartLastDayPrefix;
                }
                return `${prefix}${dateObject.getDate()}. ${vm.getMonthString(dateObject.getMonth())} ${dateObject.getFullYear()}`;
            }
            return '';
        }
    },
    created() {
        this.dictionary = JSON.parse(this.$parent.dictionary);
    },
    mounted() { this.getPricingData() },
    methods: {
        getMonthString: function (monthIndex) {
            const months = this.dictionary.ElectricityPricingChartMonths.split(',');
            return months[monthIndex];
        },
        getPricingData: function () {
            const vm = this;
            vm.toggleSpinner(true);
            fetch(`/umbraco/api/NordpoolApi/GetMarketDataDayAhead?deliveryArea=${vm.deliveryArea}&offset=${vm.dateOffset}`).then(response => response.json()).then(data => {
                vm.chartData.datasets = [];
                //The API returns two datasets, get the newest one
                data.sort(function (a, b) {
                    if (a.createdTime > b.createdTime) {
                        return -1;
                    }
                    if (a.createdTime < b.createdTime) {
                        return 1;
                    }
                    return 0;
                });
                vm.currentDateRaw = Date.parse(data[0].startTime);

                //Generate bar colors and transform the values of the dataset and add them to the model
                const hourOfTheDay = new Date(Date.now()).getHours();
                const rawDatasetValues = data[0].values.map(val => val.value);
                const indexOflowestPrice = rawDatasetValues.indexOf(Math.min(...rawDatasetValues));
                const indexOfhighestPrice = rawDatasetValues.indexOf(Math.max(...rawDatasetValues));
                const backgroundColors = [];
                for (let i = 0; i < rawDatasetValues.length; i++) { //For some reason, a switch didnt work..
                    if (i == hourOfTheDay) {
                        backgroundColors.push('rgba(0, 66, 95,0.8)');
                        continue;
                    }
                    if (i == indexOfhighestPrice) {
                        backgroundColors.push('rgba(186, 84, 84,0.5)');
                        continue;
                    }
                    if (i == indexOflowestPrice) {
                        backgroundColors.push('rgba(126, 186, 84,0.5)');
                        continue;
                    }
                    backgroundColors.push('rgba(225, 227, 228,1)');
                    continue;
                }
                const dataset = {
                    data: rawDatasetValues.map(val => (val / 10).toFixed(2)),
                    backgroundColor: backgroundColors
                }
                vm.highestPrice = {
                    timespan: vm.getTimespanString(indexOfhighestPrice, true),
                    value: (rawDatasetValues[indexOfhighestPrice] / 10).toFixed(2)
                };
                vm.lowestPrice = {
                    timespan: vm.getTimespanString(indexOflowestPrice, true),
                    value: (rawDatasetValues[indexOflowestPrice] / 10).toFixed(2)
                }

                vm.averagePrice = ((rawDatasetValues.reduce((a, b) => a + b, 0) / rawDatasetValues.length) / 10).toFixed(2);
                vm.currentPrice = (rawDatasetValues[hourOfTheDay] / 10).toFixed(2);
                vm.chartData.datasets.push(dataset);


                //Generate labels based on dataset content and add them to the model
                vm.chartData.labels = [];
                for (let i = 0; i < dataset.data.length; i++) {
                    vm.chartData.labels.push(vm.getTimespanString(i, false));
                }

                vm.toggleSpinner(false);

            }).catch(error => {
                console.log(error);
                vm.toggleSpinner(false);
            });
        },
        getTimespanString(value, longVersion) {
            let prefix = '';
            if (value < 10) {
                prefix = '0';
            }

            if (longVersion) {
                return `${prefix}${value}.00 - ${prefix}${value}.59`;
            } else {
                return prefix + value;
            }
        },
        decreaseDateOffset: function () {
            this.dateOffset--;
            this.getPricingData();
        },
        increaseDateOffset: function () {
            if (this.dateOffset < 0) {
                this.dateOffset++;
                this.getPricingData();
            }
        },
        toggleSpinner: function (isLoading) {
            this.isLoading = isLoading;
            const bodyElement = document.querySelector("body");
            if (isLoading) {
                bodyElement.classList.add("is-loading");
            } else {
                bodyElement.classList.remove("is-loading");
            }
        },
    },
};
</script>