> ## Documentation Index
> Fetch the complete documentation index at: https://developers.reintersect.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Metrics panel

> Headline metrics with trends and a chart. Several ranges show as tabs, and your app pushes fresh numbers when they change.

> Reintersect apps are in developer preview. Names and limits can still change before general
> release.

To keep a few headline numbers in a conversation, such as revenue and orders, insert a metrics panel.
Your app pushes new numbers when they change, and several time ranges show as tabs.

```tsx src/app.ts theme={null}
import { createReintersectApp } from "@reintersect/sdk/app";
import { metricsPanel } from "@reintersect/sdk/recipes";

export const Revenue = metricsPanel({ type: "revenue", title: "Revenue" });

export const app = createReintersectApp({ name: "Metrics" }).addBlock(Revenue);

export const revenuePanel = Revenue.insert(
  { title: "Revenue", dashboardUrl: "https://bi.example.com/revenue" },
  {
    state: {
      updatedAt: "2026-10-05T09:00:00Z",
      ranges: [
        {
          label: "7 days",
          metrics: [
            {
              label: "Revenue",
              value: 12_400,
              format: "currency",
              currency: "EUR",
              delta: { value: 0.08, percent: true, goodWhen: "up" }, // 0.08 is 8%
            },
            { label: "Orders", value: 312, trend: [40, 42, 51, 38, 44, 47, 50] },
          ],
          chart: {
            kind: "bar",
            title: "Orders per day",
            series: [{ name: "Orders", points: [{ label: "Mon", value: 40 }, { label: "Tue", value: 42 }] }],
          },
        },
      ],
    },
  },
);
```

## Props and state

Props are `{ title, dashboardUrl? }`. State is `{ ranges, updatedAt? }` with at most 6 ranges, each
`{ label, metrics, chart? }`:

* `metrics`: at most 6 of `{ label, value, format?, unit?, currency?, delta?, trend? }`, as on
  [`Metric`](/components/data#metrics-and-metric).
* `chart`: `{ kind, title, series, format?, unit?, currency? }`, as on
  [`Chart`](/components/data#chart).

Values are numbers, and Reintersect writes their text from the `format`. A `currency` value needs a
`currency` code, a `unit` only goes with plain numbers, and percents are fractions: `0.08` shows as
8%. A delta is a number plus `goodWhen`. With `percent: true` its value is a fraction too, so
`{ value: 0.08, percent: true, goodWhen: "up" }` reads "+8%" and counts as good.

One range shows directly; several ranges show as tabs. The panel has no actions: push new state with
`reintersect.blocks.update(Revenue, blockId, { state })` when your numbers change. The dashboard
link is the panel's only button, so it's the primary one.

## Labels

`empty`, `updated`, `dashboard`, `summary`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.