Area Chart

'use client';

import { useState } from 'react';
import { AreaChart, type AreaChartDatum } from '@/components/panelui/area-chart';
import { Frame } from '@/components/panelui/frame';

const SESSIONS = [
  { hour: '00:00', direct: 120, search: 60, social: 30 },
  { hour: '02:00', direct: 100, search: 45, social: 25 },
  { hour: '04:00', direct: 95, search: 40, social: 20 },
  { hour: '06:00', direct: 140, search: 90, social: 50 },
  { hour: '08:00', direct: 210, search: 220, social: 100 },
  { hour: '10:00', direct: 290, search: 400, social: 150 },
  { hour: '12:00', direct: 340, search: 520, social: 190 },
  { hour: '14:00', direct: 360, search: 560, social: 210 },
  { hour: '16:00', direct: 320, search: 480, social: 180 },
  { hour: '18:00', direct: 250, search: 330, social: 120 },
  { hour: '20:00', direct: 180, search: 160, social: 70 },
  { hour: '22:00', direct: 140, search: 90, social: 40 },
];

const LABELS = { direct: 'Direct', search: 'Search', social: 'Social' };
const rowTotal = (row: AreaChartDatum) => Number(row.direct) + Number(row.search) + Number(row.social);
const dayTotal = SESSIONS.reduce((sum, row) => sum + rowTotal(row), 0);

export default function AreaChartOverview() {
  const [active, setActive] = useState<AreaChartDatum | null>(null);

  return (
    <Frame variant="band" className="w-full max-w-lg">
      <Frame.Header>
        <Frame.Title>Sessions by channel</Frame.Title>
        <Frame.Action>Today</Frame.Action>
      </Frame.Header>
      <Frame.Panel className="p-5">
        <AreaChart
          data={SESSIONS}
          xDataKey="hour"
          stacked
          label="Sessions by channel, by hour"
          onActiveIndexChange={(_index, datum) => setActive(datum)}
        >
          <AreaChart.Header
            value={(active ? rowTotal(active) : dayTotal).toLocaleString('en-US')}
            caption={active ? String(active.hour) : 'All day'}
            labels={LABELS}
            legend
          />
          <AreaChart.Grid />
          <AreaChart.Area dataKey="direct" color="primary" />
          <AreaChart.Area dataKey="search" color="info" />
          <AreaChart.Area dataKey="social" color="success" />
          <AreaChart.YAxis />
          <AreaChart.XAxis />
          <AreaChart.Tooltip labels={LABELS} formatValue={(value) => value.toLocaleString('en-US')} />
        </AreaChart>
      </Frame.Panel>
    </Frame>
  );
}

'use client';

import { AreaChart } from '@/components/panelui/area-chart';

const SIGNUPS = [
  { week: 'W1', free: 420, team: 180 },
  { week: 'W2', free: 480, team: 240 },
  { week: 'W3', free: 450, team: 310 },
  { week: 'W4', free: 530, team: 290 },
  { week: 'W5', free: 610, team: 370 },
  { week: 'W6', free: 580, team: 460 },
  { week: 'W7', free: 640, team: 520 },
];

const LABELS = { free: 'Free', team: 'Team' };

export default function AreaChartOverlaid() {
  return (
    <AreaChart data={SIGNUPS} xDataKey="week" className="max-w-lg" label="Signups per week, by plan">
      <AreaChart.Header title="Signups per week" labels={LABELS} legend />
      <AreaChart.Grid />
      <AreaChart.Area dataKey="free" color="primary" />
      <AreaChart.Area dataKey="team" color="info" />
      <AreaChart.YAxis />
      <AreaChart.XAxis />
      <AreaChart.Tooltip labels={LABELS} />
    </AreaChart>
  );
}

'use client';

import { AreaChart } from '@/components/panelui/area-chart';

/** Running totals through a month, so the income line steps up on payday. */
const MONTH = [
  { day: '1', rent: 1200, food: 40, travel: 0, income: 2600 },
  { day: '5', rent: 1200, food: 190, travel: 60, income: 2600 },
  { day: '10', rent: 1200, food: 340, travel: 60, income: 2600 },
  { day: '15', rent: 1200, food: 470, travel: 310, income: 5200 },
  { day: '20', rent: 1200, food: 620, travel: 380, income: 5200 },
  { day: '25', rent: 1200, food: 760, travel: 690, income: 5200 },
  { day: '30', rent: 1200, food: 910, travel: 720, income: 5200 },
];

const LABELS = { rent: 'Rent', food: 'Food', travel: 'Travel', income: 'Income' };

const money = (value: number) => `$${value.toLocaleString('en-US')}`;

export default function AreaChartAnnotated() {
  return (
    <AreaChart data={MONTH} xDataKey="day" stacked className="max-w-2xl" label="Spending against income, by day">
      <AreaChart.Grid />
      <AreaChart.Area dataKey="rent" color="info" />
      <AreaChart.Area dataKey="food" color="success" />
      <AreaChart.Area dataKey="travel" color="warning" />
      <AreaChart.Line dataKey="income" curve="step" />
      <AreaChart.ReferenceLine y={2000} label="Budget $2,000" />
      <AreaChart.Marker index={4} label="Over budget" />
      <AreaChart.YAxis />
      <AreaChart.XAxis />
      <AreaChart.Labels
        labels={LABELS}
        formatValue={money}
        extra={[{ id: 'kept', label: 'Kept', value: 2370, at: 4015 }]}
      />
      <AreaChart.Tooltip labels={LABELS} formatValue={money} />
    </AreaChart>
  );
}

'use client';

import { AreaChart } from '@/components/panelui/area-chart';

const VISITS = [
  { day: 'Mon', visits: 310 },
  { day: 'Tue', visits: 440 },
  { day: 'Wed', visits: 380 },
  { day: 'Thu', visits: 570 },
  { day: 'Fri', visits: 490 },
  { day: 'Sat', visits: 620 },
  { day: 'Sun', visits: 540 },
];

export default function AreaChartFill() {
  return (
    <div className="grid w-full max-w-2xl gap-6 sm:grid-cols-3">
      <AreaChart data={VISITS} xDataKey="day" label="Visits, fading fill">
        <AreaChart.Header title="Fades out" />
        <AreaChart.Area dataKey="visits" color="info" fillOpacity={0.5} gradientToOpacity={0.05} />
      </AreaChart>
      <AreaChart data={VISITS} xDataKey="day" label="Visits, flat fill">
        <AreaChart.Header title="Flat" />
        <AreaChart.Area dataKey="visits" color="info" fillOpacity={0.4} gradientToOpacity={0.4} />
      </AreaChart>
      <AreaChart data={VISITS} xDataKey="day" label="Visits, fill only">
        <AreaChart.Header title="No line" />
        <AreaChart.Area dataKey="visits" color="info" showLine={false} />
      </AreaChart>
    </div>
  );
}

'use client';

import { useState } from 'react';

import { AreaChart } from '@/components/panelui/area-chart';

const SPEND = [
  { week: 'W1', rent: 300, food: 120, travel: 60 },
  { week: 'W2', rent: 300, food: 160, travel: 40 },
  { week: 'W3', rent: 300, food: 140, travel: 180 },
  { week: 'W4', rent: 300, food: 190, travel: 90 },
  { week: 'W5', rent: 300, food: 150, travel: 130 },
];

const CATEGORIES = [
  { key: 'rent', color: '#0ea5e9' },
  { key: 'food', color: '#f97316' },
  { key: 'travel', color: '#a855f7' },
];

const LABELS = { rent: 'Rent', food: 'Food', travel: 'Travel' };

/** How far the series that are not picked fade. */
const DIMMED = 0.25;

export default function AreaChartDimmed() {
  const [picked, setPicked] = useState('food');
  return (
    <AreaChart
      data={SPEND}
      xDataKey="week"
      stacked
      className="max-w-2xl"
      aspectRatio={2.4}
      label="Spending per week by category. Choose a category to pick it out."
      onSelect={setPicked}
    >
      <AreaChart.Grid />
      {CATEGORIES.map(({ key, color }) => (
        <AreaChart.Area key={key} dataKey={key} color={color} opacity={key === picked ? 1 : DIMMED} />
      ))}
      <AreaChart.YAxis />
      <AreaChart.XAxis />
      <AreaChart.Labels labels={LABELS} />
      <AreaChart.Tooltip labels={LABELS} />
    </AreaChart>
  );
}

'use client';

import { useState } from 'react';
import { AreaChart, type AreaChartStatus } from '@/components/panelui/area-chart';
import { Button } from '@/components/panelui/button';

const SESSIONS = [
  { hour: '08:00', direct: 210, search: 220 },
  { hour: '10:00', direct: 290, search: 400 },
  { hour: '12:00', direct: 340, search: 520 },
  { hour: '14:00', direct: 360, search: 560 },
  { hour: '16:00', direct: 320, search: 480 },
  { hour: '18:00', direct: 250, search: 330 },
];

export default function AreaChartLoading() {
  const [status, setStatus] = useState<AreaChartStatus>('loading');

  return (
    <div className="flex w-full max-w-lg flex-col items-start gap-4">
      <AreaChart data={SESSIONS} status={status} xDataKey="hour" stacked>
        <AreaChart.Grid />
        <AreaChart.Skeleton />
        <AreaChart.Area dataKey="direct" color="primary" />
        <AreaChart.Area dataKey="search" color="info" />
        <AreaChart.XAxis />
      </AreaChart>
      <Button variant="outline" onClick={() => setStatus(status === 'loading' ? 'ready' : 'loading')}>
        {status === 'loading' ? 'Finish loading' : 'Load again'}
      </Button>
    </div>
  );
}

'use client';

import { useRef, useState } from 'react';
import { AreaChart, type AreaChartHandle } from '@/components/panelui/area-chart';
import { Button } from '@/components/panelui/button';

const THIS_WEEK = [310, 440, 380, 570, 490, 620, 540];
const LAST_WEEK = [260, 300, 420, 390, 510, 430, 470];
const DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

const rows = (values: number[]) => values.map((visits, index) => ({ day: DAYS[index], visits }));

export default function AreaChartChangingData() {
  const chart = useRef<AreaChartHandle>(null);
  const [thisWeek, setThisWeek] = useState(true);

  return (
    <div className="flex w-full max-w-lg flex-col items-start gap-4">
      <AreaChart ref={chart} data={rows(thisWeek ? THIS_WEEK : LAST_WEEK)} xDataKey="day">
        <AreaChart.Grid />
        <AreaChart.Area dataKey="visits" color="info" />
        <AreaChart.YAxis />
        <AreaChart.XAxis />
        <AreaChart.Tooltip labels={{ visits: 'Visits' }} />
      </AreaChart>
      <div className="flex gap-2">
        <Button variant="outline" onClick={() => setThisWeek(!thisWeek)}>
          {thisWeek ? 'Show last week' : 'Show this week'}
        </Button>
        <Button variant="ghost" onClick={() => chart.current?.replay()}>
          Replay
        </Button>
      </div>
    </div>
  );
}