Skip to content

Add chart panel for day-by-day token usage visualization#93

Merged
rajbos merged 5 commits intomainfrom
copilot/add-chart-panel-token-usage
Jan 4, 2026
Merged

Add chart panel for day-by-day token usage visualization#93
rajbos merged 5 commits intomainfrom
copilot/add-chart-panel-token-usage

Conversation

Copy link
Contributor

Copilot AI commented Jan 4, 2026

Adds an interactive chart view showing GitHub Copilot token usage aggregated by day, accessible from the details panel.

Changes

Data aggregation

  • DailyTokenStats interface for daily metrics (date, tokens, sessions, interactions)
  • calculateDailyStats() aggregates session files by modification date using Map-based grouping
  • formatDateKey() helper for consistent YYYY-MM-DD formatting
  • Reuses existing session file cache for performance

Chart panel

  • showChart() creates webview with Chart.js visualization
  • Bar chart for daily tokens (left Y-axis) + line overlay for sessions (right Y-axis)
  • Summary cards: total days, total tokens, avg/day, total sessions
  • Refresh handler to reload data on demand

UI integration

  • "Show Chart" button added to details panel footer
  • New command copilot-token-tracker.showChart registered
  • Panel opens in separate column via ViewColumn.Beside
  • Webview message routing for 'showChart' and 'refresh' commands

Chart rendering

private getChartHtml(dailyStats: DailyTokenStats[]): string {
  const labels = dailyStats.map(stat => stat.date);
  const tokensData = dailyStats.map(stat => stat.tokens);
  const sessionsData = dailyStats.map(stat => stat.sessions);
  
  // Pre-calculate to avoid duplicate reduce() calls
  const totalTokens = dailyStats.reduce((sum, stat) => sum + stat.tokens, 0);
  // ... generates HTML with Chart.js from CDN
}

Chart.js loaded via CDN (no new npm dependencies). Current month data only to keep scope manageable.

Original prompt

Add a chart panel that can be triggered from the report overview. the new panel shows the toke usage over time, on a day by day basis.


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI and others added 3 commits January 4, 2026 14:56
Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>
Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>
…mize calculations

Co-authored-by: rajbos <6085745+rajbos@users.noreply.github.com>
Copilot AI changed the title [WIP] Add chart panel for token usage over time Add chart panel for day-by-day token usage visualization Jan 4, 2026
Copilot AI requested a review from rajbos January 4, 2026 15:06
@rajbos rajbos marked this pull request as ready for review January 4, 2026 15:13
@rajbos rajbos merged commit 63203a8 into main Jan 4, 2026
11 checks passed
@rajbos rajbos deleted the copilot/add-chart-panel-token-usage branch January 4, 2026 20:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants

Comments