ChartCard

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

const WEEK = [312, 298, 341, 356, 330, 142, 118].map((value, index) => ({
  date: new Date(2026, 10, 1 + index),
  value,
  previous: [290, 305, 322, 318, 301, 130, 121][index] ?? null,
}));

<ChartCard change={0.06} chart={{ kind: 'trend', data: WEEK }} title="Conversations" value={1897} />

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

const BreakdownExample = () => {
  const [reason, setReason] = useState<string | null>(null);
  return (
    <ChartCard
      chart={{
        kind: 'breakdown',
        items: [
          { id: 'forgot', label: 'Forgot', value: 18 },
          { id: 'transport', label: 'No transport', value: 11 },
          { id: 'rescheduled', label: 'Rescheduled elsewhere', value: 7 },
        ],
        onSelectionChange: setReason,
        selectedId: reason,
        showShare: true,
      }}
      description="Press one to see its appointments."
      title="Why they missed it"
    />
  );
};

<div className="grid gap-4 lg:grid-cols-3">
  <ChartCard
    chart={{
      kind: 'bars',
      categories: ['Phone', 'WhatsApp', 'Web chat'],
      series: [
        { label: 'This period', values: [583, 1102, 212] },
        { label: 'Previous period', values: [540, 1010, 230], color: 'chart-neutral' },
      ],
    }}
    title="By channel"
  />
  <ChartCard
    chart={{
      kind: 'donut',
      data: [
        { label: 'WhatsApp', value: 1102 },
        { label: 'Phone', value: 583 },
        { label: 'Web chat', value: 212 },
      ],
      totalLabel: 'conversations',
    }}
    title="Share by channel"
  />
  <BreakdownExample />
</div>

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

<ChartCard
  change={2.4}
  changeUnit="points"
  chart={{ kind: 'gauge', value: 0.81 }}
  className="max-w-sm"
  description="Of every conversation with a result"
  title="Success rate"
/>

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

<div className="grid gap-4 md:grid-cols-2">
  <ChartCard chart={{ kind: 'trend', data: [] }} isLoading title="Conversations" value={0} />
  <ChartCard
    chart={{ kind: 'trend', data: [] }}
    emptyLabel="No calls in this period yet"
    title="Calls"
  />
</div>