Dashboard Report Widgets Integration

Overview

The NopeSight platform now supports seamless integration between Report Templates and Dashboard Widgets. This feature allows users to:

• Use report templates as pre-configured dashboard widgets
• Create reusable visualizations with consistent configurations
• Quickly build dashboards by selecting from available report templates
• Maintain consistency across different dashboards

Key Features

1. Report Widget Type

A new widget type report has been added that directly uses report templates:

type: 'report' | 'chart' | 'stat' | 'list' | 'table' | 'custom'

2. Report Template Widget Configuration

Report templates now include widget-specific configuration in the widgetConfig field:

widgetConfig: {
  defaultSize: {
    w: 4,        // Default width in grid units
    h: 3,        // Default height in grid units
    minW: 2,     // Minimum width
    minH: 2,     // Minimum height
    maxW: 8,     // Maximum width (optional)
    maxH: 6      // Maximum height (optional)
  },
  refreshInterval: 300000,  // Auto-refresh in milliseconds (0 = disabled)
  height: 'auto',          // CSS height value
  styling: {               // Optional custom styling
    backgroundColor: '#fff',
    textColor: '#333',
    borderColor: '#ddd',
    borderRadius: 4
  }
}

3. Visualization Type Mapping

Report templates support various visualization types that map to widget rendering:

Report Visualization	Widget Rendering
stat, card, gauge	Statistic Widget
bar, line, pie, donut, area, scatter	Chart Widget
table, grid	Table Widget
list	List Widget
heatmap	Chart Widget (planned enhancement)

Using Report Templates in Dashboards

1. Dashboard Builder Interface

The Dashboard Builder now shows available report templates in the sidebar:

1. Navigate to Dashboard Builder
2. Click on the "Widgets" tab
3. Scroll down to see "Report Templates" section
4. Click on any report template to add it as a widget
5. The widget configuration dialog will open with pre-filled settings

2. Adding Report Widgets Programmatically

// Convert a report template to widget configuration
const widgetConfig = reportService.templateToWidget(reportTemplate);

// Create a new widget
const widget = {
  ...widgetConfig,
  id: `widget_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
};

// Add to dashboard
await customDashboardService.addWidget(dashboardId, widget);

3. Widget Configuration Dialog

When configuring a report widget:

• Basic Tab: Shows widget title (inherited from report name)
• Data Source Tab: Displays selected report template details including:
  • Description
  • Category
  • Visualization type
  • Tags
• Visualization Tab: Shows that settings are controlled by the report template
• Advanced Tab: Configure refresh interval and other settings

Sample Report Templates

The system includes predefined report templates:

1. CI Status Overview - Pie chart showing CI distribution by status
2. Open Requests by Priority - Bar chart of open requests
3. Active CI Count - Statistic widget showing total active CIs
4. Recent Activities - List of recent system activities
5. CI Types Distribution - Donut chart of CI types
6. Task Status Summary - Table showing task status counts

Creating Report Templates for Widgets

When creating report templates intended for dashboard use:

const reportTemplate = {
  name: 'My Dashboard Widget',
  description: 'A reusable widget for dashboards',
  category: 'analytics',
  visualization: {
    type: 'bar',  // Determines widget rendering
    options: {
      xAxisKey: '_id',
      yAxisKey: 'count',
      xAxisLabel: 'Category',
      yAxisLabel: 'Count'
    }
  },
  widgetConfig: {
    defaultSize: { w: 6, h: 4, minW: 4, minH: 3 },
    refreshInterval: 300000,  // 5 minutes
    height: 'auto'
  },
  query: {
    collections: ['cis'],
    aggregation: [
      { $group: { _id: '$status', count: { $sum: 1 } } }
    ]
  }
};

Data Flow

1. Report Template → Defines query, visualization, and widget config
2. Dashboard Widget → References report template by ID
3. Widget Preview → Executes report and renders based on visualization type
4. Auto-refresh → Uses configured refresh interval

Best Practices

1. Consistent Naming: Use descriptive names for report templates that will appear in dashboards
2. Appropriate Sizing: Set reasonable default sizes based on visualization type
3. Performance: Consider query complexity when setting refresh intervals
4. Reusability: Create generic report templates that can work across different contexts
5. Documentation: Add clear descriptions to help users understand what each template shows

API Endpoints

Report Templates

• GET /api/reports/templates - List all accessible templates
• POST /api/reports/templates - Create new template
• POST /api/reports/execute/:id - Execute report and get data

Dashboard Widgets

• POST /api/dashboards/:id/widgets - Add widget to dashboard
• GET /api/dashboards/:id/widgets/:widgetId/data - Get widget data
• PUT /api/dashboards/:id/widgets/:widgetId - Update widget configuration

Future Enhancements

1. Template Library: Expanded collection of predefined templates
2. Widget Templates: Direct widget template creation without reports
3. Dynamic Filters: Dashboard-level filters that apply to all widgets
4. Cross-widget Interactions: Click on one widget to filter others
5. Export/Import: Share report templates between environments