Feature/add story for portfolio proportion chart component (#384)

* Add story

* Use new component

* 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 a story for the portfolio proportion chart component
+
 ## 1.55.0 - 20.09.2021
 
 ### Changed

apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts

@@ -1,10 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
-import { GfPortfolioProportionChartModule } from '@ghostfolio/client/components/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfPositionsTableModule } from '@ghostfolio/client/components/positions-table/positions-table.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
+import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 
 import { AllocationsPageRoutingModule } from './allocations-page-routing.module';
 import { AllocationsPageComponent } from './allocations-page.component';

libs/common/src/lib/helper.ts

@@ -123,7 +123,7 @@ export function resolveFearAndGreedIndex(aValue: number) {
     return { emoji: '😐', text: 'Neutral' };
   } else if (aValue < 75) {
     return { emoji: '😜', text: 'Greed' };
-  } else if (aValue >= 75) {
+  } else {
     return { emoji: '🤪', text: 'Extreme Greed' };
   }
 }

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

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common';
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { PortfolioProportionChartComponent } from './portfolio-proportion-chart.component';
+import { Currency } from '.prisma/client';
+
+export default {
+  title: 'Portfolio Proportion Chart',
+  component: PortfolioProportionChartComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [PortfolioProportionChartComponent],
+      imports: [CommonModule, NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<PortfolioProportionChartComponent>;
+
+const Template: Story<PortfolioProportionChartComponent> = (
+  args: PortfolioProportionChartComponent
+) => ({
+  props: args
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  baseCurrency: Currency.USD,
+  keys: ['name'],
+  locale: 'en-US',
+  positions: {
+    Africa: { name: 'Africa', value: 983.22461479889288 },
+    Asia: { name: 'Asia', value: 12074.754633964973 },
+    Europe: { name: 'Europe', value: 34432.837085290535 },
+    'North America': { name: 'North America', value: 26539.89987780503 },
+    Oceania: { name: 'Oceania', value: 1402.220605072031 },
+    'South America': { name: 'South America', value: 4938.25202180719859 }
+  }
+};

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

@@ -1,10 +1,11 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
+  ElementRef,
   Input,
   OnChanges,
   OnDestroy,
-  OnInit,
   ViewChild
 } from '@angular/core';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
@@ -26,19 +27,19 @@ import * as Color from 'color';
   styleUrls: ['./portfolio-proportion-chart.component.scss']
 })
 export class PortfolioProportionChartComponent
-  implements OnChanges, OnDestroy, OnInit
+  implements AfterViewInit, OnChanges, OnDestroy
 {
   @Input() baseCurrency: Currency;
-  @Input() isInPercent: boolean;
+  @Input() isInPercent = false;
-  @Input() keys: string[];
+  @Input() keys: string[] = [];
-  @Input() locale: string;
+  @Input() locale = '';
   @Input() maxItems?: number;
   @Input() showLabels = false;
   @Input() positions: {
     [symbol: string]: Pick<PortfolioPosition, 'type'> & { value: number };
-  };
+  } = {};
 
-  @ViewChild('chartCanvas') chartCanvas;
+  @ViewChild('chartCanvas') chartCanvas: ElementRef<HTMLCanvasElement>;
 
   public chart: Chart;
   public isLoading = true;
@@ -59,7 +60,11 @@ export class PortfolioProportionChartComponent
     );
   }
 
-  public ngOnInit() {}
+  public ngAfterViewInit() {
+    if (this.positions) {
+      this.initialize();
+    }
+  }
 
   public ngOnChanges() {
     if (this.positions) {
@@ -260,7 +265,7 @@ export class PortfolioProportionChartComponent
                     anchor: 'end',
                     formatter: (value, context) => {
                       return value > 0
-                        ? context.chart.data.labels[context.dataIndex]
+                        ? context.chart.data.labels?.[context.dataIndex]
                         : '';
                     },
                     offset: 8
@@ -274,7 +279,7 @@ export class PortfolioProportionChartComponent
                     const labelIndex =
                       (data.datasets[context.datasetIndex - 1]?.data?.length ??
                         0) + context.dataIndex;
-                    const label = context.chart.data.labels[labelIndex];
+                    const label = context.chart.data.labels?.[labelIndex] ?? '';
 
                     if (this.isInPercent) {
                       const value = 100 * <number>context.raw;

libs/ui/tsconfig.json

@@ -15,7 +15,7 @@
   ],
   "compilerOptions": {
     "forceConsistentCasingInFileNames": true,
-    "strict": true,
+    "strict": false,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true
   },