Breakdown Chart

Ranked analytics panels with Plot-style chrome, configurable top bar controls, and multi-column bar rows.

Default

Pick the column that carries the bar with barColumnId. The top row's bar fills the label track and the rest scale to it. Column headers show when any column has a header.

Fail reasons

Reason

Count

Percent

Disconnections

4,998

43%

User hangs up

2,684

23%

SIP errors

1,082

Pre-call API failures

996

Timeout

640

User barge-in

512

Tool error

388

Silence timeout

210

import { BreakdownChart } from "@smallest-inc/ui";

const REASONS = [
  { id: "disconnect", label: "Disconnections", count: 4998 },
  { id: "hangup", label: "User hangs up", count: 2684 },
  { id: "sip", label: "SIP errors", count: 1082 },
  { id: "precall", label: "Pre-call API failures", count: 996 },
  { id: "timeout", label: "Timeout", count: 640 },
  { id: "barge", label: "User barge-in", count: 512 },
  { id: "tool", label: "Tool error", count: 388 },
  { id: "silence", label: "Silence timeout", count: 210 },
];

const total = REASONS.reduce((sum, reason) => sum + reason.count, 0);

export default function BreakdownChartDefault() {
  return (
    <div className="w-full max-w-[556px]">
      <BreakdownChart
        title="Fail reasons"
        topTrailing={{
          type: "ranges",
          defaultValue: "7d",
          options: [
            { id: "1d", label: "1D" },
            { id: "7d", label: "7D" },
            { id: "1m", label: "1M" },
          ],
        }}
        columns={[
          { id: "reason", header: "Reason", width: "flex" },
          { id: "count", header: "Count", width: 48 },
          { id: "percent", header: "Percent", width: 48 },
        ]}
        barColumnId="reason"
        rows={REASONS.map((reason) => ({
          id: reason.id,
          barValue: reason.count,
          cells: {
            reason: reason.label,
            count: reason.count,
            percent: `${Math.round((reason.count / total) * 100)}%`,
          },
        }))}
      />
    </div>
  );
}

Leading media

A node in the bar column renders as-is, so flags and icons sit before the label. Truncate the label so long names do not push the counts.

Calls by country

United States

8,420

India

6,135

United Kingdom

2,810

Germany

1,904

Brazil

1,422

Canada

1,180

France

915

Singapore

702

import { BreakdownChart, Flag, type FlagCountry } from "@smallest-inc/ui";

const COUNTRIES: { country: FlagCountry; label: string; calls: number }[] = [
  { country: "US", label: "United States", calls: 8420 },
  { country: "IN", label: "India", calls: 6135 },
  { country: "GB", label: "United Kingdom", calls: 2810 },
  { country: "DE", label: "Germany", calls: 1904 },
  { country: "BR", label: "Brazil", calls: 1422 },
  { country: "CA", label: "Canada", calls: 1180 },
  { country: "FR", label: "France", calls: 915 },
  { country: "SG", label: "Singapore", calls: 702 },
];

export default function BreakdownChartLeading() {
  return (
    <div className="w-full max-w-[556px]">
      <BreakdownChart
        title="Calls by country"
        columns={[
          { id: "country", width: "flex" },
          { id: "calls", width: 48, align: "right" },
        ]}
        barColumnId="country"
        rows={COUNTRIES.map((row) => ({
          id: row.country,
          barValue: row.calls,
          cells: {
            country: (
              <>
                <Flag country={row.country} className="size-4 shrink-0 rounded-[2px]" />
                <span className="min-w-0 flex-1 truncate">{row.label}</span>
              </>
            ),
            calls: row.calls,
          },
        }))}
      />
    </div>
  );
}

Leaderboard

Several metric columns, Entity avatars in the bar column, and a menu in the top bar. onRowActivate turns each row into a button.

Agent leaderboard

Agent

Calls

Avg duration

Cost

Select an agent to open it

import { useState } from "react";
import {
  Avatar,
  AvatarFallback,
  BreakdownChart,
  Entity,
  EntityContent,
  EntityMedia,
} from "@smallest-inc/ui";

const AGENTS = [
  { id: "support", name: "Support", initials: "SU", calls: 842, duration: "4m 12s", cost: "$42.10" },
  { id: "sales", name: "Sales", initials: "SA", calls: 611, duration: "3m 04s", cost: "$30.55" },
  { id: "onboarding", name: "Onboarding", initials: "ON", calls: 388, duration: "5m 48s", cost: "$19.40" },
  { id: "billing", name: "Billing", initials: "BI", calls: 274, duration: "2m 51s", cost: "$14.20" },
  { id: "success", name: "Success", initials: "SC", calls: 198, duration: "6m 02s", cost: "$11.80" },
  { id: "recruiting", name: "Recruiting", initials: "RE", calls: 121, duration: "8m 14s", cost: "$9.60" },
];

export default function BreakdownChartLeaderboard() {
  const [opened, setOpened] = useState<string | null>(null);

  return (
    <div className="flex w-full max-w-[556px] flex-col gap-3">
      <BreakdownChart
        title="Agent leaderboard"
        topTrailing={{
          type: "menu",
          label: "Period",
          defaultValue: "7d",
          options: [
            { id: "7d", label: "Last 7 days" },
            { id: "30d", label: "Last 30 days" },
          ],
        }}
        columns={[
          { id: "agent", header: "Agent", width: "flex" },
          { id: "calls", header: "Calls", width: 48 },
          { id: "duration", header: "Avg duration", width: 88 },
          { id: "cost", header: "Cost", width: 56 },
        ]}
        barColumnId="agent"
        onRowActivate={(row) => setOpened(row.id)}
        rows={AGENTS.map((agent) => ({
          id: agent.id,
          barValue: agent.calls,
          cells: {
            agent: (
              <Entity className="gap-2">
                <EntityMedia size="sm">
                  <Avatar size="sm">
                    <AvatarFallback>{agent.initials}</AvatarFallback>
                  </Avatar>
                </EntityMedia>
                <EntityContent title={agent.name} weight="medium" />
              </Entity>
            ),
            calls: agent.calls,
            duration: agent.duration,
            cost: agent.cost,
          },
        }))}
      />
      <p className="text-sm text-fg-secondary">
        {opened ? `Opened ${AGENTS.find((agent) => agent.id === opened)?.name} agent` : "Select an agent to open it"}
      </p>
    </div>
  );
}

Best practices

When to use

Use for ranked categories beside a time series: fail reasons, agents, countries.
Use BarList or BarFill inside tables. Use Breakdown Chart when the panel needs card chrome, top-bar controls or column headers.

Behavior

barColumnId picks the column that carries the bar. Its width comes from barValue, or from the cell when it is a number. The top row fills the label track.
Rows render in the order given. Pass sortOrder="descending" to rank them, and maxVisibleRows to cap the list.
The card is fixed at 320px (height). Rows scroll in a fading ScrollArea.
topTrailing is none, ranges, segments, menu or node. All are uncontrolled with defaultValue or controlled with value/onValueChange; swap rows yourself when it changes.
onRowActivate turns rows into buttons with hover and focus states. Only pass it when a row opens something.
Column headers show when any column has a header. Set showColumnHeaders={false} for simple label/value lists.

Content

The bar column accepts nodes: flags, icons or Entity avatars before a truncated label.
Metric lanes default to 48px; widen them for durations or currency (88px for "Avg duration").
Write emptyState for the period ("No failed calls in this period").

Accessibility

Activatable rows are native buttons. Their text should name the destination.

PreviousTooltip NextDonut Chart