GitHub user dosubot[bot] added a comment to the discussion: Date range selected
should be seen in report page
<!-- Answer -->
Superset doesn't natively display the selected date range from a filter on the
main report page—it's only shown in the filter bar or sidebar. However, the
selected date range is stored in the Redux dataMask state, so you can create a
custom React component to display it anywhere on the page if you have access to
the frontend codebase.
To do this, your component would subscribe to the Redux store, read the
relevant filter's value from state.dataMask[filterId], and render it. For
example, using React-Redux:
```js
import { useSelector } from 'react-redux';
const DateRangeDisplay = ({ filterId }) => {
const dataMask = useSelector(state => state.dataMask[filterId]);
const dateRange = dataMask?.filterState?.value; // usually [start, end]
if (!dateRange) return null;
return <div>Date range: {dateRange[0]} to {dateRange[1]}</div>;
};
```
You'd need to know the filterId of your date filter. This approach requires
frontend development skills and access to the Superset codebase. If you can't
modify the frontend, the only workaround is to manually update a Markdown or
HTML chart with the selected date range.
For more details on how the filter state is managed and accessed, see the Redux
actions and reducer for dataMask in the codebase
([actions.ts](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dataMask/actions.ts#L23-L79),
[reducer.ts](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dataMask/reducer.ts#L22-L195)).
<!-- Dosu Comment Footer -->
*To reply, just mention [@dosu](https://go.dosu.dev/dosubot).*
---
<sup>How did I do?
[Good](https://app.dosu.dev/response-feedback/5f85991e-24cc-43c7-b129-f9912647aa02?feedback_type=great_response)
|
[Irrelevant](https://app.dosu.dev/response-feedback/5f85991e-24cc-43c7-b129-f9912647aa02?feedback_type=irrelevant_answer)
|
[Incorrect](https://app.dosu.dev/response-feedback/5f85991e-24cc-43c7-b129-f9912647aa02?feedback_type=incorrect_sources)
|
[Verbose](https://app.dosu.dev/response-feedback/5f85991e-24cc-43c7-b129-f9912647aa02?feedback_type=too_verbose)
|
[Hallucination](https://app.dosu.dev/response-feedback/5f85991e-24cc-43c7-b129-f9912647aa02?feedback_type=hallucination)
| [Report
🐛](https://app.dosu.dev/response-feedback/5f85991e-24cc-43c7-b129-f9912647aa02?feedback_type=bug_report)
|
[Other](https://app.dosu.dev/response-feedback/5f85991e-24cc-43c7-b129-f9912647aa02?feedback_type=other)</sup>
[](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%20doesn%27t%20natively%20display%20the%20selected%20date%20range%20from%20a%20filter%20on%20the%20main%20report%20page%E2%80%94it%27s%20only%20shown%20in%20the%20filter%20bar%20or%20sidebar.%20However%2C%20the%20selected%20date%20range%20is%20stored%20in%20the%20Redux%20dataMask%20state%2C%20so%20you%20can%20create%20a%20custom%20React%20component%20to%20display%20it%20anywhere%20on%20the%20page%20if%20you%20have%20access%20to%20the%20frontend%20codebase.%0A%0ATo%20do%20this%2C%20your%20component%20would%20subscribe%20to%20the%20Redux%20store%2C%20read%20the%20relevant%20filter%27s%20value%20from%20state.dataMask%5BfilterId%5D%2C%20and%20render%20it.%20For%20example%2C%20using%20React-Redux%3A%0A%0A%60%60%60js%0Aimport%20%7B%20useSelector%20%
7D%20from%20%27react-redux%27%3B%0A%0Aconst%20DateRangeDisplay%20%3D%20%28%7B%20filterId%20%7D%29%20%3D%3E%20%7B%0A%20%20const%20dataMask%20%3D%20useSelector%28state%20%3D%3E%20state.dataMask%5BfilterId%5D%29%3B%0A%20%20const%20dateRange%20%3D%20dataMask%3F.filterState%3F.value%3B%20//%20usually%20%5Bstart%2C%20end%5D%0A%20%20if%20%28%21dateRange%29%20return%20null%3B%0A%20%20return%20%3Cdiv%3EDate%20range%3A%20%7BdateRange%5B0%5D%7D%20to%20%7BdateRange%5B1%5D%7D%3C/div%3E%3B%0A%7D%3B%0A%60%60%60%0A%0AYou%27d%20need%20to%20know%20the%20filterId%20of%20your%20date%20filter.%20This%20approach%20requires%20frontend%20development%20skills%20and%20access%20to%20the%20Superset%20codebase.%20If%20you%20can%27t%20modify%20the%20frontend%2C%20the%20only%20workaround%20is%20to%20manually%20update%20a%20Markdown%20or%20HTML%20chart%20with%20the%20selected%20date%20range.%0A%0AFor%20more%20details%20on%20how%20the%20filter%20state%20is%20managed%20and%20accessed%2C%20see%20the%20Redux%20actions
%20and%20reducer%20for%20dataMask%20in%20the%20codebase%20%28%5Bactions.ts%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dataMask/actions.ts%23L23-L79%29%2C%20%5Breducer.ts%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/dataMask/reducer.ts%23L22-L195%29%29.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/37836)
GitHub link:
https://github.com/apache/superset/discussions/37836#discussioncomment-15754041
----
This is an automatically sent email for [email protected].
To unsubscribe, please send an email to:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
