Gauge

A labelled figure that also shows where it sits between a min and a max, a Metric with a filled progress track. Measured live in the browser.

Longest petal

<Gauge
  label="Longest petal"
  data="db.iris"
  value="max(petal_length)"
  min={0}
  max={7}
  valueFormat=".1f"
/>

Set the range

min and max define the track; the value fills proportionally between them. Pair a 0–1 range with a .0% format for a rate.

Setosa share

Avg sepal width

<Columns cols={2}>
  <Gauge
    label="Setosa share"
    query="SELECT avg((species = 'setosa')::int) FROM db.iris"
    min={0}
    max={1}
    valueFormat=".0%"
  />
  <Gauge
    label="Avg sepal width"
    data="db.iris"
    value="avg(sepal_width)"
    min={0}
    max={5}
    valueFormat=".2f"
  />
</Columns>

Props

Prop	Type	Notes
`label`	`string`	Plain text, not interpolated.
`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. `avg(score)`.
`min` / `max`	`number`	Track bounds; default `0` and `100`.
`filters`	`Filter[]`	`{ column, operator, value }` predicates ANDed into a `WHERE`.
`valueFormat`	d3-format spec \| `(v) => string`	How the value renders.

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

Installation

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