Numbers

Metric strip

Add a metric-strip panel when four to six figures belong together in one card and share one query.

ARR

$10.2M

NRR

112%

New logos

Gross churn

1.7%

Lower is better.

What you can do

metrics is a list of tiles; each needs a label and a valueField, and may set its own agg, format, color, and description (a hover tooltip on the value).
Every tile reads the same multi-row result, one row per period, so one query feeds the whole strip; each chip is the percent change between the last two rows of that tile valueField.
layout is auto (responsive wrap), row (a single scrollable line), or grid (equal-width columns).
Strip-wide sparklines and delta default to true; a tile sets its own sparklines or delta to false to opt out; valueFontSize (16 to 64, default 30) and valueColor style every value at once.
Percent columns hold whole numbers: a row value of 108 with format.type percentage renders as 108%.

Applies to a metric-strip panel, which must carry a data block; use it when four to six figures belong together in one card, and kpi or stat when one figure should stand alone.

Spec

View spec

{
  "id": "q2-summary",
  "type": "metric-strip",
  "title": "Q2 at a glance",
  "data": {
    "rows": [
      {
        "month": "Apr",
        "arr": 9300000,
        "nrr": 109,
        "logos": 14,
        "churn": 2.1
      },
      {
        "month": "May",
        "arr": 9800000,
        "nrr": 111,
        "logos": 16,
        "churn": 1.9
      },
      {
        "month": "Jun",
        "arr": 10240000,
        "nrr": 112,
        "logos": 21,
        "churn": 1.7
      }
    ]
  },
  "spec": {
    "layout": "row",
    "metrics": [
      {
        "label": "ARR",
        "valueField": "arr",
        "agg": "last",
        "format": {
          "type": "currency",
          "currency": "USD",
          "compact": true
        },
        "color": "{chart.series.1}"
      },
      {
        "label": "NRR",
        "valueField": "nrr",
        "agg": "last",
        "format": {
          "type": "percentage",
          "decimals": 0
        },
        "color": "{chart.series.2}"
      },
      {
        "label": "New logos",
        "valueField": "logos",
        "agg": "sum",
        "format": {
          "type": "number"
        },
        "color": "{chart.series.3}",
        "sparklines": false
      },
      {
        "label": "Gross churn",
        "valueField": "churn",
        "agg": "last",
        "format": {
          "type": "percentage",
          "decimals": 1
        },
        "color": "{chart.series.5}",
        "description": "Lower is better."
      }
    ]
  }
}

Four tiles share three monthly rows; layout: "row" keeps them on one line, the logos tile turns its own sparklines off, and every chip compares June with May.

Try it live

Open the feature-tour template in the Builder

Open the feature-tour template, page print-report, panel nw-q2-summary for a four-tile strip over one quarterly query.

Build it in dvt

Every block on this page is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.