[UX]Page load chart breakdown tooltip formatting (#83627)

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/apm/public/components/app/RumDashboard/PageLoadDistribution/BreakdownSeries.tsx

@@ -6,6 +6,7 @@
 
 import { CurveType, Fit, LineSeries, ScaleType } from '@elastic/charts';
 import React, { useEffect } from 'react';
+import numeral from '@elastic/numeral';
 import {
   EUI_CHARTS_THEME_DARK,
   EUI_CHARTS_THEME_LIGHT,
@@ -63,6 +64,7 @@ export function BreakdownSeries({
               sortIndex === 0 ? 0 : sortIndex + 1
             ]
           }
+          tickFormat={(d) => numeral(d).format('0.0') + ' %'}
         />
       ))}
     </>

x-pack/plugins/apm/server/lib/rum_client/get_page_load_distribution.ts

@@ -15,6 +15,17 @@ export function microToSec(val: number) {
   return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100;
 }
 
+export function removeZeroesFromTail(
+  distData: Array<{ x: number; y: number }>
+) {
+  if (distData.length > 0) {
+    while (distData[distData.length - 1].y === 0) {
+      distData.pop();
+    }
+  }
+  return distData;
+}
+
 export const getPLDChartSteps = ({
   maxDuration,
   minDuration,
@@ -132,18 +143,14 @@ export async function getPageLoadDistribution({
   }
 
   // calculate the diff to get actual page load on specific duration value
-  const pageDist = pageDistVals.map(({ key, value }, index: number, arr) => {
+  let pageDist = pageDistVals.map(({ key, value }, index: number, arr) => {
     return {
       x: microToSec(key),
       y: index === 0 ? value : value - arr[index - 1].value,
     };
   });
 
-  if (pageDist.length > 0) {
-    while (pageDist[pageDist.length - 1].y === 0) {
-      pageDist.pop();
-    }
-  }
+  pageDist = removeZeroesFromTail(pageDist);
 
   Object.entries(durPercentiles?.values ?? {}).forEach(([key, val]) => {
     if (durPercentiles?.values?.[key]) {

x-pack/plugins/apm/server/lib/rum_client/get_pl_dist_breakdown.ts

@@ -19,6 +19,7 @@ import {
   getPLDChartSteps,
   MICRO_TO_SEC,
   microToSec,
+  removeZeroesFromTail,
 } from './get_page_load_distribution';
 
 export const getBreakdownField = (breakdown: string) => {
@@ -95,14 +96,21 @@ export const getPageLoadDistBreakdown = async ({
   const pageDistBreakdowns = aggregations?.breakdowns.buckets;
 
   return pageDistBreakdowns?.map(({ key, page_dist: pageDist }) => {
-    return {
-      name: String(key),
-      data: pageDist.values?.map(({ key: pKey, value }, index: number, arr) => {
+    let seriesData = pageDist.values?.map(
+      ({ key: pKey, value }, index: number, arr) => {
         return {
           x: microToSec(pKey),
           y: index === 0 ? value : value - arr[index - 1].value,
         };
-      }),
+      }
+    );
+
+    // remove 0 values from tail
+    seriesData = removeZeroesFromTail(seriesData);
+
+    return {
+      name: String(key),
+      data: seriesData,
     };
   });
 };