feat(stats): metrics stats (#64790)

static/app/constants/index.tsx

@@ -238,7 +238,7 @@ export const DEFAULT_RELATIVE_PERIODS_PAGE_FILTER = {
   '30d': t('30D'),
 };
 
-// https://github.com/getsentry/relay/blob/master/relay-common/src/constants.rs
+// https://github.com/getsentry/relay/blob/master/relay-base-schema/src/data_category.rs
 export const DATA_CATEGORY_INFO = {
   [DataCategoryExact.ERROR]: {
     name: DataCategoryExact.ERROR,
@@ -312,6 +312,14 @@ export const DATA_CATEGORY_INFO = {
     titleName: t('Cron Monitors'),
     uid: 13,
   },
+  [DataCategoryExact.METRICS]: {
+    name: DataCategoryExact.METRICS,
+    apiName: 'metric_bucket',
+    plural: 'metric_buckets',
+    displayName: 'metrics',
+    titleName: t('Metrics'),
+    uid: 15,
+  },
 } as const satisfies Record<DataCategoryExact, DataCategoryInfo>;
 
 // Special Search characters

static/app/types/core.tsx

@@ -83,7 +83,7 @@ export enum DataCategory {
 }
 
 /**
- * https://github.com/getsentry/relay/blob/master/relay-common/src/constants.rs
+ * https://github.com/getsentry/relay/blob/master/relay-base-schema/src/data_category.rs
  * Matches the backend singular backend enum directly.
  * For display variations, refer to `DATA_CATEGORY_INFO` rather than manipulating these strings
  */
@@ -97,6 +97,7 @@ export enum DataCategoryExact {
   TRANSACTION_INDEXED = 'transaction_indexed',
   MONITOR = 'monitor',
   MONITOR_SEAT = 'monitorSeat',
+  METRICS = 'metric_bucket',
 }
 
 export interface DataCategoryInfo {

static/app/views/organizationStats/usageChart/index.tsx

@@ -89,6 +89,12 @@ export const CHART_OPTIONS_DATACATEGORY: CategoryOption[] = [
     disabled: false,
     yAxisMinInterval: 100,
   },
+  {
+    label: DATA_CATEGORY_INFO.metric_bucket.titleName,
+    value: DATA_CATEGORY_INFO.metric_bucket.plural,
+    disabled: false,
+    yAxisMinInterval: 100,
+  },
 ];
 
 export enum ChartDataTransform {
@@ -384,6 +390,7 @@ export class UsageChart extends Component<UsageChartProps, State> {
   get chartLegendData() {
     const {chartSeries} = this.props;
     const {chartData} = this.chartMetadata;
+
     const legend: LegendComponentOption['data'] = [
       {
         name: SeriesTypes.ACCEPTED,