Use Elastic Charts for metrics charts (#83863)

x-pack/plugins/apm/public/application/csmApp.tsx

@@ -10,7 +10,6 @@ import { AppMountParameters, CoreStart } from 'kibana/public';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Route, Router } from 'react-router-dom';
-import 'react-vis/dist/style.css';
 import styled, { DefaultTheme, ThemeProvider } from 'styled-components';
 import {
   KibanaContextProvider,

x-pack/plugins/apm/public/components/app/Main/route_config/index.tsx

@@ -13,8 +13,8 @@ import { APMRouteDefinition } from '../../../../application/routes';
 import { toQuery } from '../../../shared/Links/url_helpers';
 import { ErrorGroupDetails } from '../../ErrorGroupDetails';
 import { Home } from '../../Home';
-import { ServiceDetails } from '../../ServiceDetails';
-import { ServiceNodeMetrics } from '../../ServiceNodeMetrics';
+import { ServiceDetails } from '../../service_details';
+import { ServiceNodeMetrics } from '../../service_node_metrics';
 import { Settings } from '../../Settings';
 import { AgentConfigurations } from '../../Settings/AgentConfigurations';
 import { AnomalyDetection } from '../../Settings/anomaly_detection';

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

@@ -21,11 +21,11 @@ import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
 import { useTransactionDistribution } from '../../../hooks/useTransactionDistribution';
 import { useWaterfall } from '../../../hooks/useWaterfall';
 import { ApmHeader } from '../../shared/ApmHeader';
-import { TransactionCharts } from '../../shared/charts/TransactionCharts';
+import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { TransactionDistribution } from './Distribution';
 import { WaterfallWithSummmary } from './WaterfallWithSummmary';
 import { FETCH_STATUS } from '../../../hooks/useFetcher';
-import { LegacyChartsSyncContextProvider as ChartsSyncContextProvider } from '../../../context/charts_sync_context';
+import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
 import { useTrackPageview } from '../../../../../observability/public';
 import { Projection } from '../../../../common/projections';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';

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

@@ -29,7 +29,7 @@ import { useServiceTransactionTypes } from '../../../hooks/useServiceTransaction
 import { useTransactionCharts } from '../../../hooks/useTransactionCharts';
 import { useTransactionList } from '../../../hooks/useTransactionList';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { TransactionCharts } from '../../shared/charts/TransactionCharts';
+import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';

x-pack/plugins/apm/public/components/app/ServiceDetails/index.tsx → x-pack/plugins/apm/public/components/app/service_details/index.tsx

@@ -8,7 +8,7 @@ import { EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { ApmHeader } from '../../shared/ApmHeader';
-import { ServiceDetailTabs } from './ServiceDetailTabs';
+import { ServiceDetailTabs } from './service_detail_tabs';
 
 interface Props extends RouteComponentProps<{ serviceName: string }> {
   tab: React.ComponentProps<typeof ServiceDetailTabs>['tab'];

x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceDetailTabs.tsx → x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx

@@ -20,7 +20,7 @@ import { useTransactionOverviewHref } from '../../shared/Links/apm/TransactionOv
 import { MainTabs } from '../../shared/main_tabs';
 import { ErrorGroupOverview } from '../ErrorGroupOverview';
 import { ServiceMap } from '../ServiceMap';
-import { ServiceMetrics } from '../ServiceMetrics';
+import { ServiceMetrics } from '../service_metrics';
 import { ServiceNodeOverview } from '../ServiceNodeOverview';
 import { ServiceOverview } from '../service_overview';
 import { TransactionOverview } from '../TransactionOverview';

x-pack/plugins/apm/public/components/app/ServiceMetrics/index.tsx → x-pack/plugins/apm/public/components/app/service_metrics/index.tsx

@@ -14,9 +14,9 @@ import {
 } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
-import { MetricsChart } from '../../shared/charts/MetricsChart';
+import { MetricsChart } from '../../shared/charts/metrics_chart';
 import { useUrlParams } from '../../../hooks/useUrlParams';
-import { LegacyChartsSyncContextProvider as ChartsSyncContextProvider } from '../../../context/charts_sync_context';
+import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
 import { Projection } from '../../../../common/projections';
 import { LocalUIFilters } from '../../shared/LocalUIFilters';
 import { SearchBar } from '../../shared/search_bar';
@@ -31,7 +31,7 @@ export function ServiceMetrics({
   serviceName,
 }: ServiceMetricsProps) {
   const { urlParams } = useUrlParams();
-  const { data } = useServiceMetricCharts(urlParams, agentName);
+  const { data, status } = useServiceMetricCharts(urlParams, agentName);
   const { start, end } = urlParams;
 
   const localFiltersConfig: React.ComponentProps<typeof LocalUIFilters> = useMemo(
@@ -60,7 +60,12 @@ export function ServiceMetrics({
                 {data.charts.map((chart) => (
                   <EuiFlexItem key={chart.key}>
                     <EuiPanel>
-                      <MetricsChart start={start} end={end} chart={chart} />
+                      <MetricsChart
+                        start={start}
+                        end={end}
+                        chart={chart}
+                        fetchStatus={status}
+                      />
                     </EuiPanel>
                   </EuiFlexItem>
                 ))}

x-pack/plugins/apm/public/components/app/ServiceNodeMetrics/index.tsx → x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx

@@ -22,14 +22,14 @@ import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import styled from 'styled-components';
 import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
-import { LegacyChartsSyncContextProvider as ChartsSyncContextProvider } from '../../../context/charts_sync_context';
+import { ChartsSyncContextProvider } from '../../../context/charts_sync_context';
 import { useAgentName } from '../../../hooks/useAgentName';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/useFetcher';
 import { useServiceMetricCharts } from '../../../hooks/useServiceMetricCharts';
 import { useUrlParams } from '../../../hooks/useUrlParams';
 import { px, truncate, unit } from '../../../style/variables';
 import { ApmHeader } from '../../shared/ApmHeader';
-import { MetricsChart } from '../../shared/charts/MetricsChart';
+import { MetricsChart } from '../../shared/charts/metrics_chart';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 
 const INITIAL_DATA = {
@@ -178,7 +178,12 @@ export function ServiceNodeMetrics({ match }: ServiceNodeMetricsProps) {
             {data.charts.map((chart) => (
               <EuiFlexItem key={chart.key}>
                 <EuiPanel>
-                  <MetricsChart start={start} end={end} chart={chart} />
+                  <MetricsChart
+                    start={start}
+                    end={end}
+                    chart={chart}
+                    fetchStatus={status}
+                  />
                 </EuiPanel>
               </EuiFlexItem>
             ))}

x-pack/plugins/apm/public/components/shared/TransactionBreakdown/TransactionBreakdownGraph/index.tsx

@@ -8,6 +8,7 @@ import {
   AreaSeries,
   Axis,
   Chart,
+  CurveType,
   niceTimeFormatter,
   Placement,
   Position,
@@ -103,6 +104,7 @@ export function TransactionBreakdownGraph({ fetchStatus, timeseries }: Props) {
                 stackAccessors={['x']}
                 stackMode={'percentage'}
                 color={serie.areaColor}
+                curve={CurveType.CURVE_MONOTONE_X}
               />
             );
           })