dosubot[bot] commented on issue #30374:
URL: https://github.com/apache/superset/issues/30374#issuecomment-2371218192
<!-- Greeting -->
Hey, @shubhshah01! I'm here to help you out with this dashboard issue. Let's
work together to solve this!
<!-- Answer -->
There is a way to display the applied filters on embedded dashboard charts
in Superset without showing the chart controls. The `FiltersBadge` component is
designed to show the applied filters. This component can be used to display the
applied filters without showing the chart controls.
Here is the relevant part of the code that handles the display of applied
filters:
```tsx
export const FiltersBadge = ({ chartId }: FiltersBadgeProps) => {
// ... other code ...
const indicators = useMemo(
() =>
uniqWith(
sortByStatus([...dashboardIndicators, ...nativeIndicators]),
(ind1, ind2) =>
ind1.column === ind2.column &&
ind1.name === ind2.name &&
(ind1.status !== IndicatorStatus.Applied ||
ind2.status !== IndicatorStatus.Applied),
),
[dashboardIndicators, nativeIndicators],
);
const appliedCrossFilterIndicators = useMemo(
() =>
indicators.filter(
indicator => indicator.status === IndicatorStatus.CrossFilterApplied,
),
[indicators],
);
const appliedIndicators = useMemo(
() =>
indicators.filter(
indicator => indicator.status === IndicatorStatus.Applied,
),
[indicators],
);
const filterCount =
appliedIndicators.length + appliedCrossFilterIndicators.length;
if (!appliedCrossFilterIndicators.length && !appliedIndicators.length) {
return null;
}
return (
<DetailsPanelPopover
appliedCrossFilterIndicators={appliedCrossFilterIndicators}
appliedIndicators={appliedIndicators}
onHighlightFilterSource={onHighlightFilterSource}
setPopoverVisible={setPopoverVisible}
popoverVisible={popoverVisible}
popoverContentRef={popoverContentRef}
popoverTriggerRef={popoverTriggerRef}
>
<StyledFilterCount
aria-label={t('Applied filters (%s)', filterCount)}
aria-haspopup="true"
role="button"
ref={popoverTriggerRef}
className={cx(
'filter-counts',
!!appliedCrossFilterIndicators.length && 'has-cross-filters',
)}
tabIndex={0}
onKeyDown={handleKeyDown}
>
<Icons.Filter iconSize="m" />
<StyledBadge
data-test="applied-filter-count"
className="applied-count"
count={filterCount}
showZero
/>
</StyledFilterCount>
</DetailsPanelPopover>
);
};
```
Additionally, in the `SliceHeader` component, you can see how the
`FiltersBadge` is integrated to display the applied filters:
```tsx
const SliceHeader: FC<SliceHeaderProps> = ({
// ... other props ...
slice,
uiConfig,
// ... other props ...
}) => {
// ... other code ...
return (
<ChartHeaderStyles data-test="slice-header" ref={innerRef}>
<div className="header-title" ref={headerRef}>
{/* ... other code ... */}
</div>
<div className="header-controls">
{!editMode && (
<>
{/* ... other code ... */}
{!uiConfig.hideChartControls && (
<FiltersBadge chartId={slice.slice_id} />
)}
{/* ... other code ... */}
</>
)}
</div>
</ChartHeaderStyles>
);
};
```
This component can be embedded in your dashboard to show the applied filters
without displaying the chart controls
<sup>[[1]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/FiltersBadge/index.tsx)</sup><sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/src/dashboard/components/SliceHeader/index.tsx)</sup>.
<!-- Dosu Comment Footer -->
*To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
