Update README with enhanced AI Tools Report features

- Document new 90-day date filter option
- Add comprehensive multi-select filtering documentation
- Document interactive pie chart visualization features
- Update usage instructions for checkbox-based filtering
- Add technical details about Chart.js integration and advanced filtering system
- Clarify backend/frontend data processing architecture

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DJP 2025-09-15 13:58:35 -04:00
parent edf31a2462
commit e33cdb87fc

View file

@ -60,35 +60,62 @@ A clean, card-based interface for navigating between all available reports. Each
### Features
- **Multi-view Dashboard**: Comprehensive analytics with multiple views
- **Data Filtering**: Filter by date range, user, model and sub-tool
- **Summary Cards**: Quick overview of usage metrics
- **Multi-view Dashboard**: Comprehensive analytics with multiple views and interactive visualizations
- **Enhanced Date Filtering**: Filter by date range including Today, Yesterday, 7 days, 30 days, **90 days**, and All time
- **Multi-Select Filtering**:
- **Checkbox-based filtering** for Users, Models, and Sub-Tools
- **Select multiple items** simultaneously instead of single selections
- **Select All/Deselect All** buttons for quick bulk operations
- **Real-time filtering** with instant updates across all views
- **Interactive Pie Chart**:
- **Tool usage distribution** visualization on Summary tab
- **Hover tooltips** showing counts and percentages
- **Dynamic updates** when filters change
- **Chart.js powered** interactive charts
- **Summary Cards**: Quick overview of usage metrics with visual enhancements
- **Multiple Pivot Tables**:
- By User: See which users are using which tools
- By Model: Track usage across different AI models
- By Sub-Tool: Analyze which sub-tools are most popular
- **Detailed View**: See all usage entries with full details
- **CSV Export**: Download full raw data as a CSV file
- **CSV Export**: Download filtered data as CSV file with timestamp
### How to Use AI Tools Report
1. Open the AI Tools Report from the main dashboard
2. Select report type from dropdown (All Tools, Text-to-Voice, Text-to-Image)
3. Click "Send Request" to fetch the data
4. Use the filters to narrow down results by date, user, model or sub-tool
5. Navigate between tabs to see different views of the data
4. **Apply Filters**:
- Choose date range (now includes 90-day option)
- **Select multiple users** by checking/unchecking boxes (or use "Select All")
- **Select multiple models** using checkbox interface
- **Select multiple sub-tools** for granular analysis
5. **View Results**:
- **Summary tab**: Overview cards + interactive pie chart showing tool distribution
- **Pivot tables**: Analyze data by User, Model, or Sub-Tool
- **Detailed View**: Complete data table with all entries
6. **Export**: Download filtered results as CSV file for external analysis
## Technical Details
- **Pure HTML/CSS/JavaScript**: Uses native web technologies
- **Chart.js Integration**: For interactive data visualization
- **Pure HTML/CSS/JavaScript**: Uses native web technologies with enhanced UI components
- **Chart.js Integration**:
- Interactive pie charts with hover effects and percentage tooltips
- Responsive charts that update dynamically with filter changes
- Memory-efficient chart cleanup and recreation
- **Advanced Filtering System**:
- Multi-select checkbox interfaces with scrollable containers
- Real-time filtering without server requests
- Client-side data processing for instant results
- Bulk selection controls (Select All/Deselect All)
- **Multiple API Endpoints**:
- Each report connects to appropriate data webhooks
- Assistant name lookup uses separate assistant database webhooks
- Backend provides all-time data, frontend applies date/user/model filtering
- **Parallel API Calls**: Makes simultaneous requests to improve loading performance
- **Authentication**: Includes secure auth_code token with each request
- **Error Handling**: Gracefully handles API errors and displays user-friendly messages
- **Responsive Design**: Works on desktop and tablet devices
- **Responsive Design**: Works on desktop and tablet devices with optimized layouts
## Data Structures