ref(perf): Allow multiple series in `DurationChart` components (#68279)

Right now, `DurationChart` accepts a single `series`, and wraps it in an
array. This is too restrictive in cases where we want to plot more than
one duration series (or, for example, a scatter series). Changes the
components to accept an array instead, and updates all call sites.

static/app/views/performance/database/databaseLandingPage.tsx

@@ -189,7 +189,7 @@ export function DatabaseLandingPage() {
 
                 <ModuleLayout.Half>
                   <DurationChart
-                    series={durationData[`${selectedAggregate}(span.self_time)`]}
+                    series={[durationData[`${selectedAggregate}(span.self_time)`]]}
                     isLoading={isDurationDataLoading}
                     error={durationError}
                   />

static/app/views/performance/database/databaseSpanSummaryPage.tsx

@@ -213,11 +213,11 @@ function SpanSummaryPage({params}: Props) {
                 />
 
                 <DurationChart
-                  series={
+                  series={[
                     durationData[
                       `${selectedAggregate}(${SpanMetricsField.SPAN_SELF_TIME})`
-                    ]
-                  }
+                    ],
+                  ]}
                   isLoading={isDurationDataLoading}
                   error={durationError}
                 />

static/app/views/performance/database/durationChart.tsx

@@ -7,7 +7,7 @@ import ChartPanel from 'sentry/views/starfish/components/chartPanel';
 
 interface Props {
   isLoading: boolean;
-  series: Series;
+  series: Series[];
   error?: Error | null;
 }
 
@@ -22,7 +22,7 @@ export function DurationChart({series, isLoading, error}: Props) {
           top: '8px',
           bottom: '0',
         }}
-        data={[series]}
+        data={series}
         loading={isLoading}
         error={error}
         chartColors={[AVG_COLOR]}

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

@@ -7,7 +7,7 @@ import {getDurationChartTitle} from 'sentry/views/starfish/views/spans/types';
 
 interface Props {
   isLoading: boolean;
-  series: Series;
+  series: Series[];
   error?: Error | null;
 }
 
@@ -22,7 +22,7 @@ export function DurationChart({series, isLoading, error}: Props) {
           top: '8px',
           bottom: '0',
         }}
-        data={[series]}
+        data={series}
         loading={isLoading}
         error={error}
         chartColors={[AVG_COLOR]}

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

@@ -250,7 +250,7 @@ export function HTTPDomainSummaryPage() {
 
             <ModuleLayout.Third>
               <DurationChart
-                series={durationData[`avg(${SpanMetricsField.SPAN_SELF_TIME})`]}
+                series={[durationData[`avg(${SpanMetricsField.SPAN_SELF_TIME})`]]}
                 isLoading={isDurationDataLoading}
                 error={durationError}
               />

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

@@ -155,7 +155,7 @@ export function HTTPLandingPage() {
 
                 <ModuleLayout.Third>
                   <DurationChart
-                    series={durationData[`avg(span.self_time)`]}
+                    series={[durationData[`avg(span.self_time)`]]}
                     isLoading={isDurationDataLoading}
                     error={durationError}
                   />

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

@@ -271,10 +271,12 @@ export function HTTPSamplesPanel() {
             <Fragment>
               <ModuleLayout.Full>
                 <DurationChart
-                  series={{
-                    ...durationData[`avg(span.self_time)`],
-                    markLine: AverageValueMarkLine(),
-                  }}
+                  series={[
+                    {
+                      ...durationData[`avg(span.self_time)`],
+                      markLine: AverageValueMarkLine(),
+                    },
+                  ]}
                   isLoading={isDurationDataFetching}
                   error={durationError}
                 />