[APM] Domain for charts is based on query range (#91755)

* fixing rounding issue * addressing PR comments
elastic · Feb 18, 2021 · 0337d7d · 0337d7d
1 parent 2037c1b
commit 0337d7d
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
diff --git a/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
@@ -24,15 +24,13 @@ import {
 } from '@elastic/charts';
 import { EuiIcon } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import moment from 'moment';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import { useChartTheme } from '../../../../../observability/public';
 import { asAbsoluteDateTime } from '../../../../common/utils/formatters';
 import { RectCoordinate, TimeSeries } from '../../../../typings/timeseries';
 import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { useTheme } from '../../../hooks/use_theme';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useAnnotationsContext } from '../../../context/annotations/use_annotations_context';
 import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context';
 import { unit } from '../../../style/variables';
@@ -78,14 +76,13 @@ export function TimeseriesChart({
   const history = useHistory();
   const { annotations } = useAnnotationsContext();
   const { setPointerEvent, chartRef } = useChartPointerEventContext();
-  const { urlParams } = useUrlParams();
   const theme = useTheme();
   const chartTheme = useChartTheme();
 
-  const { start, end } = urlParams;
+  const xValues = timeseries.flatMap(({ data }) => data.map(({ x }) => x));
 
-  const min = moment.utc(start).valueOf();
-  const max = moment.utc(end).valueOf();
+  const min = Math.min(...xValues);
+  const max = Math.max(...xValues);
 
   const xFormatter = niceTimeFormatter([min, max]);
 

diff --git a/x-pack/plugins/apm/public/context/url_params_context/helpers.test.ts b/x-pack/plugins/apm/public/context/url_params_context/helpers.test.ts
@@ -13,45 +13,45 @@ describe('url_params_context helpers', () => {
   describe('getDateRange', () => {
     describe('with non-rounded dates', () => {
       describe('one minute', () => {
-        it('rounds the values', () => {
+        it('rounds the start value to minute', () => {
           expect(
             helpers.getDateRange({
               state: {},
               rangeFrom: '2021-01-28T05:47:52.134Z',
               rangeTo: '2021-01-28T05:48:55.304Z',
             })
           ).toEqual({
-            start: '2021-01-28T05:47:50.000Z',
-            end: '2021-01-28T05:49:00.000Z',
+            start: '2021-01-28T05:47:00.000Z',
+            end: '2021-01-28T05:48:55.304Z',
           });
         });
       });
       describe('one day', () => {
-        it('rounds the values', () => {
+        it('rounds the start value to minute', () => {
           expect(
             helpers.getDateRange({
               state: {},
               rangeFrom: '2021-01-27T05:46:07.377Z',
               rangeTo: '2021-01-28T05:46:13.367Z',
             })
           ).toEqual({
-            start: '2021-01-27T03:00:00.000Z',
-            end: '2021-01-28T06:00:00.000Z',
+            start: '2021-01-27T05:46:00.000Z',
+            end: '2021-01-28T05:46:13.367Z',
           });
         });
       });
 
       describe('one year', () => {
-        it('rounds the values', () => {
+        it('rounds the start value to minute', () => {
           expect(
             helpers.getDateRange({
               state: {},
               rangeFrom: '2020-01-28T05:52:36.290Z',
               rangeTo: '2021-01-28T05:52:39.741Z',
             })
           ).toEqual({
-            start: '2020-01-01T00:00:00.000Z',
-            end: '2021-02-01T00:00:00.000Z',
+            start: '2020-01-28T05:52:00.000Z',
+            end: '2021-01-28T05:52:39.741Z',
           });
         });
       });

diff --git a/x-pack/plugins/apm/public/context/url_params_context/helpers.ts b/x-pack/plugins/apm/public/context/url_params_context/helpers.ts
@@ -6,8 +6,8 @@
  */
 
 import datemath from '@elastic/datemath';
-import { scaleUtc } from 'd3-scale';
 import { compact, pickBy } from 'lodash';
+import moment from 'moment';
 import { IUrlParams } from './types';
 
 function getParsedDate(rawDate?: string, options = {}) {
@@ -42,13 +42,12 @@ export function getDateRange({
     return { start: state.start, end: state.end };
   }
 
-  // Calculate ticks for the time ranges to produce nicely rounded values.
-  const ticks = scaleUtc().domain([start, end]).nice().ticks();
+  // rounds down start to minute
+  const roundedStart = moment(start).startOf('minute');
 
-  // Return the first and last tick values.
   return {
-    start: ticks[0].toISOString(),
-    end: ticks[ticks.length - 1].toISOString(),
+    start: roundedStart.toISOString(),
+    end: end.toISOString(),
   };
 }
 

diff --git a/x-pack/plugins/apm/public/context/url_params_context/url_params_context.test.tsx b/x-pack/plugins/apm/public/context/url_params_context/url_params_context.test.tsx
@@ -52,8 +52,8 @@ describe('UrlParamsContext', () => {
     const params = getDataFromOutput(wrapper);
 
     expect([params.start, params.end]).toEqual([
-      '2010-03-15T00:00:00.000Z',
-      '2010-04-11T00:00:00.000Z',
+      '2010-03-15T12:00:00.000Z',
+      '2010-04-10T12:00:00.000Z',
     ]);
   });
 
@@ -71,8 +71,8 @@ describe('UrlParamsContext', () => {
     const params = getDataFromOutput(wrapper);
 
     expect([params.start, params.end]).toEqual([
-      '2009-03-15T00:00:00.000Z',
-      '2009-04-11T00:00:00.000Z',
+      '2009-03-15T12:00:00.000Z',
+      '2009-04-10T12:00:00.000Z',
     ]);
   });
 
@@ -92,7 +92,7 @@ describe('UrlParamsContext', () => {
 
     expect([params.start, params.end]).toEqual([
       '1969-12-31T00:00:00.000Z',
-      '1970-01-01T00:00:00.000Z',
+      '1969-12-31T23:59:59.999Z',
     ]);
 
     nowSpy.mockRestore();
@@ -145,8 +145,8 @@ describe('UrlParamsContext', () => {
     const params = getDataFromOutput(wrapper);
 
     expect([params.start, params.end]).toEqual([
-      '2005-09-19T00:00:00.000Z',
-      '2005-10-23T00:00:00.000Z',
+      '2005-09-20T12:00:00.000Z',
+      '2005-10-21T12:00:00.000Z',
     ]);
   });
 
@@ -196,7 +196,7 @@ describe('UrlParamsContext', () => {
 
     expect([params.start, params.end]).toEqual([
       '2000-06-14T00:00:00.000Z',
-      '2000-06-15T00:00:00.000Z',
+      '2000-06-14T23:59:59.999Z',
     ]);
   });
 });