Clockify Project Time Breakdown Chart

WHAT IT DOES

This userscript transforms your Clockify time tracking data into an instant visual dashboard. It scans your visible time entries, aggregates hours by project, and displays a beautiful donut-style pie chart that makes it easy to see where your time is going at a glance. Each project slice is color-coded with percentage labels (configurable on/off) showing exactly how much of your total time each project consumes. Below the chart, a detailed breakdown table lists every project with its total hours, sorted from most to least time spent. The script supports three distinct color palettes (Default, Pastel, and Vibrant) so you can choose the visual style that works best for you. Whether you're tracking billable hours, managing team workloads, or simply reviewing your productivity, this script provides immediate visual insights that would otherwise require exporting reports or manual calculation.

WHERE IT RUNS

The script runs on all Clockify web application pages at *.clockify.me/*, with automatic detection of time entry pages including the main timesheet view, detailed time reports, and any page displaying time entries in table format. It works on both the standard timesheet interface and the expanded reporting views. The script intelligently detects when you're on a page with time entries and only activates the panel in those contexts, keeping it out of the way on settings, dashboard, or admin pages. It handles Clockify's single-page application (SPA) routing, re-rendering the chart automatically when you navigate between different time views or date ranges.

HOW TO USE

Install the script via the BotGentz extension and navigate to your Clockify timesheet or any page with time entries. The chart panel will appear automatically, showing your time breakdown. The panel includes a date range selector (Today, This Week, This Month) that filters the chart based on the visible entries in the current view. Toggle percentage labels on or off with a single click. Switch between color schemes using the palette dropdown to match your preferences. The "Refresh chart" button manually rescans the page for updated entries after you've made changes. Use the "Copy breakdown to clipboard" button to export a text summary of your time allocation for reporting or sharing. The panel persists your settings across sessions, so your preferred range, label visibility, and color palette are remembered.

THE MECHANISM - DOM AGGREGATION AND CANVAS RENDERING

This script works entirely within your browser by parsing the visual DOM that Clockify renders. It first identifies all time entry rows using a cascading selector strategy that prioritizes Clockify's data-test attributes for maximum stability, falling back to common class names (.time-entry-row, .entry-row, .timesheet-entry) and finally scanning tables for entries with project and hour data. For each entry, the script extracts the project name and hours logged, then aggregates hours by project name. This aggregation handles multiple entries for the same project across different days or tasks, summing them into a single total. The resulting data is then rendered as a donut chart using the HTML5 Canvas API, with each slice drawn using trigonometric calculations. The script calculates the angle for each slice proportional to its percentage of total hours, draws arcs with both outer and inner radii for the donut style, and overlays percentage labels at the midpoint of each slice. The legend is dynamically generated and sorted by hours descending. All rendering is done without external libraries, keeping the script self-contained and fast.

THE PANEL

The chart appears as a floating, draggable panel that you can position anywhere on the Clockify page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions and page loads. Release the panel near any edge and it snaps into place for a clean, organized workspace. Click the panel header to collapse it into a small bubble showing only the chart emoji (📈), keeping the interface uncluttered while preserving access to the tool. Drag from the bubble to restore the full panel. The panel automatically resizes to accommodate the chart and table, with the breakdown table scrollable when there are many projects. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains active across page navigation, updating automatically when you change views.

PLEASE NOTE

This script requires the free BotGentz extension to run. It is designed for Clockify users who want instant visual feedback on their time allocation without navigating to reports or exporting data. The script reads only visible time entries from the DOM - it does not access the Clockify API, your account credentials, or any sensitive data. All settings (date range, label visibility, color palette, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify any data in Clockify - it only reads and visualizes what you already see on the page. If Clockify updates its website structure, the script may need to be updated to match new selectors; check for updates if the chart stops appearing. The chart displays data based on the currently visible entries in your browser viewport, respecting any filters or date ranges you've applied in the Clockify interface.