mirror of https://github.com/ghostfolio/ghostfolio
Browse Source
* Set up Storybook stories for activities table component * Update changelogpull/5690/head
committed by
GitHub
2 changed files with 472 additions and 0 deletions
@ -0,0 +1,471 @@ |
|||||
|
import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface'; |
||||
|
import { GfSymbolPipe } from '@ghostfolio/client/pipes/symbol/symbol.pipe'; |
||||
|
|
||||
|
import { CommonModule } from '@angular/common'; |
||||
|
import { MatButtonModule } from '@angular/material/button'; |
||||
|
import { MatCheckboxModule } from '@angular/material/checkbox'; |
||||
|
import { MatMenuModule } from '@angular/material/menu'; |
||||
|
import { MatPaginatorModule } from '@angular/material/paginator'; |
||||
|
import { MatSortModule } from '@angular/material/sort'; |
||||
|
import { MatTableDataSource, MatTableModule } from '@angular/material/table'; |
||||
|
import { MatTooltipModule } from '@angular/material/tooltip'; |
||||
|
import { RouterModule } from '@angular/router'; |
||||
|
import { IonIcon } from '@ionic/angular/standalone'; |
||||
|
import { moduleMetadata } from '@storybook/angular'; |
||||
|
import type { Meta, StoryObj } from '@storybook/angular'; |
||||
|
import { NotificationService } from 'apps/client/src/app/core/notification/notification.service'; |
||||
|
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
||||
|
|
||||
|
import { GfActivityTypeComponent } from '../activity-type/activity-type.component'; |
||||
|
import { GfEntityLogoComponent } from '../entity-logo'; |
||||
|
import { GfNoTransactionsInfoComponent } from '../no-transactions-info/no-transactions-info.component'; |
||||
|
import { GfValueComponent } from '../value'; |
||||
|
import { GfActivitiesTableComponent } from './activities-table.component'; |
||||
|
|
||||
|
const activities: Activity[] = [ |
||||
|
{ |
||||
|
accountId: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
accountUserId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
comment: null, |
||||
|
createdAt: new Date('2025-04-09T13:47:33.133Z'), |
||||
|
currency: 'USD', |
||||
|
date: new Date('2025-04-09T13:45:45.504Z'), |
||||
|
fee: 1, |
||||
|
id: 'a76968ff-80a4-4453-81ed-c3627dea3919', |
||||
|
isDraft: false, |
||||
|
quantity: 115, |
||||
|
symbolProfileId: '21746431-d612-4298-911c-3099b2a43003', |
||||
|
type: 'BUY', |
||||
|
unitPrice: 103.543, |
||||
|
updatedAt: new Date('2025-05-31T18:43:01.840Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
account: { |
||||
|
balance: 150.2, |
||||
|
comment: null, |
||||
|
createdAt: new Date('2025-05-31T13:00:13.940Z'), |
||||
|
currency: 'USD', |
||||
|
id: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
isExcluded: false, |
||||
|
name: 'Trading Account', |
||||
|
platformId: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
updatedAt: new Date('2025-06-01T06:53:10.569Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
platform: { |
||||
|
id: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
name: 'Interactive Brokers', |
||||
|
url: 'https://interactivebrokers.com' |
||||
|
} |
||||
|
}, |
||||
|
SymbolProfile: { |
||||
|
assetClass: 'EQUITY', |
||||
|
assetSubClass: 'ETF', |
||||
|
comment: null, |
||||
|
countries: [], |
||||
|
createdAt: new Date('2021-06-06T16:12:20.982Z'), |
||||
|
currency: 'USD', |
||||
|
cusip: '922042742', |
||||
|
dataSource: 'YAHOO', |
||||
|
figi: 'BBG000GM5FZ6', |
||||
|
figiComposite: 'BBG000GM5FZ6', |
||||
|
figiShareClass: 'BBG001T2YZG9', |
||||
|
holdings: [], |
||||
|
id: '21746431-d612-4298-911c-3099b2a43003', |
||||
|
isActive: true, |
||||
|
isin: 'US9220427424', |
||||
|
name: 'Vanguard Total World Stock Index Fund ETF Shares', |
||||
|
updatedAt: new Date('2025-10-01T20:09:39.500Z'), |
||||
|
scraperConfiguration: null, |
||||
|
sectors: [], |
||||
|
symbol: 'VT', |
||||
|
symbolMapping: {}, |
||||
|
url: 'https://www.vanguard.com', |
||||
|
userId: null, |
||||
|
activitiesCount: 267, |
||||
|
dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z') |
||||
|
}, |
||||
|
tags: [], |
||||
|
feeInAssetProfileCurrency: 1, |
||||
|
feeInBaseCurrency: 1, |
||||
|
unitPriceInAssetProfileCurrency: 103.543, |
||||
|
value: 11907.445, |
||||
|
valueInBaseCurrency: 11907.445 |
||||
|
}, |
||||
|
{ |
||||
|
accountId: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
accountUserId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
comment: null, |
||||
|
createdAt: new Date('2024-08-07T13:40:39.103Z'), |
||||
|
currency: 'USD', |
||||
|
date: new Date('2024-08-07T13:38:06.289Z'), |
||||
|
fee: 2.97, |
||||
|
id: '0c2f4fbf-6edc-4adc-8f83-abf8148500ec', |
||||
|
isDraft: false, |
||||
|
quantity: 105, |
||||
|
symbolProfileId: '21746431-d612-4298-911c-3099b2a43003', |
||||
|
type: 'BUY', |
||||
|
unitPrice: 110.24, |
||||
|
updatedAt: new Date('2025-05-31T18:46:14.175Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
account: { |
||||
|
balance: 150.2, |
||||
|
comment: null, |
||||
|
createdAt: new Date('2025-05-31T13:00:13.940Z'), |
||||
|
currency: 'USD', |
||||
|
id: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
isExcluded: false, |
||||
|
name: 'Trading Account', |
||||
|
platformId: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
updatedAt: new Date('2025-06-01T06:53:10.569Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
platform: { |
||||
|
id: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
name: 'Interactive Brokers', |
||||
|
url: 'https://interactivebrokers.com' |
||||
|
} |
||||
|
}, |
||||
|
SymbolProfile: { |
||||
|
assetClass: 'EQUITY', |
||||
|
assetSubClass: 'ETF', |
||||
|
comment: null, |
||||
|
countries: [], |
||||
|
createdAt: new Date('2021-06-06T16:12:20.982Z'), |
||||
|
currency: 'USD', |
||||
|
cusip: '922042742', |
||||
|
dataSource: 'YAHOO', |
||||
|
figi: 'BBG000GM5FZ6', |
||||
|
figiComposite: 'BBG000GM5FZ6', |
||||
|
figiShareClass: 'BBG001T2YZG9', |
||||
|
holdings: [], |
||||
|
id: '21746431-d612-4298-911c-3099b2a43003', |
||||
|
isActive: true, |
||||
|
isin: 'US9220427424', |
||||
|
name: 'Vanguard Total World Stock Index Fund ETF Shares', |
||||
|
updatedAt: new Date('2025-10-01T20:09:39.500Z'), |
||||
|
scraperConfiguration: null, |
||||
|
sectors: [], |
||||
|
symbol: 'VT', |
||||
|
symbolMapping: {}, |
||||
|
url: 'https://www.vanguard.com', |
||||
|
userId: null, |
||||
|
activitiesCount: 267, |
||||
|
dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z') |
||||
|
}, |
||||
|
tags: [], |
||||
|
feeInAssetProfileCurrency: 2.97, |
||||
|
feeInBaseCurrency: 2.97, |
||||
|
unitPriceInAssetProfileCurrency: 110.24, |
||||
|
value: 11575.2, |
||||
|
valueInBaseCurrency: 11575.2 |
||||
|
}, |
||||
|
{ |
||||
|
accountId: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
accountUserId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
comment: null, |
||||
|
createdAt: new Date('2024-03-12T15:15:21.217Z'), |
||||
|
currency: 'USD', |
||||
|
date: new Date('2024-03-12T15:14:38.597Z'), |
||||
|
fee: 45.29, |
||||
|
id: 'bfc92677-faf4-4d4f-9762-e0ec056525c2', |
||||
|
isDraft: false, |
||||
|
quantity: 167, |
||||
|
symbolProfileId: '888d4123-db9a-42f3-9775-01b1ae6f9092', |
||||
|
type: 'BUY', |
||||
|
unitPrice: 41.0596, |
||||
|
updatedAt: new Date('2025-05-31T18:49:54.064Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
account: { |
||||
|
balance: 150.2, |
||||
|
comment: null, |
||||
|
createdAt: new Date('2025-05-31T13:00:13.940Z'), |
||||
|
currency: 'USD', |
||||
|
id: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
isExcluded: false, |
||||
|
name: 'Trading Account', |
||||
|
platformId: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
updatedAt: new Date('2025-06-01T06:53:10.569Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
platform: { |
||||
|
id: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
name: 'Interactive Brokers', |
||||
|
url: 'https://interactivebrokers.com' |
||||
|
} |
||||
|
}, |
||||
|
SymbolProfile: { |
||||
|
assetClass: 'LIQUIDITY', |
||||
|
assetSubClass: 'CRYPTOCURRENCY', |
||||
|
comment: null, |
||||
|
countries: [], |
||||
|
createdAt: new Date('2024-03-12T15:15:21.217Z'), |
||||
|
currency: 'USD', |
||||
|
cusip: '463918102', |
||||
|
dataSource: 'YAHOO', |
||||
|
figi: 'BBG01KYQ6PV3', |
||||
|
figiComposite: 'BBG01KYQ6PV3', |
||||
|
figiShareClass: 'BBG01KYQ6QS5', |
||||
|
holdings: [], |
||||
|
id: '888d4123-db9a-42f3-9775-01b1ae6f9092', |
||||
|
isActive: true, |
||||
|
isin: 'CA4639181029', |
||||
|
name: 'iShares Bitcoin Trust', |
||||
|
updatedAt: new Date('2025-09-29T03:14:07.742Z'), |
||||
|
scraperConfiguration: null, |
||||
|
sectors: [], |
||||
|
symbol: 'IBIT', |
||||
|
symbolMapping: {}, |
||||
|
url: 'https://www.ishares.com', |
||||
|
userId: null, |
||||
|
activitiesCount: 6, |
||||
|
dateOfFirstActivity: new Date('2024-01-01T08:00:00.000Z') |
||||
|
}, |
||||
|
tags: [], |
||||
|
feeInAssetProfileCurrency: 45.29, |
||||
|
feeInBaseCurrency: 45.29, |
||||
|
unitPriceInAssetProfileCurrency: 41.0596, |
||||
|
value: 6856.9532, |
||||
|
valueInBaseCurrency: 6856.9532 |
||||
|
}, |
||||
|
{ |
||||
|
accountId: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
accountUserId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
comment: null, |
||||
|
createdAt: new Date('2024-02-23T15:53:46.907Z'), |
||||
|
currency: 'USD', |
||||
|
date: new Date('2024-02-23T15:53:15.745Z'), |
||||
|
fee: 3, |
||||
|
id: '7c9ceb54-acb1-4850-bfb1-adb41c29fd6a', |
||||
|
isDraft: false, |
||||
|
quantity: 81, |
||||
|
symbolProfileId: '36effe43-7cb4-4e8b-b7ac-03ff65702cb9', |
||||
|
type: 'BUY', |
||||
|
unitPrice: 67.995, |
||||
|
updatedAt: new Date('2025-05-31T18:48:48.209Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
account: { |
||||
|
balance: 150.2, |
||||
|
comment: null, |
||||
|
createdAt: new Date('2025-05-31T13:00:13.940Z'), |
||||
|
currency: 'USD', |
||||
|
id: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
isExcluded: false, |
||||
|
name: 'Trading Account', |
||||
|
platformId: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
updatedAt: new Date('2025-06-01T06:53:10.569Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
platform: { |
||||
|
id: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
name: 'Interactive Brokers', |
||||
|
url: 'https://interactivebrokers.com' |
||||
|
} |
||||
|
}, |
||||
|
SymbolProfile: { |
||||
|
assetClass: 'FIXED_INCOME', |
||||
|
assetSubClass: 'BOND', |
||||
|
comment: 'No data', |
||||
|
countries: [], |
||||
|
createdAt: new Date('2022-04-13T20:05:47.301Z'), |
||||
|
currency: 'USD', |
||||
|
cusip: '92206C565', |
||||
|
dataSource: 'YAHOO', |
||||
|
figi: 'BBG00LWSF7T3', |
||||
|
figiComposite: 'BBG00LWSF7T3', |
||||
|
figiShareClass: 'BBG00LWSF8K0', |
||||
|
holdings: [], |
||||
|
id: '36effe43-7cb4-4e8b-b7ac-03ff65702cb9', |
||||
|
isActive: true, |
||||
|
isin: 'US92206C5655', |
||||
|
name: 'Vanguard Total World Bond ETF', |
||||
|
updatedAt: new Date('2025-10-02T06:02:56.314Z'), |
||||
|
|
||||
|
sectors: [], |
||||
|
symbol: 'BNDW', |
||||
|
symbolMapping: {}, |
||||
|
url: 'https://vanguard.com', |
||||
|
userId: null, |
||||
|
activitiesCount: 38, |
||||
|
dateOfFirstActivity: new Date('2022-04-13T20:05:48.742Z') |
||||
|
}, |
||||
|
tags: [], |
||||
|
feeInAssetProfileCurrency: 3, |
||||
|
feeInBaseCurrency: 3, |
||||
|
unitPriceInAssetProfileCurrency: 67.995, |
||||
|
value: 5507.595, |
||||
|
valueInBaseCurrency: 5507.595 |
||||
|
}, |
||||
|
{ |
||||
|
accountId: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
accountUserId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
comment: null, |
||||
|
createdAt: new Date('2023-01-11T14:35:22.325Z'), |
||||
|
currency: 'USD', |
||||
|
date: new Date('2023-01-11T14:34:55.174Z'), |
||||
|
fee: 7.38, |
||||
|
id: '3fe87b3f-78de-407a-bc02-4189b221051f', |
||||
|
isDraft: false, |
||||
|
quantity: 55, |
||||
|
symbolProfileId: '21746431-d612-4298-911c-3099b2a43003', |
||||
|
type: 'BUY', |
||||
|
unitPrice: 89.48, |
||||
|
updatedAt: new Date('2025-05-31T18:46:44.616Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
account: { |
||||
|
balance: 150.2, |
||||
|
comment: null, |
||||
|
createdAt: new Date('2025-05-31T13:00:13.940Z'), |
||||
|
currency: 'USD', |
||||
|
id: '776bd1e9-b2f6-4f7e-933d-18756c2f0625', |
||||
|
isExcluded: false, |
||||
|
name: 'Trading Account', |
||||
|
platformId: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
updatedAt: new Date('2025-06-01T06:53:10.569Z'), |
||||
|
userId: '081aa387-487d-4438-83a4-3060eb2a016e', |
||||
|
platform: { |
||||
|
id: '9da3a8a7-4795-43e3-a6db-ccb914189737', |
||||
|
name: 'Interactive Brokers', |
||||
|
url: 'https://interactivebrokers.com' |
||||
|
} |
||||
|
}, |
||||
|
SymbolProfile: { |
||||
|
assetClass: 'EQUITY', |
||||
|
assetSubClass: 'ETF', |
||||
|
comment: null, |
||||
|
countries: [], |
||||
|
createdAt: new Date('2021-06-06T16:12:20.982Z'), |
||||
|
currency: 'USD', |
||||
|
cusip: '922042742', |
||||
|
dataSource: 'YAHOO', |
||||
|
figi: 'BBG000GM5FZ6', |
||||
|
figiComposite: 'BBG000GM5FZ6', |
||||
|
figiShareClass: 'BBG001T2YZG9', |
||||
|
holdings: [], |
||||
|
id: '21746431-d612-4298-911c-3099b2a43003', |
||||
|
isActive: true, |
||||
|
isin: 'US9220427424', |
||||
|
name: 'Vanguard Total World Stock Index Fund ETF Shares', |
||||
|
updatedAt: new Date('2025-10-01T20:09:39.500Z'), |
||||
|
scraperConfiguration: null, |
||||
|
sectors: [], |
||||
|
symbol: 'VT', |
||||
|
symbolMapping: {}, |
||||
|
url: 'https://www.vanguard.com', |
||||
|
userId: null, |
||||
|
activitiesCount: 267, |
||||
|
dateOfFirstActivity: new Date('2018-05-31T16:00:00.000Z') |
||||
|
}, |
||||
|
tags: [], |
||||
|
feeInAssetProfileCurrency: 7.38, |
||||
|
feeInBaseCurrency: 7.38, |
||||
|
unitPriceInAssetProfileCurrency: 89.48, |
||||
|
value: 4921.4, |
||||
|
valueInBaseCurrency: 4921.4 |
||||
|
} |
||||
|
]; |
||||
|
|
||||
|
const dataSource = new MatTableDataSource<Activity>(activities); |
||||
|
|
||||
|
export default { |
||||
|
title: 'Activities Table', |
||||
|
component: GfActivitiesTableComponent, |
||||
|
decorators: [ |
||||
|
moduleMetadata({ |
||||
|
imports: [ |
||||
|
CommonModule, |
||||
|
GfActivityTypeComponent, |
||||
|
GfEntityLogoComponent, |
||||
|
GfNoTransactionsInfoComponent, |
||||
|
GfSymbolPipe, |
||||
|
GfValueComponent, |
||||
|
IonIcon, |
||||
|
MatButtonModule, |
||||
|
MatCheckboxModule, |
||||
|
MatMenuModule, |
||||
|
MatPaginatorModule, |
||||
|
MatSortModule, |
||||
|
MatTableModule, |
||||
|
MatTooltipModule, |
||||
|
NgxSkeletonLoaderModule, |
||||
|
RouterModule.forChild([]) |
||||
|
], |
||||
|
providers: [NotificationService] |
||||
|
}) |
||||
|
] |
||||
|
} as Meta<GfActivitiesTableComponent>; |
||||
|
|
||||
|
type Story = StoryObj<GfActivitiesTableComponent>; |
||||
|
|
||||
|
export const Loading: Story = { |
||||
|
args: { |
||||
|
baseCurrency: 'USD', |
||||
|
dataSource: undefined, |
||||
|
deviceType: 'desktop', |
||||
|
hasActivities: true, |
||||
|
hasPermissionToCreateActivity: false, |
||||
|
hasPermissionToDeleteActivity: false, |
||||
|
hasPermissionToExportActivities: false, |
||||
|
hasPermissionToOpenDetails: false, |
||||
|
locale: 'en-US', |
||||
|
pageIndex: 0, |
||||
|
pageSize: 10, |
||||
|
showAccountColumn: true, |
||||
|
showActions: false, |
||||
|
showCheckbox: false, |
||||
|
showNameColumn: true, |
||||
|
sortColumn: 'date', |
||||
|
sortDirection: 'desc', |
||||
|
sortDisabled: false, |
||||
|
totalItems: 0 |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export const Default: Story = { |
||||
|
args: { |
||||
|
baseCurrency: 'USD', |
||||
|
dataSource, |
||||
|
deviceType: 'desktop', |
||||
|
hasActivities: true, |
||||
|
hasPermissionToCreateActivity: false, |
||||
|
hasPermissionToDeleteActivity: false, |
||||
|
hasPermissionToExportActivities: false, |
||||
|
hasPermissionToOpenDetails: false, |
||||
|
locale: 'en-US', |
||||
|
pageIndex: 0, |
||||
|
pageSize: 10, |
||||
|
showAccountColumn: true, |
||||
|
showActions: false, |
||||
|
showCheckbox: false, |
||||
|
showNameColumn: true, |
||||
|
sortColumn: 'date', |
||||
|
sortDirection: 'desc', |
||||
|
sortDisabled: false, |
||||
|
totalItems: activities.length |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
export const Pagination: Story = { |
||||
|
args: { |
||||
|
baseCurrency: 'USD', |
||||
|
dataSource: new MatTableDataSource<Activity>( |
||||
|
Array.from({ length: 50 }).map((_, i) => ({ |
||||
|
...(activities[i % activities.length] as Activity), |
||||
|
date: new Date(2025, 5, (i % 28) + 1), |
||||
|
id: `${i}` |
||||
|
})) |
||||
|
), |
||||
|
deviceType: 'desktop', |
||||
|
hasActivities: true, |
||||
|
hasPermissionToCreateActivity: false, |
||||
|
hasPermissionToDeleteActivity: false, |
||||
|
hasPermissionToExportActivities: false, |
||||
|
hasPermissionToOpenDetails: false, |
||||
|
locale: 'en-US', |
||||
|
pageIndex: 0, |
||||
|
pageSize: 10, |
||||
|
showAccountColumn: true, |
||||
|
showActions: false, |
||||
|
showCheckbox: false, |
||||
|
showNameColumn: true, |
||||
|
sortColumn: 'date', |
||||
|
sortDirection: 'desc', |
||||
|
sortDisabled: false, |
||||
|
totalItems: 50 |
||||
|
} |
||||
|
}; |
Loading…
Reference in new issue