Feature/add story for line chart component (#385)

* Add story for line chart component

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added a story for the line chart component
 - Added a story for the portfolio proportion chart component
 
 ## 1.55.0 - 20.09.2021

apps/client/src/app/components/performance-chart-dialog/interfaces/interfaces.ts

@@ -1,4 +1,4 @@
-import { LineChartItem } from '../../line-chart/interfaces/line-chart.interface';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 
 export interface PositionDetailDialogParams {
   deviceType: string;

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.component.ts

@@ -7,11 +7,11 @@ import {
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { isToday, parse } from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { LineChartItem } from '../line-chart/interfaces/line-chart.interface';
 import { PositionDetailDialogParams } from './interfaces/interfaces';
 
 @Component({

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.html

@@ -13,6 +13,7 @@
       [benchmarkDataItems]="benchmarkDataItems"
       [benchmarkLabel]="benchmarkLabel"
       [historicalDataItems]="historicalDataItems"
+      [showGradient]="true"
       [showLegend]="true"
       [showXAxis]="true"
       [showYAxis]="false"

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
-import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts

@@ -8,11 +8,11 @@ import {
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { LineChartItem } from '../../line-chart/interfaces/line-chart.interface';
 import { PositionDetailDialogParams } from './interfaces/interfaces';
 
 @Component({

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -12,6 +12,7 @@
       benchmarkLabel="Buy Price"
       [benchmarkDataItems]="benchmarkDataItems"
       [historicalDataItems]="historicalDataItems"
+      [showGradient]="true"
       [showXAxis]="true"
       [showYAxis]="true"
       [symbol]="data.symbol"

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
-import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 

apps/client/src/app/pages/home/home-page.component.ts

@@ -10,7 +10,6 @@ import {
 import { MatDialog } from '@angular/material/dialog';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { ActivatedRoute, Router } from '@angular/router';
-import { LineChartItem } from '@ghostfolio/client/components/line-chart/interfaces/line-chart.interface';
 import { PerformanceChartDialog } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.component';
 import { ToggleOption } from '@ghostfolio/client/components/toggle/interfaces/toggle-option.type';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -29,6 +28,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';

apps/client/src/app/pages/home/home-page.html

@@ -33,6 +33,7 @@
             class="mr-3"
             symbol="Performance"
             [historicalDataItems]="historicalDataItems"
+            [showGradient]="true"
             [showLoader]="false"
             [showXAxis]="false"
             [showYAxis]="false"

apps/client/src/app/pages/home/home-page.module.ts

@@ -4,12 +4,12 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
-import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
 import { GfPerformanceChartDialogModule } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.module';
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { HomePageRoutingModule } from './home-page-routing.module';

apps/client/src/app/pages/landing/landing-page.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
-import { LineChartItem } from '@ghostfolio/client/components/line-chart/interfaces/line-chart.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { format } from 'date-fns';
 import { Subject } from 'rxjs';
 

apps/client/src/app/pages/landing/landing-page.html

@@ -50,6 +50,7 @@
         class="position-absolute"
         symbol="Performance"
         [historicalDataItems]="historicalDataItems"
+        [showGradient]="true"
         [showLoader]="false"
         [showXAxis]="false"
         [showYAxis]="false"

apps/client/src/app/pages/landing/landing-page.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { LandingPageRoutingModule } from './landing-page-routing.module';

apps/client/src/app/pages/register/register-page.component.ts

@@ -1,10 +1,10 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
-import { LineChartItem } from '@ghostfolio/client/components/line-chart/interfaces/line-chart.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { format } from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -10,7 +10,6 @@ import {
 } from '@angular/core';
 import { MatTabChangeEvent } from '@angular/material/tabs';
 import { ActivatedRoute } from '@angular/router';
-import { LineChartItem } from '@ghostfolio/client/components/line-chart/interfaces/line-chart.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -21,6 +20,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
+import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { first, takeUntil } from 'rxjs/operators';

apps/client/src/app/pages/zen/zen-page.html

@@ -29,6 +29,7 @@
             class="mr-3"
             symbol="Performance"
             [historicalDataItems]="historicalDataItems"
+            [showGradient]="true"
             [showLoader]="false"
             [showXAxis]="false"
             [showYAxis]="false"

apps/client/src/app/pages/zen/zen-page.module.ts

@@ -4,9 +4,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
-import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';
+import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { ZenPageRoutingModule } from './zen-page-routing.module';

libs/ui/src/lib/line-chart/line-chart.component.stories.ts

@@ -0,0 +1,234 @@
+import { CommonModule } from '@angular/common';
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { LineChartComponent } from './line-chart.component';
+
+export default {
+  title: 'Line Chart',
+  component: LineChartComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [LineChartComponent],
+      imports: [CommonModule, NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<LineChartComponent>;
+
+const Template: Story<LineChartComponent> = (args: LineChartComponent) => ({
+  props: args
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  historicalDataItems: [
+    {
+      date: '2017-01-01',
+      value: 2561.60376
+    },
+    {
+      date: '2017-02-01',
+      value: 2261.60376
+    },
+    {
+      date: '2017-03-01',
+      value: 2268.68157074
+    },
+    {
+      date: '2017-04-01',
+      value: 2525.2942
+    },
+    {
+      date: '2017-05-01',
+      value: 2929.3595107399997
+    },
+    {
+      date: '2017-06-01',
+      value: 3088.5172438900004
+    },
+    {
+      date: '2017-07-01',
+      value: 3281.2490946300004
+    },
+    {
+      date: '2017-08-01',
+      value: 4714.57822537
+    },
+    {
+      date: '2017-09-01',
+      value: 5717.262455259565
+    },
+    {
+      date: '2017-10-01',
+      value: 5338.742482334544
+    },
+    {
+      date: '2017-11-01',
+      value: 6361.263771554509
+    },
+    {
+      date: '2017-12-01',
+      value: 8373.260491904595
+    },
+    {
+      date: '2018-01-01',
+      value: 9783.208968191562
+    },
+    {
+      date: '2018-02-01',
+      value: 7841.2667100173
+    },
+    {
+      date: '2018-03-01',
+      value: 8582.133039380678
+    },
+    {
+      date: '2018-04-01',
+      value: 5901.8362986766715
+    },
+    {
+      date: '2018-05-01',
+      value: 7367.392976151925
+    },
+    {
+      date: '2018-06-01',
+      value: 6490.164314049853
+    },
+    {
+      date: '2018-07-01',
+      value: 6365.351621654618
+    },
+    {
+      date: '2018-08-01',
+      value: 6614.532706931272
+    },
+    {
+      date: '2018-09-01',
+      value: 6402.052882414409
+    },
+    {
+      date: '2018-10-01',
+      value: 15270.327917651943
+    },
+    {
+      date: '2018-11-01',
+      value: 13929.833891940816
+    },
+    {
+      date: '2018-12-01',
+      value: 12995.832254431414
+    },
+    {
+      date: '2019-01-01',
+      value: 11792.447013828998
+    },
+    {
+      date: '2019-02-01',
+      value: 11988.224284346446
+    },
+    {
+      date: '2019-03-01',
+      value: 13536.39667099519
+    },
+    {
+      date: '2019-04-01',
+      value: 14301.83740090022
+    },
+    {
+      date: '2019-05-01',
+      value: 14902.994910520581
+    },
+    {
+      date: '2019-06-01',
+      value: 15373.418326284132
+    },
+    {
+      date: '2019-07-01',
+      value: 17545.70705465703
+    },
+    {
+      date: '2019-08-01',
+      value: 17206.28500223782
+    },
+    {
+      date: '2019-09-01',
+      value: 17782.445200108898
+    },
+    {
+      date: '2019-10-01',
+      value: 17050.25875252655
+    },
+    {
+      date: '2019-11-01',
+      value: 18517.053521416237
+    },
+    {
+      date: '2019-12-01',
+      value: 17850.649021651363
+    },
+    {
+      date: '2020-01-01',
+      value: 18817.269786559067
+    },
+    {
+      date: '2020-02-01',
+      value: 22769.842312027653
+    },
+    {
+      date: '2020-03-01',
+      value: 23065.56002316582
+    },
+    {
+      date: '2020-04-01',
+      value: 19738.122641884733
+    },
+    {
+      date: '2020-05-01',
+      value: 25112.281463810643
+    },
+    {
+      date: '2020-06-01',
+      value: 28753.054132147452
+    },
+    {
+      date: '2020-07-01',
+      value: 32207.62827031543
+    },
+    {
+      date: '2020-08-01',
+      value: 37837.88816828611
+    },
+    {
+      date: '2020-09-01',
+      value: 50018.740185519295
+    },
+    {
+      date: '2020-10-01',
+      value: 46593.322295801525
+    },
+    {
+      date: '2020-11-01',
+      value: 44440.18743231742
+    },
+    {
+      date: '2020-12-01',
+      value: 57582.23077536893
+    },
+    {
+      date: '2021-01-01',
+      value: 68823.02446077733
+    },
+    {
+      date: '2021-02-01',
+      value: 64516.42092139593
+    },
+    {
+      date: '2021-03-01',
+      value: 82465.97581106682
+    },
+    {
+      date: '2021-03-18',
+      value: 86666.03082624623
+    }
+  ]
+};

apps/client/src/app/components/line-chart/line-chart.component.ts → libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -1,13 +1,13 @@
 import 'chartjs-adapter-date-fns';
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   Input,
   OnChanges,
   OnDestroy,
-  OnInit,
   ViewChild
 } from '@angular/core';
 import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
@@ -30,14 +30,15 @@ import { LineChartItem } from './interfaces/line-chart.interface';
   templateUrl: './line-chart.component.html',
   styleUrls: ['./line-chart.component.scss']
 })
-export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
+export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmarkLabel = '';
   @Input() historicalDataItems: LineChartItem[];
-  @Input() showLegend: boolean;
+  @Input() showGradient = false;
+  @Input() showLegend = false;
   @Input() showLoader = true;
-  @Input() showXAxis: boolean;
-  @Input() showYAxis: boolean;
+  @Input() showXAxis = false;
+  @Input() showYAxis = false;
   @Input() symbol: string;
 
   @ViewChild('chartCanvas') chartCanvas;
@@ -56,7 +57,16 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
     );
   }
 
-  public ngOnInit() {}
+  public ngAfterViewInit() {
+    if (this.historicalDataItems) {
+      setTimeout(() => {
+        // Wait for the chartCanvas
+        this.initialize();
+
+        this.changeDetectorRef.markForCheck();
+      });
+    }
+  }
 
   public ngOnChanges() {
     if (this.historicalDataItems) {
@@ -94,7 +104,7 @@ export class LineChartComponent implements OnChanges, OnDestroy, OnInit {
         (this.chartCanvas.nativeElement.parentNode.offsetHeight * 4) / 5
       );
 
-    if (gradient) {
+    if (gradient && this.showGradient) {
       gradient.addColorStop(
         0,
         `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)`

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

@@ -1,9 +1,9 @@
 import { CommonModule } from '@angular/common';
+import { Currency } from '@prisma/client';
 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',