From af022ae316aecc0c1caae5bb8799373e44357ec2 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Mon, 20 Sep 2021 20:45:58 +0200 Subject: [PATCH] Feature/add story for portfolio proportion chart component (#384) * Add story * Use new component * Update changelog --- CHANGELOG.md | 6 +++ .../allocations/allocations-page.module.ts | 2 +- libs/common/src/lib/helper.ts | 2 +- .../portfolio-proportion-chart.component.html | 0 .../portfolio-proportion-chart.component.scss | 0 ...olio-proportion-chart.component.stories.ts | 38 +++++++++++++++++++ .../portfolio-proportion-chart.component.ts | 25 +++++++----- .../portfolio-proportion-chart.module.ts | 0 libs/ui/tsconfig.json | 2 +- 9 files changed, 62 insertions(+), 13 deletions(-) rename {apps/client/src/app/components => libs/ui/src/lib}/portfolio-proportion-chart/portfolio-proportion-chart.component.html (100%) rename {apps/client/src/app/components => libs/ui/src/lib}/portfolio-proportion-chart/portfolio-proportion-chart.component.scss (100%) create mode 100644 libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.stories.ts rename {apps/client/src/app/components => libs/ui/src/lib}/portfolio-proportion-chart/portfolio-proportion-chart.component.ts (94%) rename {apps/client/src/app/components => libs/ui/src/lib}/portfolio-proportion-chart/portfolio-proportion-chart.module.ts (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d8e522b3..b7b097563 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts index 26ef795ff..809b29bd7 100644 --- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts +++ b/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'; diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts index cfbbcd603..572724621 100644 --- a/libs/common/src/lib/helper.ts +++ b/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' }; } } diff --git a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.html b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html similarity index 100% rename from apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.html rename to libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.html diff --git a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.scss b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.scss similarity index 100% rename from apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.scss rename to libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.scss 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 new file mode 100644 index 000000000..6d541c911 --- /dev/null +++ b/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; + +const Template: Story = ( + 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 } + } +}; diff --git a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts similarity index 94% rename from apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts rename to libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts index e98d594a1..5001fc758 100644 --- a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts +++ b/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() keys: string[]; - @Input() locale: string; + @Input() isInPercent = false; + @Input() keys: string[] = []; + @Input() locale = ''; @Input() maxItems?: number; @Input() showLabels = false; @Input() positions: { [symbol: string]: Pick & { value: number }; - }; + } = {}; - @ViewChild('chartCanvas') chartCanvas; + @ViewChild('chartCanvas') chartCanvas: ElementRef; 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 * context.raw; diff --git a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.module.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.module.ts similarity index 100% rename from apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.module.ts rename to libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.module.ts diff --git a/libs/ui/tsconfig.json b/libs/ui/tsconfig.json index 93b76eee5..849a0b361 100644 --- a/libs/ui/tsconfig.json +++ b/libs/ui/tsconfig.json @@ -15,7 +15,7 @@ ], "compilerOptions": { "forceConsistentCasingInFileNames": true, - "strict": true, + "strict": false, "noImplicitReturns": true, "noFallthroughCasesInSwitch": true },