TrendChart

import { ChartLegend, ChartPanel, TrendChart } from '@arbol-ai/ui/charts';
import type { TrendPoint } from '@arbol-ai/ui/charts';

const REACHED = [182, 205, 197, 240, 228, 96, 74, 210, 236, 251, 244, 262, 118, 131];

const BEFORE = [170, 188, 201, 215, 209, 88, 70, 195, 214, 220, 231, 226, 101, 97];

const DAYS: TrendPoint[] = REACHED.map((value, index) => ({
  date: new Date(2026, 9, 25 + index),
  value,
  previous: BEFORE[index] ?? null,
}));

<ChartPanel
  eyebrow="Last 14 days"
  legend={
    <ChartLegend
      items={[
        { label: 'This period', color: 'chart-1' },
        { label: 'Previous period', color: 'chart-neutral' },
      ]}
    />
  }
  note="2,674 contacts reached"
  title="Contacts reached"
>
  <TrendChart
    aria-label="Contacts reached per day"
    currentLabel="This period"
    data={DAYS}
    isOpenEnded
    previousLabel="Previous period"
  />
</ChartPanel>

import { TrendChart } from '@arbol-ai/ui/charts';
import type { TrendPoint } from '@arbol-ai/ui/charts';

const REACHED = [182, 205, 197, 240, 228, 96, 74, 210, 236, 251, 244, 262, 118, 131];

const BEFORE = [170, 188, 201, 215, 209, 88, 70, 195, 214, 220, 231, 226, 101, 97];

const DAYS: TrendPoint[] = REACHED.map((value, index) => ({
  date: new Date(2026, 9, 25 + index),
  value,
  previous: BEFORE[index] ?? null,
}));

const RATE: Intl.NumberFormatOptions = { style: 'percent', maximumFractionDigits: 1 };

<div className="grid gap-4 md:grid-cols-2">
  <TrendChart
    aria-label="Calls per day"
    currentLabel="This period"
    data={DAYS}
    previousLabel="Previous period"
    variant="bars"
  />
  <TrendChart
    aria-label="Answer rate per day"
    currentLabel="Answer rate"
    data={DAYS.map((day) => ({ date: day.date, value: day.value === null ? null : day.value / 300 }))}
    formatOptions={RATE}
    variant="line"
  />
</div>