Dashboard Configuration

Dashboard Configuration

Proper dashboard configuration ensures your data is displayed effectively and updates reliably. This guide covers all the configuration options available for your Querri dashboards.

Layout Customization

Dashboard layout is the foundation of a great user experience. Querri uses a flexible grid system that adapts to your needs.

Grid System

The dashboard grid allows you to:

• Position widgets precisely: Drag widgets to any location on the grid
• Resize widgets: Adjust width and height by dragging widget corners
• Snap to grid: Widgets automatically align for a clean appearance
• Overlap prevention: The system prevents widgets from overlapping

Layout Modes

Edit Mode: When editing your dashboard, you can:

• Drag and drop widgets to rearrange them
• Resize widgets by dragging handles
• Add new widgets
• Delete existing widgets
• Configure widget settings

View Mode: When viewing a dashboard, the layout is locked to prevent accidental changes. Users can still:

• Interact with filters
• Drill down into data
• Export visualizations
• Refresh data

Responsive Design Tips

Create dashboards that look great on all devices:

1. Start with desktop layout: Design for the largest screen first
2. Test on smaller screens: Check how your dashboard appears on tablets and phones
3. Stack vertically on mobile: Wide widgets automatically stack on narrow screens
4. Prioritize important widgets: Place critical information at the top
5. Use appropriate widget sizes: Avoid making widgets too small to be readable

Data Binding

Data binding connects your widgets to data sources, ensuring your dashboard displays the right information.

Binding Widgets to Project Steps

The most common data binding method:

1. Select your widget: Click on the widget you want to configure
2. Open data settings: Find the “Data Source” section in the configuration panel
3. Choose project: Select the project containing your data
4. Select step: Choose the specific step that produces the data
5. Map fields: If needed, map data fields to widget properties

Dynamic Data Binding

For advanced use cases, you can create dynamic bindings:

• Parameter-based binding: Change data sources based on user selections
• Date-relative binding: Always show data from “last 7 days” or “current month”
• Calculated bindings: Combine data from multiple sources

Example: Binding a Chart Widget

1. Add a bar chart widget to your dashboard
2. In the widget settings, select "Data Source"
3. Choose Project: "Sales Analysis"
4. Choose Step: "Step 3: Revenue by Region"
5. Map fields:
   - X-axis: region_name
   - Y-axis: total_revenue
   - Color: region_name
6. Save the configuration

Refresh Settings

Keep your dashboard data current with refresh settings.

Manual Refresh

Users can manually refresh dashboard data:

• Refresh button: Click the refresh icon to update all widgets
• Individual widget refresh: Refresh specific widgets independently
• Last updated timestamp: See when data was last refreshed

Automatic Refresh

Configure automatic refresh for real-time monitoring:

Refresh Intervals:

• Every 30 seconds (for real-time dashboards)
• Every 1 minute
• Every 5 minutes
• Every 15 minutes
• Every 30 minutes
• Every hour
• Custom interval

Configuration:

1. Open dashboard settings
2. Navigate to “Refresh Settings”
3. Enable “Automatic Refresh”
4. Select refresh interval
5. Choose which widgets to include in auto-refresh

Refresh Best Practices

• Don’t over-refresh: More frequent refreshes can slow performance
• Consider data update frequency: No need to refresh faster than your data updates
• Disable refresh for static data: Save resources on widgets that don’t change
• Warn users about costs: Frequent refreshes can increase database query costs

Filters and Parameters

Filters make your dashboards interactive and personalized.

Adding Dashboard Filters

1. Create a filter widget: Add a filter widget to your dashboard
2. Configure filter type: Choose dropdown, date range, search, etc.
3. Define filter values: Set the available options
4. Connect to widgets: Link the filter to the widgets it should affect

Filter Types

Single-Select Dropdown:

Filter Name: Region
Options: North, South, East, West
Default: All Regions

Multi-Select Dropdown:

Filter Name: Product Categories
Options: Electronics, Clothing, Food, Books
Allow Multiple: Yes
Default: All selected

Date Range Picker:

Filter Name: Date Range
Type: Date Range
Default: Last 30 Days
Presets: Today, Last 7 Days, Last 30 Days, Last Quarter, Custom

Search Filter:

Filter Name: Customer Search
Search Field: customer_name
Minimum Characters: 3

Cascading Filters

Create dependent filters for more sophisticated filtering:

1. First-level filter: Select a category (e.g., “Region”)
2. Second-level filter: Show only relevant options (e.g., “Cities in selected region”)
3. Third-level filter: Further refine (e.g., “Stores in selected city”)

Default Filter Values

Set smart defaults to show the most relevant data immediately:

• Current period: Default to current month or quarter
• User-specific: Show data relevant to the logged-in user
• Most common selection: Default to the most frequently chosen option
• All data: Show everything by default and let users filter down

Parameter Configuration

Parameters allow for advanced customization and dynamic behavior.

Global Parameters

Define parameters at the dashboard level:

Parameter Name: fiscal_year_start
Type: Number
Default Value: 1 (January)
Description: Month when fiscal year begins

These parameters can be used in:

• SQL queries
• Calculated fields
• Widget configurations
• Filter definitions

User-Specific Parameters

Some parameters can be set per user:

• User timezone: Display dates in user’s local time
• User preferences: Remember filter selections between sessions
• User permissions: Show/hide widgets based on access level

Performance Optimization

Configure your dashboard for optimal performance:

Caching

Enable caching to reduce database load:

1. Query caching: Store query results for a set period
2. Cache duration: Choose how long to cache (5 min, 15 min, 1 hour, etc.)
3. Cache invalidation: Automatically clear cache when data updates

Lazy Loading

Improve initial load time:

• Load visible widgets first: Below-the-fold widgets load when scrolled into view
• Defer heavy queries: Delay execution of complex queries until needed
• Progressive loading: Show simplified data first, then enhance with details

Query Optimization

• Limit result sets: Only fetch the data you need
• Use aggregated data: Pre-calculate summaries rather than aggregating raw data
• Index your data: Ensure database indexes exist for common queries
• Avoid N+1 queries: Fetch related data efficiently

Advanced Configuration

Custom Styling

Apply custom CSS to match your brand:

/* Custom dashboard theme */
.dashboard-container {
  background-color: #f5f5f5;
  font-family: 'Inter', sans-serif;
}

.widget-title {
  color: #1a1a1a;
  font-weight: 600;
}

Embedding External Content

Add context to your dashboard:

• Markdown widgets: Include formatted text, instructions, or documentation
• Image widgets: Add logos, diagrams, or reference images
• iframe widgets: Embed external web pages or applications

Mobile Configuration

Optimize for mobile devices:

• Mobile-specific layouts: Define different layouts for mobile vs. desktop
• Touch-friendly controls: Ensure filters and buttons are easy to tap
• Reduced data: Show summarized data on mobile to improve performance

Configuration Checklist

Before sharing your dashboard, verify:

• All widgets display data correctly
• Filters affect the intended widgets
• Refresh settings are appropriate for your data
• Layout looks good on desktop and mobile
• Performance is acceptable (dashboard loads in under 3 seconds)
• Default values make sense for your audience
• Colors and styling are consistent
• Widget titles are clear and descriptive

Next Steps

• Sharing Dashboards - Share your configured dashboard with others
• Scheduling & Automation - Automate dashboard updates and reports
• Widget Types - Learn more about widget options

Create dashboards that are not only informative but also performant and user-friendly!