Overview
DashboardBlock provides consistent structure for analytics dashboards with built-in support for display modes (standard, compact, presentation), filtering, export capabilities (CSV/JSON), and keyboard-navigable presentation mode.
Key Features
- Three display modes: standard, compact, presentation
- Full-screen presentation with keyboard navigation
- Flexible filtering with date range picker
- Export to CSV or JSON
Quick Start
import { DashboardBlock, DashboardSection } from '@/ui/blocks';
import { MetricCard, ChartCard, LineChart } from '@/ui/components/charts';
<DashboardBlock
title="Project Overview"
showModeToggle
enablePresentation
enableExport
>
<DashboardSection title="Key Metrics" columns={4} presentationPage={1}>
<MetricCard label="Participants" value={142} change="+12%" />
<MetricCard label="Insights" value={387} status="success" />
<MetricCard label="Completion" value="87%" />
<MetricCard label="Response Rate" value="92%" />
</DashboardSection>
<DashboardSection title="Trends" columns={2} presentationPage={2}>
<ChartCard title="Activity Over Time">
<LineChart
data={data}
series={[{ key: 'value', label: 'Value' }]}
/>
</ChartCard>
</DashboardSection>
</DashboardBlock>Full Featured Example
Dashboard with all features enabled
Project Analytics
Overview of testing activity and engagement
Key Metrics
Active Participants
142
+12%vs last period
Total Insights
387
+28%vs last period
Completion Rate
87%
-3%vs last period
Response Rate
92%
+5%vs last period
Activity Trends
Submissions Over Time
Resource Completion
Insight Distribution
Insights by Type
Total
107
Overall Completion
87%
Weekly Active Users
+10.9%
This Week
142
Last Week
128
Engagement
Activity Heatmap
DecJanFebMarAprMayJunJulAugSepOctNovDec
MonWedFri
LessMore
Top Contributors
JS
John Smith
142
SJ
Sarah Johnson
128
MW
Mike Wilson
115
4
EDEmily Davis
98
5
ABAlex Brown
87
AI Insights
AI Insights Coming Soon
Intelligent insights will appear here once enabled.
Compact Mode
Reduced spacing and abbreviated labels
Compact Dashboard
Users
142
+12%vs last period
Insights
387
+28%vs last period
Completion
87%
-3%vs last period
Response
92%
+5%vs last period
Loading State
Skeleton placeholders while data loads
DashboardBlock Props
interface DashboardBlockProps {
// Identity
title?: string;
subtitle?: string;
// Layout: 'auto' | 'grid-2' | 'grid-3' | 'grid-4'
layout?: string;
// Visual Modes
displayMode?: 'standard' | 'compact' | 'presentation';
showModeToggle?: boolean;
onModeChange?: (mode: DisplayMode) => void;
// Filtering
filters?: DashboardFilter[];
onFilterChange?: (filters: FilterState) => void;
showDateRange?: boolean;
defaultDateRange?: DateRange;
// Presentation
enablePresentation?: boolean;
presentationConfig?: PresentationConfig;
// Actions
enableExport?: boolean;
exportFormats?: ExportFormat[];
onExport?: (format: ExportFormat, data: ExportData) => void;
enableRefresh?: boolean;
onRefresh?: () => void;
isRefreshing?: boolean;
// Persistence
persistenceKey?: string;
// Loading
isLoading?: boolean;
skeletonCount?: number;
children: ReactNode;
className?: string;
}DashboardSection Props
interface DashboardSectionProps {
title?: string;
description?: string;
presentationPage?: number; // Group sections for presentation mode
columns?: 1 | 2 | 3 | 4;
children: ReactNode;
className?: string;
}