GoodData Dashboard with AI Analysis

A React application that embeds GoodData Cloud dashboards with AI-powered analysis capabilities. Features intelligent screenshot capture, GoodData metadata integration, and contextual insights powered by OpenAI's Vision API.

🚀 Features

Core Functionality

GoodData Dashboard Embedding: Full-featured GoodData dashboard with native filters and interactivity
AI-Powered Analysis: Individual visualization summaries and dashboard-level insights
Metadata Integration: Deep integration with GoodData's semantic layer (measures, attributes, MAQL formulas)
Smart Caching: Filter-aware caching to reduce API calls and improve performance
Dual Insights: Separate "Consumer" (business) and "Builder" (design) perspectives

AI Analysis Capabilities

Visualization-Level Analysis

AI Summary Buttons: One-click analysis on each visualization
Screenshot Capture: Automatic high-quality image generation
Consumer Insights: Business-focused analysis - what the data means for decisions
Builder Feedback: Design recommendations - how to improve the visualization
Metadata Enrichment: Analysis enhanced with MAQL formulas and measure definitions

Dashboard-Level Analysis

Comprehensive Overview: AI analysis of the entire dashboard
Executive Insights: High-level business takeaways
Dashboard Design Feedback: Layout, cohesion, and user experience recommendations
Context Awareness: Analysis considers dashboard filters and current state

Smart Caching System

Filter-Based Keys: Cache invalidates automatically when filters change
Performance Optimization: Instant results for repeated analyses
Timestamp Tracking: See when each analysis was generated

🛠 Setup

Prerequisites

Node.js 16+
npm or yarn
GoodData Cloud workspace access
OpenAI API key with GPT-4 Vision access

Installation

Clone the repository:

git clone https://github.com/strizr/ai-dashboard-summary.git
cd ai-dashboard-summary

Install dependencies:
```
npm install
```

Configure environment variables:

cp .env.example .env

Edit .env with your credentials:

# GoodData Configuration
REACT_APP_GOODDATA_HOST=your-gooddata-hostname.com
REACT_APP_GOODDATA_BACKEND=https://your-gooddata-hostname.com
REACT_APP_WORKSPACE_ID=your-workspace-id
REACT_APP_DASHBOARD_ID=your-dashboard-id
REACT_APP_API_TOKEN=your-gooddata-api-token
REACT_APP_DASHBOARD_NAME=Your Dashboard Name

# OpenAI Configuration
REACT_APP_OPENAI_API_KEY=your-openai-api-key

Start the application:
```
npm start
```
The app will open at http://localhost:3000

🏗 Architecture

Frontend Components

`src/components/DashboardEmbed/DashboardEmbed.js`

Main component that:

Embeds the GoodData dashboard
Tracks dashboard filters for cache invalidation
Renders the AIOverlay component
Manages dashboard configuration and authentication

`src/components/AIOverlay/AIOverlay.js`

Core AI integration component that:

Scans and identifies dashboard visualizations
Adds AI summary buttons to each chart
Captures screenshots using html2canvas
Manages analysis state and caching
Displays analysis results in modal with tabs

Services

`src/services/gooddataMetadataService.js`

Handles GoodData API integration:

Fetches dashboard definition and structure
Retrieves insight metadata (measures, attributes, filters)
Extracts MAQL formulas and business definitions
Maps widgets to insights for enrichment

`src/services/openaiAnalysisService.js`

Manages OpenAI Vision API communication:

Builds structured prompts with metadata and screenshots
Requests dual perspectives (consumer + builder)
Parses AI responses into structured format
Handles both visualization and dashboard-level analysis

Configuration

`src/config/config.js`

Centralized configuration:

GoodData connection settings
Workspace and dashboard IDs
OpenAI API configuration
Dashboard display name

🤖 AI Analysis Features

Visualization Analysis

Each visualization gets an "AI summary" button that provides:

Consumer Insights 📊

Business-focused interpretation of the data
Key trends and patterns
Decision-making implications
What the numbers mean in business context

Design Feedback 🎨

Visualization effectiveness assessment
Layout and color scheme recommendations
Chart type appropriateness
Readability and clarity improvements

Dashboard Analysis

Full dashboard analysis includes:

Executive Insights 📊

Cross-visualization patterns and relationships
Overall business story and narrative
Key findings across the dashboard
Strategic recommendations

Dashboard Design 🎨

Layout and information hierarchy
Visual consistency and cohesion
User experience optimization
Navigation and flow improvements

Metadata Integration

AI analysis is enriched with:

MAQL Formulas: How metrics are calculated
Measure Definitions: What each number represents
Attribute Context: Dimensional slicing information
Filter Context: Current dashboard state

🎨 User Interface

AI Summary Buttons

Position: Top-left corner of each visualization
Styling: Matches GoodData's native UI aesthetic
Loading States: Animated spinner during analysis
Cache Indicators: Shows when using cached results

Analysis Modal

Tabbed Interface: Separate tabs for consumer/builder insights
Screenshot Preview: Shows the analyzed visualization
Responsive Design: Works on desktop and tablet
Markdown Support: Rich formatting for structured insights
Timestamp Display: Shows when analysis was performed

Dashboard Analysis Button

Location: Top of the page next to dashboard name
Full Dashboard Screenshot: Captures entire visible dashboard
Comprehensive Analysis: Both tabs with executive + design insights

🔧 Configuration Options

Environment Variables

# GoodData Settings
REACT_APP_GOODDATA_HOST=          # GoodData hostname
REACT_APP_GOODDATA_BACKEND=       # Full backend URL
REACT_APP_WORKSPACE_ID=           # Workspace identifier
REACT_APP_DASHBOARD_ID=           # Dashboard identifier  
REACT_APP_API_TOKEN=              # GoodData API token
REACT_APP_DASHBOARD_NAME=         # Display name for dashboard

# OpenAI Settings
REACT_APP_OPENAI_API_KEY=         # OpenAI API key (GPT-4 Vision)

GoodData Dashboard Configuration

In DashboardEmbed.js, you can customize:

isReadOnly: Set to false for full interactivity
enableFilterBar: Show/hide filter controls
Dashboard theme and styling overrides

AI Analysis Customization

In openaiAnalysisService.js, you can adjust:

AI model version (currently gpt-4o)
Prompt templates for different perspectives
Response structure and parsing
Screenshot quality and size

🚀 Deployment

Production Build

# Build the application
npm run build

# Serve the build folder with any static hosting service
# Example with serve:
npx serve -s build

Environment Configuration

For production, ensure:

API Keys: Use environment-specific OpenAI keys
GoodData Tokens: Use production workspace credentials
CORS: Configure GoodData CORS settings for your domain
HTTPS: Use secure connections for both GoodData and OpenAI APIs

Deployment Platforms

The app can be deployed to:

Vercel: vercel --prod
Netlify: netlify deploy --prod
AWS Amplify: Connect your Git repository
Any static hosting: Upload the build folder

📊 How It Works

1. Dashboard Loading

User opens app → Authenticate with GoodData → Load dashboard → Initialize AIOverlay

2. AI Analysis Flow

User clicks "AI summary" → Capture screenshot → Fetch GoodData metadata → 
Build structured prompt → Call OpenAI Vision API → Parse response → 
Display in modal with tabs → Cache result

3. Cache Management

User changes filters → Hash filter state → Check cache → 
If cache miss: New analysis → If cache hit: Instant display

4. Metadata Enrichment

Get visualization title → Find matching insight → Fetch measures & attributes → 
Extract MAQL formulas → Include in AI prompt → Enhanced analysis

🔒 Security Best Practices

API Keys: Never commit .env file, use environment variables
Token Storage: GoodData tokens should be secured server-side in production
CORS: Configure strict CORS policies for your domains
Rate Limiting: Implement OpenAI API call limits to control costs
Input Validation: Sanitize all user inputs and API responses

📈 Performance Optimization

Current Optimizations

✅ Filter-based caching reduces redundant API calls
✅ Lazy loading of AI analysis (on-demand only)
✅ Screenshot compression for faster uploads
✅ GoodData metadata cached at dashboard load

Future Improvements

Server-side OpenAI calls for better security
IndexedDB for persistent caching
Web Workers for screenshot processing
Incremental analysis updates

🛠 Development

Project Structure

gooddata-dashboard-app/
├── src/
│   ├── components/
│   │   ├── AIOverlay/
│   │   │   └── AIOverlay.js          # Main AI integration component
│   │   └── DashboardEmbed/
│   │       ├── DashboardEmbed.js     # Dashboard wrapper
│   │       └── DashboardEmbed.css    # Custom styling
│   ├── services/
│   │   ├── gooddataMetadataService.js # GoodData API integration
│   │   └── openaiAnalysisService.js   # OpenAI API integration
│   ├── config/
│   │   └── config.js                  # Centralized configuration
│   ├── App.js                         # Root component
│   └── index.js                       # Entry point
├── public/
│   └── index.html
├── .env.example                       # Environment template
├── package.json
└── README.md

Key Technologies

React 18: Frontend framework
GoodData.UI SDK: Dashboard embedding and API
OpenAI GPT-4 Vision: AI analysis
html2canvas: Screenshot capture
Axios: HTTP client

🤝 Contributing

Contributions are welcome! Please:

Fork the repository
Create a feature branch: git checkout -b feature/your-feature
Commit your changes: git commit -m 'Add some feature'
Push to the branch: git push origin feature/your-feature
Open a Pull Request

📚 Documentation

🐛 Troubleshooting

Common Issues

"Authentication failed"

Verify your REACT_APP_API_TOKEN is valid
Check that your token has access to the specified workspace

"Dashboard not found"

Confirm REACT_APP_WORKSPACE_ID and REACT_APP_DASHBOARD_ID are correct
Ensure the dashboard exists and is shared with your account

"OpenAI API error"

Verify your REACT_APP_OPENAI_API_KEY is valid
Check that you have GPT-4 Vision API access
Monitor your OpenAI usage limits

"CORS errors"

Configure CORS settings in your GoodData workspace
Add your domain to the allowed origins list

📄 License

MIT License - see LICENSE file for details

🙏 Acknowledgments

GoodData for their excellent React SDK
OpenAI for GPT-4 Vision API
The html2canvas team for screenshot capabilities

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
public		public
server		server
src		src
.env.example		.env.example
.gitignore		.gitignore
GOODDATA_METADATA_INTEGRATION.md		GOODDATA_METADATA_INTEGRATION.md
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json

strizr/ai-dashboard-summary

Folders and files

Latest commit

History

Repository files navigation