[CSM Dashboard] Remove points from line chart (#77617)

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

Author: shahzad31

x-pack/plugins/apm/public/components/app/RumDashboard/Breakdowns/BreakdownFilter.tsx

@@ -75,8 +75,9 @@ export function BreakdownFilter({
   const onOptionChange = (value: string) => {
     if (value === NO_BREAKDOWN) {
       onBreakdownChange(null);
+    } else {
+      onBreakdownChange(items.find(({ fieldName }) => fieldName === value)!);
     }
-    onBreakdownChange(items.find(({ fieldName }) => fieldName === value)!);
   };
 
   return (

x-pack/plugins/apm/public/components/app/RumDashboard/Charts/PageLoadDistChart.tsx

@@ -18,6 +18,7 @@ import {
   TooltipValueFormatter,
   DARK_THEME,
   LIGHT_THEME,
+  Fit,
 } from '@elastic/charts';
 import {
   EUI_CHARTS_THEME_DARK,
@@ -115,12 +116,14 @@ export function PageLoadDistChart({
             tickFormat={(d) => numeral(d).format('0.0') + '%'}
           />
           <LineSeries
+            fit={Fit.Linear}
             id={'PagesPercentage'}
             name={I18LABELS.overall}
             xScaleType={ScaleType.Linear}
             yScaleType={ScaleType.Linear}
             data={data?.pageLoadDistribution ?? []}
             curve={CurveType.CURVE_CATMULL_ROM}
+            lineSeriesStyle={{ point: { visible: false } }}
           />
           {breakdown && (
             <BreakdownSeries

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

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { CurveType, LineSeries, ScaleType } from '@elastic/charts';
+import { CurveType, Fit, LineSeries, ScaleType } from '@elastic/charts';
 import React, { useEffect } from 'react';
 import { PercentileRange } from './index';
 import { useBreakdowns } from './use_breakdowns';
@@ -41,8 +41,10 @@ export function BreakdownSeries({
           name={name}
           xScaleType={ScaleType.Linear}
           yScaleType={ScaleType.Linear}
+          curve={CurveType.CURVE_CATMULL_ROM}
           data={seriesData ?? []}
-          curve={CurveType.CURVE_NATURAL}
+          lineSeriesStyle={{ point: { visible: false } }}
+          fit={Fit.Linear}
         />
       ))}
     </>

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

@@ -15,10 +15,27 @@ import {
 
 export const MICRO_TO_SEC = 1000000;
 
+const NUMBER_OF_PLD_STEPS = 100;
+
 export function microToSec(val: number) {
   return Math.round((val / MICRO_TO_SEC + Number.EPSILON) * 100) / 100;
 }
 
+export const getPLDChartSteps = ({
+  maxDuration,
+  minDuration,
+}: {
+  maxDuration: number;
+  minDuration: number;
+}) => {
+  const stepValue = (maxDuration - minDuration) / NUMBER_OF_PLD_STEPS;
+  const stepValues = [];
+  for (let i = 1; i < NUMBER_OF_PLD_STEPS + 1; i++) {
+    stepValues.push((stepValue * i + minDuration).toFixed(2));
+  }
+  return stepValues;
+};
+
 export async function getPageLoadDistribution({
   setup,
   minPercentile,
@@ -105,11 +122,7 @@ const getPercentilesDistribution = async ({
   minDuration: number;
   maxDuration: number;
 }) => {
-  const stepValue = (maxDuration - minDuration) / 100;
-  const stepValues = [];
-  for (let i = 1; i < 101; i++) {
-    stepValues.push((stepValue * i + minDuration).toFixed(2));
-  }
+  const stepValues = getPLDChartSteps({ maxDuration, minDuration });
 
   const projection = getRumPageLoadTransactionsProjection({
     setup,

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

@@ -19,7 +19,11 @@ import {
   USER_AGENT_OS,
   TRANSACTION_DURATION,
 } from '../../../common/elasticsearch_fieldnames';
-import { MICRO_TO_SEC, microToSec } from './get_page_load_distribution';
+import {
+  getPLDChartSteps,
+  MICRO_TO_SEC,
+  microToSec,
+} from './get_page_load_distribution';
 
 export const getBreakdownField = (breakdown: string) => {
   switch (breakdown) {
@@ -47,13 +51,10 @@ export const getPageLoadDistBreakdown = async ({
   breakdown: string;
 }) => {
   // convert secs to micros
-  const stepValue =
-    (maxDuration * MICRO_TO_SEC - minDuration * MICRO_TO_SEC) / 50;
-  const stepValues = [];
-
-  for (let i = 1; i < 51; i++) {
-    stepValues.push((stepValue * i + minDuration).toFixed(2));
-  }
+  const stepValues = getPLDChartSteps({
+    minDuration: minDuration * MICRO_TO_SEC,
+    maxDuration: maxDuration * MICRO_TO_SEC,
+  });
 
   const projection = getRumPageLoadTransactionsProjection({
     setup,

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

@@ -124,7 +124,7 @@ export async function getWebCoreVitals({
 
   // Divide by 1000 to convert ms into seconds
   return {
-    cls: String(cls?.values['50.0'] || 0),
+    cls: String(cls?.values['50.0']?.toFixed(2) || 0),
     fid: ((fid?.values['50.0'] || 0) / 1000).toFixed(2),
     lcp: ((lcp?.values['50.0'] || 0) / 1000).toFixed(2),
     tbt: ((tbt?.values['50.0'] || 0) / 1000).toFixed(2),

x-pack/test/apm_api_integration/trial/tests/csm/web_core_vitals.ts

@@ -52,7 +52,7 @@ export default function rumServicesApiTests({ getService }: FtrProviderContext)
 
         expectSnapshot(response.body).toMatchInline(`
           Object {
-            "cls": "0",
+            "cls": "0.00",
             "clsRanks": Array [
               100,
               0,