Footer Dropdown Menu

The footer dropdown menu component sits in the footer of the base widget, and can be used to filter the data in any widget by a specific dimension.

An example of the 'Footer Dropdown' menu being used to filter a funnel chart

To add a footer dropdown menu to any widget we first need to create a menu using the useWidgetMenuFooterQuerySelect or useWidgetMenuFooterSelect hook:

// If we use Dropdown data from the Backend
const myMenu = useWidgetMenuFooterQuerySelect({
    query: {
        resource: resources.RESOURCE,
        params: [{ key: 'order_by', value: '-name' }],
        select: (data: ConfigDataSuccess) => {
            return (
                buildDropdownOptions({
                    data: data,
                    labelField: 'name',
                    valueField: 'id'
                });
            )
        },
    },
    dropdownField: fields.FIELD,
    includeAllOption: true
});

// If we use Dropdown data from hardcoded list from the Frontend
const myMenu = useWidgetMenuFooterSelect({
    dropdownRequestOption: {
        status: RequestStatus.SUCCESS,
        options: [
            {
                label: 'Country',
                value: 'country',
                field: fields.MCS_COUNTRY_NAME,
            },
            {
                label: 'City',
                value: 'city',
                field: fields.MCS_CITY_NAME,
            },
        ],
    },
    dropdownField: fields.VISIT_TYPE,
    includeAllOption: true,
    label: 'Visit',
});

query

The query object contains the properties we need to make the api request which will be used to populate the dropdown menu.

Key	Description
resource	The resource that represents the database table containing the dropdown items. You can use or create a resource in configurations/resources.ts
params	An array of key/value pair objects that define the parameters to pass to the api request. Usually parameters such as group_by, order_by etc
select	The select option is a react-query built-in selector, which allows you to transform the data returned by the api request. In the example above, we are transforming the data into an array of dropdown options ready to display in the dropdown component. You can read more about the select option here

The dropdownField represents the dimension that is being displayed in the dropdown menu. You can use or create a field in configurations/fields.ts

If you would like an 'All' option in the dropdown menu, for example 'All Goals' or 'All Channels', you can set includeAllOption to true.

Tip

You may find you reuse the same queries often in the same dashboard or across multiple dashboards. To avoid repeating query objects, you can store them either in a queries.ts file in the root of your dashboard folder, or in the section-dashboard/queries.ts file.

dropdownRequestOption Hook

The dropdownRequestOption object is hardcoded object from the Frontend which will be used to populate the dropdown menu list.

export const selectLevelDropdownRequest = {
    status: RequestStatus.SUCCESS, // The status value can be one of the following: 'success', 'loading', 'empty', or 'error'.
    options: [
        {
            label: 'Country',
            value: 'country',
            field: fields.MCS_COUNTRY_NAME,
        },
        {
            label: 'City',
            value: 'city',
            field: fields.MCS_CITY_NAME,
        },
    ],
};

useWidgetMenuFooterQuerySelect Hook

The useWidgetMenuFooterQuerySelect hook returns a request object and a menu component. You will need to add the request to the request object when fetching the data for your widget:

const myData = useResource({
    resource: resources.RESOURCE,
    request: {
        groupBy: fields.FIELD,
        orderBy: [{ field: fields.FIELD, orderByDirection: 'desc' }],
        ...myMenu.request \\ the filters generated by the useWidgetMenuFooterQuerySelect hook
    },
});

const myWidget = useResourceFunnelChart({
    resourceData: myData
})

For the menu to appear in the widget footer, we need to add it as a prop for the widget:

components: () => {
    return {
        a: (
            <WidgetFunnelChart
                title={'Widget Title'}
                data={myWidget}
                menu={myMenu.menu}
            />,
        )
    };
};