Filters

The filters= prop narrows a chart's data without writing new SQL. You pass an array of { column, operator, value } objects; n6k ANDs them into one WHERE clause and applies it to whatever data= names, in your browser, before any GROUP BY. There's no state and no query string. You declare the predicate and the component builds the SELECT.

This page owns no data of its own. Its frontmatter attach: ../.. reuses the site root's data.py, so every component below filters the shared iris table (150 flowers across three species), each number a filter running live.

One predicate

A single filter object becomes a single WHERE: species = 'setosa'. The unfiltered metric sits beside it for scale.

<Metric
  label="Setosa only"
  data="db.iris"
  value="count(*)"
  filters={[{ column: "species", operator: "=", value: "setosa" }]}
/>

Composing filters

Two objects in the array compose into species = 'virginica' AND petal_length >= 5.5. There is no and/or syntax to learn: extra objects narrow the set.

filters={[
  { column: "species",      operator: "=",  value: "virginica" },
  { column: "petal_length", operator: ">=", value: 5.5 },
]}

The operator vocabulary

Each operator maps to one predicate: comparisons emit literal SQL (=, !=, >, <, >=, <=); set operators emit IN (…) / NOT IN (…); contains and starts_with emit ILIKE '%…%' and ILIKE '…%'; and is_null / is_not_null emit IS [NOT] NULL. The same iris table, counted six ways:

Filtering before the GROUP BY

filters= composes with an aggregating chart, not just a scalar. Here y is an aggregate, so n6k groups by species, and the WHERE narrows the rows before the grouping. The averages are computed over the filtered set only.

<BarChart
  data="db.iris"
  x="species"
  y="avg(petal_length)"
  filters={[{ column: "petal_length", operator: ">=", value: 2.0 }]}
/>

The raw escape hatch

When a predicate is beyond the structured operators (a computed ratio, a function call), a { sql: "…" } filter is emitted verbatim into the WHERE. It ANDs with the structured objects like any other.

filters={[{ sql: "petal_length / sepal_length > 0.5" }]}

Reader-driven filtering

Everything above is author-declared. You choose the predicate. A <Table> with filterable hands that choice to the reader instead: a column → operator → value popover, backed by the same operator set, with no page state at all.