4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T2def,import { Badge } from '@/components/ui/badge'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { cn } from '@/lib/utils'; import { useState } from 'react'; type TimeRange = 'daily' | 'weekly' | 'monthly' | 'quarterly'; type SparklineData = { id: string; name: string; value: string; secondaryValue: string; change: number; trend: 'up' | 'down' | 'neutral'; sparklineData: number[]; }; type SparklineStats = { [key in TimeRange]: SparklineData[]; }; export default function SparklineStats() { const [timeRange, setTimeRange] = useState('monthly'); // Sample data for different time ranges const stats: SparklineStats = { daily: [ { id: 'visitors', name: 'Unique Visitors', value: '8,492', secondaryValue: '+1,204', change: 16.5, trend: 'up', sparklineData: [32, 38, 28, 43, 36, 42, 39, 37, 41, 38, 42, 48, 52, 47], }, { id: 'page-views', name: 'Page Views', value: '32,591', secondaryValue: '+4,882', change: 17.6, trend: 'up', sparklineData: [ 142, 128, 132, 156, 148, 163, 157, 152, 166, 171, 168, 182, 190, 196, ], }, { id: 'bounce-rate', name: 'Bounce Rate', value: '36.4%', secondaryValue: '-2.3%', change: -5.9, trend: 'down', sparklineData: [42, 40, 41, 39, 38, 40, 37, 36, 35, 38, 37, 34, 36, 35], }, { id: 'orders', name: 'Orders', value: '284', secondaryValue: '+42', change: 17.4, trend: 'up', sparklineData: [18, 22, 19, 24, 21, 20, 25, 18, 24, 22, 26, 28, 27, 32], }, ], weekly: [ { id: 'visitors', name: 'Unique Visitors', value: '52,846', secondaryValue: '+8,294', change: 18.6, trend: 'up', sparklineData: [321, 384, 428, 461, 423, 462, 478, 512], }, { id: 'page-views', name: 'Page Views', value: '198,432', secondaryValue: '+24,781', change: 14.3, trend: 'up', sparklineData: [1428, 1562, 1679, 1781, 1823, 1942, 2018, 2156], }, { id: 'bounce-rate', name: 'Bounce Rate', value: '38.2%', secondaryValue: '-1.7%', change: -4.3, trend: 'down', sparklineData: [42, 41, 40, 39, 38, 37, 37, 36], }, { id: 'orders', name: 'Orders', value: '1,784', secondaryValue: '+286', change: 19.1, trend: 'up', sparklineData: [176, 186, 204, 211, 234, 242, 262, 281], }, ], monthly: [ { id: 'visitors', name: 'Unique Visitors', value: '214,283', secondaryValue: '+32,941', change: 18.2, trend: 'up', sparklineData: [ 14283, 16421, 18642, 19846, 21256, 23841, 25174, 27428, 29152, 30841, 32145, 35462, ], }, { id: 'page-views', name: 'Page Views', value: '842,156', secondaryValue: '+72,184', change: 9.4, trend: 'up', sparklineData: [ 64215, 68420, 70156, 72841, 75621, 79421, 82156, 85214, 87951, 89214, 92451, 96214, ], }, { id: 'bounce-rate', name: 'Bounce Rate', value: '41.2%', secondaryValue: '-3.8%', change: -8.4, trend: 'down', sparklineData: [48, 47, 46, 46, 45, 44, 44, 43, 42, 42, 41, 40], }, { id: 'orders', name: 'Orders', value: '7,842', secondaryValue: '+1,241', change: 18.8, trend: 'up', sparklineData: [ 524, 584, 612, 645, 687, 721, 764, 802, 852, 894, 932, 984, ], }, ], quarterly: [ { id: 'visitors', name: 'Unique Visitors', value: '643,294', secondaryValue: '+89,214', change: 16.1, trend: 'up', sparklineData: [154283, 182846, 214283, 246512], }, { id: 'page-views', name: 'Page Views', value: '2,471,582', secondaryValue: '+210,452', change: 9.3, trend: 'up', sparklineData: [582416, 624185, 742156, 824582], }, { id: 'bounce-rate', name: 'Bounce Rate', value: '43.7%', secondaryValue: '-5.2%', change: -10.6, trend: 'down', sparklineData: [52, 49, 47, 44], }, { id: 'orders', name: 'Orders', value: '23,485', secondaryValue: '+3,624', change: 18.2, trend: 'up', sparklineData: [4856, 5742, 6254, 7412], }, ], }; // Function to normalize sparkline data for rendering const normalizeSparklineData = (data: number[]) => { const min = Math.min(...data); const max = Math.max(...data); const range = max - min; if (range === 0) return data.map(() => 50); // Handle flat data // Normalize to 0-100 range for SVG path return data.map((value) => Math.round(((value - min) / range) * 100)); }; // Create SVG path for sparkline const createSparklinePath = (data: number[]) => { if (data.length < 2) return ''; const normalizedData = normalizeSparklineData(data); const height = 40; // SVG height const width = 120; // SVG width const points = normalizedData.map((value, index) => { const x = (index / (normalizedData.length - 1)) * width; const y = height - (value / 100) * height; return `${x},${y}`; }); // Start from the bottom left for fill effect return `M0,${height} ${points .map((point) => `L${point}`) .join(' ')} L${width},${height} Z`; }; // Get appropriate color for trend const getTrendColor = ( trend: 'up' | 'down' | 'neutral', negative: boolean = false ) => { if (trend === 'up') { return negative ? 'text-rose-500 fill-rose-100 dark:fill-rose-950' : 'text-emerald-500 fill-emerald-100 dark:fill-emerald-950'; } else if (trend === 'down') { return negative ? 'text-emerald-500 fill-emerald-100 dark:fill-emerald-950' : 'text-rose-500 fill-rose-100 dark:fill-rose-950'; } return 'text-gray-500 fill-gray-100 dark:fill-gray-900'; }; // Bounce rate is inverted (down is good) const isInverseMetric = (id: string) => { return ['bounce-rate'].includes(id); }; return (

Analytics

Performance Trends

Track how our key metrics are trending over time

{/* Time Range Selector - Tabs for md+ screens */}

{/* Tabs for md+ screens */}

{(['daily', 'weekly', 'monthly', 'quarterly'] as TimeRange[]).map( (range) => ( ) )}

{/* Dropdown for small screens */}

{/* Sparkline Cards */}

{stats[timeRange].map((stat) => { const inverse = isInverseMetric(stat.id); return ( {stat.name}

{stat.value}

{stat.secondaryValue}

{stat.trend === 'up' ? '↑' : '↓'} {Math.abs(stat.change)}% {' vs '} {timeRange === 'daily' && 'yesterday'} {timeRange === 'weekly' && 'last week'} {timeRange === 'monthly' && 'last month'} {timeRange === 'quarterly' && 'last quarter'}

{/* Sparkline */}

); })}

); } 52:T749,import * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { Slot } from "radix-ui" import { cn } from "@/lib/utils" const badgeVariants = cva( "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", { variants: { variant: { default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", link: "text-primary underline-offset-4 hover:underline", }, }, defaultVariants: { variant: "default", }, } ) function Badge({ className, variant = "default", asChild = false, ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot.Root : "span" return ( ) } export { Badge, badgeVariants } 53:Ta35,import * as React from "react" import { cn } from "@/lib/utils" function Card({ className, size = "default", ...props }: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { return (

img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className )} {...props} /> ) } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return (

) } export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } 54:T19eb,"use client" import * as React from "react" import { Select as SelectPrimitive } from "radix-ui" import { cn } from "@/lib/utils" import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react" function Select({ ...props }: React.ComponentProps) { return } function SelectGroup({ className, ...props }: React.ComponentProps) { return ( ) } function SelectValue({ ...props }: React.ComponentProps) { return } function SelectTrigger({ className, size = "default", children, ...props }: React.ComponentProps & { size?: "sm" | "default" }) { return ( {children} ) } function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }: React.ComponentProps) { return ( {children} ) } function SelectLabel({ className, ...props }: React.ComponentProps) { return ( ) } function SelectItem({ className, children, ...props }: React.ComponentProps) { return ( {children} ) } function SelectSeparator({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollUpButton({ className, ...props }: React.ComponentProps) { return ( ) } function SelectScrollDownButton({ className, ...props }: React.ComponentProps) { return ( ) } export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","class-variance-authority",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":[]}]]}],["$","$L4f",null,{"sourceUrl":"https://www.shadcn-ui-blocks.com/r/marketing-stats-sparkline-stats.json","proxyUrl":"https://shadcnregistry.com/r/shadcn-ui-blocks/marketing-stats-sparkline-stats","itemId":"@shadcn-ui-blocks/marketing-stats-sparkline-stats"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"components/blocks/marketing/stats/sparkline-stats.tsx","content":"$51","type":"registry:component","target":"components/blocks/marketing/stats/sparkline-stats.tsx"},{"path":"components/ui/badge.tsx","content":"$52","type":"registry:ui","target":"components/ui/badge.tsx"},{"path":"components/ui/card.tsx","content":"$53","type":"registry:ui","target":"components/ui/card.tsx"},{"path":"components/ui/select.tsx","content":"$54","type":"registry:ui","target":"components/ui/select.tsx"}]}]]}],"$L55"]}]

Sparkline Stats

Installation

Files

components

Styles