feat: enhance colorisation for Top Window Titles (#654)

* feat: enhance colorisation for Top Window Titles

* Use `useCategoryStore().get_category_color`

* Update type definitions

Author: BelKed

src/components/SelectableVisualization.vue

@@ -31,7 +31,7 @@ div
     div(v-if="type == 'top_titles'")
       aw-summary(:fields="activityStore.window.top_titles",
                  :namefunc="e => e.data.title",
-                 :colorfunc="e => e.data.title",
+                 :colorfunc="e => e.data['$category']",
                  with_limit)
     div(v-if="type == 'top_domains'")
       aw-summary(:fields="activityStore.browser.top_domains",
@@ -68,7 +68,7 @@ div
     div(v-if="type == 'top_categories'")
       aw-summary(:fields="activityStore.category.top",
                  :namefunc="e => e.data['$category'].join(' > ')",
-                 :colorfunc="e => e.data['$category'].join(' > ')",
+                 :colorfunc="e => e.data['$category']",
                  :linkfunc="e => '#' + $route.path + '?category=' + encodeURIComponent(e.data['$category'].join('>'))",
                  with_limit)
     div(v-if="type == 'category_tree'")

src/visualizations/summary.ts

@@ -4,6 +4,7 @@ import * as d3 from 'd3';
 import Color from 'color';
 import _ from 'lodash';
 
+import { useCategoryStore } from '~/stores/categories';
 import { getCategoryColorFromString } from '~/util/color';
 import { seconds_to_duration } from '~/util/time';
 import { IEvent } from '~/util/interfaces';
@@ -40,8 +41,9 @@ interface Entry {
   hovertext: string;
   duration: number;
   color?: string;
-  colorKey?: string;
+  colorKey?: string | string[];
   link?: string;
+  category?: string;
 }
 
 function update(container: HTMLElement, apps: Entry[]) {
@@ -69,7 +71,15 @@ function update(container: HTMLElement, apps: Entry[]) {
     const width = (app.duration / longest_duration) * 100 + '%';
     const barHeight = 46;
     const textSize = 14;
-    const appcolor = app.color || getCategoryColorFromString(app.colorKey || app.name);
+
+    let appcolor: string;
+    if (Array.isArray(app.colorKey)) {
+      const categoryStore = useCategoryStore();
+      appcolor = categoryStore.get_category_color(app.colorKey);
+    } else {
+      appcolor = app.color || getCategoryColorFromString(app.colorKey || app.name);
+    }
+
     const hovercolor = Color(appcolor).darken(0.1).hex();
 
     // Add a parent <a> element if link is set
@@ -143,6 +153,7 @@ function updateSummedEvents(
       color: e.data['$color'],
       colorKey: colorKeyFunc(e),
       link: linkKeyFunc(e),
+      category: e.data['$category'],
     } as Entry;
   });
   update(container, apps);