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

* Refactor @Input in GfPortfolioProportionChartComponent
2025-05-09 17:31:35 +02:00 · 2025-05-09 17:31:35 +02:00 · d99217a434
commit d99217a434
parent 480709c32a
6 changed files with 65 additions and 67 deletions
--- a/apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html
+++ b/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>
        }
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/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>
        }
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/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>
--- a/apps/client/src/app/pages/public/public-page.html
+++ b/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>
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts
+++ b/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'],
-    locale: 'en-US',
-    positions: {
+    data: {
      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'
  }
 };
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/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() keys: string[] = [];
-  @Input() locale = getLocale();
-  @Input() maxItems?: number;
-  @Input() showLabels = false;
-  @Input() positions: {
+  @Input() data: {
    [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) => {
-        if (this.positions[symbol][this.keys[0]]?.toUpperCase()) {
-          if (chartData[this.positions[symbol][this.keys[0]].toUpperCase()]) {
-            chartData[
-              this.positions[symbol][this.keys[0]].toUpperCase()
-            ].value = chartData[
-              this.positions[symbol][this.keys[0]].toUpperCase()
-            ].value.plus(this.positions[symbol].value || 0);
+      Object.keys(this.data).forEach((symbol) => {
+        if (this.data[symbol][this.keys[0]]?.toUpperCase()) {
+          if (chartData[this.data[symbol][this.keys[0]].toUpperCase()]) {
+            chartData[this.data[symbol][this.keys[0]].toUpperCase()].value =
+              chartData[
+                this.data[symbol][this.keys[0]].toUpperCase()
+              ].value.plus(this.data[symbol].value || 0);

            if (
-              chartData[this.positions[symbol][this.keys[0]].toUpperCase()]
-                .subCategory[this.positions[symbol][this.keys[1]]]
+              chartData[this.data[symbol][this.keys[0]].toUpperCase()]
+                .subCategory[this.data[symbol][this.keys[1]]]
            ) {
              chartData[
-                this.positions[symbol][this.keys[0]].toUpperCase()
-              ].subCategory[this.positions[symbol][this.keys[1]]].value =
-                chartData[
-                  this.positions[symbol][this.keys[0]].toUpperCase()
-                ].subCategory[this.positions[symbol][this.keys[1]]].value.plus(
-                  this.positions[symbol].value || 0
-                );
+                this.data[symbol][this.keys[0]].toUpperCase()
+              ].subCategory[this.data[symbol][this.keys[1]]].value = chartData[
+                this.data[symbol][this.keys[0]].toUpperCase()
+              ].subCategory[this.data[symbol][this.keys[1]]].value.plus(
+                this.data[symbol].value || 0
+              );
            } else {
              chartData[
-                this.positions[symbol][this.keys[0]].toUpperCase()
-              ].subCategory[
-                this.positions[symbol][this.keys[1]] ?? UNKNOWN_KEY
-              ] = { value: new Big(this.positions[symbol].value || 0) };
+                this.data[symbol][this.keys[0]].toUpperCase()
+              ].subCategory[this.data[symbol][this.keys[1]] ?? UNKNOWN_KEY] = {
+                value: new Big(this.data[symbol].value || 0)
+              };
            }
          } else {
-            chartData[this.positions[symbol][this.keys[0]].toUpperCase()] = {
-              name: this.positions[symbol][this.keys[0]],
+            chartData[this.data[symbol][this.keys[0]].toUpperCase()] = {
+              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]]]: {
-                  value: new Big(this.positions[symbol].value || 0)
+                [this.data[symbol][this.keys[1]]]: {
+                  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,
-          value: new Big(this.positions[symbol].value || 0)
+          name: this.data[symbol].name,
+          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) {