React Data Quality Report
The screen that answers “can I trust this dataset” before someone builds a decision on top of it. Per-column health, and the specific reason behind every flag.
wafer_test_results
284,512 rows · 11 columns
7 healthy1 needs review3 problem92% overall
| Column | Completeness | Distinct | Nulls | Outliers |
|---|---|---|---|---|
| lot_idunique | 100.0% | 284,512 | 0 | — |
| wafer_no | 100.0% | 25 | 0 | — |
| product | 100.0% | 8 | 0 | — |
| tool_id | 99.6% | 42 | 1,204 | — |
| recipe | 93.4% | 61 | 18,902 | — |
| yield_pct | 100.0% | 4,218 | 0 | 9,104 |
| defect_density | 99.9% | 12,880 | 340 | 612 |
| site | 100.0% | 1 | 0 | — |
| started_at | 100.0% | 271,004 | 0 | — |
| serialunique | 100.0% | 281,990 | 0 | — |
| passed | 100.0% | 2 | 0 | — |
Select a column for its issue detail. Completeness threshold is 99%.
Installation
npx shadcn@latest add "https://kelvinui.com/registry/data-quality.json"
Props
| Prop | Type | Description |
|---|---|---|
| datasetName | string | Heading |
| rowCount | number | Total rows profiled |
| columns | ColumnProfile[] | { name, type, count, nulls, distinct, outliers?, duplicates?, unique?, min?, max?, issues? } |
| completenessThreshold | number | Completeness below this is flagged (default 0.99) |
Health is derived, and it shows its reasoning
Each column gets a score starting from its completeness, then penalised for the failures that actually matter:
- Duplicates in a column marked
unique. Theuniqueflag is what makes this meaningful — duplicates in aproductcolumn are expected, duplicates in a serial number are a data-integrity bug. The demo'sserialcolumn has 2,522 of them and is flagged hard. - Outliers above a 2% share. A handful of extreme values is normal; 3% of a column being outliers usually means a unit mix-up or a sentinel value like
-999being treated as data. - A single distinct value. A column with one value across 284k rows carries no information — usually a filter that was already applied upstream, occasionally a broken join.
- Free-text
issues, for anything your profiler detects that the schema cannot express. The demo flags mixed casing inrecipe, which silently splits one category into two in every downstream group-by.
Selecting a column expands the specific reasons rather than leaving you with a colour. A quality report that says "amber" without saying why just moves the investigation somewhere else.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.