Filters for React StaticQuestion

Get Help
1

When Questions are on a Dashboard, a Date filter can be added without editing the Question in Query Builder:

image
image876×662 14.2 KB

When embedding that Question (NOT the Dashboard) using React:

<StaticQuestion questionId={30}/>

the graph renders data for all time:

image
image1251×630 13.3 KB

What's the recommend approach to add time filtering, e.g. "Previous 7, 30, 90 days"? The only available prop is initialSqlParameters but Metabase guide only shows parameters for Native SQL Questions. Do I need to copy the Query Builder code into a Native SQL and manually add a Filter that takes a DAYS parameter?

The InteractiveQuestion doesn't seem appropriate as it exposes and entire query builder.

2

It is usually best to create a dashboard with the question if you want to add the filter. You can create a dashboard with only one question and whatever filters you need. Would this work for you?

3

No, unfortunately that runs into the other Dashboard limitation:

Please keep in mind - embedding multiple instances of dashboards on the same page is not yet supported.

So if you design around multiple tiny Dashboards to get the filters, then trying this:

<StaticDashboard dashboardId={2} />
<StaticDashboard dashboardId={3} />

Results in Dashboard 3 being rendered in both places.

I've experimented using the Static Embed of multiple tiny dashboards and that seems to work fine since each is an IFrame with its own JS context. It seems the internal React Context objects used to connect filters down to charts doesn't support multiple roots, and also isn't documented / exposed as a API in the SDK yet.

Metabase's Dashboard only has one top-level tabs system and then a grid layout, so my reason for using the React embedding SDK is to use more complicated layout / container components .e.g. multiple tabbed areas, accordians, etc.

4

My end goal is to have charts in multiple tab groups, with filters that apply to specific tab groups, e.g.:

It looks like StaticQuestion is really a customized interactive question that includes only the IQ.Visualization component. We need to pass our own filters but the IQ.Filter component seems to be monolithic, i.e. can't create separate Filter1, Filter2, Filter3 components or use custom components if we want custom typeaheads, date pickers, etc and it looks tied to a single Context and it seems each Question has its own context