[7.x] [Uptime] Improve ping chart axis (#77992) (#78139)

elastic · Sep 22, 2020 · cca5857 · cca5857
1 parent 0b17050
commit cca5857
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/x-pack/plugins/uptime/public/components/common/charts/duration_line_series_list.tsx b/x-pack/plugins/uptime/public/components/common/charts/duration_line_series_list.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { LineSeries, CurveType } from '@elastic/charts';
+import { LineSeries, CurveType, Fit } from '@elastic/charts';
 import { LocationDurationLine } from '../../../../common/types';
 import { convertMicrosecondsToMilliseconds as microsToMillis } from '../../../lib/helper';
 
@@ -28,6 +28,7 @@ export const DurationLineSeriesList = ({ lines }: Props) => (
         yAccessors={[1]}
         yScaleToDataExtent={false}
         yScaleType="linear"
+        fit={Fit.Linear}
       />
     ))}
   </>

diff --git a/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx b/x-pack/plugins/uptime/public/components/common/charts/ping_histogram.tsx
@@ -17,6 +17,7 @@ import { EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
+import numeral from '@elastic/numeral';
 import moment from 'moment';
 import { getChartDateLabel } from '../../../lib/helper';
 import { ChartWrapper } from './chart_wrapper';
@@ -144,6 +145,8 @@ export const PingHistogramComponent: React.FC<PingHistogramComponentProps> = ({
               defaultMessage: 'Ping Y Axis',
             })}
             position="left"
+            tickFormat={(d) => numeral(d).format('0')}
+            labelFormat={(d) => numeral(d).format('0a')}
             title={i18n.translate('xpack.uptime.snapshotHistogram.yAxis.title', {
               defaultMessage: 'Pings',
               description: