Skip to content

Commit

Permalink
feat: added setting for using color fallback
Browse files Browse the repository at this point in the history
  • Loading branch information
ErikBjare committed Mar 26, 2021
1 parent cb93715 commit 6b12059
Show file tree
Hide file tree
Showing 7 changed files with 544 additions and 21 deletions.
500 changes: 500 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
28 changes: 21 additions & 7 deletions src/util/color.ts
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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',
Expand Down Expand Up @@ -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;
Expand All @@ -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?
Expand All @@ -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;
}
}
Expand All @@ -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;
}
}
Expand Down
12 changes: 5 additions & 7 deletions src/views/activity/Activity.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 4 additions & 4 deletions src/views/settings/ColorSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
},
};
Expand Down
10 changes: 9 additions & 1 deletion src/views/settings/ReleaseNotificationSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -26,6 +26,14 @@ export default {
},
};
},
watch: {
data: {
handler() {
this.saveData();
},
deep: true,
},
},
created() {
this.retrieveData();
},
Expand Down
5 changes: 3 additions & 2 deletions src/views/settings/Settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,9 @@ div
ReleaseNotificationSettings
hr

//ColorSettings
//hr
ColorSettings

hr

CategorizationSettings

Expand Down

0 comments on commit 6b12059

Please sign in to comment.