Custom React Filter components for Embedded dashboard #30309
Replies: 2 comments
-
To pass filter data from custom React components to an embedded Apache Superset dashboard and render it accordingly, you can use the
Here is a code example: import React, { useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { updateDataMask } from 'src/dataMask/actions';
import { useHistory } from 'react-router-dom';
import { debounce } from 'lodash';
import { DataMaskStateWithId, DataMask } from '@superset-ui/core';
import { publishDataMask } from 'src/dashboard/components/nativeFilters/FilterBar';
const CustomFilterComponent = () => {
const dispatch = useDispatch();
const history = useHistory();
const dashboardId = useSelector(state => state.dashboardInfo.id);
const dataMaskApplied = useSelector(state => state.dataMask);
const tabId = useSelector(state => state.tabId);
const handleFilterChange = useCallback(
(filterId, filterValue) => {
const dataMask = {
filterState: {
value: filterValue,
},
};
// Update the data mask in the Redux store
dispatch(updateDataMask(filterId, dataMask));
// Publish the data mask to update the URL parameters
publishDataMask(
history,
dashboardId,
0, // updateKey
{ [filterId]: dataMask },
tabId,
);
},
[dispatch, history, dashboardId, tabId],
);
return (
<div>
<input
type="text"
onChange={e => handleFilterChange('custom_filter_id', e.target.value)}
/>
</div>
);
};
export default CustomFilterComponent; In this example:
Additionally, you can use the |
Beta Was this translation helpful? Give feedback.
-
Can you please give a github link for this source code @dosu |
Beta Was this translation helpful? Give feedback.
-
@dosu I am working on a React application that embeds an Apache Superset dashboard. Instead of using the default filter box within the Superset dashboard, I would like to pass filter data directly from my custom React components to the embedded dashboard and render it accordingly. Could you provide workaround to acheive this requirement?
Beta Was this translation helpful? Give feedback.
All reactions