sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

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

Browse Source 
* Add story for line chart component

* Update changelog
This commit is contained in:
Thomas Kaul 2021-09-20 21:44:47 +02:00 committed by GitHub
parent af022ae316
commit 9ae9904389
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 270 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -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

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

@ -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;

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

@ -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({

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

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

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

@ -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';

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

@ -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({

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

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

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

@ -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';

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

@ -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';

1
apps/client/src/app/pages/home/home-page.html
View File

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

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

@ -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';

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

@ -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';

1
apps/client/src/app/pages/landing/landing-page.html
View File

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

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

@ -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';

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

@ -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';

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

@ -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';

1
apps/client/src/app/pages/zen/zen-page.html
View File

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

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

@ -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';

0
apps/client/src/app/components/line-chart/interfaces/line-chart.interface.ts → libs/ui/src/lib/line-chart/interfaces/line-chart.interface.ts
View File

0
apps/client/src/app/components/line-chart/line-chart.component.html → libs/ui/src/lib/line-chart/line-chart.component.html
View File

0
apps/client/src/app/components/line-chart/line-chart.component.scss → libs/ui/src/lib/line-chart/line-chart.component.scss
View File

234
libs/ui/src/lib/line-chart/line-chart.component.stories.ts Normal file
View File

@ -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
}
]
};

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

@ -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)`

0
apps/client/src/app/components/line-chart/line-chart.module.ts → libs/ui/src/lib/line-chart/line-chart.module.ts
View File

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

@ -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',