Unable to filter dashboard with query

[shriya-shah-ext-volansys]

I have a dashboard added to my organization with dashboard filters in the Atlas console. I am trying to add the dashboard in my react js app. I want to apply the same filter in the app as I can query in the console. For that, I have added "Allowed filter fields" in "Dashboard Embedding Settings" under the authenticated section. From the app, I am using "createDashboard()" method with filter query. I don't get the filtered values in the dashboard. I get data of the entire dashboard.

MongoDashboard.jsx

`import ChartsEmbedSDK from '@mongodb-js/charts-embed-dom';

export const MongoDashboard = () => {

useLayoutEffect(() => {
    if (!token) {
        return;
    }
    const sdk = new ChartsEmbedSDK({
        baseUrl,
        height: height,
        widthMode: 'scale',
        heightMode: 'fixed',
        
    });
    const dashboard = sdk.createDashboard({
        dashboardId,
        theme: 'light',
        getUserToken: () => token,
        **filter: { "partner_name": <PARTNER_NAME>, "company_name": <COMPANY_NAME> }** 
    })
    // dashboard.setFilter({});
    /** @type {HTMLDivElement} */
    const dashboardNode = divRef.current;
    dashboardRef.current = dashboard;
    statusCallback('LOADING')

    dashboard.render(dashboardNode)
        .then(() => statusCallback('DONE'))
        .catch(e => {
            console.log('chart render ERROR', e)
            statusCallback(`ERROR`)
        });
    return async () => {
        if (!dashboardNode) {
            return;
        }

        const elements = Array.from(dashboardNode.children);
        elements.forEach(el => el.remove());.
    }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dashboardId, baseUrl, statusCallback, token, filter]);

return ( <div className={d-flex flex-column position-relative ${className}} style={style}> <div className={mongo-atlas-chart} // style={{ minHeight, minWidth }} style={dashboardRefStyle} ref={divRef} /> <div ref={loadingBackdropRef} className='position-absolute d-flex justify-content-center align-items-center bg-gray' style={{ pointerEvents: 'none', left: 0, bottom: 2, right: 0, top: 0, fontSize: '36px' }} > Loading... <div ref={statusDivRef} style={{ height: '2px' }}> )

} `

Expected behavior The dashboard inflated in react app should consider the filter query and show respective data

Versions:

• "@mongodb-js/charts-embed-dom": "^2.3.0"
• "react": "^16.12.0"

I tried using the setFilter function on dashboard as suggested "dashboard.setFilter({ bathrooms:{ $gt: 4 }}, execute_earlier)" but the app returns with error "error: setFilter is not a function"

[shriya-shah-ext-volansys]

I upgraded the version to 3.2.1. I can now use the setFilter() function but the query applies after the aggregation hence unable to fetch desired data. I referred this issue : https://github.com/mongodb-js/charts-embed-sdk/issues/90. When can we expect the proposed change?

[giulianocelani]

Hi @shriya-shah-ext-volansys, dashboard.setFilter was released in v3.0.0 whilst chart.setFilter was released in v2.3.0. So that will explain your initial "error: setFilter is not a function" issue as you were attempting to set a filter on a embedded dashboard rather than a chart.

I can now use the setFilter() function but the query applies after the aggregation hence unable to fetch desired data.

In terms of this, what do you mean by "unable to fetch desired data."? To help us understand your concern further, please do share the following:

• Are you using either a Charts views, Lookup fields or Calculated fields for the embedded dashboard?
• Is either of the partner_name or company_name a result of the above features? For example, is partner_name a lookup field potentially?

[kristinamongo]

Hi @shriya-shah-ext-volansys, the preliminary embedding filter has been released last week. Please have a look at package version 3.3.1.