# Analytics Dashboard - Claude Code DevTools

Load Transcript(s)

## About This Tool

### Purpose

Analytics Dashboard provides comprehensive session insights for Claude Code developers through interactive D3-powered visualizations. Track tool usage, productivity patterns, session metrics, and trends over time with sortable, filterable charts.

### Features

- Interactive tool usage bar chart with sorting and tooltips
- Session timeline line chart showing activity over time
- Message type distribution donut chart
- Productivity metrics with trend indicators
- Time-based filtering (day, week, month, all time)
- Sortable charts by value or alphabetically
- Rich tooltips with detailed statistics
- Export capabilities (PNG, SVG, JSON)
- Dark theme optimized for long sessions
- Multi-session aggregation support

### Web Research Integration

Source: D3.js Bar Chart - Observable

Techniques Applied:

- scaleBand() for Ordinal Scales: Used D3's scaleBand to create discrete x-axis positioning for categorical data (tools, session dates) with configurable padding between bars
- Interactive Tooltips: Implemented hover-based tooltips with precise positioning that show detailed statistics including percentages, counts, and contextual information
- Dynamic Sorting: Applied D3's groupSort pattern to enable interactive sorting by value (descending/ascending) or alphabetically, re-rendering charts smoothly on demand
- Data Join Pattern: Leveraged D3's .data().join() pattern for efficient DOM updates when filtering or sorting data without full re-renders

### Usage

1. Click "Load Transcript(s)" to select one or more JSONL transcript files
2. View overall statistics cards showing key metrics and trends
3. Interact with charts: hover for tooltips, click sort buttons to reorder
4. Use time range filters to focus on specific periods
5. Export individual charts as PNG/SVG or all data as JSON

### Chart Types

- Tool Usage Bar Chart: Shows frequency of each tool used, sortable by usage count or tool name
- Session Timeline: Line chart displaying message activity over time
- Message Distribution: Donut chart breaking down messages by type (user, assistant, tool)
- Productivity Trends: Multi-metric visualization tracking messages per hour, tool diversity, session duration