feat: added timeline visualization in Activity view (#380)

* feat: Chronological timeline visualization

- Also fixes large visualizations not being displaced as col-lg-12

* fix perf on mounted

src/components/SelectableVisualization.vue

@@ -76,6 +76,8 @@ div
       aw-sunburst-clock(:date="date", :afkBucketId="activityStore.buckets.afk[0]", :windowBucketId="activityStore.buckets.window[0]")
     div(v-if="type == 'custom_vis'")
       aw-custom-vis(:visname="props.visname" :title="props.title")
+    div(v-if="type == 'vis_timeline' && isSingleDay")
+      vis-timeline(:buckets="timeline_buckets", :showRowLabels='true', :queriedInterval="timeline_daterange")
 </template>
 
 <style lang="scss">
@@ -103,6 +105,9 @@ import { build_category_hierarchy } from '~/util/classes';
 
 import { useActivityStore } from '~/stores/activity';
 import { useCategoryStore } from '~/stores/categories';
+import { useBucketsStore } from '~/stores/buckets';
+
+import moment from 'moment';
 
 function pick_subname_as_name(c) {
   c.name = c.subname;
@@ -137,6 +142,7 @@ export default {
         'timeline_barchart',
         'sunburst_clock',
         'custom_vis',
+        'vis_timeline',
       ],
       // TODO: Move this function somewhere else
       top_editor_files_namefunc: e => {
@@ -156,6 +162,7 @@ export default {
         return f;
       },
       top_editor_projects_hoverfunc: e => e.data.project,
+      timeline_buckets: null,
     };
   },
   computed: {
@@ -209,6 +216,10 @@ export default {
           title: 'Sunburst clock',
           available: this.activityStore.window.available && this.activityStore.active.available,
         },
+        vis_timeline: {
+          title: 'Daily Timeline (Chronological)',
+          available: true,
+        },
         custom_vis: {
           title: 'Custom Visualization',
           available: true, // TODO: Implement
@@ -219,7 +230,7 @@ export default {
       return this.visualizations[this.type].available;
     },
     supports_period: function () {
-      if (this.type == 'sunburst_clock') {
+      if (this.type == 'sunburst_clock' || this.type == 'vis_timeline') {
         return this.isSingleDay;
       }
       return true;
@@ -259,9 +270,44 @@ export default {
       }
       return date;
     },
+    timeline_daterange: function () {
+      let date = this.activityStore.query_options.date;
+      if (!date) {
+        date = this.activityStore.query_options.timeperiod.start;
+      }
+
+      // Get events data from CurrentData ± 1 Day so that there is some continuity
+      return [moment(date).subtract(1, 'day'), moment(date).add(1, 'day')];
+    },
     isSingleDay: function () {
       return _.isEqual(this.activityStore.query_options.timeperiod.length, [1, 'day']);
     },
   },
+  watch: {
+    timeline_daterange: async function () {
+      await this.getTimelineBuckets();
+    },
+    type: async function (newType) {
+      if (newType == 'vis_timeline') await this.getTimelineBuckets();
+    },
+  },
+  mounted: async function () {
+    if (this.type == 'vis_timeline') {
+      await this.getTimelineBuckets();
+    }
+  },
+  methods: {
+    getTimelineBuckets: async function () {
+      if (!this.timeline_daterange) return;
+
+      await useBucketsStore().ensureLoaded();
+      this.timeline_buckets = Object.freeze(
+        await useBucketsStore().getBucketsWithEvents({
+          start: this.timeline_daterange[0].format(),
+          end: this.timeline_daterange[1].format(),
+        })
+      );
+    },
+  },
 };
 </script>

src/views/activity/ActivityView.vue

@@ -2,7 +2,7 @@
 div(v-if="view")
   draggable.row(v-model="elements" handle=".handle")
     // TODO: Handle large/variable sized visualizations better
-    div.col-md-6.col-lg-4.p-3(v-for="el, index in elements", :key="index", :class="{'col-md-12': isVisLarge(el), 'col-lg-8': isVisLarge(el)}")
+    div.col-md-6.col-lg-4.p-3(v-for="el, index in elements", :key="index", :class="{'col-md-12': isVisLarge(el), 'col-lg-12': isVisLarge(el)}")
       aw-selectable-vis(:id="index" :type="el.type" :props="el.props" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")
 
     div.col-md-6.col-lg-4.p-3(v-if="editing")
@@ -120,7 +120,7 @@ export default {
       await useViewsStore().removeVisualization({ view_id: this.view.id, el_id: id });
     },
     isVisLarge(el) {
-      return el.type == 'sunburst_clock';
+      return el.type == 'sunburst_clock' || el.type == 'vis_timeline';
     },
   },
 };