Add: Date formatting, token abbreviation, and Tufte-style sparklines for table views #175
Conversation
- Add --date-format flag for custom strftime formatting (e.g., '%d %b - %a') - Add --abbreviate-tokens flag to show token counts with 'k' suffix - Reduce date column width from 20 to 12 chars for better fit - Format numbers consistently: 273k, 48,875k (no mixing k/mm) - Add format_number_abbreviated() utility function - Update all table views to support new formatting options - Add comprehensive tests for new formatting features
- Replace filled bar sparklines with dot position sparklines - Use universal scale (max_total_tokens) for all columns (Tufte principle) - Enables comparison across rows AND columns with same scale - Fix model name display to use normalized display names (no truncation) - Add create_dot_sparkline() function for table visualizations - Update tests to reflect new model name formatting - All 33 tests passing
WalkthroughAdds date formatting, token abbreviation, and sparkline visualization features to the Claude Code Usage Monitor. New settings fields enable custom date formats and abbreviated token display. Sparkline utilities render visual bar charts in table cells. Table view controller propagates these parameters through aggregation workflows to display enhanced monitoring tables. Changes
Sequence DiagramsequenceDiagram
participant CLI as CLI (_run_table_view)
participant Args as args namespace
participant Settings as Settings
participant TVC as TableViewsController
participant Table as Table Display
CLI->>Args: getattr(args, "date_format", None)<br/>getattr(args, "abbreviate_tokens", False)
Args->>TVC: display_aggregated_view(..., date_format, abbreviate_tokens)
TVC->>TVC: create_aggregate_table(..., date_format, abbreviate_tokens)
alt Daily/Monthly Path
TVC->>TVC: create_daily_table(..., date_format, abbreviate_tokens)
TVC->>TVC: _add_data_rows(..., date_format, abbreviate_tokens)
TVC->>TVC: _format_period_value(period_value, date_format, timezone)
end
TVC->>TVC: compute max_total_tokens<br/>for sparkline scaling
TVC->>TVC: create_dot_sparkline(value, max_total)
TVC->>TVC: _add_totals_row(..., abbreviate_tokens)
TVC->>TVC: format_number_abbreviated(value)
TVC->>Table: Render table with sparklines<br/>& formatted dates/abbreviations
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/claude_monitor/core/settings.py (1)
27-53: Add date_format and abbreviate_tokens to last used params persistence.The new settings fields
date_formatandabbreviate_tokensare not saved tolast_used.json, meaning user preferences won't persist across sessions. Users will need to specify these flags every time.Apply this diff to persist the new settings:
params = { "theme": settings.theme, "timezone": settings.timezone, "time_format": settings.time_format, "refresh_rate": settings.refresh_rate, "reset_hour": settings.reset_hour, "view": settings.view, + "date_format": settings.date_format, + "abbreviate_tokens": settings.abbreviate_tokens, "timestamp": datetime.now().isoformat(), }
🧹 Nitpick comments (2)
.vscode/settings.json (1)
1-312: Developer environment configuration file—scope check needed.This file provides comprehensive VS Code workspace theming with color customizations and syntax highlighting rules. While it creates a cohesive development environment and complements the UI-focused changes in this PR, it is orthogonal to the functional features being added (date formatting, token abbreviation, sparklines).
Consider whether this belongs in the PR addressing feature work, or if it should be a separate, optional developer tooling contribution (e.g., a documented
.vscode/settings.example.jsonor a separate PR). If committed as mandatory workspace settings, all developers cloning this repo will adopt this theme regardless of their preferences.The JSON structure and color palette are sound; this is a scope consideration rather than a quality issue.
src/claude_monitor/ui/table_views.py (1)
322-323: Consider documenting date_format column width limitation.The date column width is fixed at 12 characters when
date_formatis provided. Longer date formats (e.g., "%d %B %Y - %A") will be truncated or wrap. Consider adding a note in the Settings field description that date formats should be kept compact (≤12 chars) for optimal display.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
.vscode/settings.json(1 hunks)src/claude_monitor/cli/main.py(1 hunks)src/claude_monitor/core/settings.py(2 hunks)src/claude_monitor/ui/progress_bars.py(2 hunks)src/claude_monitor/ui/table_views.py(13 hunks)src/claude_monitor/utils/formatting.py(1 hunks)src/tests/test_formatting.py(2 hunks)src/tests/test_table_views.py(3 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
src/tests/test_formatting.py (1)
src/claude_monitor/utils/formatting.py (1)
format_number_abbreviated(31-59)
src/tests/test_table_views.py (2)
src/claude_monitor/ui/progress_bars.py (1)
create_dot_sparkline(381-420)src/claude_monitor/ui/table_views.py (4)
_format_models(376-411)_format_period_value(95-146)create_monthly_table(301-338)create_daily_table(264-299)
src/claude_monitor/ui/table_views.py (3)
src/claude_monitor/ui/progress_bars.py (1)
create_dot_sparkline(381-420)src/claude_monitor/utils/formatting.py (3)
format_currency(62-78)format_number(16-28)format_number_abbreviated(31-59)src/claude_monitor/utils/model_utils.py (1)
get_model_display_name(30-49)
🔇 Additional comments (13)
src/claude_monitor/core/settings.py (1)
164-172: LGTM!The new settings fields are well-defined with appropriate types, defaults, and descriptive help text.
src/claude_monitor/ui/progress_bars.py (2)
337-379: LGTM!The
create_sparklinefunction correctly handles edge cases (max_value <= 0, bounds checking) and produces proportional filled bars.
381-420: LGTM!The
create_dot_sparklinefunction correctly implements Tufte-style visualization with proper position calculation using(width - 1)for 0-indexed positions and handles edge cases appropriately.src/claude_monitor/cli/main.py (1)
413-414: LGTM!Correctly passes the new parameters through to the table view controller with appropriate default values.
src/tests/test_formatting.py (1)
334-365: LGTM!Comprehensive test coverage for
format_number_abbreviatedincluding edge cases for small values, thousands, millions, and float inputs.src/claude_monitor/utils/formatting.py (1)
31-60: LGTM!The
format_number_abbreviatedfunction correctly formats numbers with 'k' suffix, handling both simple thousands and larger values with comma separators.src/tests/test_table_views.py (2)
484-516: LGTM!Good test coverage for period value formatting with date_format parameter, including both month and date formats with timezone handling.
567-609: LGTM!Comprehensive sparkline tests covering edge cases (zero max value, start/middle/end positions, width constraints).
src/claude_monitor/ui/table_views.py (5)
95-147: LGTM!The
_format_period_valuemethod correctly handles date/month parsing, timezone conversion with proper fallback handling, and strftime formatting.
170-180: Universal sparkline scale enables cross-comparison.The implementation correctly uses
max_total_tokensas a universal scale for all sparklines, enabling comparison across both rows and columns per Tufte design principles. This is a conscious design choice where token types with small values relative to the maximum will show dots near the start of the scale.
236-262: LGTM!The
_add_totals_rowmethod consistently applies token abbreviation when enabled while keeping currency formatting unchanged.
376-411: LGTM!The improved
_format_modelsmethod correctly handles deduplication, provides clean display names, and formats lists appropriately with bullet points and overflow indicators.
475-547: LGTM!The
display_aggregated_viewmethod correctly propagates the new parameters through the aggregation workflow.
1 participant
Summary
This PR enhances the monthly and daily table views with:
--date-formatflag--abbreviate-tokensflagFeatures
1. Date Formatting (
--date-formatflag)01 Nov - Fri)2. Token Abbreviation (
--abbreviate-tokensflag)273k,48,875k)3. Tufte-Style Dot Sparklines
273k\n─────────●───4. Model Name Display
Usage Examples
Testing
Files Changed
src/claude_monitor/core/settings.py- Addeddate_formatandabbreviate_tokensfieldssrc/claude_monitor/ui/table_views.py- Updated table creation with formatting and sparklinessrc/claude_monitor/ui/progress_bars.py- Addedcreate_dot_sparkline()functionsrc/claude_monitor/utils/formatting.py- Addedformat_number_abbreviated()functionsrc/claude_monitor/cli/main.py- Pass new flags to display controllersrc/tests/test_table_views.py- Updated and added testssrc/tests/test_formatting.py- Added tests for abbreviation functionDesign Principles
This implementation follows Edward Tufte's visualization principles:
Summary by CodeRabbit
New Features
Chores