Skip to content

Board Examples

Advanced layout patterns and comprehensive examples.

Marketing Command Center

A complex dashboard combining multiple layout types, content, and charts:

title: "Marketing Command Center"

charts:
  spend:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Total Revenue"
    metric: revenue
  clicks:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Total Units"
    metric: units_sold
  roi:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Categories"
    metric: category
  spend_trend:
    query: _doc_examples.yaml#sales
    type: line
    title: "Revenue Over Time"
    x: date
    y: revenue
  channel_mix:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Category Mix"
    x: category
    y: revenue
  funnel:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Product Funnel"
    x: product
    y: units_sold
  conversion:
    query: _doc_examples.yaml#sales
    type: table
    title: "Sales Table"
  campaigns:
    query: _doc_examples.yaml#sales
    type: table
    title: "Campaign Table"
  creative1:
    query: _doc_examples.yaml#sales
    type: bar
    x: date
    y: revenue
  creative2:
    query: _doc_examples.yaml#sales
    type: bar
    x: category
    y: units_sold
  creative3:
    query: _doc_examples.yaml#sales
    type: pie
    x: product
    y: revenue

rows:
  # Section 1: Top Level KPIs
  - height: "120px"
    cols:
      - spend
      - clicks
      - roi

  # Section 2: Main Trends (Split 50/50)
  - cols:
      - spend_trend
      - channel_mix

  # Section 3: Funnel Analysis
  - rows:
      - content: |
          **Funnel Performance**
          Analyzing conversion rates by product
      - cols:
          - funnel
          - conversion

  # Section 4: Detailed Reports (Tabs)
  - tabs:
      items:
        - title: "Campaigns"
          rows:
            - campaigns

        - title: "Creatives"
          cols:
            - creative1
            - creative2
            - creative3
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')
▶
▶ Try in Playground ×
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')

Nested Grids

Create sophisticated layouts by combining multiple layout types:

title: "Complex Dashboard"

charts:
  kpi1:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Revenue"
    metric: revenue
  kpi2:
    query: _doc_examples.yaml#sales
    type: kpi
    title: "Units Sold"
    metric: units_sold
  mini1:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Mini Chart 1"
    x: category
    y: revenue
  mini2:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Mini Chart 2"
    x: product
    y: units_sold
  main:
    query: _doc_examples.yaml#sales
    type: line
    title: "Main Analysis"
    x: date
    y: revenue
    color: category

rows:
  - cols:
      - kpi1
      - kpi2
      - cols:
          - mini1
          - mini2
  - main
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')
▶
▶ Try in Playground ×
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')

Document-Style Report

title: "Analytical Report"

charts:
  revenue_by_category:
    query: _doc_examples.yaml#sales
    type: bar
    title: "Revenue by Category"
    x: category
    y: revenue
  trends:
    query: _doc_examples.yaml#sales
    type: line
    title: "Trend Analysis"
    x: date
    y: revenue
    color: product

rows:
  - content: |
      # Monthly Performance Report
      This month showed **strong growth** across all key metrics.
      The following visualizations break down the performance by category.

  - cols:
      - revenue_by_category

      - content: |
          ### Key Insights
          - **Electronics**: Leading category with 35% growth
          - **Accessories**: Needs attention, down 5%
          - **Tools**: Steady performance

  - trends
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')
▶
▶ Try in Playground ×
Compilation Error
External query file not found: '/opt/build/repo/apps/examples/_doc_examples.yaml' (referenced as '_doc_examples.yaml#sales')

Best Practices

Logical Grouping

Use boards to group related charts together. This improves readability and organization.

Layout Selection

Layout Best For
Rows Simple vertical flow, mobile, scrolling
Cols Side-by-side comparisons, sidebars
Grid Precise control, dense dashboards
Tabs Managing density, hiding content until needed

Modularity

Extract complex boards into separate files (starting with _ for partials) and include them by referencing their filename.

Performance

  • Keep individual boards focused
  • Use tabs to lazy-load complex sections
  • Split large dashboards into multiple files