fix: fixed bugs in PeriodUsage (wrong date labels) and TimelineBarChart (suggestedMax not set correctly)

Author: ErikBjare

src/views/activity/Activity.vue

@@ -397,10 +397,13 @@ export default {
         const new_period_length_moment = periodLengthConvertMoment(periodLength);
         new_date = moment(date).startOf(new_period_length_moment).format('YYYY-MM-DD');
       }
-      this.$router.push({
-        path: `/activity/${this.host}/${periodLength}/${new_date}/${this.subview}/${this.currentViewId}`,
-        query: this.$route.query,
-      });
+      const path = `/activity/${this.host}/${periodLength}/${new_date}/${this.subview}/${this.currentViewId}`;
+      if (this.$route.path !== path) {
+        this.$router.push({
+          path,
+          query: this.$route.query,
+        });
+      }
     },
 
     refresh: async function (force) {

src/visualizations/TimelineBarChart.vue

@@ -55,8 +55,7 @@ export default {
   computed: {
     labels() {
       const start = this.timeperiod_start;
-      const count = this.timeperiod_length[0];
-      const resolution = this.timeperiod_length[1];
+      const [count, resolution] = this.timeperiod_length;
       if (resolution.startsWith('day') && count == 1) {
         const hourOffset = get_hour_offset();
         return _.range(0, 24).map(h => `${(h + hourOffset) % 24}`);
@@ -95,6 +94,7 @@ export default {
       };
     },
     chartOptions(): ChartOptions {
+      const resolution = this.timeperiod_length[1];
       return {
         plugins: {
           tooltip: {
@@ -112,10 +112,10 @@ export default {
           y: {
             stacked: true,
             min: 0,
-            suggestedMax: this.resolution === 'day' ? 1 : undefined,
+            suggestedMax: resolution.startsWith('day') ? 1 : undefined,
             ticks: {
               callback: hourToTick,
-              stepSize: this.resolution === 'day' ? 0.25 : 1,
+              stepSize: resolution.startsWith('day') ? 0.25 : 1,
             },
           },
         },

src/visualizations/periodusage.js

@@ -4,7 +4,7 @@ const d3 = require('d3');
 const _ = require('lodash');
 const moment = require('moment');
 
-import { seconds_to_duration } from '../util/time';
+import { seconds_to_duration, get_hour_offset } from '../util/time';
 
 function create(svg_elem) {
   // Clear element
@@ -64,7 +64,7 @@ function update(svg_elem, usage_arr, onPeriodClicked) {
     let date = '';
     if (events.length > 0) {
       // slice off so it's only the day
-      date = moment(usage_arr[i][0].timestamp).format(dateformat);
+      date = moment(events[0].timestamp).subtract(get_hour_offset(), 'hours').format(dateformat);
     }
     const color = i == center_elem ? diagramcolor_selected : diagramcolor;
     const offset = 50;
@@ -113,9 +113,7 @@ function update(svg_elem, usage_arr, onPeriodClicked) {
       .on('click', function () {
         onPeriodClicked(date);
       });
-    rect
-      .append('title')
-      .text(moment(date).format(dateformat) + '\n' + seconds_to_duration(usage_time));
+    rect.append('title').text(date + '\n' + seconds_to_duration(usage_time));
   });
 }