Scalar

A single SQL-driven value with no label or chrome. Metric stripped to just the number. Measured in the browser, so it's live.

…

<Scalar data="db.iris" value="count(*)" />

Format the value

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

…

<Scalar
  data="db.iris"
  value="avg(petal_length)"
  valueFormat="{.2f} cm"
/>

The query escape hatch

For what the measure model can't express, pass a full query: its first scalar is the value.

…

<Scalar
  query="SELECT avg(petal_length) / avg(sepal_length) FROM db.iris"
  valueFormat="{.2f}"
/>

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.
`loading` / `empty`	`ReactNode`	What to show while resolving, or when the result is null.

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

Installation

Scalar 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, // Scalar, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}