Load theme color from company, default to blurple (#6)

infi-nl · Jan 6, 2024 · ecc3684 · ecc3684
1 parent 4721099
commit ecc3684
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## v1.6.0
+
+- Load theme color for billable section of the chart from company configuration.
+
 ## v1.5.2
 
 - Fix week ordering between years.

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "TimeChimp Billability Chart",
   "description": "Adds a billability chart on the TimeChimp hours page.",
-  "version": "1.5.2",
+  "version": "1.6.0",
   "manifest_version": 3,
   "permissions": [
     "webRequest"

diff --git a/src/TimeChimpApi.ts b/src/TimeChimpApi.ts
@@ -37,6 +37,10 @@ export class TimeChimpApi {
         }
         return user;
     }
+
+    public getCompany(): Promise<Company> {
+        return this.doFetch('/api/company');
+    }
 }
 
 export interface User {
@@ -51,3 +55,11 @@ export interface Time {
     billable: boolean;
     taskName: string;
 }
+
+export interface Company {
+    theme?: Theme;
+}
+
+export interface Theme {
+    mainColor?: string;
+}
diff --git a/src/content/add-billability-chart.ts b/src/content/add-billability-chart.ts
@@ -37,9 +37,13 @@ async function doAddBillabilityChart(date: Date, userId: number) {
         chartContainer = addTimePanel.appendChild(createBillabilityCard());
     }
 
-    const times = await getTimes(userId, date, GET_TIMES_WEEKS);
+    const [times, company] = await Promise.all([
+        getTimes(userId, date, GET_TIMES_WEEKS),
+        api.getCompany(),
+    ]);
+
     const stats = calculateTimeStats(times, SHOW_WEEKS, ROLLING_AVG_WEEKS);
-    createOrUpdateChart(stats, chartContainer);
+    createOrUpdateChart(stats, company.theme?.mainColor, chartContainer);
 }
 
 function createBillabilityCard() {

diff --git a/src/content/chart.ts b/src/content/chart.ts
@@ -12,8 +12,12 @@ const textStyle = {
 
 let chart: Highcharts.Chart | undefined;
 
+// The default TimeChimp "blurple" color.
+const TC_BLURPLE = '#6559d2';
+
 export function createOrUpdateChart(
     rollingStats: RollingStats[],
+    billableColor?: string,
     element?: HTMLElement,
 ) {
     const options: Highcharts.Options = {
@@ -86,7 +90,7 @@ export function createOrUpdateChart(
                 name: 'Facturabel',
                 type: 'column',
                 data: rollingStats.map((s) => s.billableHoursPercentage),
-                color: '#f36f21',
+                color: billableColor ?? TC_BLURPLE,
                 tooltip: {
                     pointFormatter: function () {
                         const hours =