Dashboard Layout and Design - Analytics Help Center

Before You Start

The Analytics Module provides a powerful and flexible dashboard layout system. Understanding the grid system, chart positioning, and responsive design will help you create effective and user-friendly dashboards.

Overview

The Analytics Module provides a powerful and flexible dashboard layout system that allows you to create custom, responsive dashboards with drag-and-drop functionality. This guide covers all aspects of dashboard layout design, including grid systems, chart positioning, responsive design, and customization options.

Grid-Based Layout System

Understanding the Grid System

The dashboard uses a 12-column grid system that provides flexible and responsive layouts:

Grid Configuration

Total Columns: 12 columns across the dashboard width
Row Height: 30 pixels per row unit
Minimum Chart Size: 6 columns wide × 12 rows high
Maximum Chart Size: 12 columns wide (full width)
Grid Behavior: Vertical and horizontal compact mode

Grid Properties

{ colNum: 12, // Number of columns rowHeight: 30, // Height of each row unit draggable: true, // Enable drag functionality resizable: true, // Enable resize functionality verticalCompact: true, // Compact vertically horizontalCompact: true // Compact horizontally }

Chart Positioning

Position Properties

Each chart in the dashboard has specific positioning properties:

X Position: Horizontal position (0-11, representing columns)
Y Position: Vertical position (row number)
Width (W): Number of columns the chart spans (6-12)
Height (H): Number of row units the chart spans (12+)
Unique ID (I): Unique identifier for each chart

Example Layout Configuration

{ x: 0, // Start at first column y: 0, // Start at first row w: 6, // Span 6 columns (half width) h: 12, // Span 12 rows i: 'chart1' // Unique identifier }

Layout Examples

Two-Column Layout

[ { x: 0, y: 0, w: 6, h: 12, i: 'chart1' }, // Left column { x: 6, y: 0, w: 6, h: 12, i: 'chart2' } // Right column ]

Three-Column Layout

[ { x: 0, y: 0, w: 4, h: 12, i: 'chart1' }, // Left column { x: 4, y: 0, w: 4, h: 12, i: 'chart2' }, // Center column { x: 8, y: 0, w: 4, h: 12, i: 'chart3' } // Right column ]

Mixed Layout

[ { x: 0, y: 0, w: 8, h: 12, i: 'chart1' }, // Large chart { x: 8, y: 0, w: 4, h: 6, i: 'chart2' }, // Small chart top { x: 8, y: 6, w: 4, h: 6, i: 'chart3' } // Small chart bottom ]

Chart Positioning and Sizing

Chart Dimensions

Width Options

Full Width: 12 columns (entire dashboard width)
Half Width: 6 columns (50% of dashboard width)
Third Width: 4 columns (33.33% of dashboard width)
Quarter Width: 3 columns (25% of dashboard width)
Custom Width: Any value between 6-12 columns

Height Options

Standard Height: 12 row units (360 pixels)
Tall Charts: 16-20 row units (480-600 pixels)
Short Charts: 8-10 row units (240-300 pixels)
Custom Height: Any value 12+ row units

Size Constraints

Minimum Requirements

Minimum Width: 6 columns (ensures readability)
Minimum Height: 12 row units (ensures proper chart display)
Aspect Ratio: Maintained automatically by the grid system

Maximum Limits

Maximum Width: 12 columns (full dashboard width)
Maximum Height: Unlimited (based on content needs)
Responsive Limits: Automatically adjusted for different screen sizes

Chart Spacing and Alignment

Automatic Spacing

Grid Gaps: Automatic spacing between chart elements
Padding: 20px internal padding for each chart
Margins: Automatic margins for proper alignment

Alignment Options

Left Alignment: Charts align to the left edge
Center Alignment: Charts center within their allocated space
Right Alignment: Charts align to the right edge
Top Alignment: Charts align to the top of their row

Drag-and-Drop Functionality

Enabling Drag-and-Drop

Edit Mode

Toggle Edit Mode: Click "Edit Chart" button to enable editing
Drag Handles: Use the drag handle (arrows icon) to move charts
Resize Handles: Use corner handles to resize charts
Visual Feedback: Charts show drag and resize indicators

Drag Controls

{ isDraggable: true, // Enable dragging isResizable: true, // Enable resizing dragAllowFrom: '.vue-draggable-handle', // Drag handle selector dragIgnoreFrom: '.no-drag' // Ignore drag on specific elements }

Drag-and-Drop Operations

Moving Charts

Enter Edit Mode: Click "Edit Chart" button
Locate Drag Handle: Find the arrows icon in the chart header
Click and Drag: Click the handle and drag to new position
Drop: Release to place the chart in the new location
Auto-Reposition: Other charts automatically reposition

Resizing Charts

Enter Edit Mode: Click "Edit Chart" button
Locate Resize Handles: Find corner resize handles
Click and Drag: Click handle and drag to resize
Maintain Proportions: Hold Shift to maintain aspect ratio
Auto-Adjust: Grid automatically adjusts to new size

Drag-and-Drop Best Practices

Optimal Positioning

Logical Flow: Arrange charts in logical reading order
Related Charts: Group related charts together
Visual Hierarchy: Place important charts prominently
Balance: Distribute charts evenly across the dashboard

Performance Considerations

Smooth Dragging: Charts maintain smooth movement during drag
Real-time Updates: Layout updates in real-time
Position Saving: Positions automatically saved when dropped
Undo Functionality: Use browser back button to undo changes

Responsive Design

Responsive Grid Behavior

Automatic Adjustments

Column Scaling: Grid automatically scales to screen width
Row Height: Maintains proportional row heights
Chart Sizing: Charts resize proportionally
Layout Preservation: Maintains relative positions

Breakpoint Behavior

Desktop: Full 12-column layout
Tablet: Maintains grid structure with adjusted sizing
Mobile: Single-column layout for optimal viewing

Mobile Optimization

Mobile Layout

Single Column: Charts stack vertically on mobile
Full Width: Charts use full available width
Touch-Friendly: Larger touch targets for mobile interaction
Readable Text: Optimized text sizes for mobile screens

Mobile Interactions

Touch Dragging: Support for touch-based dragging
Pinch to Zoom: Chart zoom functionality on mobile
Swipe Navigation: Swipe between dashboard sections
Responsive Controls: Touch-friendly control buttons

Cross-Device Compatibility

Device Support

Desktop Browsers: Chrome, Firefox, Safari, Edge
Tablet Devices: iPad, Android tablets
Mobile Devices: iPhone, Android phones
Touch Screens: Interactive touch displays

Browser Compatibility

Modern Browsers: Full functionality
Legacy Browsers: Graceful degradation
JavaScript Support: Requires JavaScript enabled
CSS Grid Support: Uses modern CSS Grid features

Layout Management

Layout Persistence

Automatic Saving

Position Storage: Chart positions saved automatically
Size Storage: Chart dimensions preserved
Layout Recovery: Layouts restored on page reload
User Preferences: Individual user layout preferences

Layout Data Structure

{ layout: [ { x: 0, y: 0, w: 6, h: 12, i: 'chart1', positions: { x: 0, y: 0, w: 6, h: 12 }, details: { /* chart configuration */ }, options: { /* chart options */ } } ], filters: { /* global filters */ }, name: 'Dashboard Name' }

Layout Operations

Adding Charts

Click "Add Item": Opens chart creation dialog
Configure Chart: Set up chart type, metrics, and filters
Auto-Positioning: Chart automatically positioned in available space
Manual Adjustment: Drag to desired position after creation

Removing Charts

Enter Edit Mode: Click "Edit Chart" button
Locate Delete Button: Find trash icon in chart header
Confirm Deletion: Click to remove chart
Layout Adjustment: Remaining charts reposition automatically

Editing Charts

Enter Edit Mode: Click "Edit Chart" button
Click Settings Icon: Find cog icon in chart header
Modify Configuration: Update chart settings
Save Changes: Changes applied immediately

Layout Templates

Predefined Templates

Single Chart: Full-width single chart layout
Two Column: Side-by-side chart layout
Three Column: Three-column balanced layout
Dashboard Grid: Multiple charts in grid pattern
Custom Layout: User-defined layout patterns

Template Application

Select Template: Choose from available templates
Apply Layout: Template applied to current dashboard
Customize: Modify template to meet specific needs
Save Template: Save custom layout as new template

Visual Design and Styling

Chart Container Styling

Default Styling

.vue-grid-item { padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); background: white; border: 1px solid #e5e7eb; }

Custom Styling Options

Background Color: Custom background colors
Border Styling: Custom border colors and styles
Shadow Effects: Custom shadow configurations
Border Radius: Rounded corner customization

Chart Header Design

Header Elements

Drag Handle: Arrows icon for dragging
Chart Title: Display chart name or title
Settings Icon: Cog icon for configuration
Delete Icon: Trash icon for removal

Header Styling

.chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; padding: 8px 0; }

Color Schemes

Theme Support

Light Theme: Default light color scheme
Dark Theme: Dark mode color scheme
Custom Themes: User-defined color schemes
Brand Colors: Organizational branding colors

Color Customization

Primary Colors: Main brand colors
Secondary Colors: Supporting colors
Accent Colors: Highlight and emphasis colors
Neutral Colors: Background and text colors

Typography

Font Configuration

Font Family: System fonts or custom fonts
Font Sizes: Responsive font sizing
Font Weights: Bold, normal, light weights
Line Heights: Optimal line spacing

Text Styling

Chart Titles: Bold, prominent styling
Axis Labels: Clear, readable labels
Data Labels: Appropriate sizing for data
Legend Text: Consistent legend styling

Dashboard Customization

Personalization Options

User Preferences

Layout Preferences: Individual user layout settings
Theme Preferences: Personal theme choices
Chart Preferences: Favorite chart configurations
Filter Preferences: Saved filter combinations

Dashboard Settings

Auto-Save: Automatic layout saving
Auto-Refresh: Automatic data updates
Notifications: Dashboard change notifications
Sharing: Dashboard sharing preferences

Custom Dashboard Elements

Custom Widgets

Text Widgets: Custom text and descriptions
Image Widgets: Custom images and logos
HTML Widgets: Custom HTML content
Embedded Content: External content embedding

Custom Controls

Filter Controls: Custom filter interfaces
Action Buttons: Custom action buttons
Navigation Elements: Custom navigation controls
Status Indicators: Custom status displays

Branding and Theming

Brand Integration

Logo Placement: Company logo integration
Color Schemes: Brand color application
Typography: Brand font usage
Visual Elements: Brand-specific visual elements

Theme Customization

Primary Colors: Brand primary colors
Secondary Colors: Supporting brand colors
Background Colors: Dashboard background colors
Text Colors: Text color customization

Layout Templates

Built-in Templates

Single Chart Template

{ layout: [ { x: 0, y: 0, w: 12, h: 12, i: 'chart1' } ] }

Two Column Template

{ layout: [ { x: 0, y: 0, w: 6, h: 12, i: 'chart1' }, { x: 6, y: 0, w: 6, h: 12, i: 'chart2' } ] }

Dashboard Grid Template

{ layout: [ { x: 0, y: 0, w: 6, h: 6, i: 'chart1' }, { x: 6, y: 0, w: 6, h: 6, i: 'chart2' }, { x: 0, y: 6, w: 6, h: 6, i: 'chart3' }, { x: 6, y: 6, w: 6, h: 6, i: 'chart4' } ] }

Custom Template Creation

Template Development

Design Layout: Plan the desired layout structure
Define Positions: Specify chart positions and sizes
Test Layout: Verify layout works correctly
Save Template: Save as reusable template

Template Sharing

Export Templates: Export custom templates
Import Templates: Import shared templates
Template Library: Centralized template repository
Version Control: Template version management

Mobile Optimization

Mobile Layout Considerations

Screen Size Adaptation

Responsive Grid: Grid adapts to mobile screen sizes
Touch Targets: Adequate touch target sizes
Readable Text: Optimized text sizes for mobile
Simplified Navigation: Streamlined mobile navigation

Mobile Interactions

Touch Dragging: Touch-based chart dragging
Pinch Zoom: Chart zoom functionality
Swipe Navigation: Swipe between dashboard sections
Mobile Menus: Collapsible mobile menus

Mobile Performance

Performance Optimization

Reduced Animations: Simplified animations for mobile
Optimized Images: Compressed images for mobile
Efficient Loading: Fast loading on mobile networks
Battery Optimization: Power-efficient mobile operation

Mobile Testing

Device Testing: Test on various mobile devices
Browser Testing: Test on mobile browsers
Performance Testing: Monitor mobile performance
User Testing: Gather mobile user feedback

Best Practices

Layout Design Principles

Visual Hierarchy

Important First: Place most important charts prominently
Logical Flow: Arrange charts in logical reading order
Grouping: Group related charts together
Balance: Distribute charts evenly across the dashboard

Chart Sizing

Appropriate Sizes: Size charts based on content importance
Consistent Sizing: Use consistent sizes for similar charts
Readable Text: Ensure text is readable at all sizes
Proportional Scaling: Maintain proper aspect ratios

Performance Optimization

Layout Performance

Efficient Rendering: Optimize chart rendering performance
Smooth Interactions: Ensure smooth drag and resize operations
Memory Management: Efficient memory usage for large dashboards
Loading Optimization: Fast dashboard loading times

Data Performance

Efficient Queries: Optimize data queries for charts
Caching: Implement appropriate data caching
Lazy Loading: Load data only when needed
Incremental Updates: Update only changed data

User Experience

Intuitive Design

Clear Navigation: Easy-to-understand navigation
Consistent Interface: Consistent design patterns
Helpful Feedback: Clear feedback for user actions
Error Handling: Graceful error handling

Accessibility

Keyboard Navigation: Full keyboard navigation support
Screen Reader Support: Screen reader compatibility
Color Contrast: Adequate color contrast ratios
Text Scaling: Support for text scaling

Maintenance and Updates

Regular Maintenance

Layout Reviews: Regular layout effectiveness reviews
Performance Monitoring: Monitor dashboard performance
User Feedback: Gather and incorporate user feedback
Template Updates: Update layout templates as needed

Version Control

Layout Versioning: Track layout changes over time
Backup Systems: Regular layout backups
Rollback Capability: Ability to rollback to previous layouts
Change Documentation: Document layout changes