Merge b4d6f388a6 into 3e6f5b61a1

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
 

libs/ui/src/lib/holdings-table/holdings-table.component.html

@@ -80,9 +80,9 @@
       >
         <div class="d-flex justify-content-end">
           <gf-value
-            [isCurrency]="true"
             [isLoading]="isLoading()"
             [locale]="locale()"
+            [precision]="getQuantityPrecision(element)"
             [value]="element.quantity"
           />
         </div>

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

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,