{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "data-quality-metrics", "title": "Data Quality Metrics", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/data-quality-metrics/DataQualityMetrics.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Activity,\n AlertCircle,\n AlertTriangle,\n Check,\n CheckCircle2,\n Clock,\n Copy,\n Database,\n Download,\n FileCode2,\n Filter,\n GitBranch,\n Layers,\n RefreshCw,\n Search,\n ShieldCheck,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetTitle,\n} from '@/components/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type AssertionStatus = 'Passing' | 'Warning' | 'Failed'\nexport type AssertionCategory = 'Completeness' | 'Uniqueness' | 'Validity' | 'Volume' | 'Schema'\n\nexport interface AnomalyRecord {\n recordId: string\n column: string\n value: string\n reason: string\n}\n\nexport interface AssertionItem {\n id: string\n assertionType: string\n columnName: string\n category: AssertionCategory\n ruleDefinition: string\n targetThreshold: string\n observedValue: string\n observedPercent: number\n failedCount: number\n totalEvaluated: number\n status: AssertionStatus\n statusVariant: 'success' | 'warning' | 'destructive'\n executionTime: string\n expectationConfig: Record\n remediationQuery: string\n anomalies: AnomalyRecord[]\n}\n\nexport interface DataQualityMetricsProps {\n datasetTitle?: string\n suiteName?: string\n qualityScore?: number\n lastRun?: string\n passedAssertions?: string\n failedWarnings?: string\n schemaDriftStatus?: string\n totalRowsAudited?: string\n assertions?: AssertionItem[]\n className?: string\n}\n\nconst defaultAssertions: AssertionItem[] = [\n {\n id: 'dq-assert-1',\n assertionType: 'expect_column_values_to_not_be_null',\n columnName: 'user_id',\n category: 'Completeness',\n ruleDefinition: 'Primary key non-null identity constraint verification across all partition shards.',\n targetThreshold: '100.0%',\n observedValue: '100.0%',\n observedPercent: 100.0,\n failedCount: 0,\n totalEvaluated: 1480000,\n status: 'Passing',\n statusVariant: 'success',\n executionTime: '142ms',\n expectationConfig: {\n expectation_type: 'expect_column_values_to_not_be_null',\n kwargs: {\n column: 'user_id',\n mostly: 1.0,\n },\n },\n remediationQuery: `-- Primary key check passed cleanly. No quarantine needed.\\nSELECT COUNT(*) FROM production_analytics.dim_users WHERE user_id IS NULL;`,\n anomalies: [],\n },\n {\n id: 'dq-assert-2',\n assertionType: 'expect_column_values_to_be_unique',\n columnName: 'email',\n category: 'Uniqueness',\n ruleDefinition: 'Global case-insensitive deduplication check across customer directory.',\n targetThreshold: '100.0%',\n observedValue: '100.0%',\n observedPercent: 100.0,\n failedCount: 0,\n totalEvaluated: 1480000,\n status: 'Passing',\n statusVariant: 'success',\n executionTime: '380ms',\n expectationConfig: {\n expectation_type: 'expect_column_values_to_be_unique',\n kwargs: {\n column: 'email',\n mostly: 1.0,\n },\n },\n remediationQuery: `-- Zero duplicate emails detected in active partition.\\nSELECT LOWER(email), COUNT(*) FROM production_analytics.dim_users GROUP BY 1 HAVING COUNT(*) > 1;`,\n anomalies: [],\n },\n {\n id: 'dq-assert-3',\n assertionType: 'expect_column_values_to_match_regex',\n columnName: 'phone_e164',\n category: 'Validity',\n ruleDefinition: 'International telecommunications ITU-T E.164 format pattern matching (^\\\\+[1-9]\\\\d{1,14}$).',\n targetThreshold: '≥ 98.0%',\n observedValue: '98.8%',\n observedPercent: 98.8,\n failedCount: 17760,\n totalEvaluated: 1480000,\n status: 'Warning',\n statusVariant: 'warning',\n executionTime: '890ms',\n expectationConfig: {\n expectation_type: 'expect_column_values_to_match_regex',\n kwargs: {\n column: 'phone_e164',\n regex: '^\\\\+[1-9]\\\\d{1,14}$',\n mostly: 0.98,\n },\n },\n remediationQuery: `-- Quarantine 17,760 legacy unformatted phone numbers for libphonenumber normalization:\\nCREATE OR REPLACE TABLE staging.unformatted_phones AS\\nSELECT user_id, email, phone_e164, 'MALFORMED_E164' AS failure_reason\\nFROM production_analytics.dim_users\\nWHERE phone_e164 NOT RLIKE '^\\\\+[1-9]\\\\d{1,14}$';`,\n anomalies: [\n {\n recordId: 'usr_9941a8',\n column: 'phone_e164',\n value: '+1-555-019',\n reason: 'Invalid E.164 length (incomplete national number)',\n },\n {\n recordId: 'usr_1082fc',\n column: 'phone_e164',\n value: '0784910293',\n reason: 'Missing international country dial prefix (+)',\n },\n {\n recordId: 'usr_7729de',\n column: 'phone_e164',\n value: '+44 (0)20 7946',\n reason: 'Unstripped parentheses and whitespace delimiter',\n },\n {\n recordId: 'usr_4019ab',\n column: 'phone_e164',\n value: 'NULL',\n reason: 'Unexpected empty field on SMS-enrolled user',\n },\n ],\n },\n {\n id: 'dq-assert-4',\n assertionType: 'expect_table_row_count_to_be_between',\n columnName: 'table: dim_users',\n category: 'Volume',\n ruleDefinition: 'Daily snapshot table row count volumetric boundary expectation between 1.0M and 2.0M rows.',\n targetThreshold: '1.0M .. 2.0M',\n observedValue: '1,480,000',\n observedPercent: 100.0,\n failedCount: 0,\n totalEvaluated: 1480000,\n status: 'Passing',\n statusVariant: 'success',\n executionTime: '95ms',\n expectationConfig: {\n expectation_type: 'expect_table_row_count_to_be_between',\n kwargs: {\n min_value: 1000000,\n max_value: 2000000,\n },\n },\n remediationQuery: `-- Row count volumetric validation passed within safety boundaries (1.48M in [1.0M, 2.0M]).\\nSELECT COUNT(*) AS total_rows FROM production_analytics.dim_users;`,\n anomalies: [],\n },\n {\n id: 'dq-assert-5',\n assertionType: 'expect_column_values_to_be_between',\n columnName: 'age',\n category: 'Validity',\n ruleDefinition: 'Demographic account age boundary distribution constraint between 18 and 120 years.',\n targetThreshold: '100.0%',\n observedValue: '100.0%',\n observedPercent: 100.0,\n failedCount: 0,\n totalEvaluated: 1480000,\n status: 'Passing',\n statusVariant: 'success',\n executionTime: '210ms',\n expectationConfig: {\n expectation_type: 'expect_column_values_to_be_between',\n kwargs: {\n column: 'age',\n min_value: 18,\n max_value: 120,\n mostly: 1.0,\n },\n },\n remediationQuery: `-- All verified user ages lie cleanly between min 18 and max 94 (100.0% compliant).\\nSELECT MIN(age), MAX(age), AVG(age) FROM production_analytics.dim_users;`,\n anomalies: [],\n },\n]\n\nexport function DataQualityMetrics({\n datasetTitle = 'production_analytics.dim_users',\n suiteName = 'user_profile_integrity_v3',\n qualityScore = 98.4,\n lastRun = 'Ran 14m ago · 48 assertions evaluated',\n passedAssertions = '47 / 48 Passing · 98%',\n failedWarnings = '1 Warning · Null phone numbers 1.2%',\n schemaDriftStatus = '0 breaking schema changes',\n totalRowsAudited = '1,480,000 rows',\n assertions = defaultAssertions,\n className,\n}: DataQualityMetricsProps) {\n const [searchQuery, setSearchQuery] = React.useState('')\n const [selectedStatus, setSelectedStatus] = React.useState('all')\n const [selectedCategory, setSelectedCategory] = React.useState('all')\n const [isRunningSuite, setIsRunningSuite] = React.useState(false)\n const [currentLastRun, setCurrentLastRun] = React.useState(lastRun)\n const [selectedAssertion, setSelectedAssertion] = React.useState(null)\n const [isDrawerOpen, setIsDrawerOpen] = React.useState(false)\n const [copiedSnippetKey, setCopiedSnippetKey] = React.useState(null)\n const [exportSuccess, setExportSuccess] = React.useState(false)\n const [anomalyExportSuccess, setAnomalyExportSuccess] = React.useState(false)\n\n const availableCategories = React.useMemo(() => {\n const categories = new Set()\n assertions.forEach((item) => categories.add(item.category))\n return ['all', ...Array.from(categories)]\n }, [assertions])\n\n const filteredAssertions = React.useMemo(() => {\n const query = searchQuery.trim().toLowerCase()\n const statusFilter = selectedStatus\n const categoryFilter = selectedCategory\n\n return assertions.filter((item) => {\n const matchesStatus = statusFilter === 'all' || item.status.toLowerCase() === statusFilter.toLowerCase()\n const matchesCategory = categoryFilter === 'all' || item.category.toLowerCase() === categoryFilter.toLowerCase()\n const matchesQuery =\n !query ||\n item.assertionType.toLowerCase().includes(query) ||\n item.columnName.toLowerCase().includes(query) ||\n item.ruleDefinition.toLowerCase().includes(query) ||\n item.category.toLowerCase().includes(query)\n\n return matchesStatus && matchesCategory && matchesQuery\n })\n }, [assertions, searchQuery, selectedStatus, selectedCategory])\n\n const handleRunSuite = React.useCallback(() => {\n if (isRunningSuite) return\n setIsRunningSuite(true)\n\n setTimeout(() => {\n setIsRunningSuite(false)\n setCurrentLastRun('Ran just now · 48 assertions evaluated')\n }, 750)\n }, [isRunningSuite])\n\n const handleInspectAnomalies = React.useCallback((assertion: AssertionItem) => {\n setSelectedAssertion(assertion)\n setIsDrawerOpen(true)\n }, [])\n\n const copyCodeSnippet = React.useCallback((key: string, content: string) => {\n if (typeof navigator !== 'undefined' && navigator.clipboard) {\n navigator.clipboard.writeText(content)\n setCopiedSnippetKey(key)\n setTimeout(() => {\n setCopiedSnippetKey((curr) => (curr === key ? null : curr))\n }, 2000)\n }\n }, [])\n\n const exportQualityReport = React.useCallback(() => {\n const report = {\n dataset: datasetTitle,\n suite: suiteName,\n overallQualityScore: qualityScore,\n evaluatedAt: new Date().toISOString(),\n engine: 'Great Expectations v0.18 / SodaCL',\n summary: {\n passed: passedAssertions,\n warnings: failedWarnings,\n schemaDrift: schemaDriftStatus,\n totalRows: totalRowsAudited,\n },\n assertions,\n }\n\n const jsonStr = 'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(report, null, 2))\n if (typeof document !== 'undefined') {\n const link = document.createElement('a')\n link.setAttribute('href', jsonStr)\n link.setAttribute('download', `dq-report-${suiteName}-${new Date().toISOString().slice(0, 10)}.json`)\n document.body.appendChild(link)\n link.click()\n link.remove()\n\n setExportSuccess(true)\n setTimeout(() => {\n setExportSuccess(false)\n }, 2000)\n }\n }, [\n datasetTitle,\n suiteName,\n qualityScore,\n passedAssertions,\n failedWarnings,\n schemaDriftStatus,\n totalRowsAudited,\n assertions,\n ])\n\n const exportAnomalyCsv = React.useCallback(() => {\n if (!selectedAssertion || selectedAssertion.anomalies.length === 0) return\n\n const headers = ['Record ID', 'Column', 'Observed Value', 'Failure Reason']\n const rows = selectedAssertion.anomalies.map((a) => [a.recordId, a.column, `\"${a.value}\"`, `\"${a.reason}\"`])\n const csvContent = [headers.join(','), ...rows.map((r) => r.join(','))].join('\\n')\n\n const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })\n const url = URL.createObjectURL(blob)\n const link = document.createElement('a')\n link.setAttribute('href', url)\n link.setAttribute('download', `anomalies-${selectedAssertion.columnName}.csv`)\n document.body.appendChild(link)\n link.click()\n link.remove()\n\n setAnomalyExportSuccess(true)\n setTimeout(() => {\n setAnomalyExportSuccess(false)\n }, 2000)\n }, [selectedAssertion])\n\n return (\n
\n {/* Header Section */}\n \n \n
\n {/* Left: Dataset and Suite Metadata */}\n
\n
\n
\n \n
\n
\n
\n

\n {datasetTitle}\n

\n \n {suiteName}\n \n
\n
\n \n \n {currentLastRun}\n \n ·\n Snowflake DW\n ·\n dbt Core v1.8\n
\n
\n
\n
\n\n {/* Right: Overall Score Card & Action Buttons */}\n
\n {/* Overall Score Pill Card */}\n
\n
\n \n
\n
\n
\n \n {qualityScore}%\n \n \n \n Quality Score\n \n
\n

Automated Sodacl / GX Engine

\n
\n
\n\n {/* Action Buttons */}\n
\n \n \n {isRunningSuite ? 'Evaluating Suite...' : 'Run Assertions Suite'}\n \n\n \n
\n
\n
\n \n\n {/* Sub-bar Contract Guarantee */}\n
\n
\n \n Schema Contract: Locked v3.2 · Zero Breaking Schema Drift\n
\n
\n \n Engine SLA: Strict Production\n \n \n 48 assertions evaluated\n
\n
\n \n\n {/* 4 Assertion Metric Cards */}\n
\n {/* Card 1: Passed Assertions */}\n \n \n
\n

Passed Assertions

\n
\n \n
\n
\n
\n 47 / 48\n \n 98% Passing\n \n
\n \n \n \n

{passedAssertions}

\n \n \n\n {/* Card 2: Failed / Warnings */}\n \n \n
\n

Failed / Warnings

\n
\n \n
\n
\n
\n \n 1 Warning\n \n \n 1.2% Non-conformant\n \n
\n \n \n \n

{failedWarnings}

\n \n \n\n {/* Card 3: Schema Drift Status */}\n \n \n
\n

Schema Drift Status

\n
\n \n
\n
\n
\n \n 0 Breaking\n \n \n No Drift\n \n
\n \n \n
\n Columns Synced\n 14 / 14 matched\n
\n

{schemaDriftStatus}

\n \n \n\n {/* Card 4: Total Rows Audited */}\n \n \n
\n

Total Rows Audited

\n
\n \n
\n
\n
\n \n 1,480,000\n \n \n 1.48M Rows\n \n
\n \n \n
\n Partition Range\n 1.0M .. 2.0M\n
\n

{totalRowsAudited}

\n \n \n
\n\n {/* Data Quality Test Assertions Table Card */}\n \n \n
\n
\n Data Quality Test Assertions\n \n {filteredAssertions.length} of {assertions.length} Assertions\n \n
\n \n Automated expectations, boundary validations, regex format rules, and volume anomaly checks.\n \n
\n\n {/* Filter Pills by Status */}\n
\n setSelectedStatus('all')}\n >\n All Assertions ({assertions.length})\n \n setSelectedStatus('passing')}\n >\n Passing (4)\n \n setSelectedStatus('warning')}\n >\n Warnings (1)\n \n
\n \n\n {/* Filter & Search Toolbar */}\n
\n
\n
\n \n setSearchQuery(e.target.value)}\n type=\"text\"\n placeholder=\"Search by assertion type, column name, or rule definition...\"\n className=\"border-border bg-background placeholder:text-muted-foreground focus-visible:ring-ring h-8 w-full rounded-md border px-3 pl-8 text-xs focus-visible:ring-2 focus-visible:outline-none\"\n />\n
\n\n
\n \n \n Category:\n \n {availableCategories.map((cat) => (\n setSelectedCategory(cat)}\n >\n {cat === 'all' ? 'All Categories' : cat}\n \n ))}\n
\n
\n
\n\n {/* Table Container */}\n \n
\n \n \n \n Assertion & Target Column\n Category\n Target Threshold\n Observed Value\n Status\n Actions\n \n \n \n {filteredAssertions.map((assertion) => (\n \n {/* Assertion Type & Target Column */}\n \n
\n
\n \n {assertion.columnName}\n \n \n {assertion.assertionType}\n \n
\n

\n {assertion.ruleDefinition}\n

\n
\n \n\n {/* Category */}\n \n \n {assertion.category}\n \n \n\n {/* Target Threshold */}\n \n \n {assertion.targetThreshold}\n \n \n\n {/* Observed Value */}\n \n
\n \n {assertion.observedValue}\n \n {assertion.executionTime} eval\n
\n \n\n {/* Status Badge */}\n \n \n {assertion.status === 'Passing' ? (\n \n ) : assertion.status === 'Warning' ? (\n \n ) : (\n \n )}\n {assertion.status}\n \n \n\n {/* Action Button */}\n \n handleInspectAnomalies(assertion)}\n >\n \n Inspect Anomalies\n \n \n \n ))}\n\n {filteredAssertions.length === 0 && (\n \n \n
\n \n

No assertions match your filter query

\n

\n All assertions meet standard quality constraints.\n

\n
\n \n \n )}\n \n
\n
\n\n {/* Table Footer */}\n
\n
\n \n Great Expectations Assertions Runner: 100% evaluated\n
\n Dataset: {datasetTitle} · Last Batch: 1,480,000 rows\n
\n \n \n\n {/* Anomaly Inspector Drawer / Sheet */}\n \n \n {selectedAssertion && (\n <>\n \n
\n
\n \n {selectedAssertion.status === 'Passing' ? (\n \n ) : (\n \n )}\n {selectedAssertion.status.toUpperCase()}\n \n \n {selectedAssertion.category}\n \n
\n\n \n Latency: {selectedAssertion.executionTime}\n \n
\n\n {selectedAssertion.assertionType}\n \n Target Column:{' '}\n {selectedAssertion.columnName}\n \n \n\n
\n {/* Summary Metrics Cards Grid */}\n
\n
\n Target Threshold\n

\n {selectedAssertion.targetThreshold}\n

\n
\n
\n Observed Pass Rate\n \n {selectedAssertion.observedValue}\n

\n
\n
\n Audited Records\n

\n {selectedAssertion.totalEvaluated.toLocaleString()}\n

\n
\n
\n Failed Anomalies\n 0 ? 'text-warning' : 'text-success',\n )}\n >\n {selectedAssertion.failedCount.toLocaleString()}\n

\n
\n
\n\n {/* Expectation Configuration DSL Box */}\n
\n
\n

\n Great Expectations Specification\n

\n \n copyCodeSnippet('dsl', JSON.stringify(selectedAssertion.expectationConfig, null, 2))\n }\n >\n {copiedSnippetKey === 'dsl' ? (\n \n ) : (\n \n )}\n {copiedSnippetKey === 'dsl' ? 'Copied' : 'Copy Config'}\n \n
\n
\n
\n \n expectation_suite.json\n
\n 
\n                      {JSON.stringify(selectedAssertion.expectationConfig, null, 2)}\n
\n
\n
\n\n {/* Anomalous Samples Table or Clean Pass State */}\n
\n
\n

\n Anomalous Sample Records\n

\n {selectedAssertion.anomalies.length > 0 && (\n \n Showing {selectedAssertion.anomalies.length} failure samples\n \n )}\n
\n\n {selectedAssertion.anomalies.length > 0 ? (\n
\n \n \n \n Record ID\n Column\n Observed Value\n Diagnostic Reason\n \n \n \n {selectedAssertion.anomalies.map((anomaly) => (\n \n {anomaly.recordId}\n {anomaly.column}\n \n {anomaly.value}\n \n {anomaly.reason}\n \n ))}\n \n
\n
\n ) : (\n
\n \n

Zero Anomalies Detected

\n

\n All {selectedAssertion.totalEvaluated.toLocaleString()} audited records strictly satisfied the\n expectation rule.\n

\n
\n )}\n
\n\n {/* Quarantine SQL Script */}\n
\n
\n

\n Quarantine & Remediation SQL\n

\n copyCodeSnippet('sql', selectedAssertion.remediationQuery)}\n >\n {copiedSnippetKey === 'sql' ? (\n \n ) : (\n \n )}\n {copiedSnippetKey === 'sql' ? 'Copied' : 'Copy SQL'}\n \n
\n
\n 
\n                      {selectedAssertion.remediationQuery}\n
\n
\n
\n
\n\n \n \n \n \n\n {selectedAssertion.anomalies.length > 0 && (\n \n {anomalyExportSuccess ? (\n \n ) : (\n \n )}\n {anomalyExportSuccess ? 'Anomalies Exported!' : 'Export Anomaly CSV'}\n \n )}\n \n \n )}\n \n \n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/DataQualityMetrics.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/separator.json", "https://uipkge.dev/r/react/sheet.json", "https://uipkge.dev/r/react/table.json" ], "description": "Great Expectations and Soda style automated data quality assertions, schema validation, and drift detector dashboard: top header with overall quality score and run triggers, 4 assertion metric cards, data quality assertions table with category filters, and an interactive anomaly inspector drawer with SQL quarantine remediation.", "categories": [ "devops", "dashboard", "app", "data" ] }