// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Table View 06 * @description Analytics dashboard table with mini sparkline charts. * Display metrics with trend indicators and visual performance data. * * @slots table-view, table-view-container, table-view-card, table-view-header, * table-view-title, table-view-description, table-view-table-wrapper, * table-view-table, table-view-thead, table-view-th, table-view-tbody, * table-view-row, table-view-cell, table-view-metric-name, table-view-metric-value, * table-view-trend, table-view-trend-up, table-view-trend-down, table-view-sparkline * @variant analytics * * @dependencies lucide-react * @registryDependencies card */ import * as React from "react" import { TrendingUp, TrendingDown, Minus } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/registry/ui/card" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ type TrendDirection = "up" | "down" | "neutral" interface MetricRow { id: string name: string value: string previousValue: string change: number trend: TrendDirection sparkline: number[] } interface TableView06Props { title?: string description?: string metrics?: MetricRow[] className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultMetrics: MetricRow[] = [ { id: "metric-1", name: "Page Views", value: "124,892", previousValue: "108,234", change: 15.4, trend: "up", sparkline: [30, 45, 42, 55, 62, 58, 72, 85, 78, 92, 88, 95] }, { id: "metric-2", name: "Unique Visitors", value: "45,231", previousValue: "42,891", change: 5.5, trend: "up", sparkline: [40, 38, 45, 52, 48, 55, 58, 62, 65, 68, 72, 75] }, { id: "metric-3", name: "Bounce Rate", value: "32.4%", previousValue: "35.8%", change: 9.5, trend: "up", sparkline: [60, 58, 55, 52, 50, 48, 45, 42, 40, 38, 35, 32] }, { id: "metric-4", name: "Avg. Session Duration", value: "4m 32s", previousValue: "4m 15s", change: 6.7, trend: "up", sparkline: [45, 48, 52, 50, 55, 58, 62, 60, 65, 68, 72, 75] }, { id: "metric-5", name: "Conversion Rate", value: "3.2%", previousValue: "3.5%", change: 8.6, trend: "down", sparkline: [55, 52, 50, 48, 45, 42, 40, 38, 35, 32, 30, 28] }, { id: "metric-6", name: "Revenue", value: "$48,392", previousValue: "$45,123", change: 7.2, trend: "up", sparkline: [35, 40, 45, 42, 50, 55, 52, 60, 65, 70, 75, 80] }, ] // ============================================================================ // SPARKLINE COMPONENT // ============================================================================ function Sparkline({ data, trend }: { data: number[]; trend: TrendDirection }) { const width = 80 const height = 24 const max = Math.max(...data) const min = Math.min(...data) const range = max - min || 1 const points = data.map((value, index) => { const x = (index / (data.length - 1)) * width const y = height - ((value - min) / range) * height return `${x},${y}` }).join(" ") return ( ) } // ============================================================================ // COMPONENT // ============================================================================ function TableView06({ title = "Analytics Overview", description = "Key metrics compared to previous period", metrics = defaultMetrics, className, idBase = "table-view-06", }: TableView06Props) { const titleId = `${idBase}-title` return (

{title} {description}

{metrics.map((metric) => ( ))}

Metric	Current	Previous	Change	Trend
{metric.name}	{metric.value}	{metric.previousValue}	{metric.trend === "up" ? (

) } export default TableView06 export { TableView06, type TableView06Props }