From 292da10e0f3e4f048ba1d922cbda0e1521ebb5ac Mon Sep 17 00:00:00 2001 From: BelKed <66956532+BelKed@users.noreply.github.com> Date: Thu, 6 Mar 2025 00:52:19 +0100 Subject: [PATCH 1/3] feat: enhance colorisation for Top Window Titles --- src/components/SelectableVisualization.vue | 4 ++-- src/util/color.ts | 10 ++++++++++ src/visualizations/summary.ts | 13 +++++++++++-- 3 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/components/SelectableVisualization.vue b/src/components/SelectableVisualization.vue index 6222ae49..393dc1d9 100644 --- a/src/components/SelectableVisualization.vue +++ b/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'") diff --git a/src/util/color.ts b/src/util/color.ts index 44aa00a4..5fdd0591 100644 --- a/src/util/color.ts +++ b/src/util/color.ts @@ -97,6 +97,16 @@ export function getCategoryColorFromString(str: string): string { } } +export function getCategoryColor(category_name: string[]): string { + // TODO: Don't load classes on every call + const allCats = loadClasses(); + const c = allCats.find(cat => _.isEqual(cat.name, category_name)); + if (c !== undefined) { + return getColorFromCategory(c, allCats); + } + return fallbackColor(category_name.join(' > ')); +} + function fallbackColor(str: string): string { // Get fallback color // TODO: Fetch setting from somewhere better, where defaults are respected diff --git a/src/visualizations/summary.ts b/src/visualizations/summary.ts index efa3f3a7..7e2daf83 100644 --- a/src/visualizations/summary.ts +++ b/src/visualizations/summary.ts @@ -4,7 +4,7 @@ import * as d3 from 'd3'; import Color from 'color'; import _ from 'lodash'; -import { getCategoryColorFromString } from '~/util/color'; +import { getCategoryColor, getCategoryColorFromString } from '~/util/color'; import { seconds_to_duration } from '~/util/time'; import { IEvent } from '~/util/interfaces'; @@ -42,6 +42,7 @@ interface Entry { color?: string; colorKey?: string; link?: string; + category?: string; } function update(container: HTMLElement, apps: Entry[]) { @@ -69,7 +70,14 @@ 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)) { + appcolor = getCategoryColor(app.colorKey); + } else { + appcolor = app.color || getCategoryColorFromString(app.colorKey || app.name); + } + const hovercolor = Color(appcolor).darken(0.1).hex(); // Add a parent element if link is set @@ -143,6 +151,7 @@ function updateSummedEvents( color: e.data['$color'], colorKey: colorKeyFunc(e), link: linkKeyFunc(e), + category: e.data['$category'], } as Entry; }); update(container, apps); From deec992a6be22c5286fb9304a0bdae74d65f576c Mon Sep 17 00:00:00 2001 From: BelKed <66956532+BelKed@users.noreply.github.com> Date: Thu, 6 Mar 2025 01:14:38 +0100 Subject: [PATCH 2/3] Use `useCategoryStore().get_category_color` --- src/util/color.ts | 10 ---------- src/visualizations/summary.ts | 6 ++++-- 2 files changed, 4 insertions(+), 12 deletions(-) diff --git a/src/util/color.ts b/src/util/color.ts index 5fdd0591..44aa00a4 100644 --- a/src/util/color.ts +++ b/src/util/color.ts @@ -97,16 +97,6 @@ export function getCategoryColorFromString(str: string): string { } } -export function getCategoryColor(category_name: string[]): string { - // TODO: Don't load classes on every call - const allCats = loadClasses(); - const c = allCats.find(cat => _.isEqual(cat.name, category_name)); - if (c !== undefined) { - return getColorFromCategory(c, allCats); - } - return fallbackColor(category_name.join(' > ')); -} - function fallbackColor(str: string): string { // Get fallback color // TODO: Fetch setting from somewhere better, where defaults are respected diff --git a/src/visualizations/summary.ts b/src/visualizations/summary.ts index 7e2daf83..99ae7b30 100644 --- a/src/visualizations/summary.ts +++ b/src/visualizations/summary.ts @@ -4,7 +4,8 @@ import * as d3 from 'd3'; import Color from 'color'; import _ from 'lodash'; -import { getCategoryColor, getCategoryColorFromString } from '~/util/color'; +import { useCategoryStore } from '~/stores/categories'; +import { getCategoryColorFromString } from '~/util/color'; import { seconds_to_duration } from '~/util/time'; import { IEvent } from '~/util/interfaces'; @@ -73,7 +74,8 @@ function update(container: HTMLElement, apps: Entry[]) { let appcolor: string; if (Array.isArray(app.colorKey)) { - appcolor = getCategoryColor(app.colorKey); + const categoryStore = useCategoryStore(); + appcolor = categoryStore.get_category_color(app.colorKey); } else { appcolor = app.color || getCategoryColorFromString(app.colorKey || app.name); } From 3dfdfe13504ce8061c048b9505f04bb84c5f0ffb Mon Sep 17 00:00:00 2001 From: BelKed <66956532+BelKed@users.noreply.github.com> Date: Mon, 10 Mar 2025 11:10:44 +0100 Subject: [PATCH 3/3] Update type definitions --- src/visualizations/summary.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/visualizations/summary.ts b/src/visualizations/summary.ts index 99ae7b30..a7a27dcd 100644 --- a/src/visualizations/summary.ts +++ b/src/visualizations/summary.ts @@ -41,7 +41,7 @@ interface Entry { hovertext: string; duration: number; color?: string; - colorKey?: string; + colorKey?: string | string[]; link?: string; category?: string; }