Revenue Growth Dashboard

A Grafana dashboard that visualizes revenue data from Google BigQuery, featuring time series analysis, growth rates, and revenue distribution across market segments.

Prerequisites

• Google Cloud Platform account with BigQuery enabled
• Docker and Docker Compose installed
• Python 3.x with uv package manager
• gcloud CLI configured

Setup Instructions

1. Authenticate with Google Cloud

First, authenticate with your Google Cloud account:

gcloud auth application-default login

This creates credentials at ~/.config/gcloud/application_default_credentials.json.

2. Setup BigQuery Data

Run the setup script to generate fake revenue data and create the BigQuery table:

uv run setup_bq.py

This will:

• Create a dataset called revenue_dashboard in your project
• Generate 1000 rows of fake revenue data spanning the last 365 days
• Upload the data to the revenue_growth table

Note: If needed, update PROJECT_ID in setup_bq.py to match your GCP project.

3. Prepare Credentials for Grafana

Create a .gcp directory and copy your credentials with proper permissions:

mkdir -p .gcp
cp ~/.config/gcloud/application_default_credentials.json .gcp/credentials.json
chmod 644 .gcp/credentials.json

This allows the Grafana Docker container to read your GCP credentials.

4. Start Grafana

Start the Grafana instance using Docker Compose:

docker compose up -d

Wait about 30 seconds for Grafana to fully start and install the BigQuery plugin.

5. Access the Dashboard

1. Open your browser and go to http://localhost:3000
2. Login with default credentials:
   • Username: admin
   • Password: admin
3. Navigate to Dashboards → Browse
4. Click on Revenue Growth Dashboard

The dashboard should now display data from BigQuery!

Dashboard Features

Panels

• Revenue by Market Segment: Time series chart showing revenue trends over time, grouped by market segment (Enterprise, SMB, Consumer, Government, Education)
• Average Growth Rate by Segment: Bar gauge displaying the average growth rate for each market segment
• Revenue Share by Segment: Pie chart showing the distribution of total revenue across segments

Time Range

• Default: Last 1 year
• Adjustable using the time picker in the top-right corner

Architecture

┌─────────────────┐
│   Grafana       │
│  (Docker)       │
└────────┬────────┘
         │
         ├─ BigQuery Plugin
         │
         ├─ Datasource: BigQuery
         │  └─ Auth: User Credentials
         │
         └─ Dashboard: dashboard.json
                │
                ▼
┌─────────────────────────────┐
│  Google BigQuery            │
│                             │
│  Dataset: revenue_dashboard │
│  Table: revenue_growth      │
│    - date (DATE)            │
│    - market_segment (STRING)│
│    - revenue (FLOAT)        │
│    - growth_rate (FLOAT)    │
│    - region (STRING)        │
└─────────────────────────────┘

Troubleshooting

No data showing in dashboard

1. Check BigQuery table: Verify data exists

   bq query --use_legacy_sql=false "SELECT COUNT(*) FROM \`dw-genai-dev.revenue_dashboard.revenue_growth\`"

2. Check Grafana logs:

   docker compose logs grafana --tail=100

3. Verify credentials file: Ensure the credentials file is readable

   docker exec vibe-grafana cat /etc/secrets/gcp-creds.json | head -c 100

Authentication errors

If you see "missing authentication details" errors:

1. Ensure credentials file exists and is readable:

   ls -la .gcp/credentials.json

2. Restart Grafana:

   docker compose restart grafana

Query errors

If you see BigQuery query errors in the logs, verify:

• The project ID matches your GCP project
• Your user account has BigQuery Data Viewer and Job User roles
• The dataset and table exist in BigQuery

Stopping the Dashboard

To stop Grafana:

docker compose down

To completely remove Grafana data and start fresh:

docker compose down
docker volume ls | grep graf | awk '{print $2}' | xargs -r docker volume rm

Files

• setup_bq.py - Python script to generate and upload fake data to BigQuery
• dashboard.json - Grafana dashboard configuration
• datasources.yaml - BigQuery datasource configuration
• dashboard_provider.yaml - Dashboard provisioning configuration
• docker-compose.yaml - Docker Compose configuration for Grafana
• .gcp/credentials.json - GCP credentials for authentication (created during setup)

Notes

• The dashboard uses Grafana's $__timeFilter() macro with TIMESTAMP(date) conversion for DATE columns
• Authentication uses user credentials via the mounted credentials file
• The BigQuery datasource is automatically provisioned on Grafana startup
• Default time range is "Last 1 year" to show all generated data

Appendix

AI-Assisted Development with Vibe Coding

This project was created using AI-assisted development. Below is the original prompt that generated this entire dashboard setup, demonstrating how natural language can be transformed into production-ready code.

Original Prompt

Please create a dashboard to show which market segments are driving our revenue
growth this quarter. Please use a fake data source in BigQuery. The dashboard
framework is Grafana.

What Was Generated

From this single prompt, the AI assistant autonomously created:

1. Data Pipeline (setup_bq.py)

• Generates 1000 rows of realistic revenue data across 5 market segments and 4 regions
• Creates BigQuery dataset and table with proper schema
• Handles authentication and error cases

2. Visualization Dashboard (dashboard.json)

• Three interconnected panels showing different views of the data
• Proper SQL queries with Grafana macros for dynamic time filtering
• Responsive layout with appropriate chart types for each metric

3. Infrastructure as Code

• docker-compose.yaml - Containerized Grafana with BigQuery plugin
• datasources.yaml - Auto-provisioned BigQuery datasource
• dashboard_provider.yaml - Automatic dashboard loading
• Credentials mounting and permission handling

4. Complete Documentation

• Step-by-step setup instructions
• Troubleshooting guide with common issues
• Architecture diagram
• This README with all necessary context

Technical Challenges Solved

During development, the AI assistant identified and resolved several technical issues:

1. Authentication Configuration

   • Problem: Docker containers cannot access GCE metadata service
   • Solution: Mount user credentials with proper permissions (644)

2. Query Compatibility

   • Problem: Grafana's $__timeFilter() macro expects TIMESTAMP, not DATE
   • Solution: Wrap DATE columns with TIMESTAMP() function in queries

3. Dashboard Format Codes

   • Problem: BigQuery plugin v3.0.2+ uses numeric format codes
   • Solution: Use 0 for table format, 1 for time series format

4. Permissions in Docker

   • Problem: Mounted credentials file not readable by Grafana container user
   • Solution: Copy credentials to local directory with world-readable permissions

Development Time

• With AI Assistant: ~1 hour (including troubleshooting)
• Traditional Development: Estimated 4-6 hours

Key Takeaways

This project demonstrates how AI-assisted development can:

• Rapidly prototype end-to-end data visualization solutions
• Generate production-ready code with proper error handling
• Create comprehensive documentation alongside code
• Iteratively debug and fix issues through conversation
• Significantly reduce time-to-value for dashboard projects