Inputs

A report's inputs are values the reader sets, kept in the page's address (?<param>=<value>), so a copied link opens on the same view. Each is an entry of the report's page.filterParams; its input says where it shows:

inputWhere it showsPage
"select", "multi"The View menuselect
noneThe filter bar's menuselect
"toggle"The View menutoggle
"slider"A <InputSlider> in a <k.Inputs> card on the pageslider
"number"A <InputNumber> in a <k.Inputs> card on the pagenumber
"tabs"A Tabs with paramTabs

What an input changes. Its value is read in two places:

  • a block wrapped in <When when={{ input: "<param>", is: "<value>" }}> shows or hides with it (Props every block takes);
  • a query may name it as $<param>; the query then runs once per value, and each value's rows are kept apart. An input the SQL reads needs a value: give it a default.

<k.Inputs> is the card that holds sliders and numbers: one card, under the tiles, each field with its label, its value, the control and an optional "Today" line. The address changes when the reader lets go of a slider.

An entry of filterParams

KeyTypeRequiredMeaning
parama lowercase nameyesThe URL key; not from, to or page
labeltextyesThe input's label
options(filters) => [{ value, label, short }]yesThe choices for the range in force; [] for a slider or number
default(values, filters) => valuenoThe value when the URL names none or one not offered (else the first option)
input"select", "multi", "toggle", "slider", "number" or "tabs"noWhere it shows; without it, in the filter bar
summary"always" or "unlessDefault"noIn the filter bar: name it on the button always, or only off its default
accept(value) => true or falsenoA value outside options it still takes, such as a slider's number
meta{ optionsFrom, defaultFrom }noA select's options or default read from the data: a dot path such as "months" or "today.0.month"

Example

today.sql:

-- Today's price and volume
select 249 as price, 1200 as volume

In report.tsx:

import { InputNumber, InputSlider } from "~/components/report-kit/inputs-card"

import today from "./today.sql?raw"

type Today = { price: number; volume: number }

// in defineReport({ … })
page: {
  filterParams: [
    { param: "price", label: "Price", input: "slider", options: () => [], accept: (v) => Number(v) >= 199 && Number(v) <= 299 },
    { param: "volume", label: "Volume", input: "number", options: () => [], accept: (v) => Number(v) >= 0 },
  ],
},
queries: { today: query<Today>(today) },
blocks: (k) => [
  <k.Inputs key="assumptions">
    <InputSlider param="price" label="Price" min={199} max={299} step={10} default={(d) => (d as { today: Today[] }).today[0]?.price} today={(d) => (d as { today: Today[] }).today[0]?.price} suffix=" kr" />
    <InputNumber param="volume" label="Volume" min={0} default={(d) => (d as { today: Today[] }).today[0]?.volume} />
  </k.Inputs>,
],

Props of Inputs

NameTypeRequiredDefaultMeaning
keytextyesA name unique on the page
span1 or 2no2The card's width
children<InputSlider> and <InputNumber> fieldsyesUp to four across

Checks

A filterParams entry without param, label or options, or an input that is not one of the kinds, fails the typecheck.