[APM] Adding comparison latency chart

x-pack/plugins/apm/public/components/shared/charts/latency_chart/index.tsx

@@ -13,6 +13,7 @@ import { LatencyAggregationType } from '../../../../../common/latency_aggregatio
 import { getDurationFormatter } from '../../../../../common/utils/formatters';
 import { useLicenseContext } from '../../../../context/license/use_license_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { useTheme } from '../../../../hooks/use_theme';
 import { useTransactionLatencyChartsFetcher } from '../../../../hooks/use_transaction_latency_chart_fetcher';
 import { TimeseriesChart } from '../../../shared/charts/timeseries_chart';
 import {
@@ -21,6 +22,7 @@ import {
 } from '../../../shared/charts/transaction_charts/helper';
 import { MLHeader } from '../../../shared/charts/transaction_charts/ml_header';
 import * as urlHelpers from '../../../shared/Links/url_helpers';
+import { getComparisonChartTheme } from '../../time_comparison/get_time_range_comparison';
 
 interface Props {
   height?: number;
@@ -34,18 +36,25 @@ const options: Array<{ value: LatencyAggregationType; text: string }> = [
 
 export function LatencyChart({ height }: Props) {
   const history = useHistory();
+  const theme = useTheme();
+  const comparisonChartTheme = getComparisonChartTheme(theme);
   const { urlParams } = useUrlParams();
-  const { latencyAggregationType } = urlParams;
+  const { latencyAggregationType, comparisonEnabled } = urlParams;
   const license = useLicenseContext();
 
   const {
     latencyChartsData,
     latencyChartsStatus,
   } = useTransactionLatencyChartsFetcher();
 
-  const { latencyTimeseries, anomalyTimeseries, mlJobId } = latencyChartsData;
+  const {
+    currentPeriod,
+    previousPeriod,
+    anomalyTimeseries,
+    mlJobId,
+  } = latencyChartsData;
 
-  const latencyMaxY = getMaxY(latencyTimeseries);
+  const latencyMaxY = getMaxY(currentPeriod);
   const latencyFormatter = getDurationFormatter(latencyMaxY);
 
   return (
@@ -99,7 +108,11 @@ export function LatencyChart({ height }: Props) {
           height={height}
           fetchStatus={latencyChartsStatus}
           id="latencyChart"
-          timeseries={latencyTimeseries}
+          customTheme={comparisonChartTheme}
+          timeseries={[
+            ...currentPeriod,
+            ...(comparisonEnabled && previousPeriod ? [previousPeriod] : []),
+          ]}
           yLabelFormat={getResponseTimeTickFormatter(latencyFormatter)}
           anomalyTimeseries={anomalyTimeseries}
         />

x-pack/plugins/apm/public/hooks/use_transaction_latency_chart_fetcher.ts

@@ -12,16 +12,34 @@ import { useUrlParams } from '../context/url_params_context/use_url_params';
 import { useApmServiceContext } from '../context/apm_service/use_apm_service_context';
 import { getLatencyChartSelector } from '../selectors/latency_chart_selectors';
 import { useTheme } from './use_theme';
+import { getTimeRangeComparison } from '../components/shared/time_comparison/get_time_range_comparison';
 
 export function useTransactionLatencyChartsFetcher() {
   const { serviceName } = useParams<{ serviceName?: string }>();
   const { transactionType } = useApmServiceContext();
   const theme = useTheme();
   const {
-    urlParams: { start, end, transactionName, latencyAggregationType },
+    urlParams: {
+      start,
+      end,
+      transactionName,
+      latencyAggregationType,
+      comparisonType,
+    },
     uiFilters,
   } = useUrlParams();
 
+  const {
+    comparisonStart = undefined,
+    comparisonEnd = undefined,
+  } = comparisonType
+    ? getTimeRangeComparison({
+        start,
+        end,
+        comparisonType,
+      })
+    : {};
+
   const { data, error, status } = useFetcher(
     (callApmApi) => {
       if (
@@ -43,6 +61,8 @@ export function useTransactionLatencyChartsFetcher() {
               transactionName,
               uiFilters: JSON.stringify(uiFilters),
               latencyAggregationType,
+              comparisonStart,
+              comparisonEnd,
             },
           },
         });
@@ -56,6 +76,8 @@ export function useTransactionLatencyChartsFetcher() {
       transactionType,
       uiFilters,
       latencyAggregationType,
+      comparisonStart,
+      comparisonEnd,
     ]
   );
 

x-pack/plugins/apm/public/selectors/latency_chart_selector.test.ts

@@ -18,12 +18,19 @@ const theme = {
     euiColorVis5: 'red',
     euiColorVis7: 'black',
     euiColorVis9: 'yellow',
+    euiColorLightestShade: 'green',
   },
 } as EuiTheme;
 
 const latencyChartData = {
-  overallAvgDuration: 1,
-  latencyTimeseries: [{ x: 1, y: 10 }],
+  currentPeriod: {
+    overallAvgDuration: 1,
+    latencyTimeseries: [{ x: 1, y: 10 }],
+  },
+  previousPeriod: {
+    overallAvgDuration: 1,
+    latencyTimeseries: [{ x: 1, y: 10 }],
+  },
   anomalyTimeseries: {
     jobId: '1',
     anomalyBoundaries: [{ x: 1, y: 2, y0: 1 }],
@@ -36,21 +43,21 @@ describe('getLatencyChartSelector', () => {
     it('returns default values when data is undefined', () => {
       const latencyChart = getLatencyChartSelector({ theme });
       expect(latencyChart).toEqual({
-        latencyTimeseries: [],
+        currentPeriod: [],
         mlJobId: undefined,
         anomalyTimeseries: undefined,
       });
     });
 
     it('returns average timeseries', () => {
-      const { anomalyTimeseries, ...latencyWithouAnomaly } = latencyChartData;
+      const { anomalyTimeseries, ...latencyWithoutAnomaly } = latencyChartData;
       const latencyTimeseries = getLatencyChartSelector({
-        latencyChart: latencyWithouAnomaly as LatencyChartsResponse,
+        latencyChart: latencyWithoutAnomaly as LatencyChartsResponse,
         theme,
         latencyAggregationType: LatencyAggregationType.avg,
       });
       expect(latencyTimeseries).toEqual({
-        latencyTimeseries: [
+        currentPeriod: [
           {
             title: 'Average',
             data: [{ x: 1, y: 10 }],
@@ -59,46 +66,65 @@ describe('getLatencyChartSelector', () => {
             color: 'blue',
           },
         ],
+        previousPeriod: {
+          color: 'green',
+          data: [{ x: 1, y: 10 }],
+          type: 'area',
+          title: 'Previous period',
+        },
       });
     });
 
     it('returns 95th percentile timeseries', () => {
-      const { anomalyTimeseries, ...latencyWithouAnomaly } = latencyChartData;
+      const { anomalyTimeseries, ...latencyWithoutAnomaly } = latencyChartData;
       const latencyTimeseries = getLatencyChartSelector({
-        latencyChart: latencyWithouAnomaly as LatencyChartsResponse,
+        latencyChart: latencyWithoutAnomaly as LatencyChartsResponse,
         theme,
         latencyAggregationType: LatencyAggregationType.p95,
       });
       expect(latencyTimeseries).toEqual({
-        latencyTimeseries: [
+        currentPeriod: [
           {
             title: '95th percentile',
-            data: [{ x: 1, y: 10 }],
             titleShort: '95th',
+            data: [{ x: 1, y: 10 }],
             type: 'linemark',
             color: 'red',
           },
         ],
+        previousPeriod: {
+          data: [{ x: 1, y: 10 }],
+          type: 'area',
+          color: 'green',
+          title: 'Previous period',
+        },
       });
     });
 
     it('returns 99th percentile timeseries', () => {
-      const { anomalyTimeseries, ...latencyWithouAnomaly } = latencyChartData;
+      const { anomalyTimeseries, ...latencyWithoutAnomaly } = latencyChartData;
       const latencyTimeseries = getLatencyChartSelector({
-        latencyChart: latencyWithouAnomaly as LatencyChartsResponse,
+        latencyChart: latencyWithoutAnomaly as LatencyChartsResponse,
         theme,
         latencyAggregationType: LatencyAggregationType.p99,
       });
+
       expect(latencyTimeseries).toEqual({
-        latencyTimeseries: [
+        currentPeriod: [
           {
             title: '99th percentile',
-            data: [{ x: 1, y: 10 }],
             titleShort: '99th',
+            data: [{ x: 1, y: 10 }],
             type: 'linemark',
             color: 'black',
           },
         ],
+        previousPeriod: {
+          data: [{ x: 1, y: 10 }],
+          type: 'area',
+          color: 'green',
+          title: 'Previous period',
+        },
       });
     });
   });
@@ -111,76 +137,54 @@ describe('getLatencyChartSelector', () => {
         latencyAggregationType: LatencyAggregationType.p99,
       });
       expect(latencyTimeseries).toEqual({
+        currentPeriod: [
+          {
+            title: '99th percentile',
+            titleShort: '99th',
+            data: [{ x: 1, y: 10 }],
+            type: 'linemark',
+            color: 'black',
+          },
+        ],
+        previousPeriod: {
+          data: [{ x: 1, y: 10 }],
+          type: 'area',
+          color: 'green',
+          title: 'Previous period',
+        },
+        mlJobId: '1',
         anomalyTimeseries: {
           boundaries: [
             {
-              color: 'rgba(0,0,0,0)',
-              areaSeriesStyle: {
-                point: {
-                  opacity: 0,
-                },
-              },
-              data: [
-                {
-                  x: 1,
-                  y: 1,
-                },
-              ],
+              type: 'area',
               fit: 'lookahead',
               hideLegend: true,
               hideTooltipValue: true,
               stackAccessors: ['y'],
+              areaSeriesStyle: { point: { opacity: 0 } },
               title: 'anomalyBoundariesLower',
-              type: 'area',
+              data: [{ x: 1, y: 1 }],
+              color: 'rgba(0,0,0,0)',
             },
             {
-              color: 'rgba(0,0,255,0.5)',
-              areaSeriesStyle: {
-                point: {
-                  opacity: 0,
-                },
-              },
-              data: [
-                {
-                  x: 1,
-                  y: 1,
-                },
-              ],
+              type: 'area',
               fit: 'lookahead',
               hideLegend: true,
               hideTooltipValue: true,
               stackAccessors: ['y'],
+              areaSeriesStyle: { point: { opacity: 0 } },
               title: 'anomalyBoundariesUpper',
-              type: 'area',
+              data: [{ x: 1, y: 1 }],
+              color: 'rgba(0,0,255,0.5)',
             },
           ],
           scores: {
-            color: 'yellow',
-            data: [
-              {
-                x: 1,
-                x0: 2,
-              },
-            ],
             title: 'anomalyScores',
             type: 'rectAnnotation',
+            data: [{ x: 1, x0: 2 }],
+            color: 'yellow',
           },
         },
-        latencyTimeseries: [
-          {
-            color: 'black',
-            data: [
-              {
-                x: 1,
-                y: 10,
-              },
-            ],
-            title: '99th percentile',
-            titleShort: '99th',
-            type: 'linemark',
-          },
-        ],
-        mlJobId: '1',
       });
     });
   });