Untitled
unknown
javascript
2 years ago
11 kB
2
Indexable
Never
<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>