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,