Merge pull request #217 from ActivityWatch/dev/summary-custom-hovertext

feat: Add custom hovertext for editor summary and project

Author: johan-bjareholt

src/components/SelectableVisualization.vue

@@ -31,6 +31,7 @@ div
   div(v-if="type == 'top_editor_files'")
     aw-summary(:fields="$store.state.activity.editor.top_files",
                :namefunc="top_editor_files_namefunc",
+               :hoverfunc="top_editor_files_hoverfunc",
                :colorfunc="e => e.data.language",
                with_limit)
   div(v-if="type == 'top_editor_languages'")
@@ -41,6 +42,7 @@ div
   div(v-if="type == 'top_editor_projects'")
     aw-summary(:fields="$store.state.activity.editor.top_projects",
                :namefunc="top_editor_projects_namefunc",
+               :hoverfunc="top_editor_projects_hoverfunc",
                :colorfunc="e => e.data.language",
                with_limit)
   div(v-if="type == 'top_categories'")
@@ -103,13 +105,17 @@ export default {
         f = f[f.length - 1];
         return f;
       },
+      top_editor_files_hoverfunc: e => {
+        return 'file: ' + e.data.file + '\n' + 'project: ' + e.data.project;
+      },
       // TODO: Move this function somewhere else
       top_editor_projects_namefunc: e => {
         let f = e.data.project || '';
         f = f.split('/');
         f = f[f.length - 1];
         return f;
       },
+      top_editor_projects_hoverfunc: e => e.data.project,
     };
   },
   computed: {

src/views/activity/ActivityEditor.vue

@@ -14,6 +14,7 @@ div.mt-3
         h5 Top file activity
         aw-summary(:fields="$store.state.activity.editor.top_files",
                    :namefunc="top_editor_files_namefunc",
+                   :hoverfunc="top_editor_files_hoverfunc",
                    :colorfunc="top_editor_files_colorfunc", with_limit)
 
       div.col-md-4
@@ -26,6 +27,7 @@ div.mt-3
         h5 Top project activity
         aw-summary(:fields="$store.state.activity.editor.top_projects",
                    :namefunc="top_editor_projects_namefunc",
+                   :hoverfunc="top_editor_projects_hoverfunc",
                    :colorfunc="top_editor_projects_colorfunc", with_limit)
   br
 </template>
@@ -49,6 +51,9 @@ export default {
         f = f[f.length - 1];
         return f;
       },
+      top_editor_files_hoverfunc: e => {
+        return 'file: ' + e.data.file + '\n' + 'project: ' + e.data.project;
+      },
       top_editor_files_colorfunc: e => e.data.language,
 
       top_editor_languages_namefunc: e => e.data.language,
@@ -60,6 +65,7 @@ export default {
         f = f[f.length - 1];
         return f;
       },
+      top_editor_projects_hoverfunc: e => e.data.project,
       top_editor_projects_colorfunc: e => e.data.project,
     };
   },

src/visualizations/Summary.vue

@@ -25,6 +25,10 @@ export default {
   props: {
     fields: Array,
     namefunc: Function,
+    hoverfunc: {
+      type: Function,
+      default: null, // If not set we will default to namefunc
+    },
     colorfunc: Function,
     limit: {
       type: Number,
@@ -59,6 +63,7 @@ export default {
           el,
           this.fields.slice(0, this.limit_),
           this.namefunc,
+          this.hoverfunc,
           this.colorfunc
         );
       } else {

src/visualizations/summary.js

@@ -79,7 +79,7 @@ function update(container, apps) {
         eg.select('rect').style('fill', appcolor);
       });
 
-    eg.append('title').text(app.name + '\n' + seconds_to_duration(app.duration));
+    eg.append('title').text(app.hovertext + '\n' + seconds_to_duration(app.duration));
 
     // Color box background
     eg.append('rect')
@@ -118,9 +118,17 @@ function update(container, apps) {
   return container;
 }
 
-function updateSummedEvents(container, summedEvents, titleKeyFunc, colorKeyFunc) {
+function updateSummedEvents(container, summedEvents, titleKeyFunc, hoverKeyFunc, colorKeyFunc) {
+  if (hoverKeyFunc == null) {
+    hoverKeyFunc = titleKeyFunc;
+  }
   const apps = _.map(summedEvents, e => {
-    return { name: titleKeyFunc(e), duration: e.duration, colorKey: colorKeyFunc(e) };
+    return {
+      name: titleKeyFunc(e),
+      hovertext: hoverKeyFunc(e),
+      duration: e.duration,
+      colorKey: colorKeyFunc(e),
+    };
   });
   update(container, apps);
 }