Tabatha - Data & Analytics

Analytics surfaces

15 components · dashboard, heatmap, work shifts, logs

What the tracking is for. If Tabatha only ever showed you a running clock it would be a stopwatch; these components turn stints into something you can act on - which hours are actually productive, where the day fragments, what a context really costs. The reporting bias is toward patterns over totals, because a weekly total tells you nothing you can change. Worth noting: every chart here is hand-rolled CSS. The extension ships no charting library at all, which keeps the bundle small and the rendering identical across all twelve themes.

🎯

Focuses Today

⏱

2h 51m

Focus Time

✅

82%

Completion (7d)

9/11

🔥

Streak

📋

Open Tasks

of 12

📇

Analytics stat cards

The dashboard's top row: today's focus count and time, a 7-day completion rate, the consecutive-day streak, and open tasks against the total. Each is a glass card with one accent number.

src/home/AnalyticsDashboard.jsx · statCard()

🔝 Top Focuses

1.Q1 Report9

2.Learning React4

3.Email triage2

4.Vacation Planning1

Empty state

🔝 Top Focuses

No focus data yet

🔝

Top Focuses bar chart

The five most frequent focus labels, ranked. The label sits inside the track and the count rides outside it, so a long label truncates instead of pushing the bar around.

src/home/AnalyticsDashboard.jsx · Top focuses bar chart

⏱ Time by Category

💼 work1h 36m

📚 reference34m

💬 messaging21m

📧 email12m

🎓 learning8m

⏱

Time by Category

The same bar primitive as Top Focuses, switched to the secondary accent and sorted by tracked milliseconds. The five categories here sum to the 2h 51m on the stat card above.

src/home/AnalyticsDashboard.jsx · Category time breakdown

📊 Context Distribution

💼

62%

Business (21)

🏠

29%

Personal (10)

❓

Unset (3)

📊

Context Distribution

The Business / Personal / Unset split across every focus item. Unset is deliberately given a dull grey: it is the number the product wants you to drive down.

src/home/AnalyticsDashboard.jsx · Context Distribution

Last 365 days

Mon

Wed

Fri

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Less More

🔥

ActivityHeatmap

365 days as 11px cells, seven rows deep, switchable between browser time, browser plus desktop, and follow-through actions. One real quirk is reproduced faithfully: levels 1 to 3 read rgba(var(--accent-rgb, 59,130,246), …) but --accent-rgb is never defined anywhere in the codebase, so the fallback always wins and the mid-levels render blue in every theme. Only the top level picks up the real cyan accent.

src/home/ActivityHeatmap.jsx · getColors() / getLevel()

📈 Daily Hours

Work Break

📈

Daily Hours chart

Fourteen days as vertical stacked bars, break time riding on top of work time. Past ten days the chart tightens its gaps and thins the axis to every fifth label. The six active days here total the 31h 12m in the summary below.

src/workshifts/index.jsx · DailyHoursChart

⏰ Peak Productivity Hours

Same bars, break patterns

☕ Break Patterns

14 breaks 11m avg duration 2h 34m total

⏰

Peak Productivity Hours + Break Patterns

One 24-bar primitive, two readings. Peak hours plots minutes worked per hour of day; break patterns reuses it with a break count and the amber palette. Axis labels print only every sixth hour.

src/workshifts/index.jsx · HourBars

📊 Weekly Comparison (last 6 weeks)

Wk 06-0128h 40m5 shifts

Wk 06-0834h 10m6 shifts

Wk 06-1522h 5m4 shifts

Wk 06-2238h 25m7 shifts

Wk 06-2930h 50m5 shifts

Wk 07-0631h 12m7 shifts

📊

Weekly comparison

Six weeks of clocked hours, each bar scaled against the busiest week rather than a fixed ceiling. The week label is just the month-day slice of the week key.

src/workshifts/index.jsx · AnalyticsView (weekly)

31h 12m

Work (range)

7 shifts

5h 12m

Avg / Active Day

6 active days

Breaks

avg 11m

Ctx Switches

2.0/h · 9.0/shift

🧮

Work analytics summary

The four numbers that head the Work Shifts analytics view. Context switches carry two derived rates, because 63 switches means nothing until you know it happened across 31 hours and 7 shifts.

src/workshifts/index.jsx · AnalyticsView (StatCard row)

🎯 Time per Focus (during shifts)

1.Q1 Report14h 20m

2.Learning React6h 35m

3.Email triage3h 10m

4.Vacation Planning1h 45m

Distraction time vs productive timeCOMING SOON

🎯

Time per Focus + scaffolded stub

Focus time intersected with clocked shifts, ranked. Below it, the product's stub convention: anything scaffolded but not yet wired gets a dashed border, italic amber text and a COMING SOON badge, so the roadmap is visible in the UI instead of hidden in a backlog.

src/workshifts/index.jsx · AnalyticsView (perFocus) · STUB_STYLE

📤 Reporting

CSV covers the selected range: daily hours, weekly comparison, peak hours, breaks, time per focus, and context switching.

📤

Reporting row

CSV export is real and runs entirely client-side off the computed analytics. The two dashed buttons are honest about not existing yet.

src/workshifts/index.jsx · AnalyticsView (Reporting)

🏷️

LogsPanel filter chips

Nine log types, each with its own glyph and colour, toggling its slice of the table. A type with nothing in it drops to 40% opacity and hides its count, as Audit Trail does here.

src/home/LogsPanel.jsx · LOG_TYPES

128 logs

	Date	Type	Details	Intent	Time
📄	Jul 16 09:14:22	Tab Activity	Q1 Revenue Model - Sheets (docs.google.com)	Q1 Report	22:04
🎯	Jul 16 09:02:10	Intent Change	Q1 Report	Q1 Report	—
⏱️	Jul 16 08:58:03	Clock Stint	Clocked in		5:12:00
☕	Jul 16 11:30:41	Break	Coffee		11:24
🚫	Jul 16 13:41:57	Blocked Site	Proceeded, 15m box (reddit.com)	Q1 Report	6:12
🔍	Jul 16 14:20:08	Focus Session	Learning React	Learning React	21:38 / 25:00
✅	Jul 16 15:02:33	Task Update	Q1 revenue charts → completed	Q1 Report	—

Empty state

	Date	Type	Details	Intent	Time
No logs found.

📋

LogsPanel table

Every tracked event in one table, merged from tabs, intents, focuses, clock stints, breaks, contexts, blocks, tasks and the audit trail. The header sticks, focus rows show used against allotted time, and the list pages in rather than rendering thousands of rows at once.

src/home/LogsPanel.jsx

📊

No shift data yet. Clock in from the Dashboard and analytics will build themselves.

🫙

Analytics empty state

What the Work Shifts analytics view shows before you have ever clocked in. It points at the one action that fills it, and promises nothing else.

src/workshifts/index.jsx · AnalyticsView (empty)

Range

🗓

Range selector

Three ranges drive every number on the analytics view, including what the CSV export contains. The active range inverts to a solid accent fill with black text.

src/workshifts/index.jsx · RANGE_OPTIONS