Expert guidance for designing effective Apache Superset dashboards with professional layouts, intuitive navigation, and optimized user experience...
Expert guidance for designing effective Apache Superset dashboards with professional layouts, intuitive navigation, and optimized user experience. This skill helps you create dashboards that tell clear data stories - with specific templates for Finance SSC, BIR compliance, and operational monitoring.
Users should understand your dashboard's purpose in 3 seconds:
Users should find any insight within 5 clicks:
┌─────────────────────────────────────────────┐
│ Dashboard Title + Date Range Filter │ Row 1-2
├─────────────────────────────────────────────┤
│ [KPI 1] [KPI 2] [KPI 3] [KPI 4] │ Row 3-5
│ Big Num Big Num Big Num Big Num │
├─────────────────────────────────────────────┤
│ [Primary Chart - Full Width] │ Row 6-15
│ (Line/Area Chart - Trend Over Time) │
├─────────────────────────────────────────────┤
│ [Chart Left] │ [Chart Right] │ Row 16-25
│ (Bar Chart) │ (Donut/Table) │
└─────────────────────────────────────────────┘
Use For: Executive summaries, high-level monitoring Examples: BIR Compliance Overview, Monthly Performance Summary
┌─────────────────────────────────────────────┐
│ Filters: [Agency] [Status] [Date Range] │ Row 1-2
├─────────────────────────────────────────────┤
│ [Status 1] [Status 2] [Status 3] [Status 4] │ Row 3-5
│ Big Num Big Num Big Num Big Num │
├─────────────────────────────────────────────┤
│ [Chart 1] │ [Chart 2] │ Row 6-15
│ (Bar - Status) │ (Line - Trend) │
├─────────────────────────────────────────────┤
│ [Detailed Table - Full Width] │ Row 16-30
│ (Task List with Actions) │
└─────────────────────────────────────────────┘
Use For: Daily operations, task tracking Examples: Month-End Closing Tracker, InsightPulse Processing Monitor
┌─────────────────────────────────────────────┐
│ [Filter Bar] + [Time Comparison Toggle] │ Row 1-2
├─────────────────────────────────────────────┤
│ [Summary KPI Row] │ Row 3-5
├─────────────────────────────────────────────┤
│ [Primary Analysis Chart - Full Width] │ Row 6-18
│ (Interactive, Drill-Down Enabled) │
├─────────────────────────────────────────────┤
│ [Chart A] │ [Chart B] │ [Chart C] │ Row 19-28
│ (Related Metrics - Side by Side) │
├─────────────────────────────────────────────┤
│ [Detail Table or Drill-Down View] │ Row 29-40
└─────────────────────────────────────────────┘
Use For: Deep analysis, exploration Examples: Revenue Analysis, Document Processing Performance
Larger = More Important
Priority 1 (Largest):
- Primary KPI big numbers
- Main trend chart
- Critical alerts
Size: 6-8 grid columns, 6-12 rows
Priority 2 (Medium):
- Supporting charts
- Comparison views
- Category breakdowns
Size: 6-12 grid columns, 6-10 rows
Priority 3 (Smaller):
- Detail tables
- Reference data
- Supplementary metrics
Size: 4-6 grid columns, 4-8 rows
Top-Left = Highest Priority
Reading pattern: F-Pattern (Western audiences)
HIGH → → → Medium
↓
↓
Medium → → → Low
↓
Low → → → Low
Dashboard Zones:
Use color to guide attention:
High Attention:
- Red: Alerts, overdue, errors (use sparingly!)
- Green: Success, on-track, completed
- Yellow/Orange: Warnings, pending
Medium Attention:
- Blue: Primary data, informational
- Purple: Secondary categories
Low Attention:
- Gray: Inactive, disabled, context
- White/Light: Background, spacing
┌─────────────────────────────────────────────┐
│ [Filter 1] [Filter 2] [Filter 3] [Date] │
└─────────────────────────────────────────────┘
Pros: Always visible, consistent location Use When: 2-5 key filters, executive/operational dashboards
┌─────┬───────────────────────────────────────┐
│ F1 │ │
│ F2 │ Dashboard Content │
│ F3 │ │
│ F4 │ │
└─────┴───────────────────────────────────────┘
Pros: More filter space, doesn't push content down Use When: 6+ filters, analytical dashboards
┌─────────────────────────────────────────────┐
│ [▼ Advanced Filters] │
└─────────────────────────────────────────────┘
Pros: Clean initial view, reduces clutter Use When: Optional filters, mobile dashboards
| Filter Type | Best For | Example |
|---|---|---|
| Dropdown (Single) | Select one option | Agency selection |
| Dropdown (Multi) | Select multiple | Multiple form types |
| Date Range | Time period selection | Filing date range |
| Radio Buttons | 2-4 options, always visible | Status (Active/Inactive) |
| Text Search | Finding specific items | Search invoice number |
| Slider | Numeric range | Amount range |
| Checkbox | Boolean toggles | Show only overdue |
Default Values:
# Set smart defaults
Agency Filter: "All Agencies" (not blank)
Date Range: "Current Month" or "Last 30 Days"
Status: "Active" (exclude archived by default)
Filter Dependencies:
# Parent → Child relationship
Country → City → Region
- City list updates based on Country selection
- Region list updates based on City selection
Agency → Department → Employee
- Cascade filters for organizational hierarchy
Required vs Optional:
Required Filters:
- Force user to make selection
- Use for: Date range (to prevent huge queries)
Optional Filters:
- Allow "All" option
- Use for: Most category filters
What is Cross-Filtering? Clicking on a chart element filters other charts on the dashboard.
Example:
User clicks "CKVC" in Agency Bar Chart
→ All other charts update to show only CKVC data
→ Filter indicator appears at top
→ User can clear to return to all agencies
Configuration:
Enable Cross-Filtering:
Dashboard Settings → Enable cross-filtering
Per Chart:
Chart Settings → Emit Dashboard Cross Filters: ON
Chart Settings → Can Be Filtered By Dashboard Filters: ON
Best Practices:
Pattern 1: Summary → Detail
Dashboard 1: Executive Summary
Click metric → Navigate to
Dashboard 2: Detailed Analysis
With pre-filtered data
Pattern 2: Chart → Table
Same Dashboard:
Top: Bar chart (aggregated)
Bottom: Table (detailed rows)
Cross-filter enabled: Click bar → Table filters
Pattern 3: Dashboard Tabs
Tab 1: Overview
Tab 2: By Agency
Tab 3: By Month
Tab 4: Detailed Reports
Purpose: Monitor filing status across multiple agencies
Layout:
┌─────────────────────────────────────────────────────────┐
│ BIR Filing Compliance Dashboard - Q4 2025 │
│ Filters: [Agency ▼] [Form Type ▼] [Quarter: Q4 2025] │ Row 1-2
├─────────────────────────────────────────────────────────┤
│ [Total] [Completed] [Pending] [Overdue] │ Row 3-6
│ 245 198 (81%) 32 (13%) 15 (6%) │
│ 🟢 🟡 🔴 │
├─────────────────────────────────────────────────────────┤
│ Compliance Trend (Line Chart - 12 months) │ Row 7-16
│ Shows: Completion % over time + 90% target line │
├─────────────────────────────────────────────────────────┤
│ Filings by Agency │ Form Type Distribution │ Row 17-26
│ (Horizontal Stacked Bar)│ (Donut Chart) │
│ Status: Done/Pending/ │ 1601-C, 2550Q, 1702-RT │
│ Overdue │ │
├─────────────────────────────────────────────────────────┤
│ Upcoming Deadlines & Overdue Items (Table) │ Row 27-40
│ Columns: Agency | Form | Due Date | Status | Assignee │
│ Sorted: Overdue first, then by due date │
└─────────────────────────────────────────────────────────┘
Key Features:
SQL Snippets:
-- KPI: Total Filings
SELECT COUNT(*) FROM bir_filing_tracker WHERE filing_period = '2025-Q4'
-- KPI: Completion Rate
SELECT
(COUNT(CASE WHEN filing_status = 'Completed' THEN 1 END)::FLOAT /
COUNT(*)::FLOAT * 100) as completion_percentage
FROM bir_filing_tracker WHERE filing_period = '2025-Q4'
-- Chart: Filings by Agency (Stacked)
SELECT
agency_name,
filing_status,
COUNT(*) as count
FROM bir_filing_tracker
WHERE filing_period = '2025-Q4'
GROUP BY agency_name, filing_status
ORDER BY agency_name
Purpose: Track closing tasks progress across agencies
Layout:
┌─────────────────────────────────────────────────────────┐
│ Month-End Closing Progress - October 2025 │
│ Filters: [Agency ▼] [Task Category ▼] [Assignee ▼] │ Row 1-2
├─────────────────────────────────────────────────────────┤
│ [Overall Progress Gauge: 73%] [Days Until Close: 5] │ Row 3-8
│ [Tasks Overdue: 8 🔴] │
├─────────────────────────────────────────────────────────┤
│ Task Completion by Agency (Horizontal Bar - Stacked) │ Row 9-20
│ Shows: % Done, In Progress, Not Started per agency │
│ Sorted: By completion % │
├─────────────────────────────────────────────────────────┤
│ Daily Completion Trend │ Task Status Breakdown │ Row 21-30
│ (Area Chart) │ (Donut Chart) │
│ Cumulative tasks done │ Done/In Progress/ │
│ │ Blocked/Not Started │
├─────────────────────────────────────────────────────────┤
│ Task Details (Table - Sortable, Filterable) │ Row 31-50
│ Columns: Task | Agency | Assignee | Due | Status | │
│ Days Variance | Actions │
│ Conditional Formatting: Red (overdue), Yellow (due soon)│
└─────────────────────────────────────────────────────────┘
Key Features:
Refresh: Auto-refresh every 5 minutes during closing period
Purpose: Real-time document processing monitoring
Layout:
┌─────────────────────────────────────────────────────────┐
│ InsightPulse AI - Document Processing Monitor │
│ [Time Range: Last 24 Hours ▼] [Auto-refresh: ON] │ Row 1-2
├─────────────────────────────────────────────────────────┤
│ [Docs Processed] [Avg Speed] [OCR Accuracy] [Errors] │ Row 3-6
│ 1,247 (+8%) 3.2s (-5%) 96.4% 23 (1.8%) │
│ 🟢 🟢 🟢 🟡 │
├─────────────────────────────────────────────────────────┤
│ Processing Volume Over Time (Area Chart - Hourly) │ Row 7-18
│ Shows: Successful + Failed (stacked) │
├─────────────────────────────────────────────────────────┤
│ Processing Time Trend │ Document Type Distribution │ Row 19-28
│ (Line Chart) │ (Bar Chart) │
│ Avg seconds per doc │ Invoices, Receipts, etc. │
├─────────────────────────────────────────────────────────┤
│ Recent Errors & Failed Processing (Table) │ Row 29-45
│ Columns: Timestamp | Document ID | Type | Error | │
│ Retry Status | Actions │
│ Auto-refresh: Every 30 seconds │
└─────────────────────────────────────────────────────────┘
Key Features:
Primary Colors:
Brand Blue: #1890FF # Primary actions, info
Success Green: #52C41A # Completed, on-track
Warning Yellow:#FAAD14 # Pending, review needed
Danger Red: #F5222D # Overdue, errors, critical
Status Indicators:
Completed: #52C41A (Green)
In Progress: #1890FF (Blue)
Pending: #FAAD14 (Yellow)
Overdue: #F5222D (Red)
Blocked: #FA8C16 (Orange)
Not Started: #8C8C8C (Gray)
Agency Colors (Consistent across all dashboards):
RIM: #1890FF (Blue)
CKVC: #52C41A (Green)
BOM: #FA8C16 (Orange)
JPAL: #722ED1 (Purple)
JLI: #13C2C2 (Cyan)
JAP: #F5222D (Red)
LAS: #FADB14 (Gold)
RMQB: #EB2F96 (Magenta)
If using dark theme:
Background: #141414 (Very Dark Gray)
Text: #FFFFFF (White)
Charts: Brighter colors, higher contrast
Emphasis: Use white/light blue for highlights
Key Principles:
Mobile Layout Example:
┌─────────────┐
│ [Filters ▼] │ Collapsible
├─────────────┤
│ [KPI Card 1]│ Full width
│ [KPI Card 2]│ Stacked
│ [KPI Card 3]│ vertically
├─────────────┤
│ [Chart 1] │ Full width
│ (Bar Chart) │ 6-8 rows
├─────────────┤
│ [Chart 2] │ Full width
│ (Line) │ 6-8 rows
├─────────────┤
│ [Table] │ Horizontal
│ (Scrollable)│ scroll
└─────────────┘
Mobile Optimizations:
1. Query Optimization
Cache Results:
- Enable query caching for stable data
- Set cache timeout based on data freshness needs
- BIR data: 1 hour cache
- Real-time monitoring: 1 minute cache
Async Queries:
- Enable for slow queries (> 10 seconds)
- User sees loading spinner per chart
- Dashboard still usable while loading
2. Chart Optimization
Limit Data Points:
- Line charts: Max 365 points (daily for 1 year)
- Bar charts: Max 20-30 bars
- Tables: Paginate at 100-500 rows
Use Appropriate Time Grain:
- Last 7 days: Hourly
- Last 30 days: Daily
- Last year: Weekly or Monthly
3. Dashboard Structure
Tabs for Related Views:
- Split heavy dashboard into tabs
- Load tabs on-demand (not all at once)
Lazy Loading:
- Load visible charts first
- Defer below-fold charts
Real-Time Monitoring (10-60 seconds):
- Use For: Error monitoring, live operations
- Example: InsightPulse processing errors
- Warning: High database load
Operational Updates (5-15 minutes):
- Use For: Task status, work-in-progress
- Example: Month-end closing progress
- Balance: Fresh data vs. performance
Periodic Refresh (1-24 hours):
- Use For: Reports, historical analysis
- Example: BIR compliance trends
- Cache: Enable aggressive caching
Manual Refresh:
Minimum Contrast Ratios:
- Normal Text: 4.5:1
- Large Text (18px+): 3:1
- UI Components: 3:1
Test Tools:
- WebAIM Contrast Checker
- Browser DevTools Accessibility
Chart Descriptions:
- Add meaningful alt text
- Describe chart purpose and key findings
Table Headings:
- Use proper header row markup
- Sortable column labels
Filter Labels:
- Clear, descriptive labels
- Associated with input fields
Tab Order:
- Logical flow (filters → charts → tables)
- Skip links for long pages
Interactive Elements:
- All clickable items keyboard accessible
- Visible focus indicators
Before publishing a dashboard:
Content & Layout:
Functionality:
Performance:
User Experience:
Documentation:
Problem: Too many charts with no organization Solution: Group related charts, use tabs, prioritize
Problem: 10+ filters, user overwhelmed Solution: Collapsible filters, smart defaults, progressive disclosure
Problem: Key metrics at bottom or hidden Solution: F-pattern layout, KPIs at top-left
Problem: Different color schemes, layouts per dashboard Solution: Dashboard templates, style guide, consistent palette
Problem: No indication of data freshness Solution: Show last updated time, auto-refresh for live data
Problem: Unusable on mobile devices Solution: Test mobile view, create mobile variant if needed
Draft Version:
- Visible only to creator
- Experiment freely
- Get feedback from stakeholders
Staging Version:
- Share with test users
- Validate with real data
- Collect usability feedback
Production Version:
- Published to all users
- Monitor usage analytics
- Plan improvements
Deprecated:
- Old version archived
- Redirect users to new version
Methods:
Iterate Based On:
Data Refresh Patterns:
-- Odoo data synced to Supabase every 15 minutes
-- Dashboard queries Supabase PostgreSQL
-- Cache dashboard results for 5-15 minutes
-- Result: Fresh data with good performance
User Permissions:
Finance SSC Admins:
- Can edit all dashboards
- Access all agency data
Agency Leads:
- View own agency data only
- Cannot edit dashboards
Executives:
- View all data (read-only)
- Access executive dashboards only
Using Superset MCP Server:
# Fetch dashboard via MCP
mcp.call_tool("get_superset_dashboard", {
"dashboard_id": 123
})
# Update chart via MCP
mcp.call_tool("update_superset_chart", {
"chart_id": 456,
"config": {...}
})
After designing your dashboard:
superset-chart-builder skillRelated Skills:
superset-chart-builder - Build individual chartssuperset-sql-developer - Optimize data queriespmbok-project-management - Dashboard project planningFor Superset dashboard features:
# View dashboard list
http://your-superset-url/dashboard/list/
# Dashboard URL pattern
http://your-superset-url/superset/dashboard/{id}/
Your Context: