Data Quality
A column profile: how complete, how varied, and what the values look like. Sample values are the fastest way to spot that a “date” column holds three different formats — no summary statistic catches that.
src/components/ui/data-quality.tsxAbout
From the component's own source, where it was written.
A column profile: how complete, how varied, and what the values look like.
The three numbers that decide whether a column is usable, in the order you ask them:
**Nulls** — an 80%-null column is not a column you can join on, and the percentage is drawn as a bar because a number in a table is easy to skim past.
**Distinct** — one distinct value across a million rows is a constant masquerading as data; a million distinct values is an id, not a dimension. Both are flagged, because both mean the column will not do what a chart expects of it.
**Samples** — the fastest way to spot that a "date" column holds 01/02/2024, 2024-02-01 and Feb 1 in the same file. No summary statistic catches that; three example values do immediately.
Install
npx astralyx-ui add data-quality
Usage
import { DataQuality } from '@/components/ui/data-quality'
<DataQuality columns={profile} />Composer
Change the props and the source below follows.
Column profile
idtextunique per row0% empty18,402 distinctcus_8812cus_8813emailtext2% empty18,020 distinctada@example.commarc@example.complantext0% empty3 distinctteamprofreeregiontextmostly empty68% empty12 distincteu-west-2us-east-1schema_versionintegersingle value0% empty1 distinctmin 3max 33signup_datetext1% empty402 distinct2026-03-1402/04/2026May 2026
<DataQuality columns={profile} nullWarnAt={0.3} />Examples
A constant, an id and a mostly-empty column
<DataQuality columns={profile} />API
Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.
DataQuality
A column profile: how complete, how varied, and what the values look like.
Extends Omit<ComponentProps<'div'>, 'children'>.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | ColumnProfile[] | required | { name, type?, nullFraction?, distinct?, total?, min?, max?, samples? }. |
| nullWarnAt | number | 0.3 | Null fraction above this is flagged. |
| constantLabel | string | 'single value' | — |
| uniqueLabel | string | 'unique per row' | — |
| sparseLabel | string | 'mostly empty' | — |
| emptyLabel | string | 'Nothing profiled.' | — |
| label | string | 'Column profile' | — |
Types
ColumnProfile
| Field | Type | Description |
|---|---|---|
| name | string | — |
| type? | string | — |
| nullFraction? | number | Fraction 0–1. |
| distinct? | number | One distinct value is a constant masquerading as data; one per row is an id, not a dimension. Both are flagged, because both break what a chart expects. |
| total? | number | Total rows profiled, for the distinct ratio. |
| min? | ReactNode | — |
| max? | ReactNode | — |
| samples? | string[] | Real values. The fastest way to see mixed formats hiding behind a clean-looking type. |