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

ArthurKnaus · web-flow · commit f36b9800ea9d · 2024-06-06T10:35:27.000Z
Move metric chart and related utils to `components/metrics` folder.
diff --git a/static/app/components/metrics/chart/chart.tsx b/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';
 
diff --git a/static/app/components/metrics/chart/types.tsx b/static/app/components/metrics/chart/types.tsx
diff --git a/static/app/components/metrics/chart/useFocusArea.tsx b/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';
 
diff --git a/static/app/components/metrics/chart/useMetricChartSamples.tsx b/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';
diff --git a/static/app/components/metrics/chart/useMetricReleases.tsx b/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;
diff --git a/static/app/components/metrics/chart/utils.spec.tsx b/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', () => {
diff --git a/static/app/components/metrics/chart/utils.tsx b/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;
diff --git a/static/app/components/metrics/customMetricsEventData.tsx b/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,
diff --git a/static/app/components/metrics/metricSamplesTable.tsx b/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';
diff --git a/static/app/components/modals/metricWidgetViewerModal/visualization.tsx b/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';
diff --git a/static/app/utils/metrics/useMetricsCodeLocations.tsx b/static/app/utils/metrics/useMetricsCodeLocations.tsx
@@ -1,10 +1,10 @@
+import type {SelectionRange} from 'sentry/components/metrics/chart/types';
 import type {MRI} from 'sentry/types/metrics';
 import {getDateTimeParams} from 'sentry/utils/metrics';
 import type {MetricMetaCodeLocation} from 'sentry/utils/metrics/types';
 import {useApiQuery} from 'sentry/utils/queryClient';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import type {SelectionRange} from 'sentry/views/metrics/chart/types';
 
 type MetricCorrelationOpts = SelectionRange & {
   codeLocations?: boolean;
diff --git a/static/app/views/dashboards/metrics/chart.tsx b/static/app/views/dashboards/metrics/chart.tsx
@@ -2,13 +2,13 @@ import {useMemo, useRef} from 'react';
 import styled from '@emotion/styled';
 
 import TransitionChart from 'sentry/components/charts/transitionChart';
+import {MetricChart} from 'sentry/components/metrics/chart/chart';
 import {space} from 'sentry/styles/space';
 import type {ReactEchartsRef} from 'sentry/types/echarts';
 import type {MetricsQueryApiResponse} from 'sentry/types/metrics';
 import type {MetricDisplayType} from 'sentry/utils/metrics/types';
 import type {MetricsQueryApiQueryParams} from 'sentry/utils/metrics/useMetricsQuery';
 import {LoadingScreen} from 'sentry/views/dashboards/widgetCard/widgetCardChartContainer';
-import {MetricChart} from 'sentry/views/metrics/chart/chart';
 import {createChartPalette} from 'sentry/views/metrics/utils/metricsChartPalette';
 import {getChartTimeseries} from 'sentry/views/metrics/widget';
 
diff --git a/static/app/views/metrics/codeLocations.tsx b/static/app/views/metrics/codeLocations.tsx
@@ -8,13 +8,13 @@ import ContextLine from 'sentry/components/events/interfaces/frame/contextLine';
 import DefaultTitle from 'sentry/components/events/interfaces/frame/defaultTitle';
 import LoadingError from 'sentry/components/loadingError';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import type {SelectionRange} from 'sentry/components/metrics/chart/types';
 import {IconChevron, IconSearch} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Frame, MRI} from 'sentry/types';
 import type {MetricCodeLocationFrame} from 'sentry/utils/metrics/types';
 import {useMetricCodeLocations} from 'sentry/utils/metrics/useMetricsCodeLocations';
-import type {SelectionRange} from 'sentry/views/metrics/chart/types';
 
 interface CodeLocationsProps extends SelectionRange {
   mri?: MRI;
diff --git a/static/app/views/metrics/context.tsx b/static/app/views/metrics/context.tsx
@@ -9,6 +9,7 @@ import {
 import * as Sentry from '@sentry/react';
 import isEqual from 'lodash/isEqual';
 
+import type {FocusAreaSelection} from 'sentry/components/metrics/chart/types';
 import type {Field} from 'sentry/components/metrics/metricSamplesTable';
 import type {MRI} from 'sentry/types';
 import {useInstantRef, useUpdateQuery} from 'sentry/utils/metrics';
@@ -29,7 +30,6 @@ import useLocationQuery from 'sentry/utils/url/useLocationQuery';
 import {useLocalStorageState} from 'sentry/utils/useLocalStorageState';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import useRouter from 'sentry/utils/useRouter';
-import type {FocusAreaSelection} from 'sentry/views/metrics/chart/types';
 import {parseMetricWidgetsQueryParam} from 'sentry/views/metrics/utils/parseMetricWidgetsQueryParam';
 import {useStructuralSharing} from 'sentry/views/metrics/utils/useStructuralSharing';
 
diff --git a/static/app/views/metrics/summaryTable.tsx b/static/app/views/metrics/summaryTable.tsx
@@ -6,6 +6,7 @@ import colorFn from 'color';
 import {Button, LinkButton} from 'sentry/components/button';
 import ButtonBar from 'sentry/components/buttonBar';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import type {Series} from 'sentry/components/metrics/chart/types';
 import TextOverflow from 'sentry/components/textOverflow';
 import {Tooltip} from 'sentry/components/tooltip';
 import {IconArrow, IconFilter, IconLightning, IconReleases} from 'sentry/icons';
@@ -22,7 +23,6 @@ import {
 } from 'sentry/utils/metrics/types';
 import useOrganization from 'sentry/utils/useOrganization';
 import usePageFilters from 'sentry/utils/usePageFilters';
-import type {Series} from 'sentry/views/metrics/chart/types';
 import {transactionSummaryRouteWithQuery} from 'sentry/views/performance/transactionSummary/utils';
 
 export const SummaryTable = memo(function SummaryTable({
diff --git a/static/app/views/metrics/widget.tsx b/static/app/views/metrics/widget.tsx
@@ -14,6 +14,11 @@ import {CompactSelect} from 'sentry/components/compactSelect';
 import EmptyMessage from 'sentry/components/emptyMessage';
 import ErrorBoundary from 'sentry/components/errorBoundary';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
+import {getIngestionSeriesId, MetricChart} from 'sentry/components/metrics/chart/chart';
+import type {Series} from 'sentry/components/metrics/chart/types';
+import {useFocusArea} from 'sentry/components/metrics/chart/useFocusArea';
+import {useMetricChartSamples} from 'sentry/components/metrics/chart/useMetricChartSamples';
+import {useReleaseSeries} from 'sentry/components/metrics/chart/useMetricReleases';
 import type {Field} from 'sentry/components/metrics/metricSamplesTable';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
@@ -51,11 +56,6 @@ import {
 } from 'sentry/utils/metrics/useMetricsQuery';
 import type {MetricsSamplesResults} from 'sentry/utils/metrics/useMetricsSamples';
 import useRouter from 'sentry/utils/useRouter';
-import {getIngestionSeriesId, MetricChart} from 'sentry/views/metrics/chart/chart';
-import type {Series} from 'sentry/views/metrics/chart/types';
-import {useFocusArea} from 'sentry/views/metrics/chart/useFocusArea';
-import {useMetricChartSamples} from 'sentry/views/metrics/chart/useMetricChartSamples';
-import {useReleaseSeries} from 'sentry/views/metrics/chart/useMetricReleases';
 import type {FocusAreaProps} from 'sentry/views/metrics/context';
 import {EquationFormatter} from 'sentry/views/metrics/formulaParser/formatter';
 import {SummaryTable} from 'sentry/views/metrics/summaryTable';

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