Bugfix/fix line chart labels (#491)

* Fix line chart labels

* Fix click event for drafts

* Update changelog

CHANGELOG.md

@@ -16,6 +16,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Upgraded `rxjs` from version `6.6.7` to `7.4.0`
 - Upgraded `storybook` from version `6.3.8` to `6.4.0-rc.3`
 
+### Fixed
+
+- Fixed the broken line charts showing value labels if openend from the allocations page
+- Fixed the click event for drafts in the transactions table
+
 ## 1.80.0 - 23.11.2021
 
 ### Added

apps/client/src/app/components/transactions-table/transactions-table.component.html

@@ -254,10 +254,12 @@
     *matRowDef="let row; columns: displayedColumns"
     mat-row
     (click)="
-      onOpenPositionDialog({
+      !row.isDraft &&
-        symbol: row.symbol
+        onOpenPositionDialog({
-      })
+          symbol: row.symbol
+        })
     "
+    [ngClass]="{ 'is-draft': row.isDraft }"
   ></tr>
 </table>
 

apps/client/src/app/components/transactions-table/transactions-table.component.scss

@@ -24,7 +24,9 @@
     }
 
     .mat-row {
-      cursor: pointer;
+      &:not(.is-draft) {
+        cursor: pointer;
+      }
 
       .type-badge {
         background-color: rgba(var(--palette-foreground-text), 0.05);

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

@@ -54,13 +54,7 @@ export class PortfolioProportionChartComponent
   };
 
   public constructor() {
-    Chart.register(
+    Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip);
-      ArcElement,
-      ChartDataLabels,
-      DoughnutController,
-      LinearScale,
-      Tooltip
-    );
   }
 
   public ngAfterViewInit() {
@@ -76,7 +70,6 @@ export class PortfolioProportionChartComponent
   }
 
   public ngOnDestroy() {
-    Chart.unregister(ChartDataLabels);
     this.chart?.destroy();
   }
 
@@ -254,7 +247,7 @@ export class PortfolioProportionChartComponent
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
-          options: {
+          options: <unknown>{
             cutout: '70%',
             layout: {
               padding: this.showLabels === true ? 100 : 0
@@ -316,6 +309,7 @@ export class PortfolioProportionChartComponent
               }
             }
           },
+          plugins: [ChartDataLabels],
           type: 'doughnut'
         });
       }