Feature/add storybook story for trend indicator component (#346)

* Add storybook story for trend indicator component

* Update changelog

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Set up _Storybook_
   - Added a story for the logo component
   - Added a story for the no transactions info component
+  - Added a story for the trend indicator component
   - Added a story for the value component
 
 ## 1.45.0 - 04.09.2021

apps/api/src/app/portfolio/portfolio.service.ts

@@ -26,7 +26,6 @@ import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
 import {
   PortfolioDetails,
   PortfolioPerformance,
-  PortfolioPosition,
   PortfolioReport,
   PortfolioSummary,
   Position,

apps/client/src/app/components/position/position.module.ts

@@ -3,10 +3,10 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfTrendIndicatorModule } from '@ghostfolio/ui/trend-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfTrendIndicatorModule } from '../trend-indicator/trend-indicator.module';
 import { GfPositionDetailDialogModule } from './position-detail-dialog/position-detail-dialog.module';
 import { PositionComponent } from './position.component';
 

libs/ui/.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<script
+  type="module"
+  src="https://unpkg.com/ionicons@5.5.1/dist/ionicons/ionicons.esm.js"
+></script>
+<script
+  nomodule
+  src="https://unpkg.com/ionicons@5.5.1/dist/ionicons/ionicons.js"
+></script>

libs/ui/src/lib/trend-indicator/index.ts

@@ -0,0 +1 @@
+export * from './trend-indicator.module';

libs/ui/src/lib/trend-indicator/trend-indicator.component.stories.ts

@@ -0,0 +1,50 @@
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { TrendIndicatorComponent } from './trend-indicator.component';
+
+export default {
+  title: 'Trend Indicator',
+  component: TrendIndicatorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<TrendIndicatorComponent>;
+
+const Template: Story<TrendIndicatorComponent> = (
+  args: TrendIndicatorComponent
+) => ({
+  props: args
+});
+
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Delayed = Template.bind({});
+Delayed.args = {
+  marketState: 'delayed',
+  range: '1d'
+};
+
+export const Down = Template.bind({});
+Down.args = {
+  value: -1
+};
+
+export const Up = Template.bind({});
+Up.args = {
+  value: 1
+};
+
+export const MarketClosed = Template.bind({});
+MarketClosed.args = {
+  marketState: 'closed',
+  range: '1d'
+};

apps/client/src/app/components/trend-indicator/trend-indicator.component.ts → libs/ui/src/lib/trend-indicator/trend-indicator.component.ts

@@ -1,10 +1,6 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MarketState } from '@ghostfolio/api/services/interfaces/interfaces';
+import { DateRange } from '@ghostfolio/common/types';
 
 @Component({
   selector: 'gf-trend-indicator',
@@ -12,13 +8,11 @@ import { MarketState } from '@ghostfolio/api/services/interfaces/interfaces';
   templateUrl: './trend-indicator.component.html',
   styleUrls: ['./trend-indicator.component.scss']
 })
-export class TrendIndicatorComponent implements OnInit {
-  @Input() isLoading: boolean;
-  @Input() marketState: MarketState;
-  @Input() range: string;
-  @Input() value: number;
+export class TrendIndicatorComponent {
+  @Input() isLoading = false;
+  @Input() marketState: MarketState = 'open';
+  @Input() range: DateRange = 'max';
+  @Input() value = 0;
 
   public constructor() {}
-
-  public ngOnInit() {}
 }