Use better approach

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));
+            const monthData = []
-              let monthData = [];
+            let start = this.firstDayOfMonth(this.now())
-              let monthNum = start.getUTCMonth()
 
-              for (let i=1; i<=3; i++) {
+            for (let i=0; i<3; i++) {
-                  let end = this.lastDayOfMonth(start)
+                monthData.push(await this.heatmapData(this.addMonths(start, -i), this.lastDayOfMonth(this.addMonths(start, -i))))
+            }
 
-                  const inputdata = await this.heatmapData(start, end)
+            this.series = monthData
-                  monthData.push(inputdata)
+            this.ready = true
-                  start = new Date(Date.UTC(start.getUTCFullYear(), start.getUTCMonth()+1, 1));
-                  monthNum += 1
-              }
-              this.series = monthData.reverse()
-              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)

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