diff --git a/static/app/views/explore/metrics/metricGraph/index.tsx b/static/app/views/explore/metrics/metricGraph/index.tsx index cef2644400ab47..4e06f2aa36a09e 100644 --- a/static/app/views/explore/metrics/metricGraph/index.tsx +++ b/static/app/views/explore/metrics/metricGraph/index.tsx @@ -19,6 +19,8 @@ import { useMetricVisualize, useSetMetricVisualize, } from 'sentry/views/explore/metrics/metricsQueryParams'; +import {METRICS_CHART_GROUP} from 'sentry/views/explore/metrics/metricsTab'; +import {useMultiMetricsQueryParams} from 'sentry/views/explore/metrics/multiMetricsQueryParams'; import { useQueryParamsQuery, useQueryParamsTopEventsLimit, @@ -29,7 +31,10 @@ import { combineConfidenceForSeries, prettifyAggregation, } from 'sentry/views/explore/utils'; -import {ChartType} from 'sentry/views/insights/common/components/chart'; +import { + ChartType, + useSynchronizeCharts, +} from 'sentry/views/insights/common/components/chart'; import type {useSortedTimeSeries} from 'sentry/views/insights/common/queries/useSortedTimeSeries'; import {GenericWidgetEmptyStateWarning} from 'sentry/views/performance/landing/widgets/components/selectableList'; @@ -55,9 +60,16 @@ export function MetricsGraph({ infoContentHidden, isMetricOptionsEmpty, }: MetricsGraphProps) { + const metricQueries = useMultiMetricsQueryParams(); const visualize = useMetricVisualize(); const setVisualize = useSetMetricVisualize(); + useSynchronizeCharts( + metricQueries.length, + !timeseriesResult.isPending, + METRICS_CHART_GROUP + ); + function handleChartTypeChange(newChartType: ChartType) { setVisualize(visualize.replace({chartType: newChartType})); } diff --git a/static/app/views/explore/metrics/metricsTab.tsx b/static/app/views/explore/metrics/metricsTab.tsx index 78cb4b4e2f9eef..881a03799660ab 100644 --- a/static/app/views/explore/metrics/metricsTab.tsx +++ b/static/app/views/explore/metrics/metricsTab.tsx @@ -6,6 +6,7 @@ import {DatePageFilter} from 'sentry/components/organizations/datePageFilter'; import {EnvironmentPageFilter} from 'sentry/components/organizations/environmentPageFilter'; import {ProjectPageFilter} from 'sentry/components/organizations/projectPageFilter'; import {t} from 'sentry/locale'; +import {WidgetSyncContextProvider} from 'sentry/views/dashboards/contexts/widgetSyncContext'; import { ExploreBodyContent, ExploreBodySearch, @@ -31,6 +32,7 @@ import { import type {PickableDays} from 'sentry/views/explore/utils'; const MAX_METRICS_ALLOWED = 4; +export const METRICS_CHART_GROUP = 'metrics-charts-group'; type MetricsTabProps = PickableDays; @@ -118,20 +120,22 @@ function MetricsTabBodySection() { - {metricQueries.map((metricQuery, index) => { - return ( - - - - ); - })} + + {metricQueries.map((metricQuery, index) => { + return ( + + + + ); + })} +