Dashboard Viewer

Screen Layout

The Dashboard View is organized into two main areas: the toolbar and the widget grid.

1. Header Toolbar

The toolbar at the top provides quick access to all dashboard controls and information.

• Dashboard Name - Displays the name of the current dashboard at the top left
• Description - Shows the dashboard description (if provided) on larger screens
• Last Updated - Timestamp showing when the dashboard data was last refreshed
• Refresh Button - Manually refresh all dashboard data immediately
• Export Menu - Export dashboard as PNG, PDF, or JSON format
• Fullscreen Button - Toggle fullscreen mode for distraction-free viewing
• Edit Button - Switch to edit mode inline without opening a new activity. Allows you to modify the dashboard layout and widgets
• Close Button - Close the dashboard and return to your previous view

2. Widget Grid

The main area displays your dashboard widgets in a responsive grid layout.

• Desktop View - On larger screens (1024px and above), widgets are displayed in a customizable grid layout
• Mobile View - On smaller screens, widgets stack vertically for optimal viewing
• Widget Cards - Each widget appears in a card with optional title header and chart content
• Responsive Charts - Charts automatically resize when the window is resized or screen orientation changes

Viewing Dashboard Data

Dashboard View displays data from your configured chart widgets, providing real-time insights into your MongoDB databases.

Chart Widgets

Each chart widget displays data from a MongoDB query or aggregation pipeline. The dashboard automatically loads data from all configured charts when opened.

• Interactive Charts - Hover over charts to see detailed tooltips with data values
• Zoom and Pan - Use mouse scroll or touch gestures to zoom in/out on charts (where supported)
• Legend Toggle - Click legend items to show/hide specific data series
• Data Refresh - Charts update automatically when you refresh the dashboard

Widget States

Widgets can display in different states depending on their configuration and connection status:

• Loading - Spinner appears while chart data is being fetched
• Loaded - Chart displays with current data from the database
• Disconnected - If the database connection is closed, the widget shows cached data from the last refresh
• Chart Not Found - Warning message appears if the underlying chart has been deleted
• Loading Map - For geographic charts, a loading indicator appears while map data loads

Refreshing Dashboard Data

Keep your dashboard data current by refreshing manually or enabling automatic updates.

Manual Refresh

Click the Refresh button in the toolbar to immediately reload data for all widgets.

• Refresh Button - Click the sync icon in the toolbar to refresh all widgets
• Connection Check - If required connections are closed, you'll be prompted to open them
• Selective Refresh - The system only refreshes widgets whose connections are active
• Progress Indicator - A loading overlay appears while data is being fetched

Connection Management

When refreshing a dashboard with closed connections:

1. The system checks which connections are needed for the dashboard widgets
2. If any connections are closed, a confirmation dialog appears listing them by name
3. Choose "Yes, open connections" to automatically connect to the required databases
4. The dashboard refreshes once all connections are established
5. Click "Cancel" to skip refreshing widgets that require closed connections

Fullscreen Mode

Fullscreen mode provides an immersive, distraction-free view of your dashboard - perfect for presentations, monitoring displays, or focused data analysis.

Entering Fullscreen

• Fullscreen Button - Click the expand icon in the toolbar to enter fullscreen mode
• Browser Fullscreen - The entire browser window enters fullscreen, hiding browser chrome and OS elements
• Simplified Header - A minimal header overlay appears at the top with just the dashboard name and exit button
• Maximized Charts - Charts expand to fill the available screen space for better visibility

Exiting Fullscreen

• Exit Button - Click the compress icon in the fullscreen header to exit
• Keyboard Shortcut - Press the Esc key to exit fullscreen mode
• Auto-Exit - Some browsers exit fullscreen automatically when switching tabs or applications

Exporting Dashboards

Share your dashboard insights by exporting to various formats. The export menu in the toolbar provides three export options.

Export Formats

• Export as PNG - Captures the entire dashboard as a high-quality PNG image file. Perfect for embedding in presentations, documents, or sharing via email. The image includes all visible widgets and maintains chart quality at 2x resolution for crisp display.
• Export as PDF - Generates a PDF document containing the full dashboard. Automatically selects landscape or portrait orientation based on the dashboard layout. Ideal for formal reports, archiving, or printing dashboard snapshots.
• Export as JSON - Downloads the dashboard configuration as a JSON file. Use this to back up dashboards, share configurations with team members, or migrate dashboards between VisualLeaf instances. The JSON includes all widget settings, layout information, and chart references.

Export Process

1. Hover over the Export button (download icon) in the toolbar to reveal the dropdown menu
2. Click your desired export format (PNG, PDF, or JSON)
3. An "Generating export..." overlay appears during processing (for PNG/PDF exports)
4. The file downloads automatically to your browser's default download location
5. File names include the dashboard name and timestamp for easy identification

Interacting with Charts

Dashboard charts are fully interactive, allowing you to explore data in detail without leaving the view.

Chart Interactions

• Hover Tooltips - Move your mouse over chart elements to see detailed data values in a tooltip
• Legend Toggling - Click items in the chart legend to show or hide specific data series
• Zoom Controls - Use mouse scroll wheel or pinch gestures to zoom in/out on supported chart types
• Pan Navigation - Click and drag to pan across zoomed charts (line, area, and time-series charts)
• Data Selection - Click and drag to select a specific time range or data region in some chart types
• Reset View - Double-click on a chart to reset zoom and pan to default view

Chart-Specific Features

• Bar/Line Charts - Click legend items to show/hide series, hover for exact values
• Pie/Donut Charts - Hover over slices to see percentages and values, click legend to toggle slices
• Geographic Maps - Zoom and pan to explore different regions, hover for location-specific data
• Scatter Plots - Hover over points to see coordinates and additional data dimensions
• Heatmaps - Hover to see exact values for each cell in the matrix

Responsive Layout

Dashboards automatically adapt to different screen sizes and devices for optimal viewing on any platform.

Desktop View (1024px and above)

On larger screens, dashboards use the configured grid layout:

• Custom Grid - Widgets are positioned according to the grid layout defined in edit mode
• Flexible Sizing - Each widget can span multiple columns and rows based on its configuration
• Optimal Spacing - Consistent gaps between widgets create a clean, organized appearance
• Full Toolbar - All toolbar options are visible and accessible

Mobile/Tablet View (below 1024px)

On smaller screens, the layout automatically switches to a vertical stack:

• Stacked Layout - Widgets stack vertically for easy scrolling
• Minimum Height - Chart widgets maintain a minimum 400px height for readability
• Touch-Friendly - Larger tap targets and touch gestures work smoothly
• Compact Toolbar - Less-used options may be hidden or collapsed on very small screens

Window Resize Handling

When you resize the browser window:

• Auto-Resize - Charts automatically resize to fit their container
• Layout Switch - Crossing the 1024px breakpoint switches between grid and stacked layout
• Smooth Transition - Layout changes happen smoothly without jarring jumps
• Aspect Preservation - Charts maintain their aspect ratios and readability across sizes

Empty Dashboard

If a dashboard has no configured widgets, an empty state appears with helpful guidance.

Empty State Components

• Icon - Large dashboard icon indicates this is an empty dashboard
• Message - Clear text explains that no widgets have been added yet
• Edit Button - Quick action button to switch to edit mode and add widgets

Click the "Edit Dashboard" button to enter edit mode where you can add chart widgets, configure the layout, and customize the dashboard.

Quick Actions

All dashboard actions are accessible from the toolbar at the top of the screen.

• Refresh Dashboard - Reload data for all widgets from their respective MongoDB databases. If connections are closed, you'll be prompted to open them before refreshing. The last updated timestamp updates to show when the refresh completed.
• Toggle Fullscreen - Enter or exit fullscreen mode for distraction-free dashboard viewing. Press Esc or click the compress icon to exit. Ideal for presentations, monitoring displays, or focused data analysis sessions.
• Edit Dashboard - Switch to edit mode inline within the same activity. Add, remove, and rearrange widgets, modify the grid layout, and update dashboard settings. Click Save when done to save your changes and return to view mode, or use the back button to discard changes.
• Close Dashboard - Close the current dashboard and return to your previous activity. The dashboard state is automatically saved, so you can reopen it later with all your configurations intact.

Pro Tips

• Use fullscreen for presentations - Use fullscreen mode when displaying dashboards on wall-mounted monitors or during team meetings for maximum impact and visibility.
• Export as PNG for backup - Export dashboards as PNG before important meetings to have a static backup in case of connectivity issues during presentations.
• Cached data when disconnected - When a connection is closed, dashboards show cached data from the last refresh. This lets you view historical snapshots even when disconnected.
• Check the timestamp - The "Last updated" timestamp helps you gauge data freshness. Click refresh if the timestamp is older than expected for your monitoring needs.
• Toggle legend items - Click chart legend items to temporarily hide data series. This is helpful when you want to focus on specific trends or compare a subset of the data.
• Responsive layout - Dashboards automatically adapt between grid and stacked layouts at 1024px width. Keep this in mind when designing dashboards for both desktop and tablet viewing.
• Quick edit workflow - The Edit button switches to edit mode inline, and saving returns you to view mode. This seamless workflow lets you make quick adjustments without navigating between multiple activities.

Related Features

• Dashboard Builder - Learn how to create and customize dashboards with widgets and layout configurations
• Chart Builder - Understand how to create the chart configurations that power dashboard widgets
• Connection Manager - Manage the database connections that feed data to your dashboards
• Aggregation Builder - Create complex data transformations for advanced dashboard analytics
• Export Data - Export raw data from collections to complement your dashboard visualizations