diff --git a/frontend/src/components/Service/ServiceHeatmap.vue b/frontend/src/components/Service/ServiceHeatmap.vue index 3c4749af..febaddd7 100644 --- a/frontend/src/components/Service/ServiceHeatmap.vue +++ b/frontend/src/components/Service/ServiceHeatmap.vue @@ -82,20 +82,15 @@ }, methods: { async chartHeatmap() { - let start = new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth()-2, 1)); - let monthData = []; - let monthNum = start.getUTCMonth() + const monthData = [] + let start = this.firstDayOfMonth(this.now()) - for (let i=1; i<=3; i++) { - let end = this.lastDayOfMonth(start) + for (let i=0; i<3; i++) { + monthData.push(await this.heatmapData(this.addMonths(start, -i), this.lastDayOfMonth(this.addMonths(start, -i)))) + } - const inputdata = await this.heatmapData(start, end) - monthData.push(inputdata) - start = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth()+1, 1)); - monthNum += 1 - } - this.series = monthData.reverse() - this.ready = true + this.series = monthData + this.ready = true }, async heatmapData(start, end) { const data = await Api.service_failures_data(this.service.id, this.toUnix(start), this.toUnix(end), "24h", true) diff --git a/frontend/src/mixin.js b/frontend/src/mixin.js index e5d487df..11266205 100644 --- a/frontend/src/mixin.js +++ b/frontend/src/mixin.js @@ -1,5 +1,5 @@ import Vue from "vue"; -const { startOfToday, lastDayOfMonth, subSeconds, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance } = require('date-fns') +const { startOfToday, startOfMonth, lastDayOfMonth, subSeconds, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance, addMonths } = require('date-fns') import formatDistanceToNow from 'date-fns/formatDistanceToNow' import format from 'date-fns/format' import parseISO from 'date-fns/parseISO' @@ -30,9 +30,6 @@ export default Vue.mixin({ } return format(t2, "s 'seconds'") }, - utc(val) { - return new Date.UTC(val) - }, ago(t1) { return formatDistanceToNow(parseISO(t1)) }, @@ -152,8 +149,14 @@ export default Vue.mixin({ } return Math.floor(val / 1000) + "μs" }, + firstDayOfMonth(date) { + return startOfMonth(date) + }, lastDayOfMonth(date) { return lastDayOfMonth(date) }, + addMonths(date, amount) { + return addMonths(date, amount) + } } });