Dashboard 02

// Dashboard 02 from Hirael <https://hirael.com/blocks/dashboard/dashboard-02>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

'use client';

import * as React from 'react';
import { ArrowDownRight, ArrowUpRight, Check, Minus, Share2 } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/registry/hirael/bases/radix/ui/button';
import { Sparkline } from '@/registry/hirael/bases/radix/components/sparkline';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/hirael/bases/radix/ui/card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/hirael/bases/radix/ui/select';
import { Separator } from '@/registry/hirael/bases/radix/ui/separator';

const ENTER =
  'animate-in fade-in slide-in-from-bottom-2 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';
const SWAP =
  'animate-in fade-in slide-in-from-bottom-1 duration-250 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';

type Range = '7d' | '14d' | '28d';

const RANGES: { value: Range; label: string }[] = [
  { value: '7d', label: 'Last 7 days' },
  { value: '14d', label: 'Last 14 days' },
  { value: '28d', label: 'Last 28 days' },
];

interface Kpi {
  label: string;
  value: string;
  delta: number;
  unit: '%' | 'pp' | 's';
  goodWhen: 'up' | 'down';
  spark: readonly number[];
}

const KPIS_BY_RANGE: Record<Range, readonly Kpi[]> = {
  '7d': [
    {
      label: 'Visitors',
      value: '24,310',
      delta: 12.4,
      unit: '%',
      goodWhen: 'up',
      spark: [12, 18, 14, 22, 19, 26, 31],
    },
    {
      label: 'Page views',
      value: '96,482',
      delta: 8.1,
      unit: '%',
      goodWhen: 'up',
      spark: [40, 52, 47, 58, 54, 66, 72],
    },
    {
      label: 'Avg. time',
      value: '3m 42s',
      delta: 9,
      unit: 's',
      goodWhen: 'up',
      spark: [30, 28, 33, 31, 36, 34, 39],
    },
    {
      label: 'Bounce rate',
      value: '38.2%',
      delta: -1.8,
      unit: 'pp',
      goodWhen: 'down',
      spark: [46, 44, 45, 42, 43, 40, 38],
    },
  ],
  '14d': [
    {
      label: 'Visitors',
      value: '46,920',
      delta: 9.6,
      unit: '%',
      goodWhen: 'up',
      spark: [14, 16, 13, 19, 18, 24, 27],
    },
    {
      label: 'Page views',
      value: '182,104',
      delta: 6.4,
      unit: '%',
      goodWhen: 'up',
      spark: [44, 49, 46, 55, 52, 61, 67],
    },
    {
      label: 'Avg. time',
      value: '3m 31s',
      delta: 0,
      unit: 's',
      goodWhen: 'up',
      spark: [32, 31, 33, 32, 33, 32, 33],
    },
    {
      label: 'Bounce rate',
      value: '39.6%',
      delta: -0.9,
      unit: 'pp',
      goodWhen: 'down',
      spark: [45, 44, 46, 43, 44, 41, 40],
    },
  ],
  '28d': [
    {
      label: 'Visitors',
      value: '88,475',
      delta: 21.2,
      unit: '%',
      goodWhen: 'up',
      spark: [10, 13, 12, 17, 16, 22, 28],
    },
    {
      label: 'Page views',
      value: '351,889',
      delta: 17.8,
      unit: '%',
      goodWhen: 'up',
      spark: [36, 42, 40, 51, 49, 60, 71],
    },
    {
      label: 'Avg. time',
      value: '3m 24s',
      delta: 18,
      unit: 's',
      goodWhen: 'up',
      spark: [27, 29, 28, 32, 31, 35, 38],
    },
    {
      label: 'Bounce rate',
      value: '40.4%',
      delta: 0.6,
      unit: 'pp',
      goodWhen: 'down',
      spark: [39, 40, 39, 41, 40, 42, 41],
    },
  ],
};

interface ChartBucket {
  label: string;
  visitors: number;
  views: number;
}

const CHART_BY_RANGE: Record<Range, readonly ChartBucket[]> = {
  '7d': [
    { label: 'Mon', visitors: 2840, views: 11200 },
    { label: 'Tue', visitors: 3120, views: 12400 },
    { label: 'Wed', visitors: 2960, views: 11900 },
    { label: 'Thu', visitors: 3480, views: 13800 },
    { label: 'Fri', visitors: 3940, views: 15600 },
    { label: 'Sat', visitors: 3260, views: 13100 },
    { label: 'Sun', visitors: 4710, views: 18482 },
  ],
  '14d': [
    { label: 'D2', visitors: 5410, views: 21400 },
    { label: 'D4', visitors: 6180, views: 24300 },
    { label: 'D6', visitors: 5890, views: 23200 },
    { label: 'D8', visitors: 6720, views: 26800 },
    { label: 'D10', visitors: 7240, views: 28900 },
    { label: 'D12', visitors: 6950, views: 27600 },
    { label: 'D14', visitors: 8530, views: 29904 },
  ],
  '28d': [
    { label: 'D4', visitors: 10240, views: 40100 },
    { label: 'D8', visitors: 11820, views: 46400 },
    { label: 'D12', visitors: 11260, views: 44800 },
    { label: 'D16', visitors: 12980, views: 52200 },
    { label: 'D20', visitors: 13710, views: 55900 },
    { label: 'D24', visitors: 13180, views: 53600 },
    { label: 'D28', visitors: 15285, views: 58889 },
  ],
};

const TOP_PAGES = [
  { path: '/blocks', views: 18204 },
  { path: '/components', views: 14911 },
  { path: '/blocks/hero-01', views: 9482 },
  { path: '/theme', views: 6150 },
  { path: '/blocks/faq-02', views: 4067 },
] as const;

const TOP_PAGE_PEAK = Math.max(...TOP_PAGES.map((p) => p.views));

const compact = new Intl.NumberFormat('en-US');

const CHANNELS = [
  { label: 'Organic search', share: 44 },
  { label: 'Direct', share: 31 },
  { label: 'Referral', share: 16 },
  { label: 'Social', share: 9 },
] as const;

const deltaTone = ({ delta, goodWhen }: Kpi) => {
  if (delta === 0) return 'bg-accent text-muted-foreground';
  const improving = delta > 0 === (goodWhen === 'up');

  return improving ? 'bg-success/10 text-success' : 'bg-destructive/10 text-destructive';
};

const UNIT_WORD: Record<Kpi['unit'], string> = {
  '%': 'percent',
  pp: 'percentage points',
  s: 'seconds',
};

interface DeltaChipProps {
  kpi: Kpi;
}

const DeltaChip = ({ kpi }: DeltaChipProps) => {
  const { delta, unit, label } = kpi;
  const Icon = delta > 0 ? ArrowUpRight : delta < 0 ? ArrowDownRight : Minus;
  const direction = delta > 0 ? 'up' : delta < 0 ? 'down' : 'unchanged';
  const sign = delta > 0 ? '+' : delta < 0 ? '\u2212' : '';

  return (
    <span
      dir="ltr"
      aria-label={`${label} ${direction} ${Math.abs(delta)} ${UNIT_WORD[unit]} against the previous period`}
      className={cn(
        'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-[11px] leading-none tabular-nums',
        deltaTone(kpi),
      )}
    >
      <Icon className="size-3" aria-hidden />
      {sign}
      {Math.abs(delta)}
      {unit === 'pp' ? 'pp' : unit}
    </span>
  );
};

const linePath = (values: number[], max: number) => {
  // A single bucket would divide by zero.
  const step = values.length > 1 ? 100 / (values.length - 1) : 100;

  return values
    .map((v, i) => `${i === 0 ? 'M' : 'L'}${(i * step).toFixed(2)} ${(44 - (v / max) * 38).toFixed(2)}`)
    .join(' ');
};

const Dashboard02 = () => {
  const [range, setRange] = React.useState<Range>('7d');
  const [copied, setCopied] = React.useState(false);

  React.useEffect(() => {
    if (!copied) return;
    const timeout = setTimeout(() => setCopied(false), 2000);

    return () => clearTimeout(timeout);
  }, [copied]);

  const onShare = async () => {
    const url = new URL(window.location.href);
    url.searchParams.set('range', range);
    try {
      await navigator.clipboard.writeText(url.toString());
      setCopied(true);
    } catch {
      setCopied(false);
    }
  };

  const kpis = KPIS_BY_RANGE[range];
  const chart = CHART_BY_RANGE[range];
  const max = Math.max(...chart.map((b) => b.views));
  const viewsLine = linePath(
    chart.map((b) => b.views),
    max,
  );
  const visitorsLine = linePath(
    chart.map((b) => b.visitors),
    max,
  );
  const peak = chart.reduce((a, b) => (b.views > a.views ? b : a));

  return (
    <section data-slot="dashboard" className="bg-background py-20 sm:py-28">
      <div className="mx-auto w-full max-w-[1480px] px-4">
        <div
          data-slot="dashboard-header"
          className={cn(ENTER, 'flex flex-col gap-5 sm:flex-row sm:items-end sm:justify-between')}
        >
          <div className="flex max-w-xl flex-col gap-3">
            <span className="text-xs text-muted-foreground uppercase">Analytics</span>
            <h2 className="font-serif text-4xl font-medium tracking-tight sm:text-5xl">Traffic, end to end.</h2>
          </div>
          <div className="flex items-center gap-2">
            <Select value={range} onValueChange={(v) => setRange(v as Range)}>
              <SelectTrigger size="sm" className="w-[150px]" aria-label="Date range">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {RANGES.map((r) => (
                  <SelectItem key={r.value} value={r.value}>
                    {r.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button
              variant="outline"
              size="sm"
              onClick={onShare}
              aria-label={copied ? 'Link copied' : 'Copy link to report'}
            >
              {copied ? (
                <Check className="size-3.5 animate-in duration-250 zoom-in-50 motion-reduce:animate-none" aria-hidden />
              ) : (
                <Share2 className="size-3.5" aria-hidden />
              )}
              <span className="hidden sm:inline">{copied ? 'Copied' : 'Share report'}</span>
            </Button>
            <span aria-live="polite" className="sr-only">
              {copied ? 'Link copied' : ''}
            </span>
          </div>
        </div>

        <div
          data-slot="dashboard-metrics"
          className={cn(
            ENTER,
            'mt-10 grid grid-cols-2 gap-px overflow-hidden rounded-md border border-border bg-border delay-60 lg:grid-cols-4',
          )}
        >
          {kpis.map((k) => (
            <div key={k.label} className="flex flex-col gap-2 bg-card p-5">
              <div className="flex items-center justify-between gap-2">
                <span className="text-xs text-muted-foreground uppercase">{k.label}</span>
                <span key={range} className={SWAP}>
                  <DeltaChip kpi={k} />
                </span>
              </div>
              <div key={range} className={cn(SWAP, 'flex flex-col gap-2')}>
                <span className="text-3xl font-semibold tracking-[-0.035em] tabular-nums">{k.value}</span>
                <Sparkline data={[...k.spark]} tone="muted" aria-hidden className="h-7 w-full" />
              </div>
            </div>
          ))}
        </div>

        <div className={cn(ENTER, 'mt-6 grid grid-cols-1 gap-6 delay-120 lg:grid-cols-3 lg:items-start')}>
          <Card data-slot="dashboard-chart" className="lg:col-span-2">
            <CardHeader>
              <div className="flex items-start justify-between gap-3">
                <div className="flex flex-col gap-1">
                  <CardDescription>page views vs visitors</CardDescription>
                  <CardTitle>{RANGES.find((r) => r.value === range)?.label}</CardTitle>
                </div>
                <div className="flex items-center gap-4">
                  <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground uppercase">
                    <span aria-hidden className="size-2 rounded-xs bg-foreground/85" />
                    Views
                  </span>
                  <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground uppercase">
                    <span aria-hidden className="size-2 rounded-xs bg-muted-foreground/45" />
                    Visitors
                  </span>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div key={range} className={SWAP}>
                <svg viewBox="0 0 100 46" preserveAspectRatio="none" aria-hidden className="h-56 w-full">
                  {[11, 22, 33].map((y) => (
                    <line
                      key={y}
                      x1="0"
                      x2="100"
                      y1={y}
                      y2={y}
                      vectorEffect="non-scaling-stroke"
                      className="stroke-border"
                      strokeDasharray="2 3"
                    />
                  ))}
                  <path d={`${viewsLine} L100 46 L0 46 Z`} className="fill-foreground/10" />
                  <path d={`${visitorsLine} L100 46 L0 46 Z`} className="fill-foreground/5" />
                  <path
                    d={viewsLine}
                    fill="none"
                    vectorEffect="non-scaling-stroke"
                    strokeWidth="1.5"
                    className="stroke-foreground/85"
                  />
                  <path
                    d={visitorsLine}
                    fill="none"
                    vectorEffect="non-scaling-stroke"
                    strokeWidth="1.5"
                    strokeDasharray="4 3"
                    className="stroke-muted-foreground/60"
                  />
                </svg>
                <div aria-hidden className="mt-2 flex justify-between">
                  {chart.map((b) => (
                    <span key={b.label} className="text-xs text-muted-foreground uppercase">
                      {b.label}
                    </span>
                  ))}
                </div>

                <table className="sr-only">
                  <caption>
                    Page views and visitors per bucket, {RANGES.find((r) => r.value === range)?.label.toLowerCase()}
                  </caption>
                  <thead>
                    <tr>
                      <th scope="col">Bucket</th>
                      <th scope="col">Page views</th>
                      <th scope="col">Visitors</th>
                    </tr>
                  </thead>
                  <tbody>
                    {chart.map((b) => (
                      <tr key={b.label}>
                        <th scope="row">{b.label}</th>
                        <td>{b.views.toLocaleString('en-US')}</td>
                        <td>{b.visitors.toLocaleString('en-US')}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>

              <Separator className="my-4" />

              <p className="flex flex-wrap gap-x-3 text-xs text-muted-foreground uppercase">
                <span>Peak</span>
                <span className="text-foreground">{peak.label}</span>
                <span className="tabular-nums">{max.toLocaleString('en-US')} views</span>
              </p>
            </CardContent>
          </Card>

          <div className="flex flex-col gap-6">
            <Card data-slot="dashboard-top-pages">
              <CardHeader>
                <div className="flex items-center justify-between">
                  <CardDescription>top pages</CardDescription>
                  <Button variant="link" size="sm" className="h-auto" asChild>
                    <a href="#">View all</a>
                  </Button>
                </div>
                <CardTitle className="sr-only">Top pages</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col gap-3.5">
                  {TOP_PAGES.map((p) => (
                    <div key={p.path} className="flex flex-col gap-1.5">
                      <div className="flex items-baseline justify-between gap-3">
                        <span className="truncate text-xs text-foreground">{p.path}</span>
                        <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
                          {compact.format(p.views)}
                        </span>
                      </div>
                      <div aria-hidden className="h-1 w-full overflow-hidden rounded-full bg-accent">
                        <div
                          className="h-full rounded-full bg-foreground/70"
                          style={{
                            width: `${Math.round((p.views / TOP_PAGE_PEAK) * 100)}%`,
                          }}
                        />
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>

            <Card data-slot="dashboard-channels">
              <CardHeader>
                <CardDescription>channels</CardDescription>
                <CardTitle className="sr-only">Channels</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="flex flex-col gap-3">
                  {CHANNELS.map((c) => (
                    <div key={c.label} className="flex items-center gap-3">
                      <span className="w-28 shrink-0 text-xs text-muted-foreground">{c.label}</span>
                      <div aria-hidden className="h-1 flex-1 overflow-hidden rounded-full bg-accent">
                        <div className="h-full rounded-full bg-foreground/70" style={{ width: `${c.share}%` }} />
                      </div>
                      <span className="w-9 shrink-0 text-end text-xs text-muted-foreground tabular-nums">
                        {c.share}%
                      </span>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Dashboard02;