TextStat

An inline, SQL-driven figure that flows inside a sentence, the same live measure as Scalar, rendered as a span so it sits in running prose.

The dataset holds … flowers.

The dataset holds{" "}
<TextStat data="db.iris" value="count(*)" /> flowers.

Format the value

valueFormat takes a d3-format spec, or a function when the spec language can't express it.

Their petals average … across every species.

Their petals average{" "}
<TextStat
  data="db.iris"
  value="avg(petal_length)"
  valueFormat="{.2f} cm"
/>{" "}
across every species.

Style it inline

Because it renders a bare span, a className weights or colors the number without disturbing the sentence around it.

The longest petal measures ….

<TextStat
  data="db.iris"
  value="max(petal_length)"
  valueFormat="{.1f} cm"
  className="font-semibold text-foreground"
/>

Props

Prop	Type	Notes
`data`	relation	Relation the value is measured from; use `query` for full SQL.
`query`	`string`	Full SQL whose first scalar is the value; mutually exclusive with `data`.
`value`	SQL expr	Measure over the source, e.g. `sum(amount)`.
`filters`	`Filter[]`	`{ column, operator, value }` predicates ANDed into a `WHERE`.
`valueFormat`	d3-format spec \| `(v) => string`	How the value renders.
`className`	`string`	Classes applied to the inline span.

Expressions in value, query, and filters values support {{binding}} interpolation against the surrounding BindingProvider.

Installation

TextStat ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // TextStat, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}