Feature/refactor @Input in portfolio proportion chart component (#4684)

* Refactor @Input in GfPortfolioProportionChartComponent

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -257,20 +257,20 @@
             <div class="h5" i18n>Sectors</div>
             <gf-portfolio-proportion-chart
               [colorScheme]="data.colorScheme"
+              [data]="sectors"
               [isInPercent]="true"
               [keys]="['name']"
               [maxItems]="10"
-              [positions]="sectors"
             />
           </div>
           <div class="col-md-6 mb-3">
             <div class="h5" i18n>Countries</div>
             <gf-portfolio-proportion-chart
               [colorScheme]="data.colorScheme"
+              [data]="countries"
               [isInPercent]="true"
               [keys]="['name']"
               [maxItems]="10"
-              [positions]="countries"
             />
           </div>
         }

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html

@@ -259,11 +259,11 @@
             <gf-portfolio-proportion-chart
               [baseCurrency]="data.baseCurrency"
               [colorScheme]="data.colorScheme"
+              [data]="sectors"
               [isInPercent]="true"
               [keys]="['name']"
               [locale]="data.locale"
               [maxItems]="10"
-              [positions]="sectors"
             />
           </div>
           <div class="col-md-6 mb-3">
@@ -271,11 +271,11 @@
             <gf-portfolio-proportion-chart
               [baseCurrency]="data.baseCurrency"
               [colorScheme]="data.colorScheme"
+              [data]="countries"
               [isInPercent]="true"
               [keys]="['name']"
               [locale]="data.locale"
               [maxItems]="10"
-              [positions]="countries"
             />
           </div>
         }

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -48,10 +48,10 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="platforms"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['id']"
             [locale]="user?.settings?.locale"
-            [positions]="platforms"
           />
         </mat-card-content>
       </mat-card>
@@ -70,10 +70,10 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="positions"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['currency']"
             [locale]="user?.settings?.locale"
-            [positions]="positions"
           />
         </mat-card-content>
       </mat-card>
@@ -92,10 +92,10 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="positions"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['assetClassLabel', 'assetSubClassLabel']"
             [locale]="user?.settings?.locale"
-            [positions]="positions"
           />
         </mat-card-content>
       </mat-card>
@@ -113,10 +113,10 @@
             cursor="pointer"
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="symbols"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['symbol']"
             [locale]="user?.settings?.locale"
-            [positions]="symbols"
             [showLabels]="deviceType !== 'mobile'"
             (proportionChartClicked)="onSymbolChartClicked($event)"
           />
@@ -137,11 +137,11 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="sectors"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
             [maxItems]="10"
-            [positions]="sectors"
           />
         </mat-card-content>
       </mat-card>
@@ -160,10 +160,10 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="continents"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
-            [positions]="continents"
           />
         </mat-card-content>
       </mat-card>
@@ -182,9 +182,9 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="marketsAdvanced"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [locale]="user?.settings?.locale"
-            [positions]="marketsAdvanced"
           />
         </mat-card-content>
       </mat-card>
@@ -271,11 +271,11 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="countries"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
             [maxItems]="10"
-            [positions]="countries"
           />
         </mat-card-content>
       </mat-card>
@@ -290,10 +290,10 @@
             cursor="pointer"
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="accounts"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['id']"
             [locale]="user?.settings?.locale"
-            [positions]="accounts"
             (proportionChartClicked)="onAccountChartClicked($event)"
           />
         </mat-card-content>
@@ -313,10 +313,10 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [colorScheme]="user?.settings?.colorScheme"
+            [data]="positions"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['etfProvider']"
             [locale]="user?.settings?.locale"
-            [positions]="positions"
           />
         </mat-card-content>
       </mat-card>

apps/client/src/app/pages/public/public-page.html

@@ -72,9 +72,9 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             class="mx-auto"
+            [data]="symbols"
             [isInPercent]="true"
             [keys]="['symbol']"
-            [positions]="symbols"
             [showLabels]="deviceType !== 'mobile'"
           />
         </mat-card-content>
@@ -90,10 +90,10 @@
           </mat-card-header>
           <mat-card-content>
             <gf-portfolio-proportion-chart
+              [data]="positions"
               [isInPercent]="true"
               [keys]="['currency']"
               [maxItems]="10"
-              [positions]="positions"
             />
           </mat-card-content>
         </mat-card>
@@ -107,10 +107,10 @@
           </mat-card-header>
           <mat-card-content>
             <gf-portfolio-proportion-chart
+              [data]="sectors"
               [isInPercent]="true"
               [keys]="['name']"
               [maxItems]="10"
-              [positions]="sectors"
             />
           </mat-card-content>
         </mat-card>
@@ -126,9 +126,9 @@
           </mat-card-header>
           <mat-card-content>
             <gf-portfolio-proportion-chart
+              [data]="continents"
               [isInPercent]="true"
               [keys]="['name']"
-              [positions]="continents"
             />
           </mat-card-content>
         </mat-card>
@@ -198,10 +198,10 @@
   <div class="row">
     <div class="col-lg">
       <gf-holdings-table
+        [data]="holdings"
         [deviceType]="deviceType"
         [hasPermissionToOpenDetails]="false"
         [hasPermissionToShowValues]="false"
-        [holdings]="holdings"
         [pageSize]="7"
       />
     </div>

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts

@@ -25,15 +25,15 @@ type Story = StoryObj<GfPortfolioProportionChartComponent>;
 export const Simple: Story = {
   args: {
     baseCurrency: 'USD',
-    keys: ['name'],
+    data: {
-    locale: 'en-US',
-    positions: {
       Africa: { name: 'Africa', value: 983.22461479889288 },
       Asia: { name: 'Asia', value: 12074.754633964973 },
       Europe: { name: 'Europe', value: 34432.837085290535 },
       'North America': { name: 'North America', value: 26539.89987780503 },
       Oceania: { name: 'Oceania', value: 1402.220605072031 },
       'South America': { name: 'South America', value: 4938.25202180719859 }
-    }
+    },
+    keys: ['name'],
+    locale: 'en-US'
   }
 };

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -60,18 +60,18 @@ export class GfPortfolioProportionChartComponent
   @Input() baseCurrency: string;
   @Input() colorScheme: ColorScheme;
   @Input() cursor: string;
-  @Input() isInPercent = false;
+  @Input() data: {
-  @Input() keys: string[] = [];
-  @Input() locale = getLocale();
-  @Input() maxItems?: number;
-  @Input() showLabels = false;
-  @Input() positions: {
     [symbol: string]: Pick<PortfolioPosition, 'type'> & {
       dataSource?: DataSource;
       name: string;
       value: number;
     };
   } = {};
+  @Input() isInPercent = false;
+  @Input() keys: string[] = [];
+  @Input() locale = getLocale();
+  @Input() maxItems?: number;
+  @Input() showLabels = false;
 
   @Output() proportionChartClicked = new EventEmitter<AssetProfileIdentifier>();
 
@@ -91,13 +91,13 @@ export class GfPortfolioProportionChartComponent
   }
 
   public ngAfterViewInit() {
-    if (this.positions) {
+    if (this.data) {
       this.initialize();
     }
   }
 
   public ngOnChanges() {
-    if (this.positions) {
+    if (this.data) {
       this.initialize();
     }
   }
@@ -122,47 +122,45 @@ export class GfPortfolioProportionChartComponent
     };
 
     if (this.keys.length > 0) {
-      Object.keys(this.positions).forEach((symbol) => {
+      Object.keys(this.data).forEach((symbol) => {
-        if (this.positions[symbol][this.keys[0]]?.toUpperCase()) {
+        if (this.data[symbol][this.keys[0]]?.toUpperCase()) {
-          if (chartData[this.positions[symbol][this.keys[0]].toUpperCase()]) {
+          if (chartData[this.data[symbol][this.keys[0]].toUpperCase()]) {
-            chartData[
+            chartData[this.data[symbol][this.keys[0]].toUpperCase()].value =
-              this.positions[symbol][this.keys[0]].toUpperCase()
+              chartData[
-            ].value = chartData[
+                this.data[symbol][this.keys[0]].toUpperCase()
-              this.positions[symbol][this.keys[0]].toUpperCase()
+              ].value.plus(this.data[symbol].value || 0);
-            ].value.plus(this.positions[symbol].value || 0);
 
             if (
-              chartData[this.positions[symbol][this.keys[0]].toUpperCase()]
+              chartData[this.data[symbol][this.keys[0]].toUpperCase()]
-                .subCategory[this.positions[symbol][this.keys[1]]]
+                .subCategory[this.data[symbol][this.keys[1]]]
             ) {
               chartData[
-                this.positions[symbol][this.keys[0]].toUpperCase()
+                this.data[symbol][this.keys[0]].toUpperCase()
-              ].subCategory[this.positions[symbol][this.keys[1]]].value =
+              ].subCategory[this.data[symbol][this.keys[1]]].value = chartData[
-                chartData[
+                this.data[symbol][this.keys[0]].toUpperCase()
-                  this.positions[symbol][this.keys[0]].toUpperCase()
+              ].subCategory[this.data[symbol][this.keys[1]]].value.plus(
-                ].subCategory[this.positions[symbol][this.keys[1]]].value.plus(
+                this.data[symbol].value || 0
-                  this.positions[symbol].value || 0
+              );
-                );
             } else {
               chartData[
-                this.positions[symbol][this.keys[0]].toUpperCase()
+                this.data[symbol][this.keys[0]].toUpperCase()
-              ].subCategory[
+              ].subCategory[this.data[symbol][this.keys[1]] ?? UNKNOWN_KEY] = {
-                this.positions[symbol][this.keys[1]] ?? UNKNOWN_KEY
+                value: new Big(this.data[symbol].value || 0)
-              ] = { value: new Big(this.positions[symbol].value || 0) };
+              };
             }
           } else {
-            chartData[this.positions[symbol][this.keys[0]].toUpperCase()] = {
+            chartData[this.data[symbol][this.keys[0]].toUpperCase()] = {
-              name: this.positions[symbol][this.keys[0]],
+              name: this.data[symbol][this.keys[0]],
               subCategory: {},
-              value: new Big(this.positions[symbol].value || 0)
+              value: new Big(this.data[symbol].value || 0)
             };
 
-            if (this.positions[symbol][this.keys[1]]) {
+            if (this.data[symbol][this.keys[1]]) {
               chartData[
-                this.positions[symbol][this.keys[0]].toUpperCase()
+                this.data[symbol][this.keys[0]].toUpperCase()
               ].subCategory = {
-                [this.positions[symbol][this.keys[1]]]: {
+                [this.data[symbol][this.keys[1]]]: {
-                  value: new Big(this.positions[symbol].value || 0)
+                  value: new Big(this.data[symbol].value || 0)
                 }
               };
             }
@@ -170,24 +168,24 @@ export class GfPortfolioProportionChartComponent
         } else {
           if (chartData[UNKNOWN_KEY]) {
             chartData[UNKNOWN_KEY].value = chartData[UNKNOWN_KEY].value.plus(
-              this.positions[symbol].value || 0
+              this.data[symbol].value || 0
             );
           } else {
             chartData[UNKNOWN_KEY] = {
-              name: this.positions[symbol].name,
+              name: this.data[symbol].name,
               subCategory: this.keys[1]
                 ? { [this.keys[1]]: { value: new Big(0) } }
                 : undefined,
-              value: new Big(this.positions[symbol].value || 0)
+              value: new Big(this.data[symbol].value || 0)
             };
           }
         }
       });
     } else {
-      Object.keys(this.positions).forEach((symbol) => {
+      Object.keys(this.data).forEach((symbol) => {
         chartData[symbol] = {
-          name: this.positions[symbol].name,
+          name: this.data[symbol].name,
-          value: new Big(this.positions[symbol].value || 0)
+          value: new Big(this.data[symbol].value || 0)
         };
       });
     }
@@ -321,7 +319,7 @@ export class GfPortfolioProportionChartComponent
                 const dataIndex = activeElements[0].index;
                 const symbol: string = event.chart.data.labels[dataIndex];
 
-                const dataSource = this.positions[symbol]?.dataSource;
+                const dataSource = this.data[symbol]?.dataSource;
 
                 this.proportionChartClicked.emit({ dataSource, symbol });
               } catch {}
@@ -404,7 +402,7 @@ export class GfPortfolioProportionChartComponent
             symbol = $localize`No data available`;
           }
 
-          const name = translate(this.positions[symbol as string]?.name);
+          const name = translate(this.data[symbol as string]?.name);
 
           let sum = 0;
           for (const item of context.dataset.data) {