Bugfix/fix tooltip in proportion chart after update (#882)

* Keep tooltip configuration up to date

* Update changelog

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added support for private equity
 - Extended the form to set the asset and asset sub class for (wealth) items
 
+### Fixed
+
+- Fixed the tooltip update in the portfolio proportion chart component
+
 ### Todo
 
 - Apply data migration (`yarn database:migrate`)

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

@@ -15,7 +15,7 @@ import { getTextColor } from '@ghostfolio/common/helper';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { DataSource } from '@prisma/client';
 import Big from 'big.js';
-import { Tooltip } from 'chart.js';
+import { ChartConfiguration, Tooltip } from 'chart.js';
 import { LinearScale } from 'chart.js';
 import { ArcElement } from 'chart.js';
 import { DoughnutController } from 'chart.js';
@@ -215,7 +215,7 @@ export class PortfolioProportionChartComponent
       });
     });
 
-    const datasets = [
+    const datasets: ChartConfiguration['data']['datasets'] = [
       {
         backgroundColor: chartDataSorted.map(([, item]) => {
           return item.color;
@@ -247,7 +247,7 @@ export class PortfolioProportionChartComponent
       datasets[0].data[0] = Number.MAX_SAFE_INTEGER;
     }
 
-    const data = {
+    const data: ChartConfiguration['data'] = {
       datasets,
       labels
     };
@@ -255,6 +255,8 @@ export class PortfolioProportionChartComponent
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;
+        this.chart.options.plugins.tooltip =
+          this.getTooltipPluginConfiguration(data);
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
@@ -302,12 +304,46 @@ export class PortfolioProportionChartComponent
                 }
               },
               legend: { display: false },
-              tooltip: {
+              tooltip: this.getTooltipPluginConfiguration(data)
+            }
+          },
+          plugins: [ChartDataLabels],
+          type: 'doughnut'
+        });
+      }
+    }
+
+    this.isLoading = false;
+  }
+
+  /**
+   * Color palette, inspired by https://yeun.github.io/open-color
+   */
+  private getColorPalette() {
+    //
+    return [
+      '#329af0', // blue 5
+      '#20c997', // teal 5
+      '#94d82d', // lime 5
+      '#ff922b', // orange 5
+      '#f06595', // pink 5
+      '#845ef7', // violet 5
+      '#5c7cfa', // indigo 5
+      '#22b8cf', // cyan 5
+      '#51cf66', // green 5
+      '#fcc419', // yellow 5
+      '#ff6b6b', // red 5
+      '#cc5de8' // grape 5
+    ];
+  }
+
+  private getTooltipPluginConfiguration(data: ChartConfiguration['data']) {
+    return {
       callbacks: {
         label: (context) => {
           const labelIndex =
-                      (data.datasets[context.datasetIndex - 1]?.data?.length ??
-                        0) + context.dataIndex;
+            (data.datasets[context.datasetIndex - 1]?.data?.length ?? 0) +
+            context.dataIndex;
           let symbol = context.chart.data.labels?.[labelIndex] ?? '';
 
           if (symbol === this.OTHER_KEY) {
@@ -319,9 +355,9 @@ export class PortfolioProportionChartComponent
           const name = this.positions[<string>symbol]?.name;
 
           let sum = 0;
-                    context.dataset.data.map((item) => {
+          for (const item of context.dataset.data) {
             sum += item;
-                    });
+          }
 
           const percentage = (context.parsed * 100) / sum;
 
@@ -341,36 +377,6 @@ export class PortfolioProportionChartComponent
           }
         }
       }
-              }
-            }
-          },
-          plugins: [ChartDataLabels],
-          type: 'doughnut'
-        });
-      }
-    }
-
-    this.isLoading = false;
-  }
-
-  /**
-   * Color palette, inspired by https://yeun.github.io/open-color
-   */
-  private getColorPalette() {
-    //
-    return [
-      '#329af0', // blue 5
-      '#20c997', // teal 5
-      '#94d82d', // lime 5
-      '#ff922b', // orange 5
-      '#f06595', // pink 5
-      '#845ef7', // violet 5
-      '#5c7cfa', // indigo 5
-      '#22b8cf', // cyan 5
-      '#51cf66', // green 5
-      '#fcc419', // yellow 5
-      '#ff6b6b', // red 5
-      '#cc5de8' // grape 5
-    ];
+    };
   }
 }