From c5b93bdbb9d3dcb2861eb12dfa69467d22204de3 Mon Sep 17 00:00:00 2001 From: Kevin Petit Date: Sat, 16 May 2020 16:13:57 +0200 Subject: [PATCH 1/2] Fix heatmap --- .../src/components/Service/ServiceHeatmap.vue | 8 ++- frontend/src/mixin.js | 52 ++++++++----------- 2 files changed, 26 insertions(+), 34 deletions(-) diff --git a/frontend/src/components/Service/ServiceHeatmap.vue b/frontend/src/components/Service/ServiceHeatmap.vue index 1206ab69..3c4749af 100644 --- a/frontend/src/components/Service/ServiceHeatmap.vue +++ b/frontend/src/components/Service/ServiceHeatmap.vue @@ -82,18 +82,16 @@ }, methods: { async chartHeatmap() { - let start = new Date(new Date().getUTCFullYear(), new Date().getUTCMonth()-2, 1); + let start = new Date(Date.UTC(new Date().getUTCFullYear(), new Date().getUTCMonth()-2, 1)); let monthData = []; let monthNum = start.getUTCMonth() for (let i=1; i<=3; i++) { - let end = this.lastDayOfMonth(monthNum) - - window.console.log("getting: ",start, end) + let end = this.lastDayOfMonth(start) const inputdata = await this.heatmapData(start, end) monthData.push(inputdata) - start = new Date(start.getUTCFullYear(), start.getUTCMonth()+1, 1); + start = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth()+1, 1)); monthNum += 1 } this.series = monthData.reverse() diff --git a/frontend/src/mixin.js b/frontend/src/mixin.js index d1a285b6..e5d487df 100644 --- a/frontend/src/mixin.js +++ b/frontend/src/mixin.js @@ -1,5 +1,5 @@ import Vue from "vue"; -const { zonedTimeToUtc, utcToZonedTime, startOfToday, lastDayOfMonth, subSeconds, parse, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance } = require('date-fns') +const { startOfToday, lastDayOfMonth, subSeconds, getUnixTime, fromUnixTime, differenceInSeconds, formatDistance } = require('date-fns') import formatDistanceToNow from 'date-fns/formatDistanceToNow' import format from 'date-fns/format' import parseISO from 'date-fns/parseISO' @@ -19,26 +19,23 @@ export default Vue.mixin({ startToday() { return startOfToday() }, - secondsHumanize (val) { - const t2 = addSeconds(new Date(0), val) - if (val >= 60) { - let minword = "minute" - if (val >= 120) { - minword = "minutes" - } - return format(t2, "m '"+minword+"' s 'seconds'") - } - return format(t2, "s 'seconds'") - }, + secondsHumanize (val) { + const t2 = addSeconds(new Date(0), val) + if (val >= 60) { + let minword = "minute" + if (val >= 120) { + minword = "minutes" + } + return format(t2, "m '"+minword+"' s 'seconds'") + } + return format(t2, "s 'seconds'") + }, utc(val) { return new Date.UTC(val) }, ago(t1) { return formatDistanceToNow(parseISO(t1)) }, - daysInMonth(t1) { - return lastDayOfMonth(t1) - }, nowSubtract(seconds) { return subSeconds(new Date(), seconds) }, @@ -51,9 +48,9 @@ export default Vue.mixin({ niceDate(val) { return format(parseISO(val), "EEEE, MMM do h:mma") }, - parseISO(v) { - return parseISO(v) - }, + parseISO(v) { + return parseISO(v) + }, toUnix(val) { return getUnixTime(val) }, @@ -149,17 +146,14 @@ export default Vue.mixin({ }) return {data: newSet} }, - humanTime(val) { - if (val >= 10000) { - return Math.floor(val / 10000) + "ms" - } - return Math.floor(val / 1000) + "μs" - }, - lastDayOfMonth(month) { - return new Date(Date.UTC(new Date().getUTCFullYear(), month + 1, 0)) + humanTime(val) { + if (val >= 10000) { + return Math.floor(val / 10000) + "ms" + } + return Math.floor(val / 1000) + "μs" + }, + lastDayOfMonth(date) { + return lastDayOfMonth(date) }, - firstDayOfMonth(month) { - return new Date(Date.UTC(new Date().getUTCFullYear(), month, 1)).getUTCDate() - } } }); From 8dfe8d6344c47aecd6d8c6cf64580560d57fe142 Mon Sep 17 00:00:00 2001 From: Kevin Petit Date: Wed, 20 May 2020 00:37:20 +0200 Subject: [PATCH 2/2] Use better approach --- .../src/components/Service/ServiceHeatmap.vue | 19 +++++++------------ frontend/src/mixin.js | 11 +++++++---- 2 files changed, 14 insertions(+), 16 deletions(-) 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) + } } });