Numbers

KPI card

Add a kpi panel when one number should lead the page, shown with its change against the prior period and a small trend behind it.

Annual recurring revenue

ARR

$10.2M

4.5% · $440.0K

Trailing six months.

What you can do

valueField names the column to reduce; agg is sum, avg, last, first, min, max, count, or delta and defaults to sum.
format is the same object a table column uses: type is currency, percentage, number, date, duration, compact, or custom, refined by currency, decimals, compact, prefix, suffix, and scaleBy.
comparison adds a change chip: mode is percent, delta, or both, and improvement (up or down) says which direction counts as good, so a falling churn rate still colours as an improvement.
Without comparison.field the chip compares the last row with the one before it; set field (reduced with comparison.agg, which defaults to agg) to compare against an explicit prior-period column instead.
sparkline draws the trend behind the value from field (defaults to valueField) in an optional color; it needs at least two rows.
valueSize (12 to 160, default 36) and align (left or center) size and place the headline; caption prints under the value, description becomes the hover tooltip, and color accepts a theme token such as {chart.series.1}.

Applies to a kpi panel, which must carry a data block (rows, query, sourceId, or metricRef); stat is its canvas sibling with delta and sparkline as booleans, and metric-strip lays several of these figures out in one panel.

Spec

View spec

{
  "id": "arr-kpi",
  "type": "kpi",
  "title": "Annual recurring revenue",
  "data": {
    "rows": [
      {
        "month": "Jan",
        "arr": 7900000
      },
      {
        "month": "Feb",
        "arr": 8400000
      },
      {
        "month": "Mar",
        "arr": 8900000
      },
      {
        "month": "Apr",
        "arr": 9300000
      },
      {
        "month": "May",
        "arr": 9800000
      },
      {
        "month": "Jun",
        "arr": 10240000
      }
    ]
  },
  "spec": {
    "label": "ARR",
    "valueField": "arr",
    "agg": "last",
    "format": {
      "type": "currency",
      "currency": "USD",
      "compact": true
    },
    "color": "{chart.series.1}",
    "comparison": {
      "mode": "both",
      "improvement": "up"
    },
    "sparkline": {
      "field": "arr",
      "color": "{chart.series.1}"
    },
    "caption": "Trailing six months."
  }
}

agg: "last" makes June the headline; with no comparison.field the chip compares June with May and, in both mode, shows the percent and the absolute change; improvement: "up" colours that rise as positive.

Try it live

Open the feature-tour template in the Builder

Open the feature-tour template, page scorecards, panel ft-kpi-arr for this card beside three more; ft-kpi-churn sets improvement to down so a falling churn rate reads as good.

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.