Metrics panel

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.

src/app.ts

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.
chart: { kind, title, series, format?, unit?, currency? }, as on 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.

Catalog

Recipes

Props and state

Labels

​Props and state

​Labels

Props and state

Labels