Feature/introduce max items in portfolio proportion chart (#159)

* Add option to limit items

* Update changelog

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
 

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<PortfolioPosition, 'type'> & { 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

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"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
@@ -97,6 +98,7 @@
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="true"
             [locale]="user?.settings?.locale"
+            [maxItems]="10"
             [positions]="positions"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
@@ -185,6 +187,7 @@
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="false"
             [locale]="user?.settings?.locale"
+            [maxItems]="10"
             [positions]="countries"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>