Feature/improve precision of values in holding detail dialog on mobile (#5337)

* Improve dynamic numerical precision * Shorten date on mobile * Extend Storybook story of value component * Update changelog
7 months ago · fcaa4f7996
parent 6b320dd363
commit fcaa4f7996
9 changed files with 93 additions and 15 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed

 - Extended the import functionality by tags
+- Improved the dynamic numerical precision for various values in the holding detail dialog
+- Shortened the date in the activities table on mobile
 - Introduced the fuzzy search for the accounts endpoint
 - Refactored the fuzzy search for the holdings of the assistant
 - Improved the language localization for Polish (`pl`)
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts
+++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts
@ -3,7 +3,11 @@ import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-foote
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { NUMERICAL_PRECISION_THRESHOLD } from '@ghostfolio/common/config';
+import {
+  NUMERICAL_PRECISION_THRESHOLD_3_FIGURES,
+  NUMERICAL_PRECISION_THRESHOLD_5_FIGURES,
+  NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+} from '@ghostfolio/common/config';
 import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
 import {
  DataProviderInfo,
@ -101,6 +105,7 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
  public assetClass: string;
  public assetSubClass: string;
  public averagePrice: number;
+  public averagePricePrecision = 2;
  public benchmarkDataItems: LineChartItem[];
  public benchmarkLabel = $localize`Average Unit Price`;
  public countries: {
@ -122,11 +127,15 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
  public marketDataItems: MarketData[] = [];
  public marketPrice: number;
  public marketPriceMax: number;
+  public marketPriceMaxPrecision = 2;
  public marketPriceMin: number;
+  public marketPriceMinPrecision = 2;
+  public marketPricePrecision = 2;
  public netPerformance: number;
  public netPerformancePrecision = 2;
  public netPerformancePercent: number;
  public netPerformancePercentWithCurrencyEffect: number;
+  public netPerformancePercentWithCurrencyEffectPrecision = 2;
  public netPerformanceWithCurrencyEffect: number;
  public netPerformanceWithCurrencyEffectPrecision = 2;
  public quantity: number;
@ -274,6 +283,14 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
          value
        }) => {
          this.averagePrice = averagePrice;
+
+          if (
+            this.data.deviceType === 'mobile' &&
+            this.averagePrice >= NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+          ) {
+            this.averagePricePrecision = 0;
+          }
+
          this.benchmarkDataItems = [];
          this.countries = {};
          this.dataProviderInfo = dataProviderInfo;
@ -281,7 +298,8 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {

          if (
            this.data.deviceType === 'mobile' &&
-            this.dividendInBaseCurrency >= NUMERICAL_PRECISION_THRESHOLD
+            this.dividendInBaseCurrency >=
+              NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
          ) {
            this.dividendInBaseCurrencyPrecision = 0;
          }
@ -320,19 +338,42 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
          if (
            this.data.deviceType === 'mobile' &&
            this.investmentInBaseCurrencyWithCurrencyEffect >=
-              NUMERICAL_PRECISION_THRESHOLD
+              NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
          ) {
            this.investmentInBaseCurrencyWithCurrencyEffectPrecision = 0;
          }

          this.marketPrice = marketPrice;
          this.marketPriceMax = marketPriceMax;
+
+          if (
+            this.data.deviceType === 'mobile' &&
+            this.marketPriceMax >= NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+          ) {
+            this.marketPriceMaxPrecision = 0;
+          }
+
          this.marketPriceMin = marketPriceMin;
+
+          if (
+            this.data.deviceType === 'mobile' &&
+            this.marketPriceMin >= NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+          ) {
+            this.marketPriceMinPrecision = 0;
+          }
+
+          if (
+            this.data.deviceType === 'mobile' &&
+            this.marketPrice >= NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
+          ) {
+            this.marketPricePrecision = 0;
+          }
+
          this.netPerformance = netPerformance;

          if (
            this.data.deviceType === 'mobile' &&
-            this.netPerformance >= NUMERICAL_PRECISION_THRESHOLD
+            this.netPerformance >= NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
          ) {
            this.netPerformancePrecision = 0;
          }
@ -342,13 +383,21 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
          this.netPerformancePercentWithCurrencyEffect =
            netPerformancePercentWithCurrencyEffect;

+          if (
+            this.data.deviceType === 'mobile' &&
+            this.netPerformancePercentWithCurrencyEffect >=
+              NUMERICAL_PRECISION_THRESHOLD_3_FIGURES
+          ) {
+            this.netPerformancePercentWithCurrencyEffectPrecision = 0;
+          }
+
          this.netPerformanceWithCurrencyEffect =
            netPerformanceWithCurrencyEffect;

          if (
            this.data.deviceType === 'mobile' &&
            this.netPerformanceWithCurrencyEffect >=
-              NUMERICAL_PRECISION_THRESHOLD
+              NUMERICAL_PRECISION_THRESHOLD_5_FIGURES
          ) {
            this.netPerformanceWithCurrencyEffectPrecision = 0;
          }
--- a/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
+++ b/apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.html
@ -77,6 +77,7 @@
                [colorizeSign]="true"
                [isPercent]="true"
                [locale]="data.locale"
+                [precision]="netPerformancePercentWithCurrencyEffectPrecision"
                [value]="netPerformancePercentWithCurrencyEffect"
              >
                @if (
@ -95,6 +96,7 @@
                size="medium"
                [isCurrency]="true"
                [locale]="data.locale"
+                [precision]="averagePricePrecision"
                [unit]="SymbolProfile?.currency"
                [value]="averagePrice"
                >Average Unit Price</gf-value
@ -106,6 +108,7 @@
                size="medium"
                [isCurrency]="true"
                [locale]="data.locale"
+                [precision]="marketPricePrecision"
                [unit]="SymbolProfile?.currency"
                [value]="marketPrice"
                >Market Price</gf-value
@ -122,6 +125,7 @@
                    marketPriceMin?.toFixed(2) === marketPrice?.toFixed(2) &&
                    marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
                }"
+                [precision]="marketPriceMinPrecision"
                [unit]="SymbolProfile?.currency"
                [value]="marketPriceMin"
                >Minimum Price</gf-value
@ -138,6 +142,7 @@
                    marketPriceMax?.toFixed(2) === marketPrice?.toFixed(2) &&
                    marketPriceMax?.toFixed(2) !== marketPriceMin?.toFixed(2)
                }"
+                [precision]="marketPriceMaxPrecision"
                [unit]="SymbolProfile?.currency"
                [value]="marketPriceMax"
                >Maximum Price</gf-value
@ -208,6 +213,7 @@
              <gf-value
                i18n
                size="medium"
+                [deviceType]="data.deviceType"
                [isDate]="true"
                [locale]="data.locale"
                [value]="firstBuyDate"
--- a/apps/client/src/app/components/home-overview/home-overview.component.ts
+++ b/apps/client/src/app/components/home-overview/home-overview.component.ts
@ -3,7 +3,7 @@ import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { NUMERICAL_PRECISION_THRESHOLD } from '@ghostfolio/common/config';
+import { NUMERICAL_PRECISION_THRESHOLD_6_FIGURES } from '@ghostfolio/common/config';
 import {
  AssetProfileIdentifier,
  LineChartItem,
@ -143,7 +143,7 @@ export class GfHomeOverviewComponent implements OnDestroy, OnInit {
        if (
          this.deviceType === 'mobile' &&
          this.performance.currentValueInBaseCurrency >=
-            NUMERICAL_PRECISION_THRESHOLD
+            NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
        ) {
          this.precision = 0;
        }
--- a/libs/common/src/lib/config.ts
+++ b/libs/common/src/lib/config.ts
@ -136,7 +136,9 @@ export const HEADER_KEY_SKIP_INTERCEPTOR = 'X-Skip-Interceptor';

 export const MAX_TOP_HOLDINGS = 50;

-export const NUMERICAL_PRECISION_THRESHOLD = 100000;
+export const NUMERICAL_PRECISION_THRESHOLD_3_FIGURES = 100;
+export const NUMERICAL_PRECISION_THRESHOLD_5_FIGURES = 10000;
+export const NUMERICAL_PRECISION_THRESHOLD_6_FIGURES = 100000;

 export const PROPERTY_API_KEY_GHOSTFOLIO = 'API_KEY_GHOSTFOLIO';
 export const PROPERTY_API_KEY_OPENROUTER = 'API_KEY_OPENROUTER';
--- a/libs/ui/src/lib/activities-table/activities-table.component.html
+++ b/libs/ui/src/lib/activities-table/activities-table.component.html
@ -171,7 +171,12 @@
      </th>
      <td *matCellDef="let element" class="px-1" mat-cell>
        <div class="d-flex">
-          {{ element.date | date: defaultDateFormat }}
+          <gf-value
+            [deviceType]="deviceType"
+            [isDate]="true"
+            [locale]="locale"
+            [value]="isLoading ? undefined : element.date"
+          />
        </div>
      </td>
    </ng-container>
--- a/libs/ui/src/lib/activities-table/activities-table.component.ts
+++ b/libs/ui/src/lib/activities-table/activities-table.component.ts
@ -6,7 +6,7 @@ import {
  DEFAULT_PAGE_SIZE,
  TAG_ID_EXCLUDE_FROM_ANALYSIS
 } from '@ghostfolio/common/config';
-import { getDateFormatString, getLocale } from '@ghostfolio/common/helper';
+import { getLocale } from '@ghostfolio/common/helper';
 import { AssetProfileIdentifier } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';

@ -128,7 +128,6 @@ export class GfActivitiesTableComponent
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

-  public defaultDateFormat: string;
  public displayedColumns = [];
  public endOfToday = endOfToday();
  public hasDrafts = false;
@ -175,8 +174,6 @@ export class GfActivitiesTableComponent
  }

  public ngOnChanges() {
-    this.defaultDateFormat = getDateFormatString(this.locale);
-
    this.displayedColumns = [
      'select',
      'importStatus',
--- a/libs/ui/src/lib/value/value.component.stories.ts
+++ b/libs/ui/src/lib/value/value.component.stories.ts
@ -11,7 +11,13 @@ export default {
    moduleMetadata({
      imports: [NgxSkeletonLoaderModule]
    })
-  ]
+  ],
+  argTypes: {
+    deviceType: {
+      control: 'select',
+      options: ['desktop', 'mobile']
+    }
+  }
 } as Meta<GfValueComponent>;

 type Story = StoryObj<GfValueComponent>;
@ -31,6 +37,16 @@ export const Currency: Story = {
  }
 };

+export const DateValue: Story = {
+  args: {
+    deviceType: 'desktop',
+    isDate: true,
+    locale: 'en-US',
+    value: new Date().toISOString()
+  },
+  name: 'Date'
+};
+
 export const Label: Story = {
  args: {
    locale: 'en-US',
--- a/libs/ui/src/lib/value/value.component.ts
+++ b/libs/ui/src/lib/value/value.component.ts
@ -22,6 +22,7 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 })
 export class GfValueComponent implements OnChanges {
  @Input() colorizeSign = false;
+  @Input() deviceType: string;
  @Input() icon = '';
  @Input() isAbsolute = false;
  @Input() isCurrency = false;
@ -118,7 +119,7 @@ export class GfValueComponent implements OnChanges {
            {
              day: '2-digit',
              month: '2-digit',
-              year: 'numeric'
+              year: this.deviceType === 'mobile' ? '2-digit' : 'numeric'
            }
          );
        } else {