Skip to content

Latest commit

 

History

History
221 lines (174 loc) · 6.99 KB

File metadata and controls

221 lines (174 loc) · 6.99 KB

📊 AI-Powered Data Analysis Dashboard

An advanced Dash application that combines the power of AG-Grid's interactive data tables with Google Gemini AI to provide intelligent data insights and analysis.

Dashboard Preview AI Powered AG Grid

🌟 Features

Interactive Data Grid

  • Advanced Filtering: Column-specific filters with floating filter row
  • Sorting & Resizing: Multi-column sorting with resizable columns
  • Pagination: Efficient data pagination for large datasets
  • Row Selection: Multiple row selection capabilities
  • Real-time Updates: Dynamic data filtering and updates

AI-Powered Analytics

  • Intelligent Summaries: Generate comprehensive business insights using Google Gemini AI
  • Strategic Recommendations: Get actionable next steps based on data analysis
  • Performance Analysis: Detailed breakdowns of KPIs and metrics
  • Risk Assessment: Identify potential concerns and optimization opportunities

Data Management

  • CSV Export: Export filtered data with timestamps
  • Sample Data Generation: Rich sample dataset with seasonal variations
  • Real-time Filtering: Analysis updates based on current grid filters
  • Data Validation: Built-in data type handling and validation

Modern UI/UX

  • Responsive Design: Optimized for desktop and mobile viewing
  • Gradient Styling: Modern visual design with custom CSS
  • Loading States: User-friendly loading indicators
  • Status Feedback: Clear API connection and operation status

🚀 Quick Start

Prerequisites

python >= 3.8
pip >= 21.0

Installation

  1. Clone the repository
git clone <repository-url>
cd ai-dash-agrid-dashboard
  1. Install dependencies
pip install dash
pip install dash-ag-grid
pip install pandas
pip install google-generativeai
pip install numpy
  1. Get a Gemini API Key

    • Visit Google AI Studio
    • Create a new API key
    • Keep it secure for use in the application
  2. Run the application

python app.py
  1. Open your browser
    • Navigate to http://localhost:1260
    • Enter your Gemini API key in the configuration panel
    • Start exploring your data!

📖 Usage Guide

Getting Started

  1. Launch the app and enter your Gemini API key
  2. Explore the data using the interactive AG-Grid table
  3. Apply filters to focus on specific data segments
  4. Generate AI insights by clicking the "Generate AI Summary" button
  5. Export data using the CSV export functionality

Data Filtering

  • Use column headers to sort data ascending/descending
  • Apply filters using the floating filter row
  • Select specific rows for focused analysis
  • Use date range filters for time-based analysis

AI Analysis

The AI summary provides:

  • Executive Summary: Key business takeaways
  • Performance Analysis: Detailed metrics with percentages
  • Customer Insights: Satisfaction and behavior patterns
  • Regional Strategy: Location-based recommendations
  • Product Optimization: Portfolio performance insights
  • Marketing ROI: Investment effectiveness analysis
  • Risk Assessment: Potential concerns and mitigation strategies
  • Actionable Steps: Specific next steps with expected impact

🛠️ Technical Architecture

Core Components

# Main Application Stack
├── Dash (Web Framework)
├── AG-Grid Enterprise (Data Grid)
├── Google Gemini AI (Analysis Engine)
├── Pandas (Data Processing)
└── NumPy (Numerical Computing)

Data Flow

  1. Data Generation: Enhanced sample dataset with realistic business metrics
  2. Grid Integration: Real-time data binding with AG-Grid
  3. Filter Processing: Dynamic data filtering and state management
  4. AI Analysis: Structured data summary sent to Gemini API
  5. Results Display: Formatted markdown output with insights

Key Features Implementation

Enhanced Sample Data

  • 200 records spanning a full year
  • Seasonal variations in sales data
  • Multiple dimensions: Region, Product, Customer Type
  • Calculated metrics: Revenue, Profit, ROI, Satisfaction scores

AG-Grid Configuration

columnDefs = [
    {"field": "Date_str", "headerName": "Date", "filter": "agDateColumnFilter"},
    {"field": "Sales", "filter": "agNumberColumnFilter", 
     "valueFormatter": {"function": "d3.format('$,.0f')(params.value)"}},
    # ... additional column configurations
]

AI Integration

  • Structured prompting for comprehensive analysis
  • Context-aware insights based on filtered data
  • Performance metrics calculation and interpretation
  • Strategic recommendations generation

📊 Sample Data Schema

Field Type Description
Date DateTime Transaction date
Region Categorical Geographic region (North, South, East, West)
Product Categorical Product category
Sales Numeric Individual sale amount
Units Integer Units sold
Customer_Type Categorical B2B or B2C
Revenue Calculated Sales × Units
Profit Calculated Revenue × Profit_Margin
Satisfaction_Score Float Customer satisfaction (1-5)
Marketing_Spend Numeric Marketing investment
ROI Calculated Return on investment percentage

🔧 Configuration Options

Environment Variables

# Optional: Set default port
export DASH_PORT=1260

# Optional: Enable debug mode
export DASH_DEBUG=True

Customization

  • Port Configuration: Modify app.run(port=1260)
  • Data Generation: Adjust create_enhanced_sample_data() function
  • AI Prompts: Customize the analysis prompt in the callback
  • Styling: Update CSS styles in the layout components

🚀 Deployment

Local Development

python app.py

Production Deployment

# Using Gunicorn
pip install gunicorn
gunicorn app:server -b 0.0.0.0:8000

# Using Docker
docker build -t ai-dash-grid .
docker run -p 8000:8000 ai-dash-grid

🔒 Security Considerations

  • API Key Management: Never commit API keys to version control
  • Input Validation: All user inputs are validated before processing
  • Error Handling: Comprehensive error handling for API failures
  • Data Privacy: Sample data only - no real customer information

📄 License

This project is licensed under the MIT License

🙏 Acknowledgments

  • Plotly Team for the amazing Dash framework
  • AG-Grid for the powerful data grid component
  • Google AI for the Gemini API capabilities

📞 Support

For questions, issues, or suggestions:


Built with ❤️ using Dash, AG-Grid, and Google Gemini AI