ref(metrics): Move chart to components (#72201)

Move metric chart and related utils to `components/metrics` folder.

static/app/views/metrics/chart/chart.tsx → static/app/components/metrics/chart/chart.tsx

@@ -18,16 +18,19 @@ import {transformToLineSeries} from 'sentry/components/charts/lineChart';
 import ScatterSeries from 'sentry/components/charts/series/scatterSeries';
 import ChartZoom from 'sentry/components/charts/useChartZoom';
 import {isChartHovered} from 'sentry/components/charts/utils';
+import type {
+  CombinedMetricChartProps,
+  Series,
+} from 'sentry/components/metrics/chart/types';
+import type {UseFocusAreaResult} from 'sentry/components/metrics/chart/useFocusArea';
+import type {UseMetricSamplesResult} from 'sentry/components/metrics/chart/useMetricChartSamples';
+import type {UseMetricReleasesResult} from 'sentry/components/metrics/chart/useMetricReleases';
 import {t} from 'sentry/locale';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
 import mergeRefs from 'sentry/utils/mergeRefs';
 import {formatMetricUsingUnit} from 'sentry/utils/metrics/formatters';
 import {MetricDisplayType} from 'sentry/utils/metrics/types';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import type {CombinedMetricChartProps, Series} from 'sentry/views/metrics/chart/types';
-import type {UseFocusAreaResult} from 'sentry/views/metrics/chart/useFocusArea';
-import type {UseMetricSamplesResult} from 'sentry/views/metrics/chart/useMetricChartSamples';
-import type {UseMetricReleasesResult} from 'sentry/views/metrics/chart/useMetricReleases';
 
 const MAIN_X_AXIS_ID = 'xAxis';
 

static/app/views/metrics/chart/useFocusArea.tsx → static/app/components/metrics/chart/useFocusArea.tsx

@@ -9,23 +9,23 @@ import moment from 'moment';
 
 import {Button} from 'sentry/components/button';
 import type {DateTimeObject} from 'sentry/components/charts/utils';
-import {IconClose, IconZoom} from 'sentry/icons';
-import {t} from 'sentry/locale';
-import {space} from 'sentry/styles/space';
-import type {DateString} from 'sentry/types/core';
-import type {EChartBrushEndHandler, ReactEchartsRef} from 'sentry/types/echarts';
-import mergeRefs from 'sentry/utils/mergeRefs';
-import type {ValueRect} from 'sentry/views/metrics/chart/chartUtils';
-import {getValueRect} from 'sentry/views/metrics/chart/chartUtils';
 import type {
   CombinedMetricChartProps,
   FocusAreaSelection,
   SelectionRange,
-} from 'sentry/views/metrics/chart/types';
+} from 'sentry/components/metrics/chart/types';
 import {
   SAMPLES_X_AXIS_ID,
   SAMPLES_Y_AXIS_ID,
-} from 'sentry/views/metrics/chart/useMetricChartSamples';
+} from 'sentry/components/metrics/chart/useMetricChartSamples';
+import type {ValueRect} from 'sentry/components/metrics/chart/utils';
+import {getValueRect} from 'sentry/components/metrics/chart/utils';
+import {IconClose, IconZoom} from 'sentry/icons';
+import {t} from 'sentry/locale';
+import {space} from 'sentry/styles/space';
+import type {DateString} from 'sentry/types/core';
+import type {EChartBrushEndHandler, ReactEchartsRef} from 'sentry/types/echarts';
+import mergeRefs from 'sentry/utils/mergeRefs';
 import {CHART_HEIGHT} from 'sentry/views/metrics/constants';
 import type {FocusAreaProps} from 'sentry/views/metrics/context';
 

static/app/views/metrics/chart/useMetricChartSamples.tsx → static/app/components/metrics/chart/useMetricChartSamples.tsx

@@ -5,6 +5,12 @@ import moment from 'moment';
 
 import {getFormatter} from 'sentry/components/charts/components/tooltip';
 import {isChartHovered} from 'sentry/components/charts/utils';
+import type {
+  CombinedMetricChartProps,
+  ScatterSeries,
+  Series,
+} from 'sentry/components/metrics/chart/types';
+import {fitToValueRect} from 'sentry/components/metrics/chart/utils';
 import type {Field} from 'sentry/components/metrics/metricSamplesTable';
 import {t} from 'sentry/locale';
 import type {EChartClickHandler, ReactEchartsRef} from 'sentry/types/echarts';
@@ -16,12 +22,6 @@ import {
   getSummaryValueForOp,
   type MetricsSamplesResults,
 } from 'sentry/utils/metrics/useMetricsSamples';
-import {fitToValueRect} from 'sentry/views/metrics/chart/chartUtils';
-import type {
-  CombinedMetricChartProps,
-  ScatterSeries,
-  Series,
-} from 'sentry/views/metrics/chart/types';
 
 export const SAMPLES_X_AXIS_ID = 'xAxisSamples';
 export const SAMPLES_Y_AXIS_ID = 'yAxisSamples';

static/app/views/metrics/chart/useMetricReleases.tsx → static/app/components/metrics/chart/useMetricReleases.tsx

@@ -3,6 +3,7 @@ import {useTheme} from '@emotion/react';
 
 import {addErrorMessage} from 'sentry/actionCreators/indicator';
 import MarkLine from 'sentry/components/charts/components/markLine';
+import type {CombinedMetricChartProps} from 'sentry/components/metrics/chart/types';
 import {t} from 'sentry/locale';
 import type {DateString} from 'sentry/types/core';
 import {escape} from 'sentry/utils';
@@ -14,7 +15,6 @@ import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
 import {formatVersion} from 'sentry/utils/versions/formatVersion';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
-import type {CombinedMetricChartProps} from 'sentry/views/metrics/chart/types';
 
 interface Release {
   date: string;

static/app/views/metrics/chart/chartUtils.spec.tsx → static/app/components/metrics/chart/utils.spec.tsx

@@ -1,4 +1,4 @@
-import {fitToValueRect} from 'sentry/views/metrics/chart/chartUtils';
+import {fitToValueRect} from 'sentry/components/metrics/chart/utils';
 
 describe('fitToValueRect', () => {
   it('should return original x and y if rect is undefined', () => {

static/app/views/metrics/chart/chartUtils.tsx → static/app/components/metrics/chart/utils.tsx

@@ -1,11 +1,11 @@
 import type {RefObject} from 'react';
 import moment from 'moment';
 
-import type {ReactEchartsRef} from 'sentry/types/echarts';
 import {
   SAMPLES_X_AXIS_ID,
   SAMPLES_Y_AXIS_ID,
-} from 'sentry/views/metrics/chart/useMetricChartSamples';
+} from 'sentry/components/metrics/chart/useMetricChartSamples';
+import type {ReactEchartsRef} from 'sentry/types/echarts';
 
 export type ValueRect = {
   xMax: number;

static/app/components/metrics/customMetricsEventData.tsx

@@ -10,6 +10,8 @@ import type {
 } from 'sentry/components/events/interfaces/spans/types';
 import {Hovercard} from 'sentry/components/hovercard';
 import {KeyValueTable, KeyValueTableRow} from 'sentry/components/keyValueTable';
+import {MetricChart} from 'sentry/components/metrics/chart/chart';
+import type {Series} from 'sentry/components/metrics/chart/types';
 import {normalizeDateTimeString} from 'sentry/components/organizations/pageFilters/parse';
 import {IconInfo} from 'sentry/icons';
 import {t} from 'sentry/locale';
@@ -29,8 +31,6 @@ import {useMetricsQuery} from 'sentry/utils/metrics/useMetricsQuery';
 import {middleEllipsis} from 'sentry/utils/string/middleEllipsis';
 import type {Color} from 'sentry/utils/theme';
 import useOrganization from 'sentry/utils/useOrganization';
-import {MetricChart} from 'sentry/views/metrics/chart/chart';
-import type {Series} from 'sentry/views/metrics/chart/types';
 import {getChartTimeseries} from 'sentry/views/metrics/widget';
 import {
   type SectionCardKeyValueList,

static/app/components/metrics/metricSamplesTable.tsx

@@ -15,6 +15,7 @@ import SortLink from 'sentry/components/gridEditable/sortLink';
 import {Hovercard} from 'sentry/components/hovercard';
 import ProjectBadge from 'sentry/components/idBadge/projectBadge';
 import Link from 'sentry/components/links/link';
+import type {SelectionRange} from 'sentry/components/metrics/chart/types';
 import PerformanceDuration from 'sentry/components/performanceDuration';
 import SmartSearchBar from 'sentry/components/smartSearchBar';
 import {Tooltip} from 'sentry/components/tooltip';
@@ -45,7 +46,6 @@ import {useLocation} from 'sentry/utils/useLocation';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useProjects from 'sentry/utils/useProjects';
-import type {SelectionRange} from 'sentry/views/metrics/chart/types';
 import {getTraceDetailsUrl} from 'sentry/views/performance/traceDetails/utils';
 import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
 import ColorBar from 'sentry/views/performance/vitalDetail/colorBar';

static/app/components/modals/metricWidgetViewerModal/visualization.tsx

@@ -5,6 +5,7 @@ import Alert from 'sentry/components/alert';
 import TransparentLoadingMask from 'sentry/components/charts/transparentLoadingMask';
 import {CompactSelect} from 'sentry/components/compactSelect';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {getIngestionSeriesId, MetricChart} from 'sentry/components/metrics/chart/chart';
 import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -31,7 +32,6 @@ import {
 import {DisplayType} from 'sentry/views/dashboards/types';
 import {displayTypes} from 'sentry/views/dashboards/widgetBuilder/utils';
 import {LoadingScreen} from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
-import {getIngestionSeriesId, MetricChart} from 'sentry/views/metrics/chart/chart';
 import {SummaryTable} from 'sentry/views/metrics/summaryTable';
 import {useSeriesHover} from 'sentry/views/metrics/useSeriesHover';
 import {createChartPalette} from 'sentry/views/metrics/utils/metricsChartPalette';