Add decimal precision to the currency formatter for kG chart

Kolektivo · May 12, 2023 · dff5ad2 · dff5ad2
1 parent 4bf3d9b
commit dff5ad2
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/src/design-system/configuration.ts b/src/design-system/configuration.ts
@@ -7,7 +7,7 @@ export interface IDesignSystemConfiguration {
   components?: [];
   includeAllComponents?: boolean;
   formatNumber?: (value?: string | number | bigint) => string;
-  formatCurrency?: (value?: string | number | bigint) => string;
+  formatCurrency?: (value?: string | number | bigint, decimals?: number) => string;
   formatPercent?: (value?: string | number | bigint) => string;
   formatDateTime?: (value?: string | number | Date) => string;
   formatDate?: (value?: string | number | Date) => string;

diff --git a/src/design-system/index.ts b/src/design-system/index.ts
@@ -38,8 +38,8 @@ export class DesignSystemPlugin implements IRegistry {
     }
 
     if (!instance.#configuration.formatCurrency) {
-      instance.#configuration.formatCurrency = (number?: string | number | bigint) =>
-        new Intl.NumberFormat('default', { style: 'currency', currency: 'usd' }).format(number == null ? 0 : Number(number));
+      instance.#configuration.formatCurrency = (number?: string | number | bigint, decimals = 2) =>
+        new Intl.NumberFormat('default', { style: 'currency', currency: 'usd', minimumFractionDigits: decimals, maximumFractionDigits: decimals }).format(number == null ? 0 : Number(number));
     }
 
     if (!instance.#configuration.formatPercent) {

diff --git a/src/design-system/value-converters/currency.ts b/src/design-system/value-converters/currency.ts
@@ -8,7 +8,7 @@ export type ICurrency = Currency;
 export class Currency {
   constructor(@IDesignSystemConfiguration private readonly configuration: IDesignSystemConfiguration) {}
 
-  public toView(value: string): string | number {
-    return this.configuration.formatCurrency?.(value) ?? '';
+  public toView(value: string, decimals?: number): string | number {
+    return this.configuration.formatCurrency?.(value, decimals) ?? '';
   }
 }
diff --git a/src/pages/reserve/pages/k-guilder/elements/token-info-card/token-info-card.html b/src/pages/reserve/pages/k-guilder/elements/token-info-card/token-info-card.html
@@ -8,7 +8,7 @@
   <k-stack gap="var(--spacing-xl)">
     <k-stack gap="var(--spacing-lg)" direction="row" justify-content="space-between" id="r-kGuilder-tic-stats">
       <label-value title="${i18n.tr('general.token-info-card.current-price')}" tooltip-text="${i18n.tr('general.token-info-card.current-price-tooltip')}">
-        <k-text type="statistic"> ${reserveStore.kGuilderCurrentPrice | currency} </k-text>
+        <k-text type="statistic"> ${reserveStore.kGuilderCurrentPrice | currency:fractionDigits=3} </k-text>
       </label-value>
       <label-value title="${i18n.tr('general.token-info-card.total-supply')}" tooltip-text="${i18n.tr('general.token-info-card.total-supply-tooltip')}">
         <k-text type="statistic">

diff --git a/src/pages/reserve/pages/k-guilder/elements/value-ratio-card/value-ratio-card.ts b/src/pages/reserve/pages/k-guilder/elements/value-ratio-card/value-ratio-card.ts
@@ -49,7 +49,7 @@ export class ValueRatioCard implements ICustomElementViewModel {
       itemSort: (a, b, data) => b.datasetIndex - a.datasetIndex,
       callbacks: {
         title: (x) => this.i18n.tr('timestamp', { date: new Date(Number(x[0].label)) }),
-        label: (x) => (x.dataset.label ? `${x.dataset.label}: ${this.currencyValueConverter?.toView(`${x.raw as string}`) ?? ''}` : ''),
+        label: (x) => (x.dataset.label ? `${x.dataset.label}: ${this.currencyValueConverter?.toView(`${x.raw as string}`, 4) ?? ''}` : ''),
         labelColor: (context) => {
           return {
             backgroundColor: context.dataset.pointBorderColor,
@@ -66,7 +66,7 @@ export class ValueRatioCard implements ICustomElementViewModel {
   }
   get yLabelFormat(): Record<string, unknown> {
     return {
-      callback: (value: number) => this.currencyValueConverter?.toView(value.toString()) ?? '',
+      callback: (value: number) => this.currencyValueConverter?.toView(value.toString(), 4) ?? '',
     };
   }
   get xLabelFormat(): Record<string, unknown> {