[UX] Improve page-load axis

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/breakdown_filter.ts

@@ -36,7 +36,7 @@ Then(`breakdown series should appear in chart`, () => {
 
     cy.get('div.echLegendItem__label', DEFAULT_TIMEOUT).should(
       'have.text',
-      'ChromeChrome Mobile WebViewSafariFirefoxMobile SafariChrome MobileChrome Mobile iOSOverall'
+      'OverallChromeChrome Mobile WebViewSafariFirefoxMobile SafariChrome MobileChrome Mobile iOS'
     );
   });
 });

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_dashboard.ts

@@ -26,7 +26,7 @@ Given(`a user browses the APM UI application for RUM Data`, () => {
 });
 
 Then(`should have correct client metrics`, () => {
-  const metrics = ['4 ms', '0.06 s', '55 '];
+  const metrics = ['4 ms', '58 ms', '55'];
 
   verifyClientMetrics(metrics, true);
 });

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts

@@ -56,7 +56,7 @@ Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
 
   const data =
-    filterName === 'os' ? ['5 ms', '0.06 s', '8 '] : ['4 ms', '0.05 s', '28 '];
+    filterName === 'os' ? ['5 ms', '64 ms', '8'] : ['4 ms', '55 ms', '28'];
 
   verifyClientMetrics(data, true);
 

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/percentile_select.ts

@@ -18,7 +18,7 @@ When('the user changes the selected percentile', () => {
 });
 
 Then(`it displays client metric related to that percentile`, () => {
-  const metrics = ['14 ms', '0.13 s', '55 '];
+  const metrics = ['14 ms', '131 ms', '55'];
 
   verifyClientMetrics(metrics, false);
 

x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts

@@ -15,7 +15,7 @@ When('the user changes the selected service name', () => {
 });
 
 Then(`it displays relevant client metrics`, () => {
-  const metrics = ['4 ms', '0.06 s', '55 '];
+  const metrics = ['4 ms', '58 ms', '55'];
 
   verifyClientMetrics(metrics, false);
 });

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

@@ -88,6 +88,10 @@ export function PageLoadDistChart({
 
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
+  const euiChartTheme = darkMode
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+
   return (
     <ChartWrapper
       loading={loading || breakdownLoading}
@@ -97,11 +101,7 @@ export function PageLoadDistChart({
         <PageLoadChart>
           <Settings
             baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
-            theme={
-              darkMode
-                ? EUI_CHARTS_THEME_DARK.theme
-                : EUI_CHARTS_THEME_LIGHT.theme
-            }
+            theme={euiChartTheme.theme}
             onBrushEnd={onBrushEnd}
             tooltip={tooltipProps}
             showLegend
@@ -116,17 +116,23 @@ export function PageLoadDistChart({
             id="left"
             title={I18LABELS.percPageLoaded}
             position={Position.Left}
-            tickFormat={(d) => numeral(d).format('0.0') + '%'}
+            labelFormat={(d) => d + ' %'}
           />
           <LineSeries
+            sortIndex={0}
             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 } }}
+            lineSeriesStyle={{
+              point: { visible: false },
+              line: { strokeWidth: 3 },
+            }}
+            color={euiChartTheme.theme.colors?.vizColors?.[1]}
+            tickFormat={(d) => numeral(d).format('0.0') + ' %'}
           />
           {breakdown && (
             <BreakdownSeries

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

@@ -71,6 +71,8 @@ export function PageViewsChart({ data, loading }: Props) {
     });
   };
 
+  const hasBreakdowns = !!data?.topItems?.length;
+
   const breakdownAccessors = data?.topItems?.length ? data?.topItems : ['y'];
 
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
@@ -83,17 +85,17 @@ export function PageViewsChart({ data, loading }: Props) {
     return yAccessor;
   };
 
+  const euiChartTheme = darkMode
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+
   return (
     <ChartWrapper loading={loading} height="calc(100% - 72px)">
       {(!loading || data) && (
         <Chart>
           <Settings
             baseTheme={darkMode ? DARK_THEME : LIGHT_THEME}
-            theme={
-              darkMode
-                ? EUI_CHARTS_THEME_DARK.theme
-                : EUI_CHARTS_THEME_LIGHT.theme
-            }
+            theme={euiChartTheme.theme}
             showLegend
             onBrushEnd={onBrushEnd}
             xDomain={{
@@ -122,6 +124,11 @@ export function PageViewsChart({ data, loading }: Props) {
             stackAccessors={['x']}
             data={data?.items ?? []}
             name={customSeriesNaming}
+            color={
+              !hasBreakdowns
+                ? euiChartTheme.theme.colors?.vizColors?.[1]
+                : undefined
+            }
           />
         </Chart>
       )}

x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx

@@ -11,6 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiToolTip } from '@elastic/eui';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { I18LABELS } from '../translations';
 import { useUxQuery } from '../hooks/useUxQuery';
+import { formatToSec } from '../UXMetrics/KeyUXMetrics';
 import { CsmSharedContext } from '../CsmSharedContext';
 
 const ClFlexGroup = styled(EuiFlexGroup)`
@@ -49,22 +50,22 @@ export function ClientMetrics() {
 
   const STAT_STYLE = { width: '240px' };
 
+  const pageViewsTotal = data?.pageViews?.value ?? 0;
+
   return (
     <ClFlexGroup responsive={false}>
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="l"
-          title={
-            (((data?.backEnd?.value ?? 0) * 1000).toFixed(0) ?? '-') + ' ms'
-          }
+          title={formatToSec(data?.backEnd?.value ?? 0, 'ms')}
           description={I18LABELS.backEnd}
           isLoading={status !== 'success'}
         />
       </EuiFlexItem>
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="l"
-          title={((data?.frontEnd?.value ?? 0)?.toFixed(2) ?? '-') + ' s'}
+          title={formatToSec(data?.frontEnd?.value ?? 0, 'ms')}
           description={I18LABELS.frontEnd}
           isLoading={status !== 'success'}
         />
@@ -73,9 +74,13 @@ export function ClientMetrics() {
         <EuiStat
           titleSize="l"
           title={
-            <EuiToolTip content={data?.pageViews?.value}>
-              <>{numeral(data?.pageViews?.value).format('0 a') ?? '-'}</>
-            </EuiToolTip>
+            pageViewsTotal < 10000 ? (
+              numeral(pageViewsTotal).format('0,0')
+            ) : (
+              <EuiToolTip content={numeral(pageViewsTotal).format('0,0')}>
+                <>{numeral(pageViewsTotal).format('0 a')}</>
+              </EuiToolTip>
+            )
           }
           description={I18LABELS.pageViews}
           isLoading={status !== 'success'}

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

@@ -6,8 +6,13 @@
 
 import { CurveType, Fit, LineSeries, ScaleType } from '@elastic/charts';
 import React, { useEffect } from 'react';
+import {
+  EUI_CHARTS_THEME_DARK,
+  EUI_CHARTS_THEME_LIGHT,
+} from '@elastic/eui/dist/eui_charts_theme';
 import { PercentileRange } from './index';
 import { useBreakdowns } from './use_breakdowns';
+import { useUiSetting$ } from '../../../../../../../../src/plugins/kibana_react/public';
 
 interface Props {
   field: string;
@@ -22,6 +27,12 @@ export function BreakdownSeries({
   percentileRange,
   onLoadingChange,
 }: Props) {
+  const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
+
+  const euiChartTheme = darkMode
+    ? EUI_CHARTS_THEME_DARK
+    : EUI_CHARTS_THEME_LIGHT;
+
   const { data, status } = useBreakdowns({
     field,
     value,
@@ -32,9 +43,11 @@ export function BreakdownSeries({
     onLoadingChange(status !== 'success');
   }, [status, onLoadingChange]);
 
+  // sort index 1 color vizColors1 is already used for overall,
+  // so don't user that here
   return (
     <>
-      {data?.map(({ data: seriesData, name }) => (
+      {data?.map(({ data: seriesData, name }, sortIndex) => (
         <LineSeries
           id={`${field}-${value}-${name}`}
           key={`${field}-${value}-${name}`}
@@ -45,6 +58,11 @@ export function BreakdownSeries({
           data={seriesData ?? []}
           lineSeriesStyle={{ point: { visible: false } }}
           fit={Fit.Linear}
+          color={
+            euiChartTheme.theme.colors?.vizColors?.[
+              sortIndex === 0 ? 0 : sortIndex + 1
+            ]
+          }
         />
       ))}
     </>

x-pack/plugins/apm/public/components/app/RumDashboard/UXMetrics/KeyUXMetrics.tsx

@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { EuiFlexItem, EuiStat, EuiFlexGroup } from '@elastic/eui';
+import numeral from '@elastic/numeral';
 import { UXMetrics } from './index';
 import {
   FCP_LABEL,
@@ -77,7 +78,7 @@ export function KeyUXMetrics({ data, loading }: Props) {
       <EuiFlexItem grow={false} style={STAT_STYLE}>
         <EuiStat
           titleSize="s"
-          title={longTaskData?.noOfLongTasks ?? 0}
+          title={numeral(longTaskData?.noOfLongTasks ?? 0).format('0,0')}
           description={NO_OF_LONG_TASK}
           isLoading={status !== 'success'}
         />