---
title: "Stat"
description: "Dashboard figures: Stat shows one number formatted for the locale with its change against the previous period (TrendDelta), a line of context, its definition behind an ⓘ and what it leads to; StatGrid lays them out by its own width; SummaryTile is a figure that also filters the list below it."
---

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

# Stat

## Headline figures

Green is good news, amber bad news; a neutral metric stays gray. The change is read in words.

```tsx
import { Stat, StatGrid, TrendDelta } from '@arbol-ai/ui';

<StatGrid>
  <Stat label="Conversations" trend={<TrendDelta label="vs last week" value={0.18} />} value={3240} />
  <Stat
    formatOptions={{ style: 'percent' }}
    hint="Answered within a minute"
    label="Answer rate"
    trend={<TrendDelta label="vs last week" unit="points" value={2.4} />}
    value={0.94}
  />
  <Stat
    label="No-shows"
    trend={<TrendDelta label="vs last week" tone="inverse" value={0.07} />}
    value={41}
  />
  <Stat
    label="Average call"
    trend={<TrendDelta tone="neutral" value={-0.04} />}
    unit="min"
    value="3:45"
  />
</StatGrid>
```

## Live figures, definitions and what they lead to

A live dot before the figure, the definition one press away on the ⓘ, and the work the number counts underneath.

```tsx
import { Link, Stat, StatGrid, StatusDot, TrendDelta } from '@arbol-ai/ui';

<StatGrid columns={3}>
  <Stat
    hint="214 by phone · 96 on WhatsApp"
    label="Live now"
    leading={<StatusDot hideLabel label="Live" pulse tone="success" />}
    value={18}
  />
  <Stat
    formatOptions={{ style: 'percent' }}
    info="Conversations that reached their goal, out of every conversation with a result."
    label="Success rate"
    trend={<TrendDelta label="vs previous period" unit="points" value={3.2} />}
    value={0.81}
  />
  <Stat
    info="Conversations the agent handed to your team that nobody has closed yet."
    label="To review"
    trend={<TrendDelta tone="inverse" value={-0.12} />}
    value={23}
  >
    <Link className="text-sm" href="#/stat">
      Review them
    </Link>
  </Stat>
</StatGrid>
```

## Loading and no previous period

```tsx
import { Stat, StatGrid, TrendDelta } from '@arbol-ai/ui';

<StatGrid columns={2}>
  <Stat isLoading label="Bookings" value={0} />
  <Stat label="Campaigns sent" trend={<TrendDelta value={null} />} value={12} />
</StatGrid>
```

## Summary tiles that filter, from data

Pressing a tile shows only what it counts; pressing it again shows everything. The dots match the chart beside the strip, and a hint says what each tile counts.

```tsx
import { useState } from 'react';
import { SummaryStrip } from '@arbol-ai/ui';
import type { SummaryStripItem } from '@arbol-ai/ui';

const RESULTS: SummaryStripItem[] = [
  {
    id: 'resolved',
    label: 'Resolved',
    value: 812,
    share: 0.81,
    dot: 'bg-chart-1',
    hint: 'Conversations the agent resolved without help.',
  },
  {
    id: 'handoff',
    label: 'Handed off',
    value: 126,
    share: 0.13,
    dot: 'bg-amber-9',
    hint: 'Conversations the agent passed to your team.',
  },
  {
    id: 'missed',
    label: 'Missed',
    value: 64,
    share: 0.06,
    dot: 'bg-red-9',
    hint: 'Calls and chats nobody answered.',
  },
];

const SummaryExample = () => {
  const [result, setResult] = useState<string | null>(null);
  return (
    <SummaryStrip
      items={RESULTS}
      label="Conversations by result"
      onSelectionChange={setResult}
      selectedId={result}
    />
  );
};

<SummaryExample />
```

## Source

The examples above are [`src/components/stat/stat.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/stat/stat.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/data/stat/index.mdx