Traffic Analytics

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard7.tsx instead.

Usage

The file also exports dashboard7Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard7, dashboard7Demo } from "@/components/blocks/dashboard/dashboard7";

export default function Page() {
  return <Dashboard7 {...dashboard7Demo} />;
}

Props

Types

type NavItem = { label: string; href: string; active?: boolean };
type ChannelAudiencePoint = { label: string; value: number };

type PageRow = {
  path: string;
  views: number;
  avgTimeSeconds: number;
  bounceRate: number; // 0-100
};

Behavior notes

• The 'visitors online now' pulse is a pure CSS animation (animate-ping) on a fixed liveVisitors number; it does not poll or update the count itself.
• The top-pages table sort is real client state: clicking a column header sorts by that column, clicking the same header again reverses direction, and the header icon reflects the active column and direction.
• channelAudience's five entries are matched to fixed Direct/Search/Social/Referral/Email axis labels by array position; passing a differently-ordered or differently-sized array will mislabel or clip the radar chart.
• avgTimeSeconds is the single source of truth for both sorting and the displayed mm:ss string, formatted client-side, so the two can never drift out of sync.
• Every chart (area, radial gauge, radar, dual line) is a local, non-exported SVG helper scaled from the array's own min/max at render time; none of it depends on a charting library or on window size.
• The whole block is a client component because the table sort needs real state; the pulsing dot and all four charts would otherwise have been servable as a plain server component.