feat: added setting for using color fallback

Author: ErikBjare

package-lock.json

@@ -86,6 +86,8 @@
     "@fullcalendar/vue": "^5.1.0",
     "@types/chart.js": "^2.9.23",
     "@types/chrome": "0.0.89",
+    "@types/color": "^3.0.1",
+    "@types/d3": "^6.3.0",
     "@types/jest": "^24.9.1",
     "@types/lodash": "^4.14.157",
     "@types/node": "^12.12.50",

package.json

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import { Category, matchString, loadClasses } from './classes';
-const Color = require('color');
-const d3 = require('d3');
+import Color from 'color';
+import * as d3 from 'd3';
 
 // TODO: Move elsewhere
 interface Event {
@@ -24,7 +24,9 @@ const COLOR_UNCAT = '#CCC';
 const scale = d3.scaleOrdinal(['#90CAF9', '#FFE082', '#EF9A9A', '#A5D6A7']);
 
 // Needed to prewarm the color table
-scale.domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]);
+scale.domain(
+  '0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20'.split(/, /)
+);
 
 const customColors = {
   afk: '#EEE',
@@ -52,9 +54,12 @@ const customColors = {
   // Social media sites
   'messenger.com': Color('#3b5998').lighten(0.5),
   'facebook.com': Color('#3b5998').lighten(0.5),
+
+  // Categories
+  uncategorized: COLOR_UNCAT,
 };
 
-function hashcode(str: string) {
+function hashcode(str: string): number {
   let hash = 0;
   if (str.length === 0) {
     return hash;
@@ -70,7 +75,7 @@ function hashcode(str: string) {
 export function getColorFromString(appname: string) {
   appname = appname || '';
   appname = appname.toLowerCase();
-  return customColors[appname] || scale(Math.abs(hashcode(appname) % 20));
+  return customColors[appname] || scale(Math.abs(hashcode(appname) % 20).toString());
 }
 
 // TODO: Move into vuex?
@@ -84,7 +89,6 @@ export function getColorFromCategory(c: Category, allCats: Category[]): string {
     const parentCat = allCats.find(cc => _.isEqual(cc.name, parent));
     return getColorFromCategory(parentCat, allCats);
   } else {
-    // TODO: Fix reasonable fallback
     return COLOR_UNCAT;
   }
 }
@@ -97,7 +101,17 @@ export function getCategoryColorFromString(str: string): string {
   if (c !== null) {
     return getColorFromCategory(c, allCats);
   } else {
-    // TODO: Fix reasonable fallback
+    return fallbackColor(str);
+  }
+}
+
+function fallbackColor(str: string): string {
+  // Get fallback color
+  // TODO: Fetch setting from somewhere better, where defaults are respected
+  const useColorFallback = localStorage !== undefined ? localStorage.useColorFallback : true;
+  if (useColorFallback) {
+    return getColorFromString(str);
+  } else {
     return COLOR_UNCAT;
   }
 }

src/util/color.ts

@@ -63,18 +63,16 @@ div
     h5 Options
 
     div.row
-      div.col-md-6
-        b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
-          b-form-select(v-model="filterCategory", :options="categories")
-
-    div.row
-      div.col-md-12
+      div.col-lg-6
         b-form-checkbox(v-model="filterAFK")
           | Filter AFK
-      div.col-md-12
         b-form-checkbox(v-model="includeAudible")
           | Count audible browser tab as active
 
+      div.col-lg-6
+        b-form-group(label="Show/filter category" label-cols="5" label-cols-lg="4")
+          b-form-select(v-model="filterCategory", :options="categories")
+
     aw-devonly
       b-btn(id="load-demo", @click="load_demo")
         | Load demo data

src/views/activity/Activity.vue

@@ -16,10 +16,10 @@ export default {
       useColorFallback: localStorage.useColorFallback || true,
     };
   },
-  methods: {
-    set: function (useColorFallback) {
-      localStorage.useColorFallback = useColorFallback;
-      console.log('Set useColorFallback to ' + useColorFallback);
+  watch: {
+    useColorFallback(val) {
+      localStorage.useColorFallback = val;
+      console.log('Set useColorFallback to ' + val);
     },
   },
 };

src/views/settings/ColorSettings.vue

@@ -4,7 +4,7 @@ div
     div
       h5.mb-0 New release notification
     div
-      b-form-checkbox(v-model="data.isEnabled" @change="saveData", switch)
+      b-form-checkbox(v-model="data.isEnabled" switch)
   small
     | We will send you a notification if there is a new release available for download, this check will happen at most once per day.
 </template>
@@ -26,6 +26,14 @@ export default {
       },
     };
   },
+  watch: {
+    data: {
+      handler() {
+        this.saveData();
+      },
+      deep: true,
+    },
+  },
   created() {
     this.retrieveData();
   },

src/views/settings/ReleaseNotificationSettings.vue

@@ -22,8 +22,9 @@ div
     ReleaseNotificationSettings
     hr
 
-  //ColorSettings
-  //hr
+  ColorSettings
+
+  hr
 
   CategorizationSettings