BreakdownList

import { BreakdownList } from '@arbol-ai/ui';
import { ChartPanel } from '@arbol-ai/ui/charts';

<ChartPanel className="max-w-md" eyebrow="Last 7 days" title="How conversations ended">
  <BreakdownList
    aria-label="Conversations by result"
    items={[
      { id: 'success', label: 'Resolved', value: 812, color: 'bg-chart-1', href: '#/breakdown-list' },
      {
        id: 'failure',
        label: 'Not resolved',
        value: 126,
        color: 'bg-red-9',
        href: '#/breakdown-list',
      },
      { id: 'unknown', label: 'Undecided', value: 64, color: 'bg-gray-6' },
    ]}
    showShare
  />
</ChartPanel>

import { useState } from 'react';
import { BreakdownList } from '@arbol-ai/ui';
import { ChartPanel } from '@arbol-ai/ui/charts';

const REASONS = [
  { id: 'forgot', label: 'Forgot', value: 18, caption: 'no-show' },
  { id: 'transport', label: 'No transport', value: 11, caption: 'no-show' },
  { id: 'rescheduled', label: 'Rescheduled elsewhere', value: 7, caption: 'cancelled' },
  { id: 'none', label: 'No reason given', value: 5, caption: 'cancelled', color: 'bg-gray-a6' },
];

const DrillDownExample = () => {
  const [reason, setReason] = useState<string | null>(null);
  return (
    <ChartPanel className="max-w-md" note="Press one to see its appointments." title="Reasons">
      <BreakdownList
        aria-label="Missed appointments by reason"
        items={REASONS}
        onSelectionChange={setReason}
        selectedId={reason}
      />
    </ChartPanel>
  );
};

<DrillDownExample />

import { BreakdownList } from '@arbol-ai/ui';
import { ChartPanel } from '@arbol-ai/ui/charts';

<div className="grid gap-4 md:grid-cols-2">
  <ChartPanel title="Occupancy by agenda">
    <BreakdownList
      aria-label="Occupancy by agenda"
      formatOptions={{ style: 'percent' }}
      items={[
        { id: 'ruiz', label: 'Dr. Ruiz', value: 0.92, detail: '37 h of 40 h', color: 'bg-amber-9' },
        { id: 'gomez', label: 'Dr. Gómez', value: 0.64, detail: '26 h of 40 h' },
        { id: 'room', label: 'Procedure room', value: null, detail: 'no hours set' },
      ]}
      max={1}
    />
  </ChartPanel>
  <ChartPanel title="By service">
    <BreakdownList aria-label="Appointments by service" isLoading items={[]} />
  </ChartPanel>
</div>