dotCMS/core#26355 [UI] Only show 3 significant digits in Experiments results table

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-reports/store/dot-experiments-reports-store.spec.ts

@@ -647,4 +647,44 @@ describe('DotExperimentsReportsStore', () => {
             });
         });
     });
+
+    it('should show the summary table data correctly', (done) => {
+        dotExperimentsService.getById.mockReturnValue(
+            of({
+                ...EXPERIMENT_MOCK,
+                status: DotExperimentStatus.RUNNING
+            })
+        );
+        spectator.service.loadExperimentAndResults(EXPERIMENT_MOCK.id);
+
+        const expectedResult = [
+            {
+                conversionRate: '0%',
+                conversionRateRange: '19.4% to 93.2%',
+                conversions: 0,
+                id: '111',
+                isPromoted: false,
+                isWinner: false,
+                name: 'Variant 111 Name',
+                probabilityToBeBest: '7.69%',
+                sessions: 0
+            },
+            {
+                conversionRate: '100%',
+                conversionRateRange: '66.4% to 99.7%',
+                conversions: 2,
+                id: 'DEFAULT',
+                isPromoted: false,
+                isWinner: false,
+                name: 'DEFAULT Name',
+                probabilityToBeBest: '92.3%',
+                sessions: 2
+            }
+        ];
+
+        store.vm$.subscribe(({ detailData }) => {
+            expect(detailData).toEqual(expectedResult);
+            done();
+        });
+    });
 });

core-web/libs/portlets/dot-experiments/portlet/src/lib/dot-experiments-reports/store/dot-experiments-reports-store.ts

@@ -76,6 +76,7 @@ export interface VmReportExperiment {
 }
 
 const NOT_ENOUGH_DATA_LABEL = 'experiments.reports.not.enough.data';
+const CONVERSION_RATE_RANGE_SEPARATOR_LABEL = 'to';
 
 @Injectable()
 export class DotExperimentsReportsStore extends ComponentStore<DotExperimentsReportsState> {
@@ -157,15 +158,19 @@ export class DotExperimentsReportsStore extends ComponentStore<DotExperimentsRep
 
     readonly getDetailData$: Observable<DotExperimentVariantDetail[]> = this.select(
         ({ experiment, results }) => {
-            const noData = this.dotMessageService.get(NOT_ENOUGH_DATA_LABEL);
+            const noDataLabel = this.dotMessageService.get(NOT_ENOUGH_DATA_LABEL);
+            const separatorLabel = this.dotMessageService.get(
+                CONVERSION_RATE_RANGE_SEPARATOR_LABEL
+            );
 
             return results
                 ? Object.values(results.goals.primary.variants).map((variant) => {
                       return this.getDotExperimentVariantDetail(
                           experiment,
                           results,
                           variant,
-                          noData
+                          noDataLabel,
+                          separatorLabel
                       );
                   })
                 : [];
@@ -357,7 +362,8 @@ export class DotExperimentsReportsStore extends ComponentStore<DotExperimentsRep
         experiment: DotExperiment,
         results: DotExperimentResults,
         variant: DotResultVariant,
-        noDataLabel: string
+        noDataLabel: string,
+        separatorLabel: string
     ): DotExperimentVariantDetail {
         const variantBayesianResult = getBayesianVariantResult(
             variant.variantName,
@@ -374,7 +380,8 @@ export class DotExperimentsReportsStore extends ComponentStore<DotExperimentsRep
             ),
             conversionRateRange: getConversionRateRage(
                 variantBayesianResult?.credibilityInterval,
-                noDataLabel
+                noDataLabel,
+                separatorLabel
             ),
             sessions: results.sessions.variants[variant.variantName],
             probabilityToBeBest: getProbabilityToBeBest(

core-web/libs/portlets/dot-experiments/portlet/src/lib/shared/dot-experiment.utils.ts

@@ -86,20 +86,17 @@ export const checkIfExperimentDescriptionIsSaving = (stepStatusSidebar) =>
  *  To put together the summary table in the experiment results screen  */
 export const getConversionRateRage = (
     data: DotCreditabilityInterval,
-    noDataLabel: string
+    noDataLabel: string,
+    separatorLabel: string
 ): string => {
     return data
-        ? `${formatPercent(data.lower, 'en-US', '1.0-2')} to ${formatPercent(
-              data.upper,
-              'en-US',
-              '1.0-2'
-          )}`
+        ? `${getPercentageFormat(data.lower)} ${separatorLabel} ${getPercentageFormat(data.upper)}`
         : noDataLabel;
 };
 
 export const getConversionRate = (uniqueBySession: number, sessions: number): string => {
     if (uniqueBySession !== 0 && sessions !== 0) {
-        return formatPercent(uniqueBySession / sessions, 'en-US', '1.0-2');
+        return getPercentageFormat(uniqueBySession / sessions);
     }
 
     return '0%';
@@ -113,7 +110,7 @@ export const getBayesianVariantResult = (
 };
 
 export const getProbabilityToBeBest = (probability: number, noDataLabel: string): string => {
-    return probability ? formatPercent(probability, 'en-US', '1.0-2') : noDataLabel;
+    return probability ? getPercentageFormat(probability) : noDataLabel;
 };
 
 export const isPromotedVariant = (experiment: DotExperiment, variantName: string): boolean => {
@@ -252,3 +249,12 @@ const arePointsALine = (points: { x: number; y: number }[]): boolean => {
 
     return true;
 };
+
+/**
+ * Given a number, identify if is lower that 10% round 2 decimals if is higher than 10 round to 1 decimal
+ */
+const getPercentageFormat = (value: number): string => {
+    return value < 0.1
+        ? formatPercent(value, 'en-US', '1.0-2')
+        : formatPercent(value, 'en-US', '1.0-1');
+};