refactor: rename vis to TopBucketData

Author: RTnhN

src/components/SelectableVisualization.vue

@@ -90,8 +90,8 @@ div
                  :namefunc="e => e.data.label",
                  :colorfunc="e => e.data.label",
                  with_limit)
-    div(v-if="type == 'watcher_columns'")
-      aw-watcher-columns(
+    div(v-if="type == 'top_bucket_data'")
+      aw-top-bucket-data(
         :initialBucketId="props ? props.bucketId : ''",
         :initialField="props ? props.field : ''",
         :initialCustomField="props ? props.customField : ''",
@@ -167,7 +167,7 @@ export default {
         'vis_timeline',
         'score',
         'top_stopwatches',
-        'watcher_columns',
+        'top_bucket_data',
       ],
       // TODO: Move this function somewhere else
       top_editor_files_namefunc: e => {
@@ -261,8 +261,8 @@ export default {
           title: 'Top Stopwatch Events',
           available: this.activityStore.stopwatch.available,
         },
-        watcher_columns: {
-          title: 'Watcher Columns',
+        top_bucket_data: {
+          title: 'Top Bucket Data',
           available: true,
         },
       };

src/main.js

@@ -52,7 +52,7 @@ Vue.component('aw-summary', () => import('./visualizations/Summary.vue'));
 Vue.component('aw-periodusage', () => import('./visualizations/PeriodUsage.vue'));
 Vue.component('aw-eventlist', () => import('./visualizations/EventList.vue'));
 Vue.component('aw-sunburst-categories', () => import('./visualizations/SunburstCategories.vue'));
-Vue.component('aw-watcher-columns', () => import('./visualizations/WatcherColumns.vue'));
+Vue.component('aw-top-bucket-data', () => import('./visualizations/TopBucketData.vue'));
 Vue.component('aw-sunburst-clock', () => import('./visualizations/SunburstClock.vue'));
 Vue.component('aw-timeline-inspect', () => import('./visualizations/TimelineInspect.vue'));
 Vue.component('aw-timeline', () => import('./visualizations/TimelineSimple.vue'));

src/visualizations/WatcherColumns.vue src/visualizations/TopBucketData.vuesrc/visualizations/WatcherColumns.vue renamed to src/visualizations/TopBucketData.vue

@@ -2,7 +2,7 @@
 div
   b-row
     b-col(cols="12", md="6").mb-2
-      b-form-group(label="Watcher (bucket)")
+      b-form-group(label="Bucket")
         b-form-select(
           v-model="selectedBucketId",
           :options="bucketOptions",
@@ -65,7 +65,7 @@ function formatValue(value: unknown): string {
   return String(value);
 }
 export default {
-  name: 'aw-watcher-columns',
+  name: 'aw-top-bucket-data',
   props: {
     initialBucketId: { type: String, default: '' },
     initialField: { type: String, default: '' },
@@ -198,6 +198,8 @@ export default {
         this.aggregated = [];
         return;
       }
+      // Even though the user should start the manual data fields with "data", we want
+      // to gracefully let it pass. Chances are there are no nested data.data.title. 
       const path = fieldValue.startsWith('data.') ? fieldValue : `data.${fieldValue}`;
       const grouped = new Map<string, AggregatedEvent>();
       this.events.forEach(e => {