diff --git a/apps/start/src/components/report-chart/bar/chart.tsx b/apps/start/src/components/report-chart/bar/chart.tsx index 2d7e0ffc0..49ed99454 100644 --- a/apps/start/src/components/report-chart/bar/chart.tsx +++ b/apps/start/src/components/report-chart/bar/chart.tsx @@ -48,7 +48,7 @@ export function Chart({ data }: Props) { const [sortBy, setSortBy] = useState('count-desc'); const { isEditMode, - report: { metric, limit, previous }, + report: { metric, limit, previous, options }, options: { onClick, dropdownMenuContent }, } = useReportChartContext(); const number = useNumber(); @@ -106,7 +106,8 @@ export function Chart({ data }: Props) { }); // Apply limit if not in edit mode - return isEditMode ? sorted : sorted.slice(0, limit || 10); + const displayLimit = options?.type === 'bar' ? options.displayLimit : limit || 10; + return isEditMode ? sorted : sorted.slice(0, displayLimit); }, [ seriesWithOriginalRank, searchQuery, @@ -114,6 +115,7 @@ export function Chart({ data }: Props) { totalSum, isEditMode, limit, + options, ]); return ( diff --git a/apps/start/src/components/report/sidebar/ReportSettings.tsx b/apps/start/src/components/report/sidebar/ReportSettings.tsx index 777a93d28..94a3cabd0 100644 --- a/apps/start/src/components/report/sidebar/ReportSettings.tsx +++ b/apps/start/src/components/report/sidebar/ReportSettings.tsx @@ -14,6 +14,7 @@ import { changeFunnelGroup, changeFunnelWindow, changeMetric, + changeOptions, changePrevious, changeSankeyExclude, changeSankeyInclude, @@ -68,6 +69,10 @@ export function ReportSettings() { fields.push('sankeyInclude'); } + if (chartType === 'bar') { + fields.push('displayLimit'); + } + if (chartType === 'histogram') { fields.push('stacked'); } @@ -99,6 +104,36 @@ export function ReportSettings() { /> )} + {fields.includes('displayLimit') && ( +
+ + { + const displayLimit = Number(value); + if ( + Number.isInteger(displayLimit) && + displayLimit >= 1 && + displayLimit <= 500 + ) { + dispatch(changeOptions({ type: 'bar', displayLimit })); + } + }} + step={1} + type="number" + value={String( + options?.type === 'bar' ? options.displayLimit : 10 + )} + /> +
+ )} {fields.includes('criteria') && (