Show hours next to billability percentages in tooltip

infi-nl · Nov 8, 2023 · 0b33d30 · 0b33d30
1 parent 6036fca
commit 0b33d30
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 8 deletions.
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.3.1",
+  "version": "1.4.0",
   "manifest_version": 3,
   "permissions": [
     "webRequest"

diff --git a/src/content/chart.ts b/src/content/chart.ts
@@ -66,8 +66,20 @@ export function createOrUpdateChart(
                 data: rollingStats.map((s) => s.nonBillableHoursPercentage),
                 color: '#e6e4e3',
                 tooltip: {
-                    valueSuffix: '%',
-                    valueDecimals: 0,
+                    pointFormatter: function () {
+                        const hours =
+                            rollingStats.find(
+                                (s) => s.week === Number(this.category),
+                            )?.nonBillableHours ?? 0;
+
+                        return this.tooltipFormatter(
+                            formatTooltip(
+                                `${Math.round(
+                                    this.y ?? 0,
+                                )}% (${hoursToClockNotation(hours)})`,
+                            ),
+                        );
+                    },
                 },
             },
             {
@@ -76,8 +88,20 @@ export function createOrUpdateChart(
                 data: rollingStats.map((s) => s.billableHoursPercentage),
                 color: '#f36f21',
                 tooltip: {
-                    valueSuffix: '%',
-                    valueDecimals: 0,
+                    pointFormatter: function () {
+                        const hours =
+                            rollingStats.find(
+                                (s) => s.week === Number(this.category),
+                            )?.billableHours ?? 0;
+
+                        return this.tooltipFormatter(
+                            formatTooltip(
+                                `${Math.round(
+                                    this.y ?? 0,
+                                )}% (${hoursToClockNotation(hours)})`,
+                            ),
+                        );
+                    },
                 },
             },
             {
@@ -100,9 +124,9 @@ export function createOrUpdateChart(
                 opacity: 0,
                 tooltip: {
                     pointFormatter: function () {
-                        const hours = hoursToClockNotation(this.y ?? 0);
-                        const format = `<span style='color:{point.color}'>●</span> {series.name}: <b>${hours}</b><br/>`;
-                        return this.tooltipFormatter.call(this, format);
+                        return this.tooltipFormatter(
+                            formatTooltip(hoursToClockNotation(this.y ?? 0)),
+                        );
                     },
                 },
             },
@@ -125,3 +149,7 @@ export function createOrUpdateChart(
         console.error('No chart container given and no existing chart set.');
     }
 }
+
+function formatTooltip(value: string) {
+    return `<span style='color:{point.color}'>●</span> {series.name}: <b>${value}</b><br/>`;
+}