Feature/support case insensitive names in portfolio proportion chart (#2004)

* Sum up case insensitive names

* Update changelog

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Decreased the density of the `@angular/material` tables
+- Improved the portfolio proportion chart component by supporting case insensitive names
 - Improved the breadcrumb navigation style in the blog post pages for mobile
 - Improved the error handling in the delete user endpoint
 - Improved the style of the _Changelog & License_ button on the about page

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

@@ -100,38 +100,42 @@ export class PortfolioProportionChartComponent
     };
 
     Object.keys(this.positions).forEach((symbol) => {
-      if (this.positions[symbol][this.keys[0]]) {
-        if (chartData[this.positions[symbol][this.keys[0]]]) {
-          chartData[this.positions[symbol][this.keys[0]]].value = chartData[
-            this.positions[symbol][this.keys[0]]
-          ].value.plus(this.positions[symbol].value);
+      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);
 
           if (
-            chartData[this.positions[symbol][this.keys[0]]].subCategory[
-              this.positions[symbol][this.keys[1]]
-            ]
+            chartData[this.positions[symbol][this.keys[0]].toUpperCase()]
+              .subCategory[this.positions[symbol][this.keys[1]]]
           ) {
-            chartData[this.positions[symbol][this.keys[0]]].subCategory[
-              this.positions[symbol][this.keys[1]]
-            ].value = chartData[
-              this.positions[symbol][this.keys[0]]
-            ].subCategory[this.positions[symbol][this.keys[1]]].value.plus(
-              this.positions[symbol].value
-            );
+            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
+              );
           } else {
-            chartData[this.positions[symbol][this.keys[0]]].subCategory[
-              this.positions[symbol][this.keys[1]] ?? UNKNOWN_KEY
-            ] = { value: new Big(this.positions[symbol].value) };
+            chartData[
+              this.positions[symbol][this.keys[0]].toUpperCase()
+            ].subCategory[this.positions[symbol][this.keys[1]] ?? UNKNOWN_KEY] =
+              { value: new Big(this.positions[symbol].value) };
           }
         } else {
-          chartData[this.positions[symbol][this.keys[0]]] = {
-            name: this.positions[symbol].name,
+          chartData[this.positions[symbol][this.keys[0]].toUpperCase()] = {
+            name: this.positions[symbol][this.keys[0]],
             subCategory: {},
             value: new Big(this.positions[symbol].value ?? 0)
           };
 
           if (this.positions[symbol][this.keys[1]]) {
-            chartData[this.positions[symbol][this.keys[0]]].subCategory = {
+            chartData[
+              this.positions[symbol][this.keys[0]].toUpperCase()
+            ].subCategory = {
               [this.positions[symbol][this.keys[1]]]: {
                 value: new Big(this.positions[symbol].value)
               }
@@ -232,8 +236,8 @@ export class PortfolioProportionChartComponent
       }
     ];
 
-    let labels = chartDataSorted.map(([label]) => {
-      return label;
+    let labels = chartDataSorted.map(([symbol, { name }]) => {
+      return name;
     });
 
     if (this.keys[1]) {