Add labels to allocation piecharts (#337)

apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -16,6 +16,8 @@ import { LinearScale } from 'chart.js';
 import { ArcElement } from 'chart.js';
 import { DoughnutController } from 'chart.js';
 import { Chart } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { sum } from 'lodash';
 import * as Color from 'color';
 
 @Component({
@@ -32,6 +34,7 @@ export class PortfolioProportionChartComponent
   @Input() keys: string[];
   @Input() locale: string;
   @Input() maxItems?: number;
+  @Input() showLabels: boolean;
   @Input() positions: {
     [symbol: string]: Pick<PortfolioPosition, 'type'> & { value: number };
   };
@@ -48,7 +51,7 @@ export class PortfolioProportionChartComponent
   };
 
   public constructor() {
-    Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip);
+    Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip, ChartDataLabels);
   }
 
   public ngOnInit() {}
@@ -226,6 +229,8 @@ export class PortfolioProportionChartComponent
       labels
     };
 
+    const showLabels = this.showLabels || false;
+
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;
@@ -234,6 +239,9 @@ export class PortfolioProportionChartComponent
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: {
+            layout: {
+              padding: 60,
+            },
             cutout: '70%',
             plugins: {
               legend: { display: false },
@@ -257,6 +265,27 @@ export class PortfolioProportionChartComponent
                     }
                   }
                 }
+              },
+              datalabels: {
+                display: function(ctx) {
+                  const value = ctx.dataset.data[ctx.dataIndex];
+                  return showLabels === true && ctx.datasetIndex === 0 && value > sum(ctx.dataset.data) / 10;
+                },
+                font: {
+                  weight: 'bold',
+                },
+                color: this.getColorPalette()[0],
+                labels: {
+                  index: {
+                    align: 'end',
+                    anchor: 'end',
+                    font: {size: 18},
+                    formatter: function(value, ctx) {
+                      return ctx.chart.data.labels[ctx.dataIndex];
+                    },
+                    offset: 8,
+                  }
+                }
               }
             }
           },

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

@@ -68,6 +68,7 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="true"
+            [showLabels]="true"
             [keys]="['currency']"
             [locale]="user?.settings?.locale"
             [positions]="positions"
@@ -91,6 +92,7 @@
             class="mx-auto"
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="false"
+            [showLabels]="true"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
             [positions]="symbols"

package.json

@@ -81,6 +81,7 @@
     "cache-manager-redis-store": "2.0.0",
     "chart.js": "3.5.0",
     "chartjs-adapter-date-fns": "2.0.0",
+    "chartjs-plugin-datalabels": "^2.0.0",
     "cheerio": "1.0.0-rc.6",
     "class-transformer": "0.3.2",
     "class-validator": "0.13.1",

yarn.lock

@@ -6112,6 +6112,11 @@ chartjs-adapter-date-fns@2.0.0:
   resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-2.0.0.tgz#5e53b2f660b993698f936f509c86dddf9ed44c6b"
   integrity sha512-rmZINGLe+9IiiEB0kb57vH3UugAtYw33anRiw5kS2Tu87agpetDDoouquycWc9pRsKtQo5j+vLsYHyr8etAvFw==
 
+chartjs-plugin-datalabels@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
+  integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
+
 check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"