diff --git a/README.md b/README.md index 4f10053..485eb2c 100644 --- a/README.md +++ b/README.md @@ -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