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 

# 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 — `, , `, 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 `` components auto-group into a row
• Use `` to place charts side by side
• Use ` and ` 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 ` children instead of the fmt` prop (avoids comma ambiguity with Excel format codes):

```

```

Example structure:

---
title: Revenue Dashboard
description: Key revenue metrics and trends
---

` ``query total_revenue
measures: [orders.total_revenue]
` ``

` ``query order_count
measures: [orders.count]
` ``

## Trend

` ``query monthly
measures: [orders.total_revenue, orders.count]
timeDimension:
  dimension: orders.created_at
  granularity: month
` ``

Save the file (e.g., dashboard.md).

Phase 4: Preview Locally (Required)

Always preview before deploying. Open a local dev server with live reload:

bon dashboard dev dashboard.md

This opens a browser with the rendered dashboard. Edit the .md file and the preview updates automatically. Queries run against the deployed semantic layer using the user's credentials.

Requires bon login — no API key needed.

Ask the user to review the preview and confirm it looks correct before moving to Phase 5. Do not skip this step — deploying without previewing often results in layout issues, missing data, or wrong chart types that are easy to catch locally.

Phase 5: Deploy

Once the user has confirmed the preview looks good, deploy the dashboard:

bon dashboard deploy dashboard.md

This will:

• Upload the markdown content
• Assign a slug (derived from filename, or use --slug)
• Extract the title from frontmatter
• Print the URL where the dashboard is accessible

Options:

• --slug — custom URL slug (default: derived from filename)
• --title — override frontmatter title

Theming (Optional)

Customize colors and palettes:

• Per-dashboard: Add theme: to frontmatter (e.g. theme: { palette: observable })
• Org-wide: Create a theme.yml and run bon theme set theme.yml
• Preview locally: bon dashboard dev dashboard.md --theme theme.yml

See bon docs dashboards.theming for palette names, color tokens, and examples.

Phase 6: View Live

Open the deployed dashboard in the browser:

bon dashboard open dashboard

Iteration

To update, edit the .md file and redeploy:

bon dashboard deploy dashboard.md

Each deploy increments the version. Use bon dashboard list to see all deployed dashboards with their versions and URLs.

To remove a dashboard:

bon dashboard remove dashboard

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: bonnard-data
• Source: bonnard-data/bonnard-cli
• License: MIT
• Homepage: https://www.bonnard.dev

Install and usage instructions live in the source repository linked above.