fix(perf): Vital detail chart title should changed based on chosen web vital (#34117)

static/app/views/performance/vitalDetail/utils.tsx

@@ -91,6 +91,13 @@ export function vitalNameFromLocation(location: Location): WebVital {
   return WebVital.LCP;
 }
 
+export function getVitalChartTitle(webVital: WebVital): string {
+  if (webVital === WebVital.CLS) {
+    return t('CLS p75');
+  }
+  return t('Duration p75');
+}
+
 export function getVitalDetailTablePoorStatusFunction(vitalName: WebVital): string {
   const vitalThreshold = webVitalPoor[vitalName];
   const statusFunction = `compare_numeric_aggregate(${getAggregateAlias(

static/app/views/performance/vitalDetail/vitalChart.tsx

@@ -26,6 +26,7 @@ import {ViewProps} from '../types';
 import {
   getMaxOfSeries,
   getVitalChartDefinitions,
+  getVitalChartTitle,
   vitalNameFromLocation,
   VitalState,
   vitalStateColors,
@@ -86,7 +87,7 @@ function VitalChart({
     <Panel>
       <ChartContainer>
         <HeaderTitleLegend>
-          {t('Duration p75')}
+          {getVitalChartTitle(vitalName)}
           <QuestionTooltip
             size="sm"
             position="top"

static/app/views/performance/vitalDetail/vitalChartMetrics.tsx

@@ -21,7 +21,7 @@ import getDynamicText from 'sentry/utils/getDynamicText';
 import {replaceSeriesName, transformEventStatsSmoothed} from '../trends/utils';
 import {ViewProps} from '../types';
 
-import {getMaxOfSeries, getVitalChartDefinitions} from './utils';
+import {getMaxOfSeries, getVitalChartDefinitions, getVitalChartTitle} from './utils';
 
 type Props = WithRouterProps &
   Omit<ViewProps, 'query' | 'start' | 'end'> & {
@@ -81,7 +81,7 @@ function VitalChartMetrics({
     <Panel>
       <ChartContainer>
         <HeaderTitleLegend>
-          {t('Duration p75')}
+          {getVitalChartTitle(vital)}
           <QuestionTooltip
             size="sm"
             position="top"