Mirror Area Chart

'use client';

import { useState } from 'react';
import { MirrorAreaChart } from '@/components/panelui/mirror-area-chart';

const LOAD = [
  { time: '09:00', jobs: 420, high: 96, share: 23 },
  { time: '10:00', jobs: 560, high: 148, share: 26 },
  { time: '11:00', jobs: 780, high: 264, share: 34 },
  { time: '12:00', jobs: 640, high: 186, share: 29 },
  { time: '13:00', jobs: 720, high: 302, share: 42 },
  { time: '14:00', jobs: 910, high: 446, share: 49 },
  { time: '15:00', jobs: 850, high: 357, share: 42 },
  { time: '16:00', jobs: 610, high: 183, share: 30 },
];

export default function MirrorAreaChartOverview() {
  const [active, setActive] = useState<(typeof LOAD)[number] | null>(null);
  const shown = active ?? LOAD[LOAD.length - 1];

  return (
    <MirrorAreaChart
      data={LOAD}
      xDataKey="time"
      className="max-w-xl"
      label="Jobs per hour above the baseline, and the share that were high priority below it"
      onActiveIndexChange={(index) => setActive(LOAD[index] ?? null)}
    >
      <MirrorAreaChart.Header title="Queue" value={`${shown.jobs} jobs`} caption={`${shown.share}% high priority at ${shown.time}`} legend />
      <MirrorAreaChart.Grid />
      <MirrorAreaChart.Area dataKey="jobs" label="Jobs" muted />
      <MirrorAreaChart.Area dataKey="high" label="High priority" />
      <MirrorAreaChart.Area dataKey="share" label="% high" side="bottom" color="chart-3" />
      <MirrorAreaChart.Baseline />
      <MirrorAreaChart.XAxis />
      <MirrorAreaChart.Tooltip formatValue={(value, key) => (key === 'share' ? `${value}%` : String(value))} />
    </MirrorAreaChart>
  );
}

'use client';

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

const TRAFFIC = [
  { day: 'Mon', requests: 18_400, latency: 142 },
  { day: 'Tue', requests: 21_300, latency: 156 },
  { day: 'Wed', requests: 26_800, latency: 198 },
  { day: 'Thu', requests: 24_100, latency: 171 },
  { day: 'Fri', requests: 31_500, latency: 264 },
  { day: 'Sat', requests: 15_200, latency: 128 },
  { day: 'Sun', requests: 12_900, latency: 119 },
];

const formatValue = (value: number, key: string) => (key === 'latency' ? `${value} ms` : `${(value / 1000).toFixed(1)}k`);

export default function MirrorAreaChartBothScales() {
  return (
    <MirrorAreaChart data={TRAFFIC} xDataKey="day" className="max-w-xl">
      <MirrorAreaChart.Grid />
      <MirrorAreaChart.Area dataKey="requests" label="Requests" />
      <MirrorAreaChart.Area dataKey="latency" label="Latency" side="bottom" color="chart-3" />
      <MirrorAreaChart.Baseline />
      <MirrorAreaChart.XAxis ticks={7} />
      <MirrorAreaChart.YAxis
        formatTop={(value) => `${Math.round(value / 1000)}k`}
        formatBottom={(value) => `${Math.round(value)} ms`}
      />
      <MirrorAreaChart.Legend />
      <MirrorAreaChart.Tooltip formatValue={formatValue} />
    </MirrorAreaChart>
  );
}

'use client';

import { useState } from 'react';
import { MirrorAreaChart } from '@/components/panelui/mirror-area-chart';

const SALES = [
  { month: 'Jan', orders: 1_240, returns: 86 },
  { month: 'Feb', orders: 1_380, returns: 92 },
  { month: 'Mar', orders: 1_710, returns: 131 },
  { month: 'Apr', orders: 1_620, returns: 118 },
  { month: 'May', orders: 1_940, returns: 104 },
  { month: 'Jun', orders: 2_180, returns: 167 },
];

export default function MirrorAreaChartSplit() {
  const [active, setActive] = useState<(typeof SALES)[number] | null>(null);
  const shown = active ?? SALES[SALES.length - 1];

  return (
    <MirrorAreaChart
      data={SALES}
      xDataKey="month"
      split={0.7}
      className="max-w-xl"
      onActiveIndexChange={(index) => setActive(SALES[index] ?? null)}
    >
      <MirrorAreaChart.Header title={`Orders in ${shown.month}`} value={shown.orders.toLocaleString('en')} caption={`${shown.returns} returned`} />
      <MirrorAreaChart.Grid variant="lines" />
      <MirrorAreaChart.Area dataKey="orders" label="Orders" gradientToOpacity={0.04} />
      <MirrorAreaChart.Area dataKey="returns" label="Returns" side="bottom" color="destructive" gradientToOpacity={0.04} />
      <MirrorAreaChart.Baseline />
      <MirrorAreaChart.XAxis ticks={6} />
      <MirrorAreaChart.Tooltip />
    </MirrorAreaChart>
  );
}

'use client';

import { useState } from 'react';
import { Button } from '@/components/panelui/button';
import { MirrorAreaChart, type MirrorAreaChartStatus } from '@/components/panelui/mirror-area-chart';

const SIGNUPS = [
  { week: 'W1', signups: 310, churned: 42 },
  { week: 'W2', signups: 380, churned: 48 },
  { week: 'W3', signups: 352, churned: 61 },
  { week: 'W4', signups: 447, churned: 55 },
  { week: 'W5', signups: 512, churned: 73 },
  { week: 'W6', signups: 498, churned: 66 },
];

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

  return (
    <div className="flex w-full max-w-xl flex-col items-start gap-4">
      <MirrorAreaChart data={SIGNUPS} xDataKey="week" status={status}>
        <MirrorAreaChart.Grid />
        <MirrorAreaChart.Skeleton />
        <MirrorAreaChart.Area dataKey="signups" label="Signups" />
        <MirrorAreaChart.Area dataKey="churned" label="Churned" side="bottom" color="chart-3" />
        <MirrorAreaChart.Baseline />
        <MirrorAreaChart.XAxis />
        <MirrorAreaChart.Tooltip />
      </MirrorAreaChart>
      <Button variant="outline" onClick={() => setStatus(status === 'loading' ? 'ready' : 'loading')}>
        {status === 'loading' ? 'Finish loading' : 'Load again'}
      </Button>
    </div>
  );
}