feat(perf): Add "Average" markline to HTTP module sample panel chart (#68242)

- **Extract `AverageValueMarkLine` helper**
- **Add markline to duration chart**

static/app/views/performance/charts/averageValueMarkLine.tsx

@@ -0,0 +1,34 @@
+import {useTheme} from '@emotion/react';
+
+import MarkLine from 'sentry/components/charts/components/markLine';
+import {t} from 'sentry/locale';
+
+interface Props {
+  value?: number;
+}
+
+export function AverageValueMarkLine({value}: Props = {}) {
+  const theme = useTheme();
+
+  return MarkLine({
+    data: [
+      // If a `value` is provided, set the markline to that value. If not, `type: 'average'` will automatically set it
+      {
+        valueDim: 'y',
+        type: 'average',
+        yAxis: value,
+      },
+    ],
+    lineStyle: {
+      color: theme.gray400,
+    },
+    emphasis: {disabled: true},
+    label: {
+      position: 'insideEndBottom',
+      formatter: () => t(`Average`),
+      fontSize: 14,
+      color: theme.chartLabel,
+      backgroundColor: theme.chartOther,
+    },
+  });
+}

static/app/views/performance/http/httpSamplesPanel.tsx

@@ -18,6 +18,7 @@ import useOrganization from 'sentry/utils/useOrganization';
 import useProjects from 'sentry/utils/useProjects';
 import useRouter from 'sentry/utils/useRouter';
 import {normalizeUrl} from 'sentry/utils/withDomainRequired';
+import {AverageValueMarkLine} from 'sentry/views/performance/charts/averageValueMarkLine';
 import {DurationChart} from 'sentry/views/performance/http/durationChart';
 import decodePanel from 'sentry/views/performance/http/queryParameterDecoders/panel';
 import {ResponseCodeBarChart} from 'sentry/views/performance/http/responseCodeBarChart';
@@ -282,7 +283,10 @@ export function HTTPSamplesPanel() {
             <Fragment>
               <ModuleLayout.Full>
                 <DurationChart
-                  series={durationData[`avg(span.self_time)`]}
+                  series={{
+                    ...durationData[`avg(span.self_time)`],
+                    markLine: AverageValueMarkLine(),
+                  }}
                   isLoading={isDurationDataFetching}
                   error={durationError}
                 />

static/app/views/starfish/views/spanSummaryPage/sampleList/durationChart/index.tsx

@@ -10,6 +10,7 @@ import type {
 import {usePageAlert} from 'sentry/utils/performance/contexts/pageAlert';
 import {MutableSearch} from 'sentry/utils/tokenizeSearch';
 import usePageFilters from 'sentry/utils/usePageFilters';
+import {AverageValueMarkLine} from 'sentry/views/performance/charts/averageValueMarkLine';
 import {AVG_COLOR} from 'sentry/views/starfish/colours';
 import Chart, {ChartType} from 'sentry/views/starfish/components/chart';
 import ChartPanel from 'sentry/views/starfish/components/chartPanel';
@@ -142,21 +143,9 @@ function DurationChart({
   const baselineAvgSeries: Series = {
     seriesName: 'Average',
     data: [],
-    markLine: {
-      data: [{valueDim: 'x', yAxis: avg}],
-      symbol: ['none', 'none'],
-      lineStyle: {
-        color: theme.gray400,
-      },
-      emphasis: {disabled: true},
-      label: {
-        position: 'insideEndBottom',
-        formatter: () => `Average`,
-        fontSize: 14,
-        color: theme.chartLabel,
-        backgroundColor: theme.chartOther,
-      },
-    },
+    markLine: AverageValueMarkLine({
+      value: avg,
+    }),
   };
 
   const sampledSpanDataSeries: Series[] = spans.map(