Analytics Dashboard
Comprehensive insights into your Claude Code usage patterns, token consumption, and productivity metrics with real-time visualizations and detailed analytics.
Dashboard Overview
The Analytics Dashboard provides comprehensive insights into your Claude Code usage patterns, helping you understand productivity trends, optimize your workflow, and track resource consumption. The dashboard offers two primary views designed for different use cases:
Screenshot: analytics-dashboard-main.png
Full page overview showing all dashboard components
The main dashboard view at https://Devhelion.ai/Devhelion/analytics provides an overview of your usage metrics with interactive charts and filtering options.
Key Benefits
- Track Usage: Monitor token consumption and session frequency
- Optimize Workflow: Identify peak productivity times and patterns
- Understand Patterns: Analyze tool usage and project distribution
- Resource Management: Monitor costs and efficiency metrics
Understanding Metrics
The dashboard displays four key metric cards that provide instant insights into your Claude Code usage. Each metric is calculated in real-time and updates based on your selected filters.
Screenshot: analytics-metrics-cards.png
Cropped view of the four main metrics cards
Total telemetry events collected across all sessions. Includes user messages, assistant responses, tool usage, and system events.
Total token usage across all Claude interactions. Includes both input tokens (your prompts) and output tokens (Claude's responses).
Number of active workspaces or projects where Claude Code has been used. Based on unique project paths from your telemetry data.
Different AI tools tracked in your analytics. Includes Claude Code, Cursor, and other tools that integrate with the Devhelion analytics system.
Charts & Visualizations
The dashboard features multiple interactive visualizations to help you understand your usage patterns and identify trends in your Claude Code workflow.
Token Timeline Chart
Screenshot: analytics-token-timeline.png
Detailed view of the token usage timeline chart
The Token Timeline shows your token usage over time with interactive hover details and date range filtering capabilities.
- Interactive Hover: See exact token counts for any date
- Date Range Filtering: Focus on specific time periods
- Color-coded by Tool: Different colors for Claude Code, Cursor, etc.
- Trend Analysis: Identify usage patterns and productivity cycles
Usage Heatmap
Screenshot: analytics-heatmap.png
Heatmap showing activity patterns by day and hour
The Usage Heatmap provides a visual representation of your activity patterns, helping you identify the most productive times of day and week.
- Day/Hour Breakdown: See activity levels for each hour of each day
- Intensity Color Coding: Darker colors indicate higher activity
- Productivity Insights: Identify your peak performance times
- Pattern Recognition: Understand your work schedule and habits
Tool Breakdown
Screenshot: analytics-tool-breakdown.png
Pie chart showing distribution of tool usage
The Tool Breakdown chart shows the distribution of usage across different AI tools and provides insights into your preferred development environments.
- Percentage Distribution: See what percentage of usage each tool represents
- Most/Least Used Tools: Quickly identify your primary tools
- Trend Indicators: Track how tool preferences change over time
- Efficiency Analysis: Compare productivity across different tools
Event Details View
The advanced analytics view allows you to drill down into specific sessions and events for detailed analysis and debugging.
Screenshot: analytics-event-details.png
Deep dive view showing individual event inspection
Available in the Advanced Analytics view at /Devhelion/analytics, the Event Details feature provides:
- Session Browser: Navigate through specific conversation sessions
- Event Filtering: Filter by event type, tool, project, or time range
- JSON Payload Inspection: View raw event data for debugging
- Session Timeline: Chronological view of events within a session
- Tool Execution Details: See input/output for specific tool calls
Pro Tip
Filtering Data
Both dashboard views provide comprehensive filtering options to help you focus on specific data subsets and analyze particular aspects of your usage.
Screenshot: analytics-filters.png
Filter panel showing all available filtering options
Date Range Picker
Choose from preset ranges (24h, 7d, 30d, All time) or select custom dates
Tool Type Filters
Filter by specific tools: Claude Code, Cursor, or other integrated tools
Project/Workspace Filters
Focus on specific projects or workspaces based on file paths
Event Type Filtering
Filter by user messages, assistant responses, tool usage, or errors
Session Filtering
Filter by specific conversation sessions for detailed analysis
Search Functionality
Full-text search across event messages, errors, and metadata
Combining Filters
Apply multiple filters simultaneously for precise data analysis
URL Parameters
Direct links to specific sessions or events with pre-applied filters
Keyboard Shortcuts
Ctrl + F - Open search filter
Ctrl + R - Reset all filters
Ctrl + D - Toggle date range picker
Exporting Data
Export your analytics data for further analysis, reporting, or integration with other tools and systems.
Screenshot: analytics-export.png
Export dialog showing available export options
CSV Export
Download filtered data as CSV for Excel, Google Sheets, or data analysis tools
JSON Export
Raw JSON data with full event details for programmatic analysis
Programmatic Export
Use the analytics API endpoints for automated data extraction and integration
Date Range Parameters
Specify date ranges and filters in API calls for targeted data exports
Export Options
- Exports respect current filter settings
- Maximum 100,000 events per export
- Timestamps preserved in ISO 8601 format
- Sensitive data automatically redacted
Mobile Experience
The analytics dashboard is fully responsive and optimized for mobile devices, allowing you to check your metrics and trends on the go.
Screenshot: analytics-mobile.png
Mobile view showing responsive design adaptation
Responsive Design
Charts and tables automatically adapt to smaller screen sizes
Touch-friendly Charts
Interactive elements optimized for touch input and gestures
Simplified Metrics
Key metrics prominently displayed in mobile-optimized card layout
Swipe Navigation
Swipe between different chart views and time periods
Collapsible Filters
Filter panel collapses to save space on mobile screens
Quick Actions
Essential actions accessible via floating action buttons
Pro Tips & Best Practices
Optimizing Performance
Use the heatmap to identify your most productive hours and schedule complex tasks accordingly.
Monitor token usage trends to optimize prompt efficiency and reduce costs.
Data Analysis
Combine project and time filters to analyze specific development phases.
Use session filtering to understand conversation patterns and optimize interactions.
Workflow Optimization
Track tool usage distribution to identify opportunities for workflow consolidation.
Export data regularly for long-term trend analysis and reporting.
Advanced Features
Use URL parameters to create bookmarked views for specific projects or time periods.
Leverage the API for automated reporting and integration with other productivity tools.
Related Documentation
Complete API documentation for programmatic access to analytics data.
View API Docs →Set up the Devhelion Tutor collector to start gathering analytics data.
Setup Guide →Learn about user authentication and data privacy in the analytics system.
Auth Guide →