fix: fixed coloring for 'Top Categories'

Author: ErikBjare

src/store/modules/activity.ts

@@ -2,7 +2,9 @@ import moment from 'moment';
 import { unitOfTime } from 'moment';
 import * as _ from 'lodash';
 import { map, filter, values, groupBy, sortBy, flow, reverse } from 'lodash/fp';
+
 import queries from '~/queries';
+import { getColorFromCategory } from '~/util/color';
 import { loadClassesForQuery } from '~/util/classes';
 import { get_day_start_with_offset } from '~/util/time';
 
@@ -192,7 +194,7 @@ const actions = {
   },
 
   async query_desktop_full(
-    { state, commit },
+    { state, commit, rootState, rootGetters },
     { timeperiod, filterCategories, filterAFK }: QueryOptions
   ) {
     const periods = [timeperiodToStr(timeperiod)];
@@ -206,8 +208,19 @@ const actions = {
       filterCategories
     );
     const data = await this._vm.$aw.query(periods, q);
-    commit('query_browser_completed', data[0].browser);
-    commit('query_window_completed', data[0].window);
+
+    const data_window = data[0].window;
+    const data_browser = data[0].browser;
+
+    // Set $color for categories
+    data_window.cat_events = data[0].window['cat_events'].map(e => {
+      const cat = rootGetters['categories/get_category'](e.data['$category']);
+      e.data['$color'] = getColorFromCategory(cat, rootState.categories.classes);
+      return e;
+    });
+
+    commit('query_window_completed', data_window);
+    commit('query_browser_completed', data_browser);
   },
 
   async query_browser_empty({ commit }) {

src/util/color.ts

@@ -61,6 +61,7 @@ export function getColorFromString(appname) {
 
 // TODO: Move into vuex?
 export function getColorFromCategory(c: Category, allCats: Category[]): string {
+  // Returns the color for a certain category, falling back to parents if none set
   if (c && c.data && c.data.color) {
     return c.data.color;
   } else if (c && c.name.slice(0, -1).length > 0) {

src/visualizations/SunburstCategories.vue

@@ -2,7 +2,7 @@
 // We want to use another colorscheme than the default 'schemeAccent',
 // unfortunately it seems like the color-scheme prop is broken.
 // See this issue: https://github.com/David-Desmaisons/Vue.D3.sunburst/issues/11
-sunburst(:data="data", :colorScale="(s) => colorfunc(s)", :getCategoryForColor="categoryForColor", :colorScheme="null")
+sunburst(:data="data", :colorScale="colorfunc", :getCategoryForColor="categoryForColor", :colorScheme="null")
   // Add behaviors
   template(slot-scope="{ on, actions }")
     highlightOnHover(v-bind="{ on, actions }")