https://www.gooddata.com/ logo
Join Slack
Powered by
A further question, when using a local plugin to a...
# gooddata-ui
j
A further question, when using a local plugin to add a insight to a dashboard, is there an easy way to apply the dashboard’s filters to the plugin? For example, if I have a dashboard that has a date filter with an initial value of ‘last 90 days’ is there a way to dynamically apply that filter value to my custom component that I am adding via my plugin?
l
hi @Justin Unverricht, yes, it is possible. there are several APIs to get to dashboard filters. although I must give disclaimer, that the filtering APIs are at the moment marked as 
@alpha
level with stabilization pending until next year. anyway, to give a more precise answer, I will need further detail of what are you trying to achieve. are you trying to: a) render an existing insight in an arbitrary way? e.g. an insight that was created in AD and drag-dropped onto a dashboard? b) render a custom widget that gets some data to render them in arbitrary way?
if you are doing option a), then an approach used here: https://github.com/gooddata/gooddata-ui-sdk/blob/master/tools/dashboard-plugin-template/src/plugin/utils/useInsightWidgetDataView.ts is the way to go. this is because an insight placed onto a dashboard in edit mode may have date filtering enabled/disabled/configured. the approach outlined in the linked code reflects all this and in the end gives you correctly filtered data to work with.
if you are doing option b) and just need to get a hold onto dashboard filters to do something with them… then you can use the 
selectFilterContextDateFilter
selector (exported from the dashboard package normally) in your React component you can do:
Copy code
const dateFilter = useDashboardSelector(selectFilterContextDateFilter);
j
Option B is what I am looking for right now, say I have a custom component I created with goodata.ui and I wanted to apply all of the same filters to it that the dashboard has, how do I get access to the filters in this case?
l
@Justin Unverricht your component can use a selector to obtain the current value of date filter thusly:
Copy code
const dateFilter = useDashboardSelector(selectFilterContextDateFilter);
j
thank you so much!
l
there may be one tricky thing here though.. it depends. see, the filter on the dashboard itself - contains the value that was set by the user. that's one thing that you need. however, when you drive an execution to get custom execution to get data for your insight.. the filter also requires that you specify a date dataset that is used for filtering. for insight widget and KPIs.. the dashboard component does that & furthermore, during edit the editor may even override what date dataset is used for filtering particular widget. now.. in case of your custom widget, you will need to figure out/provide date dataset yourself. this can be easy in case your custom widget does some pre-baked calculation. you can happily hardcode a proper date dataset. however, in case you have things more dynamic, there is some additional stuff to do in order to obtain correct date dataset.
we have answer also for situations when things get tricky and dynamic. let us know if you run into problems figuring out the right date dataset
j
@Lubomir Slivka I am getting the following error when trying to apply an attribute filter to my execute component
Copy code
react_devtools_backend.js:2540 Tiger does not support this filter. The filter will be ignored
Here is my code for reference
Copy code
const filters = useDashboardSelector(selectFilterContextFilters);

<Execute
   seriesBy={ [bphfSum, lfdhSum] }
   slicesBy={ [newAttribute('d_region.region_name')] }
   filters={[filters[2]]}
>
Is this the correct way to apply the filters to this component in 8.7.0?
l
aah, you know what.. at this moment the filters returned by this selector look a bit different than what the execute component expects. they have all the info just the shape of the object is different. we have convertors from these dashboard-specific filters to the filters that can be accepted by Execute.. let me check if they are available for proper import
j
gotcha, thanks for looking into this for me
l
alas, we do not have converters that you can readily use. i’m noting this down as an API enhancement to do. for now, you have to do conversion yourself. it’s not such a big deal. you can get ‘inspired’ here: https://github.com/gooddata/gooddata-ui-sdk/blob/6460c442f548be7cb174207a6c973c724[…]30468b/libs/sdk-ui-dashboard/src/converters/filterConverters.ts ^^^ `
Copy code
filterContextDateFilterToDateFilter
is the function we use to convert dashboard-specific filter to one that can be used in execution. the signature alludes to what I was mentioning before.. the date filter from dashboard does not have the info about date dataset to use for filtering. that dataset can be set on per-widget base. that’s why the convertor takes both the dashboard filter & the widget (from where it grabs the dataset). so.. you can repurpose this into your own small conversion function. first param being the date filter that you retrieve using the selector. the second param being the reference to date dataset.
something like this:
Copy code
export function toExecutionFilter(
    filter: IDashboardDateFilter,
    dateDatasetRef: ObjRef,
): IDateFilter {
    if (filter.dateFilter.type === "relative") {
        return newRelativeDateFilter(
            dateDatasetRef,
            filter.dateFilter.granularity,
            numberOrStringToNumber(filter.dateFilter.from!),
            numberOrStringToNumber(<http://filter.dateFilter.to|filter.dateFilter.to>!),
        );
    } else {
        return newAbsoluteDateFilter(
            dateDatasetRef,
            filter.dateFilter.from!.toString(),
            <http://filter.dateFilter.to|filter.dateFilter.to>!.toString(),
        );
    }
}
and then your code in the widget does.. get the date filter as you do now.. 
const filterForExecution = toExecutionFilter(filterYouGetViaSelector, idRef("<http://id.of.your.date.dataset.to|id.of.your.date.dataset.to>.filter.on", 'dataset'))
and that’s the filter you can pass down to the Execute component
i’ll note this down as a missing piece of the API. a function like this should really be available and exposed for easy use.
also.. in case you will be fiddling with attribute filters as well.. those as well have different format in dashboard than what is accepted by execution. you can use this conversion code to get the job done (that code can be used as-is, the only problem there is it is not properly exported) https://github.com/gooddata/gooddata-ui-sdk/blob/6460c442f548be7cb174207a6c973c724[…]30468b/libs/sdk-ui-dashboard/src/converters/filterConverters.ts
j
Thank you so much this is super useful!
Open in Slack
PreviousNext
Powered by