Dashboard Builder

The Dashboard Builder is the primary interface for creating and editing dashboards in the BI Workbench. It provides a drag-and-drop widget palette, responsive grid layout, widget configuration panels, and real-time preview.

Components

DashboardBuilder

File: frontend/bi-workbench/src/components/dashboard/DashboardBuilder.tsx

The main builder component that combines the widget palette sidebar with the dashboard grid area.

interface DashboardBuilderProps {
  dashboardId: string;
  widgets: Widget[];
  layout: DashboardLayout;
  onWidgetAdd: (widget: Omit<Widget, 'id' | 'createdAt' | 'updatedAt'>) => void;
  onWidgetUpdate: (widgetId: string, updates: Partial<Widget>) => void;
  onLayoutChange: (layout: LayoutItem[]) => void;
}

Features:

Widget Palette Sidebar -- Collapsible sidebar with categorized widget templates (charts, data, metrics, other)
Drag-and-Drop -- Drag templates from palette onto the grid with ghost preview
Grid Position Calculation -- Converts mouse coordinates to grid cell positions
Quick Add FAB -- Floating action button for fast widget addition

Widget Templates

11 pre-configured widget templates with default Vega-Lite specifications:

const WIDGET_TEMPLATES: WidgetTemplate[] = [
  { type: 'BAR_CHART', title: 'Bar Chart', defaultSize: { w: 4, h: 3 },
    defaultVisualizationConfig: { mark: 'bar', encoding: { x: {...}, y: {...} } } },
  { type: 'LINE_CHART', title: 'Line Chart', defaultSize: { w: 6, h: 3 },
    defaultVisualizationConfig: { mark: 'line', encoding: { x: {...}, y: {...} } } },
  // ... 9 more
];

DashboardGrid

File: frontend/bi-workbench/src/components/dashboard/DashboardGrid.tsx

Responsive grid layout powered by react-grid-layout with configurable columns, row height, and margins.

DashboardHeader

File: frontend/bi-workbench/src/components/dashboard/DashboardHeader.tsx

Dashboard title, description, edit/view mode toggle, sharing, and export controls.

RefreshControl

File: frontend/bi-workbench/src/components/dashboard/RefreshControl.tsx

Auto-refresh interval configuration and manual refresh button.

WidgetConfigPanel

File: frontend/bi-workbench/src/components/dashboard/WidgetConfigPanel.tsx

Side panel for configuring widget data source, visualization settings, and filter bindings.

Builder Flow

1. User opens dashboard in edit mode
2. DashboardBuilder renders with palette sidebar + grid
3. User drags widget template from palette
4. Drop handler calculates grid position
5. onWidgetAdd creates widget with default config
6. Widget appears in grid with WidgetConfigPanel
7. User configures data source and visualization
8. Changes are saved via dashboard-service

Overview Chart Components