From 9ae9904389e5398b5be653355cfcd1ccb80c122b Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Mon, 20 Sep 2021 21:44:47 +0200 Subject: [PATCH] Feature/add story for line chart component (#385) * Add story for line chart component * Update changelog --- CHANGELOG.md | 1 + .../interfaces/interfaces.ts | 2 +- .../performance-chart-dialog.component.ts | 2 +- .../performance-chart-dialog.html | 1 + .../performance-chart-dialog.module.ts | 2 +- .../position-detail-dialog.component.ts | 2 +- .../position-detail-dialog.html | 1 + .../position-detail-dialog.module.ts | 2 +- .../src/app/pages/home/home-page.component.ts | 2 +- apps/client/src/app/pages/home/home-page.html | 1 + .../src/app/pages/home/home-page.module.ts | 2 +- .../pages/landing/landing-page.component.ts | 2 +- .../src/app/pages/landing/landing-page.html | 1 + .../app/pages/landing/landing-page.module.ts | 2 +- .../pages/register/register-page.component.ts | 2 +- .../src/app/pages/zen/zen-page.component.ts | 2 +- apps/client/src/app/pages/zen/zen-page.html | 1 + .../src/app/pages/zen/zen-page.module.ts | 2 +- .../interfaces/line-chart.interface.ts | 0 .../lib}/line-chart/line-chart.component.html | 0 .../lib}/line-chart/line-chart.component.scss | 0 .../line-chart.component.stories.ts | 234 ++++++++++++++++++ .../lib}/line-chart/line-chart.component.ts | 24 +- .../src/lib}/line-chart/line-chart.module.ts | 0 ...olio-proportion-chart.component.stories.ts | 2 +- 25 files changed, 270 insertions(+), 20 deletions(-) rename {apps/client/src/app/components => libs/ui/src/lib}/line-chart/interfaces/line-chart.interface.ts (100%) rename {apps/client/src/app/components => libs/ui/src/lib}/line-chart/line-chart.component.html (100%) rename {apps/client/src/app/components => libs/ui/src/lib}/line-chart/line-chart.component.scss (100%) create mode 100644 libs/ui/src/lib/line-chart/line-chart.component.stories.ts rename {apps/client/src/app/components => libs/ui/src/lib}/line-chart/line-chart.component.ts (90%) rename {apps/client/src/app/components => libs/ui/src/lib}/line-chart/line-chart.module.ts (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7b09756..aa2cb05a 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/components/performance-chart-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/performance-chart-dialog/interfaces/interfaces.ts index 123b5752..d58e38c9 100644 --- a/apps/client/src/app/components/performance-chart-dialog/interfaces/interfaces.ts +++ b/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; diff --git a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.component.ts b/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.component.ts index 5dffaae6..ecffbe72 100644 --- a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.component.ts +++ b/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({ diff --git a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.html b/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.html index 2dbd136a..67ed9622 100644 --- a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.html +++ b/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" diff --git a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts b/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts index eba709cc..dfe108dd 100644 --- a/apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts +++ b/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'; diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts index 99ff4001..38ab958a 100644 --- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts +++ b/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({ diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html index f64bc61f..0994e50c 100644 --- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html +++ b/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" diff --git a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts b/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts index 98081667..00a7c9f7 100644 --- a/apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts +++ b/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'; diff --git a/apps/client/src/app/pages/home/home-page.component.ts b/apps/client/src/app/pages/home/home-page.component.ts index ce053661..3789c8d8 100644 --- a/apps/client/src/app/pages/home/home-page.component.ts +++ b/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'; diff --git a/apps/client/src/app/pages/home/home-page.html b/apps/client/src/app/pages/home/home-page.html index d172d3f0..5e37d668 100644 --- a/apps/client/src/app/pages/home/home-page.html +++ b/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" diff --git a/apps/client/src/app/pages/home/home-page.module.ts b/apps/client/src/app/pages/home/home-page.module.ts index 1bd5a583..58144cd3 100644 --- a/apps/client/src/app/pages/home/home-page.module.ts +++ b/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'; diff --git a/apps/client/src/app/pages/landing/landing-page.component.ts b/apps/client/src/app/pages/landing/landing-page.component.ts index e8ce6c78..4875afe9 100644 --- a/apps/client/src/app/pages/landing/landing-page.component.ts +++ b/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'; diff --git a/apps/client/src/app/pages/landing/landing-page.html b/apps/client/src/app/pages/landing/landing-page.html index c5e4ec04..9c07d831 100644 --- a/apps/client/src/app/pages/landing/landing-page.html +++ b/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" diff --git a/apps/client/src/app/pages/landing/landing-page.module.ts b/apps/client/src/app/pages/landing/landing-page.module.ts index 9c9cec78..91eaab96 100644 --- a/apps/client/src/app/pages/landing/landing-page.module.ts +++ b/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'; diff --git a/apps/client/src/app/pages/register/register-page.component.ts b/apps/client/src/app/pages/register/register-page.component.ts index f0e02d35..dc612a52 100644 --- a/apps/client/src/app/pages/register/register-page.component.ts +++ b/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'; diff --git a/apps/client/src/app/pages/zen/zen-page.component.ts b/apps/client/src/app/pages/zen/zen-page.component.ts index 86be093b..f8e257b2 100644 --- a/apps/client/src/app/pages/zen/zen-page.component.ts +++ b/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'; diff --git a/apps/client/src/app/pages/zen/zen-page.html b/apps/client/src/app/pages/zen/zen-page.html index ebd47b1c..25d03622 100644 --- a/apps/client/src/app/pages/zen/zen-page.html +++ b/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" diff --git a/apps/client/src/app/pages/zen/zen-page.module.ts b/apps/client/src/app/pages/zen/zen-page.module.ts index 1cc7e8b6..2106fba6 100644 --- a/apps/client/src/app/pages/zen/zen-page.module.ts +++ b/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'; diff --git a/apps/client/src/app/components/line-chart/interfaces/line-chart.interface.ts b/libs/ui/src/lib/line-chart/interfaces/line-chart.interface.ts similarity index 100% rename from apps/client/src/app/components/line-chart/interfaces/line-chart.interface.ts rename to libs/ui/src/lib/line-chart/interfaces/line-chart.interface.ts diff --git a/apps/client/src/app/components/line-chart/line-chart.component.html b/libs/ui/src/lib/line-chart/line-chart.component.html similarity index 100% rename from apps/client/src/app/components/line-chart/line-chart.component.html rename to libs/ui/src/lib/line-chart/line-chart.component.html diff --git a/apps/client/src/app/components/line-chart/line-chart.component.scss b/libs/ui/src/lib/line-chart/line-chart.component.scss similarity index 100% rename from apps/client/src/app/components/line-chart/line-chart.component.scss rename to libs/ui/src/lib/line-chart/line-chart.component.scss diff --git a/libs/ui/src/lib/line-chart/line-chart.component.stories.ts b/libs/ui/src/lib/line-chart/line-chart.component.stories.ts new file mode 100644 index 00000000..3088f441 --- /dev/null +++ b/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; + +const Template: Story = (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 + } + ] +}; diff --git a/apps/client/src/app/components/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts similarity index 90% rename from apps/client/src/app/components/line-chart/line-chart.component.ts rename to libs/ui/src/lib/line-chart/line-chart.component.ts index 7b773020..57e8b060 100644 --- a/apps/client/src/app/components/line-chart/line-chart.component.ts +++ b/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)` diff --git a/apps/client/src/app/components/line-chart/line-chart.module.ts b/libs/ui/src/lib/line-chart/line-chart.module.ts similarity index 100% rename from apps/client/src/app/components/line-chart/line-chart.module.ts rename to libs/ui/src/lib/line-chart/line-chart.module.ts diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts index 6d541c91..078b3bb9 100644 --- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts +++ b/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',