bonnard-build-dashboard

Build & Deploy a Markdown Dashboard

This skill guides you through creating a markdown dashboard with built-in chart components and deploying it to Bonnard.

Phase 1: Explore Available Data

Discover what measures and dimensions are available to query:

# List all views and their fields
bon schema

# Inspect a specific view's measures and dimensions
bon schema <view_name>

# Query a specific view to see what data looks like
bon query '{"measures": ["view_name.measure"], "dimensions": ["view_name.dimension"], "limit": 5}'

# Or use SQL format
bon query --sql "SELECT MEASURE(total_revenue), date FROM sales_performance LIMIT 5"

Ask the user what data they want to visualize. Match their request to available views and measures.

Phase 2: Learn the Format

Review the dashboard format docs for reference:

bon docs dashboards              # Overview + format
bon docs dashboards.components   # Chart components (BigValue, LineChart, BarChart, etc.)
bon docs dashboards.queries      # Query block syntax
bon docs dashboards.inputs       # Interactive filters (DateRange, Dropdown)
bon docs dashboards.examples     # Complete examples

Phase 3: Build the Markdown File

Create a .md file with three parts:

1. YAML frontmatter — title and optional description
2. Query blocks — ```query name code fences with YAML query options
3. Components — <BigValue />, <LineChart />, <BarChart />, etc.

Key points:

• All field names must be fully qualified: orders.total_revenue, not total_revenue
• Each component references a query by name: data={query_name}
• Consecutive <BigValue> components auto-group into a row
• Use <Grid cols="2"> to place charts side by side
• Use <DateRange> and <Dropdown> for interactive filters
• BigValue supports comparison prop for ▲/▼ delta indicators (e.g. actual vs target)
• Charts support y2 for secondary y-axis (combo charts: bars + line, dual scales)
• For DataTable formatting, use <Column> children instead of the fmt prop (avoids comma ambiguity with Excel format codes):

  <DataTable data={sales}>
    <Column field="orders.total_revenue" header="Revenue" fmt="eur2" />
    <Column field="orders.count" header="Orders" fmt="num0" />
  </DataTable>