diff --git a/CHANGELOG.md b/CHANGELOG.md index 1e49a4967..fe480ef53 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -204,6 +204,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added the platform logo to the platform selector in the create or update account dialog - Added the platform logo to the account selector in the create or update activity dialog - Extended the value component by an `isLoading` attribute to distinguish the loading state from redacted values +- Added the option to enable data decimation in the line chart component ### Changed diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.html b/libs/ui/src/lib/holdings-table/holdings-table.component.html index e66dac725..6ffeb8442 100644 --- a/libs/ui/src/lib/holdings-table/holdings-table.component.html +++ b/libs/ui/src/lib/holdings-table/holdings-table.component.html @@ -80,9 +80,9 @@ >
diff --git a/libs/ui/src/lib/holdings-table/holdings-table.component.ts b/libs/ui/src/lib/holdings-table/holdings-table.component.ts index 7fe21720e..372939c5e 100644 --- a/libs/ui/src/lib/holdings-table/holdings-table.component.ts +++ b/libs/ui/src/lib/holdings-table/holdings-table.component.ts @@ -1,3 +1,4 @@ +import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config'; import { canOpenHoldingDetail, getLocale, @@ -24,6 +25,7 @@ import { MatDialogModule } from '@angular/material/dialog'; import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator'; import { MatSort, MatSortModule } from '@angular/material/sort'; import { MatTableDataSource, MatTableModule } from '@angular/material/table'; +import { AssetSubClass } from '@prisma/client'; import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; import { GfEntityLogoComponent } from '../entity-logo/entity-logo.component'; @@ -103,6 +105,28 @@ export class GfHoldingsTableComponent { return this.hasPermissionToOpenDetails() && canOpenHoldingDetail(holding); } + protected getQuantityPrecision(holding: PortfolioPosition): number { + if (Number.isInteger(holding.quantity)) { + return 0; + } + + if (holding.assetProfile.assetSubClass === AssetSubClass.CRYPTOCURRENCY) { + if (holding.quantity < 10) { + return 8; + } + + if (holding.quantity < 1000) { + return 6; + } + + if (holding.quantity >= NUMERICAL_PRECISION_THRESHOLD_6_FIGURES) { + return 0; + } + } + + return 2; + } + protected onOpenHoldingDialog({ dataSource, symbol diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts index edc377fa3..9a3b18c2e 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.ts +++ b/libs/ui/src/lib/line-chart/line-chart.component.ts @@ -23,6 +23,7 @@ import { import { type AnimationsSpec, Chart, + Decimation, Filler, LinearScale, LineController, @@ -54,6 +55,7 @@ export class GfLineChartComponent @Input() benchmarkLabel = ''; @Input() colorScheme: ColorScheme; @Input() currency: string; + @Input() dataDecimation = false; @Input() historicalDataItems: LineChartItem[]; @Input() isAnimated = false; @Input() label: string; @@ -78,6 +80,7 @@ export class GfLineChartComponent public constructor(private changeDetectorRef: ChangeDetectorRef) { Chart.register( + Decimation, Filler, LineController, LineElement, @@ -183,6 +186,9 @@ export class GfLineChartComponent this.chart.options.plugins ??= {}; this.chart.options.plugins.tooltip = this.getTooltipPluginConfiguration(); + this.chart.options.plugins.decimation = this.dataDecimation + ? { algorithm: 'lttb', enabled: true } + : undefined; this.chart.options.animations = this.isAnimated ? animations : undefined; @@ -202,6 +208,9 @@ export class GfLineChartComponent }, interaction: { intersect: false, mode: 'index' }, plugins: { + decimation: this.dataDecimation + ? { algorithm: 'lttb', enabled: true } + : undefined, legend: { align: 'start', display: this.showLegend,