feat: started working on category colors

Author: ErikBjare

src/components/CategoryEditTree.vue

@@ -8,6 +8,7 @@ div
         span(v-else style="opacity: 0.6")
           icon(name="circle" scale="0.4" style="margin-left: 1em; margin-right: 1.22em;")
         | {{ _class.name.slice(depth).join(" ➤ ")}}
+        icon.ml-1(v-if="_class.data && _class.data.color" name="circle" :style="'color: ' + _class.data.color")
         span.ml-1(v-if="_class.children.length > 0" style="opacity: 0.5") ({{totalChildren}})
 
     div.col-4.col-md-8
@@ -44,6 +45,25 @@ div
 
     hr
 
+    div.my-1
+      b Color
+
+      b-form-checkbox(v-model="editing.inherit_color" switch)
+        | Inherit parent color
+      b-input-group.my-1(prepend="Color" v-if="!editing.inherit_color")
+        b-form-input(v-model="editing.color", placeholder="#FF0")
+        icon.mt-1.ml-2(name="circle" scale="1.8" :style="{'color': editing.color}")
+        b-btn.px-1(@click="randomColor()" style="border: 0" variant="outline-dark" title="Randomize")
+          icon(name="sync" scale="1.5")
+
+    //
+      div.my-1
+        b Productivity score
+        b-input-group.my-1(prepend="Points")
+          b-form-input(v-model="editing.productivity")
+
+    hr
+
     div.my-1
       b-btn(variant="danger", @click="removeClass(_class); $refs.edit.hide()")
         icon(name="trash")
@@ -58,6 +78,7 @@ import 'vue-awesome/icons/caret-right';
 import 'vue-awesome/icons/trash';
 import 'vue-awesome/icons/plus';
 import 'vue-awesome/icons/edit';
+import 'vue-awesome/icons/sync';
 
 import _ from 'lodash';
 
@@ -78,6 +99,8 @@ export default {
         name: null,
         rule: {},
         parent: [],
+        inherit_color: true,
+        color: null,
       },
     };
   },
@@ -140,6 +163,7 @@ export default {
         id: this.editing.id,
         name: this.editing.parent.concat(this.editing.name),
         rule: this.editing.rule.type !== null ? this.editing.rule : { type: null },
+        data: { color: this.editing.inherit_color === true ? undefined : this.editing.color },
       };
       this.$store.commit('categories/updateClass', new_class);
 
@@ -149,14 +173,21 @@ export default {
       });
     },
     resetModal() {
+      const color = this._class.data ? this._class.data.color : undefined;
+      const inherit_color = !color;
       this.editing = {
         id: this._class.id,
         name: this._class.subname,
         rule: _.cloneDeep(this._class.rule),
+        color,
+        inherit_color,
         parent: this._class.parent ? this._class.parent : [],
       };
       //console.log(this.editing);
     },
+    randomColor() {
+      this.editing.color = '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).substr(1, 6);
+    },
   },
 };
 </script>

src/util/classes.ts

@@ -14,13 +14,18 @@ interface Category {
   name_pretty?: string;
   subname?: string;
   rule: Rule;
+  data?: object;
   depth?: number;
   parent?: string[];
   children?: Category[];
 }
 
 export const defaultCategories: Category[] = [
-  { name: ['Work'], rule: { type: 'regex', regex: 'Google Docs|libreoffice|ReText' } },
+  {
+    name: ['Work'],
+    rule: { type: 'regex', regex: 'Google Docs|libreoffice|ReText' },
+    data: { productivity: 5, color: '#0F0' },
+  },
   {
     name: ['Work', 'Programming'],
     rule: { type: 'regex', regex: 'GitHub|Stack Overflow|BitBucket|Gitlab|vim|Spyder|kate' },
@@ -29,7 +34,11 @@ export const defaultCategories: Category[] = [
     name: ['Work', 'Programming', 'ActivityWatch'],
     rule: { type: 'regex', regex: 'ActivityWatch|aw-', ignore_case: true },
   },
-  { name: ['Media', 'Games'], rule: { type: 'regex', regex: 'Minecraft|RimWorld' } },
+  {
+    name: ['Media', 'Games'],
+    rule: { type: 'regex', regex: 'Minecraft|RimWorld' },
+    data: { color: '#0FF' },
+  },
   { name: ['Media', 'Video'], rule: { type: 'regex', regex: 'YouTube|Plex|VLC' } },
   {
     name: ['Media', 'Social Media'],
@@ -122,3 +131,16 @@ export function loadClassesForQuery(): [string[], Rule][] {
       return [c.name, c.rule];
     });
 }
+
+export function matchString(str: string): Category | null {
+  console.log(loadClasses());
+  const matchingCats = loadClasses()
+    .filter(c => c.rule.type == 'regex')
+    .filter(c => {
+      const re = RegExp(c.rule.regex, c.rule.ignore_case ? 'i' : '');
+      return re.test(str);
+    });
+  // TODO: Pick deepest
+  if (matchingCats.length > 0) return matchingCats[0];
+  return null;
+}

src/util/color.js

@@ -1,6 +1,7 @@
 'use strict';
 
 import _ from 'lodash';
+import { matchString, loadClasses } from './classes';
 const Color = require('color');
 const d3 = require('d3');
 
@@ -59,6 +60,31 @@ export function getColorFromString(appname) {
   return customColors[appname] || scale(Math.abs(hashcode(appname) % 20));
 }
 
+function getColorFromCategory(c, allCats) {
+  if (c.data && c.data.color) {
+    return c.data.color;
+  } else if (c.name.slice(0, -1).length > 0) {
+    // If no color is set on category, traverse parents until one is found
+    const parent = c.name.slice(0, -1);
+    const parentCat = allCats.find(cc => _.isEqual(cc.name, parent));
+    return getColorFromCategory(parentCat);
+  } else {
+    // TODO: Fix reasonable fallback
+    return '#F0F';
+  }
+}
+
+export function getCategoryColorFromString(str) {
+  // TODO: Don't load classes on every call
+  const allCats = loadClasses();
+  const c = matchString(str);
+  if (c !== null) {
+    return getColorFromCategory(c, allCats);
+  } else {
+    return getColorFromString(str);
+  }
+}
+
 export function getTitleAttr(bucket, e) {
   if (bucket.type == 'currentwindow') {
     return e.data.app;

src/visualizations/summary.js

@@ -4,7 +4,7 @@ const d3 = require('d3');
 const Color = require('color');
 const _ = require('lodash');
 
-import { getColorFromString } from '../util/color.js';
+import { getCategoryColorFromString } from '../util/color.js';
 
 import { seconds_to_duration } from '../util/time.js';
 
@@ -58,7 +58,7 @@ function update(container, apps) {
     const width = (app.duration / longest_duration) * 100 + '%';
     const barHeight = 50;
     const textSize = 15;
-    const baseappcolor = getColorFromString(app.colorKey || app.name);
+    const baseappcolor = app.color || getCategoryColorFromString(app.colorKey || app.name);
     const appcolor = Color(baseappcolor).lighten(0.1).hex();
     const hovercolor = Color(baseappcolor).darken(0.1).hex();
 
@@ -120,6 +120,7 @@ function updateSummedEvents(container, summedEvents, titleKeyFunc, hoverKeyFunc,
       name: titleKeyFunc(e),
       hovertext: hoverKeyFunc(e),
       duration: e.duration,
+      color: e.data['$color'],
       colorKey: colorKeyFunc(e),
     };
   });