Create and configure dashboards with portlets (charts/widgets) using DashboardConfig in Drizzle Cube.
This skill helps you create and configure analytics dashboards using DashboardConfig and PortletConfig structures.
interface DashboardConfig {
portlets: PortletConfig[] // Array of chart widgets
layoutMode?: 'grid' | 'rows' // Layout strategy
grid?: DashboardGridSettings // Grid configuration
rows?: RowLayout[] // Row-based layout
colorPalette?: string // Color palette name
filters?: DashboardFilter[] // Dashboard-level filters
eagerLoad?: boolean // Load all portlets immediately
}
const dashboardConfig: DashboardConfig = {
layoutMode: 'grid',
grid: {
cols: 12, // 12-column grid
rowHeight: 80, // Pixels per row unit
minW: 2, // Minimum portlet width
minH: 2 // Minimum portlet height
},
colorPalette: 'blue',
// Dashboard-level filters applied to all portlets
filters: [
{
id: 'dateFilter',
label: 'Date Range',
filter: {
member: 'Orders.createdAt',
operator: 'inDateRange',
values: ['2024-01-01', '2024-12-31']
},
isUniversalTime: true // Applies to all timeDimensions
},
{
id: 'regionFilter',
label: 'Region',
filter: {
member: 'Customers.region',
operator: 'equals',
values: ['North America']
}
}
],
portlets: [
// Portlet configs here...
]
}
interface PortletConfig {
id: string // Unique identifier
title: string // Display title
// NEW: Use analysisConfig (recommended)
analysisConfig?: AnalysisConfig // Complete analysis configuration
// Grid position (required)
w: number // Width in grid units (1-12)
h: number // Height in grid units
x: number // X position (0-11)
y: number // Y position (row)
// Filter integration
dashboardFilterMapping?: string[] // Filter IDs to apply
eagerLoad?: boolean // Override lazy loading
// DEPRECATED: Legacy fields (still supported for backward compatibility)
// query?: string // JSON string - use analysisConfig
// chartType?: ChartType // Use analysisConfig.charts
// chartConfig?: ChartAxisConfig // Use analysisConfig.charts
// displayConfig?: ChartDisplayConfig // Use analysisConfig.charts
}
{
id: 'revenue-by-department',
title: 'Revenue by Department',
w: 6,
h: 4,
x: 0,
y: 0,
dashboardFilterMapping: ['dateFilter'],
analysisConfig: {
version: 1,
analysisType: 'query',
activeView: 'chart',
charts: {
query: {
chartType: 'bar',
chartConfig: {
xAxis: ['Departments.name'],
yAxis: ['Sales.totalRevenue']
},
displayConfig: {
showLegend: false,
orientation: 'vertical',
stackType: 'none'
}
}
},
query: {
measures: ['Sales.totalRevenue'],
dimensions: ['Departments.name'],
order: { 'Sales.totalRevenue': 'desc' },
limit: 10
}
}
}
{
id: 'total-revenue',
title: 'Total Revenue',
w: 3,
h: 2,
x: 0,
y: 0,
analysisConfig: {
version: 1,
analysisType: 'query',
activeView: 'chart',
charts: {
query: {
chartType: 'kpiNumber',
chartConfig: {
yAxis: ['Sales.totalRevenue']
},
displayConfig: {
prefix: '$',
decimals: 0,
valueColorIndex: 0 // Use first palette color
}
}
},
query: {
measures: ['Sales.totalRevenue']
}
}
}
{
id: 'revenue-change',
title: 'Revenue vs Last Month',
w: 3,
h: 2,
x: 3,
y: 0,
analysisConfig: {
version: 1,
analysisType: 'query',
activeView: 'chart',
charts: {
query: {
chartType: 'kpiDelta',
chartConfig: {
yAxis: ['Sales.totalRevenue']
},
displayConfig: {
prefix: '$',
decimals: 0,
positiveColorIndex: 2, // Green
negativeColorIndex: 1, // Red
showHistogram: true
}
}
},
query: {
measures: ['Sales.totalRevenue'],
timeDimensions: [{
dimension: 'Sales.createdAt',
granularity: 'month',
compareDateRange: [
['2024-02-01', '2024-02-29'], // Current
['2024-01-01', '2024-01-31'] // Previous
]
}]
}
}
}
{
id: 'revenue-trend',
title: 'Revenue Trend',
w: 8,
h: 4,
x: 0,
y: 4,
dashboardFilterMapping: ['dateFilter'],
analysisConfig: {
version: 1,
analysisType: 'query',
activeView: 'chart',
charts: {
query: {
chartType: 'line',
chartConfig: {
xAxis: ['Sales.createdAt'],
yAxis: ['Sales.totalRevenue']
},
displayConfig: {
showLegend: true,
showGrid: true,
showTooltip: true
}
}
},
query: {
measures: ['Sales.totalRevenue'],
timeDimensions: [{
dimension: 'Sales.createdAt',
granularity: 'month',
fillMissingDates: true
}]
}
}
}
{
id: 'signup-funnel',
title: 'Signup to Purchase Funnel',
w: 6,
h: 4,
x: 6,
y: 0,
analysisConfig: {
version: 1,
analysisType: 'funnel',
activeView: 'chart',
charts: {
funnel: {
chartType: 'funnel',
chartConfig: {},
displayConfig: {
funnelStyle: 'funnel',
showFunnelConversion: true,
showFunnelAvgTime: true
}
}
},
query: {
funnel: {
bindingKey: 'Events.userId',
timeDimension: 'Events.timestamp',
steps: [
{ name: 'Signup', cube: 'Events', filter: {...} },
{ name: 'First Visit', cube: 'Events', filter: {...} },
{ name: 'Purchase', cube: 'Events', filter: {...} }
],
includeTimeMetrics: true
}
}
}
}
{
id: 'top-customers',
title: 'Top Customers',
w: 6,
h: 5,
x: 6,
y: 4,
analysisConfig: {
version: 1,
analysisType: 'query',
activeView: 'table', // Show as table
charts: {
query: {
chartType: 'table',
chartConfig: {},
displayConfig: {
pivotTimeDimension: false
}
}
},
query: {
measures: ['Orders.totalRevenue', 'Orders.count'],
dimensions: ['Customers.name', 'Customers.email'],
order: { 'Orders.totalRevenue': 'desc' },
limit: 20
}
}
}
{
id: 'dashboard-header',
title: 'Sales Overview',
w: 12,
h: 1,
x: 0,
y: 0,
analysisConfig: {
version: 1,
analysisType: 'query',
activeView: 'chart',
charts: {
query: {
chartType: 'markdown',
chartConfig: {},
displayConfig: {
content: '# Q1 2024 Sales Dashboard\n\nKey metrics and trends',
fontSize: 'medium',
alignment: 'center'
}
}
},
query: {}
}
}