Feature/improve labels of allocation chart by symbol (#353)

* Improve labels

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Added labels to the allocation chart by symbol on desktop
+
 ## 1.48.0 - 07.09.2021
 
 ### Added

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

@@ -17,7 +17,6 @@ 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({
@@ -34,7 +33,7 @@ export class PortfolioProportionChartComponent
   @Input() keys: string[];
   @Input() locale: string;
   @Input() maxItems?: number;
-  @Input() showLabels: boolean;
+  @Input() showLabels = false;
   @Input() positions: {
     [symbol: string]: Pick<PortfolioPosition, 'type'> & { value: number };
   };
@@ -51,7 +50,13 @@ export class PortfolioProportionChartComponent
   };
 
   public constructor() {
-    Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip, ChartDataLabels);
+    Chart.register(
+      ArcElement,
+      ChartDataLabels,
+      DoughnutController,
+      LinearScale,
+      Tooltip
+    );
   }
 
   public ngOnInit() {}
@@ -229,8 +234,6 @@ export class PortfolioProportionChartComponent
       labels
     };
 
-    const showLabels = this.showLabels || false;
-
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;
@@ -239,11 +242,31 @@ export class PortfolioProportionChartComponent
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: {
+            cutout: '70%',
             layout: {
-              padding: 60,
+              padding: this.showLabels === true ? 100 : 0
             },
-            cutout: '70%',
             plugins: {
+              datalabels: {
+                color: (context) => {
+                  return this.getColorPalette()[
+                    context.dataIndex % this.getColorPalette().length
+                  ];
+                },
+                display: this.showLabels === true ? 'auto' : false,
+                labels: {
+                  index: {
+                    align: 'end',
+                    anchor: 'end',
+                    formatter: (value, context) => {
+                      return value > 0
+                        ? context.chart.data.labels[context.dataIndex]
+                        : '';
+                    },
+                    offset: 8
+                  }
+                }
+              },
               legend: { display: false },
               tooltip: {
                 callbacks: {
@@ -265,27 +288,6 @@ 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,7 +68,6 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="true"
-            [showLabels]="true"
             [keys]="['currency']"
             [locale]="user?.settings?.locale"
             [positions]="positions"
@@ -92,10 +91,10 @@
             class="mx-auto"
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="false"
-            [showLabels]="true"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
             [positions]="symbols"
+            [showLabels]="deviceType !== 'mobile'"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>

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

@@ -1,7 +1,7 @@
 :host {
   .allocations-by-symbol {
     gf-portfolio-proportion-chart {
-      max-width: 67vh;
+      max-width: 80vh;
     }
   }
 

package.json

@@ -81,7 +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",
+    "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,7 +6112,7 @@ 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:
+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==