Chart

import Card from '@/components/ui/Card';
import { LineChart } from '@/components/composites/Chart';

const resolution = [
  { week: 'W1', firstReply: 19, resolved: 12 },
  { week: 'W2', firstReply: 24, resolved: 16 },
  { week: 'W3', firstReply: 21, resolved: 15 },
  { week: 'W4', firstReply: 28, resolved: 23 },
  { week: 'W5', firstReply: 27, resolved: 20 },
  { week: 'W6', firstReply: 35, resolved: 29 },
];

export default function LineChartDemo() {
  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-base font-semibold">Support throughput</div>
        <p className="mt-1 text-muted-foreground">
          Reply and resolution counts over the last six weeks.
        </p>
      </div>
      <LineChart
        data={resolution}
        height={260}
        lineConfig={[
          { type: 'linear', dataKey: 'firstReply', name: 'First reply' },
          { 
            type: 'linear',
            stroke: 'var(--nui-chart-2)',
            strokeWidth: 2,
            strokeDasharray: '0.1 8',
            strokeLinecap: 'round',
            dataKey: 'resolved', 
            name: 'Resolved' 
          },
        ]}
        xAxisConfig={{ dataKey: 'week' }}
        yAxisConfig={{ hide: false, width: 28 }}
      />
    </div>
  );
}

import Card from '@/components/ui/Card';
import { AreaChart } from '@/components/composites/Chart';

const usage = [
  { day: 'Mon', api: 420, dashboard: 210 },
  { day: 'Tue', api: 510, dashboard: 240 },
  { day: 'Wed', api: 470, dashboard: 280 },
  { day: 'Thu', api: 620, dashboard: 330 },
  { day: 'Fri', api: 680, dashboard: 360 },
  { day: 'Sat', api: 540, dashboard: 260 },
  { day: 'Sun', api: 490, dashboard: 220 },
];

export default function AreaChartDemo() {
  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-base font-semibold">Weekly activity</div>
        <p className="mt-1 text-muted-foreground">
          API requests and dashboard sessions for the current week.
        </p>
      </div>
      <AreaChart
        data={usage}
        height={260}
        areaConfig={[
          {
            dataKey: 'api',
            name: 'API requests',
            fillOpacity: 0.18,
          },
          {
            dataKey: 'dashboard',
            name: 'Dashboard sessions',
            fillOpacity: 0.18,
          },
        ]}
        xAxisConfig={{ dataKey: 'day' }}
        yAxisConfig={{ hide: false, width: 36 }}
      />
    </div>
  );
}

import Card from '@/components/ui/Card';
import { AreaChart, ChartTooltipContent } from '@/components/composites/Chart';

const data = [
  { day: '12', views: 1330 },
  { day: '13', views: 3400 },
  { day: '14', views: 4470 },
  { day: '15', views: 3540 },
  { day: '16', views: 2610 },
  { day: '17', views: 2680 },
  { day: '18', views: 4750 },
  { day: '19', views: 3820 },
  { day: '20', views: 6690 },
  { day: '21', views: 6960 },
  { day: '22', views: 6030 },
  { day: '23', views: 8100 },
  { day: '24', views: 9170 },
  { day: '25', views: 8240 },
  { day: '26', views: 8310 },
]

export default function AdvancedGradientDemo() {
  return (
    <div className="w-full">
      <AreaChart
        data={data}
        areaConfig={[
            {
                dataKey: 'views',
                fill: 'url(#gradient-color)',
                stroke: 'url(#gradient-color)',
                mask: 'url(#fade-mask)',
            },
        ]}
        xAxisConfig={{
            dataKey: 'day',
        }}
        tooltipConfig={{
            content: <ChartTooltipContent hideIndicator />,
        }}
    >
        <defs>
            <linearGradient
                id="gradient-color"
                x1="0%"
                y1="0%"
                x2="100%"
                y2="0%"
            >
                <stop offset="0%" stopColor="#FFD700" />
                <stop offset="33%" stopColor="#FF69B4" />
                <stop offset="66%" stopColor="#8A2BE2" />
                <stop offset="100%" stopColor="#1E90FF" />
            </linearGradient>
            <linearGradient
                id="fade-gradient"
                x1="0%"
                y1="0%"
                x2="0%"
                y2="100%"
            >
                <stop offset="0%" stopColor="white" stopOpacity="0.6" />
                <stop offset="100%" stopColor="white" stopOpacity="0" />
            </linearGradient>
            <mask id="fade-mask">
                <rect
                    x="0"
                    y="0"
                    width="100%"
                    height="95%"
                    fill="url(#fade-gradient)"
                />
            </mask>
        </defs>
    </AreaChart>
    </div>
  );
}

import Card from '@/components/ui/Card';
import { BarChart } from '@/components/composites/Chart';

const queues = [
  { queue: 'Billing', open: 38 },
  { queue: 'Account', open: 26 },
  { queue: 'Integrations', open: 42 },
  { queue: 'Security', open: 18 },
  { queue: 'General', open: 31 },
];

export default function BarChartDemo() {
  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-base font-semibold">Open tickets by queue</div>
        <p className="mt-1 text-muted-foreground">
          Horizontal bars keep longer queue labels readable.
        </p>
      </div>
      <BarChart
        data={queues}
        height={260}
        layout="vertical"
        barConfig={[{ dataKey: 'open', name: 'Open tickets' }]}
        xAxisConfig={{ type: 'number', hide: false }}
        yAxisConfig={{
          dataKey: 'queue',
          type: 'category',
          hide: false,
          width: 88,
        }}
        cartesianGridConfig={{ horizontal: false, vertical: true }}
        tooltipContentConfig={{
          valueFormatter: (value) => `${Number(value)} tickets`,
        }}
      />
    </div>
  );
}

import Card from '@/components/ui/Card';
import Table from '@/components/ui/Table';
import { PieChart, defaultChartConfig } from '@/components/composites/Chart';

const { TBody, Td, Tr } = Table;

const channels = [
  { name: 'Organic', value: 420 },
  { name: 'Referral', value: 260 },
  { name: 'Paid', value: 180 },
  { name: 'Partners', value: 140 },
];

export default function PieChartDemo() {
  const total = channels.reduce((sum, item) => sum + item.value, 0);

  return (
    <div className="w-full">
      <div className="grid gap-4 p-4 md:grid-cols-[260px_minmax(0,1fr)]">
        <PieChart
          data={channels}
          height={240}
          pieConfig={{
            dataKey: 'value',
            nameKey: 'name',
            innerRadius: 70,
            outerRadius: 96,
            paddingAngle: 2,
            cornerRadius: 4,
          }}
          cellConfig={channels.map((_, index) => ({
            fill: defaultChartConfig.colors[index],
          }))}
          tooltipContentConfig={{
            valueFormatter: (value) => {
              const share = (Number(value) / total) * 100;
              return `${share.toFixed(1)}%`;
            },
          }}
        />
        <div className="flex min-w-0 flex-col justify-center">
          <div className="text-base font-semibold">Acquisition mix</div>
          <p className="mt-1 text-muted-foreground">
            Channel share for the current reporting period.
          </p>
          <Table
            compact
            overflow={false}
            hoverable={false}
            className="mt-4"
          >
            <TBody>
              {channels.map((channel, index) => (
                <Tr key={channel.name}>
                  <Td>
                    <span className="flex items-center gap-2">
                      <span
                        className="h-2.5 w-2.5 rounded-xs"
                        style={{
                          backgroundColor: defaultChartConfig.colors[index],
                        }}
                      />
                      {channel.name}
                    </span>
                  </Td>
                  <Td className="text-right font-medium">
                    {channel.value.toLocaleString()}
                  </Td>
                </Tr>
              ))}
            </TBody>
          </Table>
        </div>
      </div>
    </div>
  );
}

import Card from '@/components/ui/Card';
import {
  PieChart,
  defaultChartConfig,
} from '@/components/composites/Chart';
import { Label } from 'recharts';

type DonutLabelProps = {
  viewBox?: unknown;
};

const subscriptionHealth = [
  { name: 'Healthy', value: 860 },
  { name: 'Needs attention', value: 240 },
  { name: 'At risk', value: 140 },
];

export default function DonutWithContentDemo() {
  const total = subscriptionHealth.reduce(
    (sum, item) => sum + item.value,
    0,
  );

  const renderCenterLabel = ({ viewBox }: DonutLabelProps) => {
    if (
      !viewBox ||
      typeof viewBox !== 'object' ||
      !('cx' in viewBox) ||
      !('cy' in viewBox) ||
      typeof viewBox.cx !== 'number' ||
      typeof viewBox.cy !== 'number'
    ) {
      return <g />;
    }

    return (
      <text
        x={viewBox.cx}
        y={viewBox.cy}
        textAnchor="middle"
        dominantBaseline="middle"
      >
        <tspan
          x={viewBox.cx}
          y={viewBox.cy - 4}
          className="fill-foreground text-lg font-semibold"
        >
          {total.toLocaleString()}
        </tspan>
        <tspan
          x={viewBox.cx}
          y={viewBox.cy + 16}
          className="fill-muted-foreground text-xs"
        >
          accounts
        </tspan>
      </text>
    );
  };

  return (
    <div className="w-full">
      <div className="grid gap-4 p-4 md:grid-cols-[260px_minmax(0,1fr)]">
        <PieChart
          data={subscriptionHealth}
          height={250}
          pieConfig={{
            dataKey: 'value',
            nameKey: 'name',
            innerRadius: 72,
            outerRadius: 98,
            paddingAngle: 2,
            cornerRadius: 5,
          }}
          pieContent={<Label content={renderCenterLabel} />}
          cellConfig={subscriptionHealth.map((_, index) => ({
            fill: defaultChartConfig.colors[index],
          }))}
          tooltipContentConfig={{
            valueFormatter: (value) => `${Number(value).toLocaleString()} accounts`,
          }}
        />
        <div className="flex min-w-0 flex-col justify-center">
          <div className="text-base font-semibold">Subscription health</div>
          <p className="mt-1 text-muted-foreground">
            Center content keeps the total anchored while slices show distribution.
          </p>
          <div className="mt-4 grid gap-2">
            {subscriptionHealth.map((segment, index) => (
              <div
                key={segment.name}
                className="flex items-center justify-between gap-4 text-sm"
              >
                <span className="flex min-w-0 items-center gap-2">
                  <span
                    className="h-2.5 w-2.5 shrink-0 rounded-xs"
                    style={{
                      backgroundColor: defaultChartConfig.colors[index],
                    }}
                  />
                  <span className="truncate">{segment.name}</span>
                </span>
                <span className="font-medium tabular-nums">
                  {segment.value.toLocaleString()}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

import Card from '@/components/ui/Card';
import { RadarChart } from '@/components/composites/Chart';

const readiness = [
  { area: 'Coverage', score: 82 },
  { area: 'Latency', score: 74 },
  { area: 'Errors', score: 68 },
  { area: 'Throughput', score: 88 },
  { area: 'Recovery', score: 79 },
  { area: 'Alerts', score: 92 },
];

export default function RadarChartDemo() {
  return (
    <div className="w-full">
      <RadarChart
        data={readiness}
        height={300}
        radarConfig={[{ dataKey: 'score', name: 'Score' }]}
        angleAxisConfig={{ dataKey: 'area' }}
        tooltipConfig={{ cursor: false }}
        tooltipContentConfig={{
          valueFormatter: (value) => `${Number(value)} / 100`,
        }}
      />
    </div>
  );
}

import Card from '@/components/ui/Card';
import {
  ChartLegendContent,
  LineChart,
} from '@/components/composites/Chart';

const devices = [
  { day: 'Mon', desktop: 420, mobile: 310, tablet: 120 },
  { day: 'Tue', desktop: 460, mobile: 340, tablet: 132 },
  { day: 'Wed', desktop: 440, mobile: 372, tablet: 118 },
  { day: 'Thu', desktop: 520, mobile: 410, tablet: 154 },
  { day: 'Fri', desktop: 560, mobile: 438, tablet: 166 },
  { day: 'Sat', desktop: 490, mobile: 390, tablet: 142 },
  { day: 'Sun', desktop: 455, mobile: 360, tablet: 130 },
];

export default function LegendDemo() {
  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-base font-semibold">Sessions by device</div>
        <p className="mt-1 text-muted-foreground">
          The legend reads the same series colors that the chart uses.
        </p>
      </div>
      <LineChart
        data={devices}
        height={280}
        lineConfig={[
          { type: 'linear', dataKey: 'desktop', name: 'Desktop' },
          { type: 'linear', dataKey: 'mobile', name: 'Mobile' },
          { type: 'linear', dataKey: 'tablet', name: 'Tablet' },
        ]}
        xAxisConfig={{ dataKey: 'day' }}
        yAxisConfig={{ hide: false, width: 36 }}
      >
        <ChartLegendContent />
      </LineChart>
    </div>
  );
}

import Card from '@/components/ui/Card';
import { BarChart } from '@/components/composites/Chart';

const revenue = [
  { month: 'Jan', recurring: 48200, expansion: 8400 },
  { month: 'Feb', recurring: 52600, expansion: 9400 },
  { month: 'Mar', recurring: 54800, expansion: 11200 },
  { month: 'Apr', recurring: 60100, expansion: 12800 },
  { month: 'May', recurring: 63200, expansion: 13600 },
  { month: 'Jun', recurring: 68400, expansion: 14900 },
];

const currency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  maximumFractionDigits: 0,
});

export default function TooltipFormattingDemo() {
  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-base font-semibold">Revenue composition</div>
        <p className="mt-1 text-muted-foreground">
          Tooltip labels and values are formatted at the chart boundary.
        </p>
      </div>
      <BarChart
        data={revenue}
        height={280}
        barConfig={[
          { dataKey: 'recurring', name: 'Recurring' },
          { dataKey: 'expansion', name: 'Expansion' },
        ]}
        xAxisConfig={{ dataKey: 'month' }}
        yAxisConfig={{
          hide: false,
          width: 42,
          tickFormatter: (value: number) => `$${value / 1000}k`,
        }}
        tooltipContentConfig={{
          nameFormatter: (name) =>
            name === 'recurring' ? 'Recurring revenue' : 'Expansion revenue',
          valueFormatter: (value) => currency.format(Number(value)),
        }}
      />
    </div>
  );
}

import Card from '@/components/ui/Card';
import {
  BarChart,
  defaultChartConfig,
} from '@/components/composites/Chart';

type CapacityDatum = {
  month: string;
  used: number;
  reserved: number;
};

const capacity = [
  { month: 'Jan', used: 62, reserved: 18 },
  { month: 'Feb', used: 68, reserved: 22 },
  { month: 'Mar', used: 74, reserved: 19 },
  { month: 'Apr', used: 79, reserved: 17 },
  { month: 'May', used: 83, reserved: 21 },
  { month: 'Jun', used: 88, reserved: 16 },
];

export default function CustomTooltipDemo() {
  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-base font-semibold">Capacity planning</div>
        <p className="mt-1 text-muted-foreground">
          Custom tooltip content can read the full row payload.
        </p>
      </div>
      <BarChart
        data={capacity}
        height={280}
        barConfig={[
          { dataKey: 'used', name: 'Used seats' },
          { dataKey: 'reserved', name: 'Reserved seats' },
        ]}
        xAxisConfig={{ dataKey: 'month' }}
        yAxisConfig={{
          hide: false,
          width: 32,
          tickFormatter: (value: number) => `${value}%`,
        }}
        tooltipContentConfig={{
          customContent: ({ payload }) => {
            if (!payload?.length) {
              return null;
            }

            const row = payload[0].payload as CapacityDatum;
            const total = row.used + row.reserved;

            return (
              <div className="min-w-44 px-2.5 py-1.5">
                <div className="flex items-center justify-between gap-4">
                  <span className="font-medium">{row.month}</span>
                  <span className="font-mono text-xs text-muted-foreground">
                    {total}% allocated
                  </span>
                </div>
                <div className="mt-2 grid gap-1.5">
                  {payload.map((item, index) => {
                    const itemKey =
                      typeof item.dataKey === 'string' ||
                      typeof item.dataKey === 'number'
                        ? item.dataKey
                        : `${item.name ?? 'item'}-${index}`;

                    return (
                      <div
                        key={itemKey}
                        className="flex items-center justify-between gap-4"
                      >
                        <span className="flex items-center gap-2">
                          <span
                            className="h-2.5 w-2.5 rounded-xs"
                            style={{
                              backgroundColor:
                                defaultChartConfig.colors[index],
                            }}
                          />
                          {item.name}
                        </span>
                        <span className="font-mono font-medium tabular-nums">
                          {Number(item.value).toLocaleString()}%
                        </span>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          },
        }}
      />
    </div>
  );
}

import Card from '@/components/ui/Card';
import { BarChart } from '@/components/composites/Chart';

const segments = [
  { key: 'online', label: 'Online', color: '#2563eb' },
  { key: 'partner', label: 'Partner', color: '#059669' },
  { key: 'field', label: 'Field', color: '#f97316' },
  { key: 'selfServe', label: 'Self serve', color: '#dc2626' },
] as const;

const segmentRevenue = [
  { quarter: 'Q1', online: 64, partner: 28, field: 18, selfServe: 36 },
  { quarter: 'Q2', online: 72, partner: 32, field: 21, selfServe: 42 },
  { quarter: 'Q3', online: 78, partner: 36, field: 24, selfServe: 47 },
  { quarter: 'Q4', online: 86, partner: 40, field: 27, selfServe: 52 },
];

export default function ColorsDemo() {
  return (
    <div className="w-full">
      <div className="min-w-0">
        <div className="mb-4">
          <div className="text-base font-semibold">Revenue by segment</div>
          <p className="mt-1 text-muted-foreground">
            Custom fills keep the chart aligned to an external palette.
          </p>
        </div>
        <BarChart
          data={segmentRevenue}
          height={280}
          barConfig={segments.map((segment) => ({
            dataKey: segment.key,
            name: segment.label,
            fill: segment.color,
          }))}
          xAxisConfig={{ dataKey: 'quarter' }}
          yAxisConfig={{
            hide: false,
            width: 36,
            tickFormatter: (value: number) => `$${value}k`,
          }}
          tooltipContentConfig={{
            valueFormatter: (value) => `$${Number(value)}k`,
          }}
        />
      </div>
    </div>
  );
}

import Card from '@/components/ui/Card';
import {
  ChartContainer,
  ChartTooltipContent,
  defaultChartConfig,
} from '@/components/composites/Chart';
import {
  Area,
  Bar,
  CartesianGrid,
  ComposedChart,
  ReferenceLine,
  Tooltip,
  XAxis,
  YAxis,
} from 'recharts';

const activation = [
  { week: 'W1', signups: 380, activated: 242 },
  { week: 'W2', signups: 420, activated: 278 },
  { week: 'W3', signups: 460, activated: 316 },
  { week: 'W4', signups: 510, activated: 362 },
  { week: 'W5', signups: 540, activated: 384 },
  { week: 'W6', signups: 590, activated: 436 },
];

export default function CustomComposeDemo() {
  return (
    <div className="w-full">
      <div className="mb-4">
        <div className="text-base font-semibold">Activation progress</div>
        <p className="mt-1 text-muted-foreground">
          Compose bars, an area mark, and a reference line in the same surface.
        </p>
      </div>
      <ChartContainer height={260}>
        <ComposedChart
          data={activation}
          accessibilityLayer
          margin={{ left: 12, right: 12, top: 12, bottom: 12 }}
        >
          <CartesianGrid vertical={false} />
          <XAxis
            dataKey="week"
            {...defaultChartConfig.XAxis}
          />
          <YAxis
            {...defaultChartConfig.YAxis}
            hide={false}
            width={36}
          />
          <Tooltip
            content={
              <ChartTooltipContent
                valueFormatter={(value) =>
                  `${Number(value).toLocaleString()} accounts`
                }
              />
            }
          />
          <ReferenceLine
            y={360}
            stroke="var(--color-warning)"
            strokeDasharray="4 4"
          />
          <Area
            dataKey="activated"
            name="Activated"
            stroke={defaultChartConfig.colors[0]}
            fill={defaultChartConfig.colors[0]}
            fillOpacity={0.16}
            {...defaultChartConfig.area}
          />
          <Bar
            dataKey="signups"
            name="Signups"
            fill={defaultChartConfig.colors[1]}
            radius={[8, 8, 0, 0]}
            barSize={22}
          />
        </ComposedChart>
      </ChartContainer>
    </div>
  );
}