{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "column-profiling-summary", "title": "Column Profiling Summary", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/column-profiling-summary/ColumnProfilingSummary.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Database,\n Download,\n CheckCircle2,\n AlertCircle,\n Hash,\n Tag,\n Binary,\n Search,\n BarChart2,\n Copy,\n Check,\n Table as TableIcon,\n LayoutGrid,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\nimport { cn } from '@/lib/utils'\n\nexport interface ColumnProfilingSummaryProps {\n className?: string\n tableName?: string\n totalRows?: string\n totalColumns?: number\n memoryFootprint?: string\n datasetVersion?: string\n}\n\n// Column 1: monthly_spend_usd (Numeric Float64)\nconst monthlySpendStats = {\n name: 'monthly_spend_usd',\n type: 'Numeric Float64',\n category: 'numeric',\n min: '$0.00',\n mean: '$142.50',\n median: '$120.00',\n max: '$2,450.00',\n stdDev: '48.2',\n iqr: '$115.00',\n zerosCount: 1420,\n zerosPct: '0.96%',\n missingCount: 0,\n missingPct: '0.0%',\n distinctCount: '12,410',\n distinctPct: '8.37%',\n memory: '1.19 MB',\n}\n\nconst histogramBins = [\n { bin: '$0 - $245', count: 58400, pct: 39.4, height: 95 },\n { bin: '$245 - $490', count: 42100, pct: 28.4, height: 68 },\n { bin: '$490 - $735', count: 22500, pct: 15.2, height: 36 },\n { bin: '$735 - $980', count: 12800, pct: 8.6, height: 21 },\n { bin: '$980 - $1,225', count: 6400, pct: 4.3, height: 10 },\n { bin: '$1,225 - $1,470', count: 3100, pct: 2.1, height: 5 },\n { bin: '$1,470 - $1,715', count: 1650, pct: 1.1, height: 3 },\n { bin: '$1,715 - $1,960', count: 840, pct: 0.6, height: 2 },\n { bin: '$1,960 - $2,205', count: 380, pct: 0.3, height: 1 },\n { bin: '$2,205 - $2,450', count: 120, pct: 0.1, height: 1 },\n]\n\n// Column 2: subscription_tier (Categorical)\nconst subscriptionTierStats = {\n name: 'subscription_tier',\n type: 'Categorical',\n category: 'categorical',\n distinctCount: 4,\n missingCount: 0,\n missingPct: '0.0%',\n memory: '1.19 MB',\n topValue: 'Starter',\n topFreqPct: '45.0%',\n}\n\nconst subscriptionTiers = [\n { name: 'Starter', count: 66730, pct: 45.0, colorClass: 'bg-primary', badgeClass: 'border-primary/30 text-primary' },\n {\n name: 'Pro',\n count: 51901,\n pct: 35.0,\n colorClass: 'bg-success',\n badgeClass: 'border-success/30 text-success',\n },\n {\n name: 'Enterprise',\n count: 22243,\n pct: 15.0,\n colorClass: 'bg-info',\n badgeClass: 'border-info/30 text-info',\n },\n {\n name: 'Custom',\n count: 7416,\n pct: 5.0,\n colorClass: 'bg-warning',\n badgeClass: 'border-warning/30 text-warning',\n },\n]\n\n// Column 3: account_age_days (Numeric Int32)\nconst accountAgeStats = {\n name: 'account_age_days',\n type: 'Numeric Int32',\n category: 'numeric',\n min: '1d',\n p25: '42d',\n p50: '180d',\n p75: '365d',\n p95: '580d',\n p99: '720d',\n max: '850d',\n iqr: '323d',\n mean: '214.6d',\n stdDev: '142.1',\n missingCount: 42,\n missingPct: '0.03%',\n distinctCount: '820',\n distinctPct: '0.55%',\n memory: '593.2 KB',\n}\n\n// Column 4: has_cancelled (Boolean)\nconst hasCancelledStats = {\n name: 'has_cancelled',\n type: 'Boolean',\n category: 'boolean',\n missingCount: 0,\n missingPct: '0.0%',\n distinctCount: 2,\n memory: '144.8 KB',\n trueCount: 21057,\n truePct: 14.2,\n falseCount: 127233,\n falsePct: 85.8,\n}\n\n// Schema overview for compact table view\nconst allSchemaColumns = [\n {\n name: 'monthly_spend_usd',\n type: 'Numeric Float64',\n category: 'numeric',\n missing: '0 (0.0%)',\n distinct: '12,410 (8.4%)',\n summary: 'Mean: $142.50 · Median: $120.00 · Max: $2,450.00',\n status: 'Clean',\n },\n {\n name: 'subscription_tier',\n type: 'Categorical',\n category: 'categorical',\n missing: '0 (0.0%)',\n distinct: '4 values',\n summary: 'Starter (45%) > Pro (35%) > Enterprise (15%)',\n status: 'Clean',\n },\n {\n name: 'account_age_days',\n type: 'Numeric Int32',\n category: 'numeric',\n missing: '42 (0.03%)',\n distinct: '820 (0.6%)',\n summary: 'P25: 42d · P50: 180d · P75: 365d · P99: 720d',\n status: '99.97% Complete',\n },\n {\n name: 'has_cancelled',\n type: 'Boolean',\n category: 'boolean',\n missing: '0 (0.0%)',\n distinct: '2 values',\n summary: 'False: 85.8% (127.2k) · True: 14.2% (21.1k)',\n status: 'Clean',\n },\n {\n name: 'customer_id',\n type: 'Categorical UUID',\n category: 'categorical',\n missing: '0 (0.0%)',\n distinct: '148,290 (100%)',\n summary: 'Primary Key · Unique identifier',\n status: 'Unique Index',\n },\n {\n name: 'support_tickets_count',\n type: 'Numeric Int16',\n category: 'numeric',\n missing: '0 (0.0%)',\n distinct: '18 values',\n summary: 'Mean: 1.4 · Median: 1.0 · Max: 16.0',\n status: 'Clean',\n },\n {\n name: 'last_login_epoch',\n type: 'Numeric Int64',\n category: 'numeric',\n missing: '112 (0.08%)',\n distinct: '114,200',\n summary: 'Min: 1770000000 · Max: 1787313600',\n status: 'Clean',\n },\n {\n name: 'signup_channel',\n type: 'Categorical',\n category: 'categorical',\n missing: '439 (0.30%)',\n distinct: '7 values',\n summary: 'Organic (42%) > Google Ads (28%) > Partner (16%)',\n status: 'Clean',\n },\n]\n\nexport function ColumnProfilingSummary({\n className,\n tableName = 'customer_churn_features_v2',\n totalRows = '148,290',\n totalColumns = 18,\n memoryFootprint = '24.2 MB',\n datasetVersion = 'v2.4.1',\n}: ColumnProfilingSummaryProps) {\n const [activeTypeFilter, setActiveTypeFilter] = React.useState<'all' | 'numeric' | 'categorical' | 'boolean'>('all')\n const [searchQuery, setSearchQuery] = React.useState('')\n const [viewMode, setViewMode] = React.useState<'cards' | 'table'>('cards')\n const [isExporting, setIsExporting] = React.useState(false)\n const [showExportSuccess, setShowExportSuccess] = React.useState(false)\n const [copiedColumn, setCopiedColumn] = React.useState(null)\n const [hoveredHistBin, setHoveredHistBin] = React.useState(null)\n\n const filteredColumns = React.useMemo(() => {\n return allSchemaColumns.filter((col) => {\n const matchesCategory = activeTypeFilter === 'all' || col.category === activeTypeFilter\n const matchesSearch =\n col.name.toLowerCase().includes(searchQuery.toLowerCase()) ||\n col.type.toLowerCase().includes(searchQuery.toLowerCase())\n return matchesCategory && matchesSearch\n })\n }, [activeTypeFilter, searchQuery])\n\n const handleExportReport = React.useCallback(() => {\n if (isExporting) return\n setIsExporting(true)\n setTimeout(() => {\n setIsExporting(false)\n setShowExportSuccess(true)\n setTimeout(() => {\n setShowExportSuccess(false)\n }, 3500)\n }, 600)\n }, [isExporting])\n\n const handleCopy = React.useCallback((name: string) => {\n navigator.clipboard?.writeText(name)\n setCopiedColumn(name)\n setTimeout(() => {\n setCopiedColumn((prev) => (prev === name ? null : prev))\n }, 2000)\n }, [])\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n
\n \n
\n

\n Table: {tableName}\n

\n \n \n Apache Parquet\n \n \n {datasetVersion}\n \n
\n

\n Profiled: 2026-08-21 14:30 UTC\n •\n Snappy Compressed\n •\n EDA Engine: ydata-profiler v4.8\n

\n
\n\n
\n {/* Quick Meta Pills */}\n
\n
\n Rows: \n {totalRows}\n
\n
\n Cols: \n {totalColumns}\n
\n
\n Memory: \n {memoryFootprint}\n
\n
\n\n {/* Export EDA Report Button */}\n \n {isExporting ? (\n \n ) : (\n \n )}\n {isExporting ? 'Generating HTML Report...' : 'Export EDA Report'}\n \n
\n
\n\n {/* Export Success Banner */}\n {showExportSuccess && (\n \n
\n \n \n Exploratory Data Analysis report exported. HTML summary & JSON schema bundle ready for download.\n \n
\n setShowExportSuccess(false)}\n >\n Dismiss\n \n
\n )}\n\n {/* 4 Dataset Overview KPI Cards */}\n
\n {/* 1. Numeric Columns */}\n \n \n
\n
\n
\n \n
\n Numeric Columns\n
\n \n 55.6%\n \n
\n \n \n
\n 10\n Columns\n
\n
\n
\n Types Breakdown:\n 8 Float64 · 2 Int32\n
\n
\n \n \n\n {/* 2. Categorical Columns */}\n \n \n
\n
\n
\n \n
\n Categorical Columns\n
\n \n 33.3%\n \n
\n \n \n
\n 6\n Columns\n
\n
\n
\n High Cardinality:\n 1 (customer_id)\n
\n
\n \n \n\n {/* 3. Missing Values % */}\n \n \n
\n
\n
\n \n
\n Missing Values\n
\n \n Clean\n \n
\n \n \n
\n 0.4%\n Missing\n
\n
\n
\n Total Null Cells:\n 593 / 2,669,220\n
\n
\n \n \n\n {/* 4. Duplicate Rows */}\n \n \n
\n
\n
\n \n
\n Duplicate Rows\n
\n \n 100% Unique\n \n
\n \n \n
\n 0\n Duplicates\n
\n
\n
\n Primary Key Integrity:\n 100.0% Valid\n
\n
\n \n \n
\n\n {/* Filter & Toolbar Controls */}\n \n \n
\n {/* Type Filter Tabs */}\n
\n setActiveTypeFilter('all')}\n >\n All Types (18)\n \n setActiveTypeFilter('numeric')}\n >\n Numeric (10)\n \n setActiveTypeFilter('categorical')}\n >\n Categorical (6)\n \n setActiveTypeFilter('boolean')}\n >\n Boolean (2)\n \n
\n\n {/* Search & View Mode Switcher */}\n
\n
\n \n setSearchQuery(e.target.value)}\n type=\"text\"\n placeholder=\"Filter column name...\"\n className=\"border-border bg-background text-foreground focus-visible:border-ring focus-visible:ring-ring/50 h-8 w-44 rounded-md border pr-2.5 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none sm:w-56\"\n />\n
\n\n
\n setViewMode('cards')}\n >\n \n \n setViewMode('table')}\n >\n \n \n
\n
\n
\n \n \n\n {/* Compact Table View */}\n {viewMode === 'table' ? (\n \n \n
\n
\n Dataset Schema & Profiling Matrix\n \n Tabular view of all columns with inferred types, missingness, cardinality, and distribution summary.\n \n
\n \n {filteredColumns.length} of 18 columns\n \n
\n \n \n
\n \n \n \n Column Name\n Data Type\n Missing Values\n Distinct Values\n Distribution / Quantiles\n Health Status\n \n \n \n {filteredColumns.map((col) => (\n \n \n
\n {col.name}\n handleCopy(col.name)}\n >\n {copiedColumn === col.name ? (\n \n ) : (\n \n )}\n \n
\n \n \n \n {col.type}\n \n \n \n {col.missing}\n \n {col.distinct}\n {col.summary}\n \n \n {col.status}\n \n \n \n ))}\n \n
\n
\n \n \n ) : (\n /* 4 Detailed Column Deep-Dive Cards */\n
\n {/* 1. Column 1: monthly_spend_usd (Numeric Float64 + 10-bar SVG Histogram) */}\n {(activeTypeFilter === 'all' || activeTypeFilter === 'numeric') && (\n \n \n
\n
\n
\n
\n \n
\n {monthlySpendStats.name}\n \n {monthlySpendStats.type}\n \n handleCopy(monthlySpendStats.name)}\n >\n {copiedColumn === monthlySpendStats.name ? (\n \n ) : (\n \n )}\n \n
\n \n Monthly billed subscription and add-on expenditure in USD. Right-skewed distribution with long\n tail.\n \n
\n\n {/* Meta Badges */}\n
\n \n Missing:{' '}\n \n {monthlySpendStats.missingPct}\n \n \n \n Distinct:{' '}\n \n {monthlySpendStats.distinctCount}\n \n \n \n Memory:{' '}\n \n {monthlySpendStats.memory}\n \n \n
\n
\n \n\n \n {/* Summary Metrics Grid */}\n
\n
\n Minimum\n

\n {monthlySpendStats.min}\n

\n
\n
\n Mean (Avg)\n

\n {monthlySpendStats.mean}\n

\n
\n
\n Median (P50)\n

\n {monthlySpendStats.median}\n

\n
\n
\n Maximum\n

\n {monthlySpendStats.max}\n

\n
\n
\n Std. Deviation\n

\n {monthlySpendStats.stdDev}\n

\n
\n
\n Interquartile (IQR)\n

\n {monthlySpendStats.iqr}\n

\n
\n
\n\n {/* 10-Bar SVG Histogram */}\n
\n
\n
\n \n 10-Bin Distribution Frequency Histogram\n
\n {hoveredHistBin !== null ? (\n \n {histogramBins[hoveredHistBin].bin}:{' '}\n \n {histogramBins[hoveredHistBin].count.toLocaleString()} rows\n {' '}\n ({histogramBins[hoveredHistBin].pct}%)\n \n ) : (\n Hover bar to inspect bin interval\n )}\n
\n\n {/* SVG Histogram Visual */}\n
\n
\n \n {/* Background Grid Lines */}\n \n \n \n\n {/* 10 Bars */}\n {histogramBins.map((bin, idx) => (\n \n {/* Bar rect */}\n setHoveredHistBin(idx)}\n onMouseLeave={() => setHoveredHistBin(null)}\n />\n\n {/* Percentage Label on top of high bars */}\n {bin.pct >= 5 && (\n \n {bin.pct}%\n \n )}\n \n ))}\n \n
\n\n {/* Bin Axis Ticks */}\n
\n $0.00\n $490\n $980\n $1,715\n $2,450\n
\n
\n
\n \n \n )}\n\n {/* 2. Column 2: subscription_tier (Categorical + Horizontal Distribution Bars) */}\n {(activeTypeFilter === 'all' || activeTypeFilter === 'categorical') && (\n \n \n
\n
\n
\n
\n \n
\n {subscriptionTierStats.name}\n \n {subscriptionTierStats.type}\n \n handleCopy(subscriptionTierStats.name)}\n >\n {copiedColumn === subscriptionTierStats.name ? (\n \n ) : (\n \n )}\n \n
\n \n Active customer plan classification tier. Clean categorical distribution across 4 discrete levels.\n \n
\n\n
\n \n Missing:{' '}\n \n {subscriptionTierStats.missingPct}\n \n \n \n Distinct:{' '}\n \n {subscriptionTierStats.distinctCount} values\n \n \n \n Memory:{' '}\n \n {subscriptionTierStats.memory}\n \n \n
\n
\n \n\n \n {/* Segmented Composite Stacked Bar */}\n
\n
\n Category Proportions\n 148,290 total instances\n
\n\n {/* Stacked bar */}\n
\n {subscriptionTiers.map((tier) => (\n \n ))}\n
\n
\n\n {/* Detailed Breakdown Rows */}\n
\n {subscriptionTiers.map((tier) => (\n \n
\n
\n {tier.name}\n \n {tier.pct.toFixed(1)}%\n \n
\n

\n {tier.count.toLocaleString()} rows\n

\n
\n\n
\n
\n \n
\n
\n
\n ))}\n
\n \n \n )}\n\n {/* 3. Column 3: account_age_days (Numeric Int32 + Quantiles Box Plot) */}\n {(activeTypeFilter === 'all' || activeTypeFilter === 'numeric') && (\n \n \n
\n
\n
\n
\n \n
\n {accountAgeStats.name}\n \n {accountAgeStats.type}\n \n handleCopy(accountAgeStats.name)}\n >\n {copiedColumn === accountAgeStats.name ? (\n \n ) : (\n \n )}\n \n
\n \n Total account tenure in days since initial signup. Box plot shows median at 180d with Q1-Q3\n interquartile band.\n \n
\n\n
\n \n Missing:{' '}\n \n {accountAgeStats.missingPct} (42 rows)\n \n \n \n Distinct:{' '}\n \n {accountAgeStats.distinctCount}\n \n \n \n Memory:{' '}\n {accountAgeStats.memory}\n \n
\n
\n \n\n \n {/* Quantile Stats Grid */}\n
\n
\n Min (0%)\n

\n {accountAgeStats.min}\n

\n
\n
\n Q1 (P25)\n

\n {accountAgeStats.p25}\n

\n
\n
\n Median (P50)\n

{accountAgeStats.p50}

\n
\n
\n Q3 (P75)\n

\n {accountAgeStats.p75}\n

\n
\n
\n P95\n

\n {accountAgeStats.p95}\n

\n
\n
\n P99\n

\n {accountAgeStats.p99}\n

\n
\n
\n Max\n

\n {accountAgeStats.max}\n

\n
\n
\n\n {/* Box Plot SVG Representation */}\n
\n
\n Quantile Box & Whisker Plot\n IQR = 323 days (P75 - P25)\n
\n\n
\n
\n \n {/* Axis Baseline */}\n \n\n {/* Left Whisker: Min to Q1 */}\n \n {/* Min Cap */}\n \n\n {/* Right Whisker: Q3 to P99 */}\n \n {/* P99 Cap */}\n \n\n {/* Interquartile Box (Q1 to Q3) */}\n \n\n {/* Median (P50) Line */}\n \n\n {/* Outlier Points (P99 to Max: 780d, 820d, 850d) */}\n \n \n \n\n {/* Tick Labels on Axis */}\n \n 1d (Min)\n \n \n 42d\n \n \n 180d (Med)\n \n \n 365d\n \n \n 720d (P99)\n \n \n 850d (Max)\n \n \n
\n
\n
\n \n \n )}\n\n {/* 4. Column 4: has_cancelled (Boolean) */}\n {(activeTypeFilter === 'all' || activeTypeFilter === 'boolean') && (\n \n \n
\n
\n
\n
\n \n
\n {hasCancelledStats.name}\n \n {hasCancelledStats.type}\n \n handleCopy(hasCancelledStats.name)}\n >\n {copiedColumn === hasCancelledStats.name ? (\n \n ) : (\n \n )}\n \n
\n \n Binary churn indicator flag. 14.2% positive cancellation rate against 85.8% retained base.\n \n
\n\n
\n \n Missing:{' '}\n \n {hasCancelledStats.missingPct}\n \n \n \n Distinct:{' '}\n \n {hasCancelledStats.distinctCount} values\n \n \n \n Memory:{' '}\n \n {hasCancelledStats.memory}\n \n \n
\n
\n \n\n \n {/* Boolean Split Bar */}\n
\n
\n Boolean Ratio Distribution\n Class Imbalance: 1 : 6.04\n
\n\n {/* Two-Tone Split Bar */}\n
\n \n \n
\n
\n\n {/* Value Breakdown Cards */}\n
\n {/* False / Active */}\n
\n
\n
\n
\n \n \n False (Active / Retained)\n \n
\n \n {hasCancelledStats.falsePct}%\n \n
\n

\n {hasCancelledStats.falseCount.toLocaleString()} instances\n

\n
\n
\n \n
\n
\n\n {/* True / Cancelled */}\n
\n
\n
\n
\n \n \n True (Cancelled / Churned)\n \n
\n \n {hasCancelledStats.truePct}%\n \n
\n

\n {hasCancelledStats.trueCount.toLocaleString()} instances\n

\n
\n
\n \n
\n
\n
\n \n \n )}\n \n )}\n \n )\n}\n", "type": "registry:block", "target": "~/components/blocks/ColumnProfilingSummary.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/table.json" ], "description": "Pandas Profiling and ydata style exploratory data analysis (EDA) column profiling summary with dataset metrics, distribution histograms, quantile box plots, and categorical frequency breakdowns.", "categories": [ "devops", "dashboard", "analytics", "data" ] }