Skip to content

KPI Board Example

A simple board showing multiple key performance indicators (KPIs).

Complete Board

title: "Executive KPIs"

queries:
  totals:
    metrics: [total_revenue, order_count, avg_order_value, customer_count]
  trends:
    metrics: [total_revenue]
    dimensions: [month]

rows:
  - title: "Key Metrics"
    grid:
      columns: 24
      items:
        - item: revenue_kpi
          width: 6
        - item: orders_kpi
          width: 6
        - item: aov_kpi
          width: 6
        - item: customers_kpi
          width: 6

    charts:
      revenue_kpi:
        label: "Total Revenue"
        query: queries.totals
        type: kpi
        value: total_revenue

      orders_kpi:
        label: "Total Orders"
        query: queries.totals
        type: kpi
        value: order_count

      aov_kpi:
        label: "Avg Order Value"
        query: queries.totals
        type: kpi
        value: avg_order_value

      customers_kpi:
        label: "Customers"
        query: queries.totals
        type: kpi
        value: customer_count

Key Concepts Demonstrated

KPI Chart Type

The kpi chart type displays a single metric as a large number:

revenue_kpi:
  label: "Total Revenue"
  query: queries.totals
  type: kpi
  value: total_revenue
  • type: kpi: KPI chart type (Dataface-specific)
  • value: total_revenue: KPI value — column reference or literal scalar (required for KPI type)

Grid Layout

Using a grid layout to arrange multiple KPIs:

grid:
  columns: 24
  items:
    - item: revenue_kpi
      width: 6
    - item: orders_kpi
      width: 6
    - item: aov_kpi
      width: 6
    - item: customers_kpi
      width: 6
  • columns: 24: 24-column grid system
  • items: List of items to place
  • width: 6: Each chart takes 6 columns (4 charts × 6 columns = 24 columns total)

Multiple Metrics in One Query

A single query can return multiple metrics:

queries:
  totals:
    metrics: [total_revenue, order_count, avg_order_value, customer_count]

Each KPI chart references the same query but displays a different metric.

Variations and Extensions

Add Markdown Content

Add context above the KPIs:

rows:
  - title: "Executive Summary"
    text: |
      # Key Performance Indicators

      Real-time view of business performance.
    grid: ...
    # ... charts

Add Trend Charts

Combine KPIs with trend charts:

rows:
  - title: "Overview"
    grid:
      columns: 24
      items:
        - item: revenue_kpi
          width: 6
        # ... other KPIs
        - item: revenue_trend
          width: 24

    charts:
      revenue_kpi:
        # ... KPI definition
      revenue_trend:
        query: queries.trends
        type: line
        x: month
        y: total_revenue

Add Filters

Add variables to filter the KPIs:

variables:
  date_range:
    input: daterange
    default: "2024-01-01"

queries:
  totals:
    metrics: [total_revenue, order_count]
    filters:
      order_date: "{{ date_range }}"