// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Stats Cards 06 * @description Stats cards with smooth line graphs showing trends. * Cards featuring area charts for visual trend representation. * * @slots stats, stats-container, stats-grid, stats-card, stats-card-header, * stats-card-title, stats-card-change, stats-card-content, stats-card-value, * stats-card-label, stats-card-chart * @variant line-graph * * @registryDependencies card * @dependencies lucide-react */ import * as React from "react" import { TrendingUp, TrendingDown } from "lucide-react" import { Card, CardContent, CardHeader } from "@/registry/ui/card" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface StatCardConfig { id: string title: string value: string label?: string change: number data: number[] } interface StatsCards06Props { stats?: StatCardConfig[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultStats: StatCardConfig[] = [ { id: "stat-1", title: "Page Views", value: "124.5K", label: "Total this month", change: 12.5, data: [30, 45, 35, 50, 40, 55, 65, 60, 70, 75, 80, 85], }, { id: "stat-2", title: "Unique Visitors", value: "45.2K", label: "New users", change: 8.3, data: [20, 25, 30, 28, 35, 40, 38, 45, 50, 55, 58, 62], }, { id: "stat-3", title: "Bounce Rate", value: "32.4%", label: "Average rate", change: -5.2, data: [50, 48, 52, 45, 43, 40, 42, 38, 35, 33, 30, 32], }, { id: "stat-4", title: "Session Duration", value: "4m 32s", label: "Average time", change: 15.7, data: [100, 110, 105, 120, 130, 125, 140, 150, 145, 160, 170, 180], }, ] // ============================================================================ // SUB-COMPONENTS // ============================================================================ interface AreaChartProps { data: number[] positive: boolean className?: string } function AreaChart({ data, positive, className }: AreaChartProps) { const width = 200 const height = 60 const max = Math.max(...data) const min = Math.min(...data) const range = max - min || 1 const padding = 2 const points = data.map((value, index) => { const x = (index / (data.length - 1)) * width const y = padding + ((max - value) / range) * (height - 2 * padding) return { x, y } }) const pathD = points .map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`) .join(' ') const areaD = `${pathD} L ${width} ${height} L 0 ${height} Z` return ( ) } // ============================================================================ // COMPONENT // ============================================================================ function StatsCards06({ stats = defaultStats, className, idBase = "stats-cards-06", }: StatsCards06Props) { return (

{stats.map((stat) => { const isPositive = stat.change >= 0 return ( {stat.title}

{isPositive ? (

{stat.value}

{stat.label && (

{stat.label}

)}

) })}

) } export default StatsCards06 export { StatsCards06, type StatsCards06Props }