diff --git a/CHANGELOG.md b/CHANGELOG.md index 2ed8331eb..f9dd60efd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added a counter column to the transactions table - Added a label to indicate the default account in the accounts table +- Added an option to limit the items in pie charts ### Changed diff --git a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts index 152a83ca3..011627b90 100644 --- a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts +++ b/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts @@ -29,6 +29,7 @@ export class PortfolioProportionChartComponent @Input() isInPercent: boolean; @Input() key: string; @Input() locale: string; + @Input() maxItems?: number; @Input() positions: { [symbol: string]: Pick & { value: number }; }; @@ -90,12 +91,40 @@ export class PortfolioProportionChartComponent } }); - const chartDataSorted = Object.entries(chartData) + let chartDataSorted = Object.entries(chartData) .sort((a, b) => { return a[1].value - b[1].value; }) .reverse(); + if (this.maxItems && chartDataSorted.length > this.maxItems) { + // Add surplus items to unknown group + const rest = chartDataSorted.splice( + this.maxItems, + chartDataSorted.length - 1 + ); + + let unknownItem = chartDataSorted.find((charDataItem) => { + return charDataItem[0] === UNKNOWN_KEY; + }); + + if (!unknownItem) { + const index = chartDataSorted.push([UNKNOWN_KEY, { value: 0 }]); + unknownItem = chartDataSorted[index]; + } + + rest.forEach((restItem) => { + unknownItem[1] = { value: unknownItem[1].value + restItem[1].value }; + }); + + // Sort data again + chartDataSorted = chartDataSorted + .sort((a, b) => { + return a[1].value - b[1].value; + }) + .reverse(); + } + chartDataSorted.forEach(([symbol, item], index) => { if (this.colorMap[symbol]) { // Reuse color diff --git a/apps/client/src/app/pages/tools/analysis/analysis-page.html b/apps/client/src/app/pages/tools/analysis/analysis-page.html index c82678696..4b724cad7 100644 --- a/apps/client/src/app/pages/tools/analysis/analysis-page.html +++ b/apps/client/src/app/pages/tools/analysis/analysis-page.html @@ -75,6 +75,7 @@ [baseCurrency]="user?.settings?.baseCurrency" [isInPercent]="true" [locale]="user?.settings?.locale" + [maxItems]="10" [positions]="positions" > @@ -97,6 +98,7 @@ [baseCurrency]="user?.settings?.baseCurrency" [isInPercent]="true" [locale]="user?.settings?.locale" + [maxItems]="10" [positions]="positions" > @@ -185,6 +187,7 @@ [baseCurrency]="user?.settings?.baseCurrency" [isInPercent]="false" [locale]="user?.settings?.locale" + [maxItems]="10" [positions]="countries" >