Skip to content

Drill-Down Boards

Drill down is the BI pattern of clicking a summary element — a bar, a table cell, a KPI — to navigate to a detail board with context pre-filled. Dataface supports drill-down with the link: field on charts and tables.

Bar chart drill-down

Set link: on a chart to make every data element clickable. Channel placeholders ({{ x }}, {{ y }}, {{ color }}, {{ theta }}) expand to the clicked row's value for that channel.

queries:
  tickets_by_status:
    sql: |
      select status, count(*) as tickets
      from tickets
      group by status

charts:
  by_status:
    type: bar
    query: tickets_by_status
    x: status
    y: tickets
    title: Tickets by Status — click to drill
    link: "/zendesk/tickets/list?status={{ x }}"

rows:
  - by_status

Clicking the Open bar navigates to /zendesk/tickets/list?status=Open. Board-root paths resolve automatically in dft serve and Cloud.

In-page variable update

A link: starting with ? updates a dashboard variable without leaving the board. This is how cross-chart filtering works inside a single board:

variables:
  selected_category:
    label: Category
    default: ""

charts:
  by_category:
    type: bar
    query: revenue_by_category
    x: category
    y: revenue
    link: "?selected_category={{ x }}"   # updates variable, no navigation

  by_product:
    type: bar
    query: revenue_by_product           # queries filtered by selected_category
    x: product
    y: revenue
    title: Products (filtered by category above)

Table drill-down

A chart-root link: makes the whole row clickable (a row-wide band that highlights on hover), while a per-column link: makes that column's cells their own links. A cell link always wins the click over the row band:

charts:
  tickets_table:
    type: table
    query: open_tickets
    link: "/zendesk/tickets/detail?id={{ ticket_id }}"   # whole-row drill-down
    style:
      columns:
        ticket_id:
          label: Ticket
          # no column link → clicking the row navigates to detail
        subject:
          label: Subject
          # no column link → part of the clickable row
        status:
          label: Status
          link: "/zendesk/backlog/?status={{ status }}"   # this column links elsewhere

The chart-root link is the row destination; a column link overrides it for clicks on that column's cells. Columns without their own link are not inked as links — they are simply part of the clickable row.

Target board

The detail board receives the clicked value as a URL query parameter. Use a variables: entry with input: text to read it:

# faces/zendesk/tickets/list.yml
variables:
  status:
    input: text         # populated from ?status= query param
    default: "Open"     # shown when opened without a parameter

queries:
  filtered_tickets:
    sql: SELECT * FROM tickets WHERE {{ filter('status', status) }}